ali hace 3 años
padre
commit
a4e47004d6
Se han modificado 2 ficheros con 18 adiciones y 5 borrados
  1. 9 3
      src/components/Auth/LoginStep.vue
  2. 9 2
      src/components/Auth/RegisterStep.vue

+ 9 - 3
src/components/Auth/LoginStep.vue

@@ -31,13 +31,15 @@
              outlined
              class="password-input"
              placeholder="گذرواژه خود را وارد کنید"
-             type="password"
+             :type="visibilityIcon === 'visibility' ? 'password' : 'text'"
              @keydown.enter="login">
       <template v-slot:prepend>
-        <q-icon name="person" />
+        <q-icon name="lock_open" />
       </template>
       <template v-slot:append>
-        <q-icon name="person" />
+        <q-icon :name="visibilityIcon"
+                class="cursor-pointer"
+                @click="toggleVisibilityIcon" />
       </template>
     </q-input>
     <q-btn class="full-width btn-login"
@@ -70,6 +72,7 @@ export default {
   data: () => ({
     userLogin: false,
     loadingList: false,
+    visibilityIcon: 'visibility',
     otpStep: 'sendOtp',
     username: '09123456789',
     password: '09123456789',
@@ -86,6 +89,9 @@ export default {
     // }
   },
   methods: {
+    toggleVisibilityIcon () {
+      this.visibilityIcon = this.visibilityIcon === 'visibility' ? 'visibility_off' : 'visibility'
+    },
     getToken () {
       return this.$store.getters['Auth/accessToken']
     },

+ 9 - 2
src/components/Auth/RegisterStep.vue

@@ -115,12 +115,15 @@
                outlined
                class="password-input"
                placeholder="گذرواژه خود را وارد کنید"
+               :type="visibilityIcon === 'visibility' ? 'password' : 'text'"
                @keydown.enter="verify">
         <template v-slot:prepend>
-          <q-icon name="person" />
+          <q-icon name="lock_open" />
         </template>
         <template v-slot:append>
-          <q-icon name="person" />
+          <q-icon :name="visibilityIcon"
+                  class="cursor-pointer"
+                  @click="toggleVisibilityIcon" />
         </template>
       </q-input>
 
@@ -163,6 +166,7 @@ export default {
     sendOtpLoading: false,
     timerEnded: false,
     loading: false,
+    visibilityIcon: 'visibility',
     bannerMessage: 'ثبت نام در سامانه',
     registerStep: 'getUsername',
     username: null,
@@ -197,6 +201,9 @@ export default {
     this.setRegisterStep('getUsername')
   },
   methods: {
+    toggleVisibilityIcon () {
+      this.visibilityIcon = this.visibilityIcon === 'visibility' ? 'visibility_off' : 'visibility'
+    },
     onStopTimer () {
       this.timerEnded = true
     },