style(profile): add expand transition when editing password

Dwigoric · Aug 6, 2023 · 50b2bb3 · 50b2bb3
1 parent 7fa8fa6
commit 50b2bb3
Showing 1 changed file with 26 additions and 20 deletions.
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
@@ -377,26 +377,32 @@ watch(
                                             :rules="passwordRules"
                                         >
                                         </VTextField>
-                                        <VTextField
-                                            v-if="currentPassword"
-                                            v-model="newPassword"
-                                            label="Enter your new password"
-                                            :type="seeNewPassword ? 'text' : 'password'"
-                                            :append-inner-icon="
-                                                seeNewPassword ? 'mdi-eye' : 'mdi-eye-off'
-                                            "
-                                            :rules="newPasswordRules"
-                                        ></VTextField>
-                                        <VTextField
-                                            v-if="currentPassword"
-                                            v-model="confirmNewPassword"
-                                            label="Confirm your new password"
-                                            :type="seeConfirmNewPassword ? 'text' : 'password'"
-                                            :append-inner-icon="
-                                                seeConfirmNewPassword ? 'mdi-eye' : 'mdi-eye-off'
-                                            "
-                                            :rules="confirmPasswordRules"
-                                        ></VTextField>
+                                        <VExpandTransition>
+                                            <VTextField
+                                                v-if="currentPassword"
+                                                v-model="newPassword"
+                                                label="Enter your new password"
+                                                :type="seeNewPassword ? 'text' : 'password'"
+                                                :append-inner-icon="
+                                                    seeNewPassword ? 'mdi-eye' : 'mdi-eye-off'
+                                                "
+                                                :rules="newPasswordRules"
+                                            ></VTextField>
+                                        </VExpandTransition>
+                                        <VExpandTransition>
+                                            <VTextField
+                                                v-if="currentPassword"
+                                                v-model="confirmNewPassword"
+                                                label="Confirm your new password"
+                                                :type="seeConfirmNewPassword ? 'text' : 'password'"
+                                                :append-inner-icon="
+                                                    seeConfirmNewPassword
+                                                        ? 'mdi-eye'
+                                                        : 'mdi-eye-off'
+                                                "
+                                                :rules="confirmPasswordRules"
+                                            ></VTextField>
+                                        </VExpandTransition>
                                     </VCol>
                                     <VCol cols="12">
                                         <VBtn