chore: modify authentication page

AthletX-org · Oct 11, 2023 · 76da3d4 · 76da3d4
1 parent 2bf6ef7
commit 76da3d4
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/login/Login.vue b/src/components/login/Login.vue
@@ -2,18 +2,29 @@
   <div>
     <h2 class="text-center text-decoration-underline">Login in to your account</h2>
     <v-row align="center" justify="center">
-      <v-col cols="12" sm="8">
+      <v-col cols="12" sm="8" class="text-center">
         <v-form @submit.prevent="handleLogin" class="mt-12">
           <v-text-field
               class="mt-4 bg-white"
               v-model="email"
               label="Email"
+              prepend-icon="mdi-email"
+              variant="outlined"
               color="cyan"
               type="text"
               autocomplete="true"
           />
-          <v-text-field class="mt-4 bg-white" v-model="password" type="password" placeholder="Password"/>
-          <v-btn color="blue" type="submit" dark tile elevation="6"><strong>Login</strong></v-btn>
+          <v-text-field
+              class="mt-4 bg-white"
+              v-model="password"
+              label="Password"
+              prepend-icon="mdi-key-variant"
+              variant="outlined"
+              type="password"
+              color="cyan"
+              placeholder="Password"
+          />
+          <v-btn color="blue" type="submit" dark tile class="text-center" elevation="6"><strong>Login</strong></v-btn>
         </v-form>
       </v-col>
     </v-row>

diff --git a/src/components/signup/Signup.vue b/src/components/signup/Signup.vue
@@ -1,16 +1,19 @@
 <template>
   <h2 class="text-center text-decoration-underline">Sign Up for an Account</h2>
-  <v-row align="center" justify="center">
+  <v-row align="center" justify="center" class="text-center" no-gutters>
     <v-col cols="12" sm="6">
       <v-form fast-fail @submit.prevent="handleSignup">
         <v-row>
           <v-col cols="12">
             <v-text-field
                 label="Email"
-                color="blue"
+                color="cyan"
+                variant="outlined"
                 class="mt-6"
                 v-model="user.email"
+                prepend-icon="mdi-email"
                 required
+                autocomplete="false"
             />
           </v-col>
         </v-row>
@@ -20,7 +23,9 @@
                 label="Password"
                 :type="showPassword ? 'text' : 'password'"
                 @click:append="showPassword = !showPassword"
-                color="blue"
+                color="cyan"
+                variant="outlined"
+                prepend-icon="mdi-key-variant"
                 v-model="user.password"
                 :rules="passwordRule"
                 :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
@@ -33,16 +38,23 @@
             <v-text-field
                 label="Confirm Password"
                 :type="showConfirmPassword ? 'text' : 'password'"
-                color="blue"
+                color="cyan"
+                variant="outlined"
+                prepend-icon="mdi-key-variant"
                 @click:append="showConfirmPassword = !showConfirmPassword"
                 v-model="user.confirmPassword"
                 :rules="confirmPasswordRule"
                 :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                 required
             />
           </v-col>
+          <v-row no-gutters>
+            <v-col cols="12">
+            <v-checkbox color="success" label="I agree to site terms and conditions" />
+            </v-col>
+          </v-row>
         </v-row>
-        <v-btn type="submit" color="blue" elevation="6" class="mt-5" tile>Sign up</v-btn>
+          <v-btn type="submit" color="blue" elevation="6" class="mt-5" tile>Sign up</v-btn>
       </v-form>
     </v-col>
   </v-row>
@@ -66,7 +78,7 @@ export default {
       confirmPasswordRule: [
         value => {
           if (value === this.user.password) return true
-          return 'Password must match previous password.'
+          return 'Passwords must match.'
         },
       ],
       showPassword: false,

diff --git a/src/pages/authentication/Authentication.vue b/src/pages/authentication/Authentication.vue
@@ -53,7 +53,7 @@
                     </div>
                   </v-col>
                   <v-col cols="12" md="6">
-                    <v-card-text class="mt-12">
+                    <v-card-text class="mt-5">
                       <Signup/>
                     </v-card-text>
                   </v-col>