FEAT Ajustement Page connexion comme V2

abes-esr · Aug 26, 2024 · 3befdbc · 3befdbc
1 parent 6727b61
commit 3befdbc
Showing 1 changed file with 51 additions and 54 deletions.
diff --git a/src/views/Utilisateur/Login.vue b/src/views/Utilisateur/Login.vue
@@ -1,62 +1,59 @@
 <template>
-	<v-container class="fill-height">
-		<v-responsive class="align-centerfill-height mx-auto" max-width="900">
-			<div class="py-4" />
+  <v-container class="fill-height" fluid >
+    <v-row align="center" justify="center">
+      <v-col sm="8" md="4">
+        <v-row v-if="incident">
+          <v-col cols="12">
+            <v-card class="py-4" color="surface-variant" prepend-icon="mdi-warning" rounded="lg" variant="outlined">
+              <template #title>
+                <h2 class="text-h5 font-weight-bold">Information sur le service</h2>
+              </template>
 
-			<v-row v-if="incident">
-				<v-col cols="12">
-					<v-card class="py-4" color="surface-variant" prepend-icon="mdi-warning" rounded="lg" variant="outlined">
-						<template #title>
-							<h2 class="text-h5 font-weight-bold">Information sur le service</h2>
-						</template>
+              <template #subtitle>
+                <div class="text-subtitle-1">
+                  Message concernant le statut du service avec incident potentiel ou interruption.<br />
+                  Nous vous invitons à lire le message dans son intégralité.
+                </div>
+              </template>
 
-						<template #subtitle>
-							<div class="text-subtitle-1">
-								Message concernant le statut du service avec incident potentiel ou interruption.<br />
-								Nous vous invitons à lire le message dans son intégralité.
-							</div>
-						</template>
-
-						<v-overlay opacity=".12" scrim="primary" contained model-value persistent />
-					</v-card>
-				</v-col>
-			</v-row>
-
-			<v-row>
-				<v-col cols="12">
-					<div>
-						<v-img class="mx-auto my-6" max-width="228" src=""></v-img>
-
-						<v-card class="mx-auto pa-12 pb-8" max-width="448" variant="flat">
-							<div class="text-subtitle-1 text-medium-emphasis" v-if="false">Nom utilisateur</div>
-
-							<v-text-field density="compact" placeholder="Utilisateur" prepend-inner-icon="mdi-account-outline" variant="outlined" v-model="userLogin"></v-text-field>
-
-							<div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between" v-if="false">
-								Password
-
-								<a class="text-caption text-decoration-none text-blue" href="#" rel="noopener noreferrer" target="_blank" v-if="false"> Forgot login password?</a>
-							</div>
-
-							<v-text-field
-								:append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
-								:type="visible ? 'text' : 'password'"
-								density="compact"
-								placeholder="Mot de passe"
-								prepend-inner-icon="mdi-key-outline"
-								variant="outlined"
+              <v-overlay opacity=".12" scrim="primary" contained model-value persistent />
+            </v-card>
+          </v-col>
+        </v-row>
+        <v-card class="elevation-5">
+          <v-card-title class="py-4" style="background-color: #295494; color: white" >
+            <span>Connexion</span>
+          </v-card-title>
+          <v-card-text>
+            <v-form ref="form" class="pt-5">
+              <v-text-field density="compact" placeholder="Utilisateur" prepend-inner-icon="mdi-account-outline" variant="outlined" v-model="userLogin"></v-text-field>
+              <v-text-field
+                :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
+                :type="visible ? 'text' : 'password'"
+                density="compact"
+                placeholder="Mot de passe"
+                prepend-inner-icon="mdi-key-outline"
+                variant="outlined"
                 @keydown.enter="login()"
-								@click:append-inner="visible = !visible"
+                @click:append-inner="visible = !visible"
                 v-model="userPassword"
-							></v-text-field>
-
-							<v-btn class="mb-8" color="blue" size="large" variant="tonal" :loading="isLoading" :disabled="userLogin.length === 0 || userPassword.length === 0" block @click="login()">Se connecter</v-btn>
-						</v-card>
-					</div>
-				</v-col>
-			</v-row>
-		</v-responsive>
-	</v-container>
+              ></v-text-field>
+            </v-form>
+          </v-card-text>
+          <v-card-actions class="px-4">
+            <v-spacer></v-spacer>
+            <v-btn color="primary"
+                   variant="flat"
+                   size="large"
+                   :loading="isLoading" :disabled="userLogin.length === 0 || userPassword.length === 0"
+                   @click="login()">
+              Se connecter
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 <script setup>
 import {ref} from 'vue'