Merge remote-tracking branch 'origin/main' into Css&HomePage

src/views/LoginView.vue

@@ -1,47 +1,66 @@
 <template>
-    <div class="max-w-7x1 max-auto grid grid-cols-2 gap-4">
-        <div class="main-left">
-            <div class="p-12 bg-white border border-gray-200 rounded-lg">
-                <h1 class="mb-6 text-2xl font-bold">Log in</h1>
+    <v-row align="center" justify="center">
+        <v-col cols="4">
+            <v-container>
+                <v-card>
+                <v-toolbar color="primary" :dark="true">
+                    <v-toolbar-title>Login</v-toolbar-title>
+                </v-toolbar>
+                <v-card-text>
+                    <v-form>
+                    <v-text-field prepend-icon="person" type="text" v-model="user.email" label="E-mail"></v-text-field>
+                    <v-text-field
+                        prepend-icon="lock"
+                        type="password"
+                        v-model="user.password"
+                        label="password"
+                    ></v-text-field>
+                    </v-form>
+                        <v-snackbar v-model="errorSnackBar">
+                        Email ou mot de passe invalide.
+                        <template v-slot:actions>
+                            <v-btn color="red" variant="text" @click="errorSnackBar = false">
+                            Fermer
+                            </v-btn>
+                        </template>
+                    </v-snackbar>
+                </v-card-text>
+                <v-card-actions>
+                    <div class="flex-grow-1"></div>
+                    <v-btn color="primary" @click="login">Login</v-btn>
+                </v-card-actions>
+                </v-card>
+                <v-btn color="red" @click="goHome()">Continuer sans se connecter</v-btn>
 
-                <p class="mb-6 texte-gray-500"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
-                    took a galley of type and scrambled it to make a type specimen book. It has survived not only five
-                    centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
-                    popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
-                    recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
+        </v-container>
+        </v-col>
+    </v-row>
+      
+</template>
 
-                <p class="font-bold"> Don't have an account ? <RouterLink :to="{ 'name': 'signup' }" class="underline">Click
-                        here</RouterLink> to create one! </p>
-            </div>
-        </div>
+<script setup>
+import { useClient } from '@/plugins/clientPlugin';
+import { useAuthStore } from '@/plugins/store/authStore';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+const authStore = useAuthStore();
+const client = useClient();
+const router = useRouter()
 
-        <div class="main-right">
-            <div class="p-12 bg-white border border-gray-200 rounded-lg">
-                <form class="space-y-6">
+let user = ref({});
+let errorSnackBar = ref(false);
 
-                    <div>
-                        <label>E-mail</label> <br>
-                        <input type="email" placeholder="Your e-mail adress"
-                            class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
+const goHome = () => {
+    router.push('/');
+}
 
-                    </div>
+async function login(){
+    try {
+        await authStore.login(client, user.value.email, user.value.password)
+        router.push('/');
+    } catch (error) {
+        errorSnackBar.value = true;
+    }
+}
 
-                    <div>
-                        <label>Password</label> <br>
-                        <input type="password" placeholder="Your password"
-                            class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
-
-                    </div>
-
-
-                    <div>
-                        <button class="py-4 px-6 bg-purple-600 text-white rounded-lg"> Log in</button>
-                    </div>
-
-                </form>
-            </div>
-        </div>
-
-    </div>
-</template>
+</script>

src/views/main/HomeView.vue

@@ -340,35 +340,74 @@
       </div>
     </div>
 
+    <v-btn variant="outlined" @click="callBackend()">
+      Get items
+    </v-btn>
 
 
 
-  </v-app>
-  <FooterLayout></FooterLayout>
+    <v-snackbar v-model="errorNoAccessSnackBar">
+        Vous n'etes pas connecter !
+        <template v-slot:actions>
+            <v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false">
+              Fermer
+            </v-btn>
+            <v-btn color="green" variant="text" @click="goToLoginPage()">
+              Se connecter
+            </v-btn>
+        </template>
+    </v-snackbar>
+
+    <v-list lines="one">
+      <v-list-item
+        v-for="item in itemList"
+        :key="item"
+        :title="item.id"
+        :subtitle="item.title"
+      ></v-list-item>
+    </v-list>
+    <FooterLayout></FooterLayout>
+  </main>
 </template>
 
-<script setup>
+<script async setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import { useClient } from '@/plugins/clientPlugin';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 import FooterLayout from '@/layouts/FooterLayout.vue';
 
 
+const router = useRouter()
+const client = useClient();
 
-</script>
+let itemList = ref([]);
+let errorNoAccessSnackBar = ref(false);
 
-<script>
-export default {
-  data: () => ({
-    overlays: [false, false, false],
-  }),
-  methods: {
-    showOverlay(index) {
+const showOverlay(index) {
       this.overlays[index] = true;
     },
     hideOverlay(index) {
       this.overlays[index] = false;
     },
-  },
+
+async function callBackend() {
+  try {
+    const response = await client.get('/api/TodoItems?ListId=1&PageNumber=1&PageSize=10');
+    const responseItems = response.data.items;
+    const orderedResponseItems = responseItems.sort((a, b) => a.id - b.id);
+    itemList.value = orderedResponseItems
+
+  } catch (error) {
+    errorNoAccessSnackBar.value = true;
+  }
 }
+
+const goToLoginPage = () => {
+  router.push('/login');
+}
+
+
 </script>
 
 <style src="../../cssstyle/index.css"></style>