Secured password with dots

src/components/user/registerAgencySection.vue

@@ -10,7 +10,7 @@
             <input class="form-control" type="text" name="agencyname" placeholder="Agency Name" />
           </div>
           <div class="col-md-8" style="margin-bottom: 1em">
-            <eva-icon name="book" fill="lightgrey"></eva-icon>
+            <eva-icon name="book" fill="#60CBEB"></eva-icon>
             <input
               class="form-control"
               type="text"
@@ -19,7 +19,7 @@
             />
           </div>
           <div class="col-md-8">
-            <eva-icon name="clipboard" fill="lightgrey"></eva-icon>
+            <eva-icon name="clipboard" fill="#60CBEB"></eva-icon>
             <input
               class="form-control"
               type="text"
@@ -43,13 +43,13 @@
 
             <div class="row" style="text-align:left">
               <div class="col-md-8">
-                <eva-icon name="email" fill="lightgrey"></eva-icon>
+                <eva-icon name="email" fill="#60CBEB"></eva-icon>
                 <input class="form-control" type="text" name="email" placeholder="Email Address" />
                 <div class="form-group row"></div>
               </div>
 
               <div class="col-md-6" style="text-align:left">
-                <eva-icon name="smartphone" fill="lightgrey"></eva-icon>
+                <eva-icon name="smartphone" fill="#60CBEB"></eva-icon>
                 <input
                   class="form-control"
                   type="text"
@@ -66,16 +66,36 @@
               </div>
               <div class="col-md-7" style="margin-bottom: 1em">
                 <eva-icon name="lock" fill="#60CBEB"></eva-icon>
-                <input class="form-control" type="text" name="password" placeholder="Password" />
+                <input
+                  class="form-control"
+                  :type="isPasswordShown"
+                  v-model="password"
+                  id="password"
+                  placeholder="Password"
+                  name="password"
+                  value
+                />
               </div>
               <div class="col-md-7" style="margin-bottom: 1em">
                 <eva-icon name="lock" fill="#60CBEB"></eva-icon>
                 <input
                   class="form-control"
-                  type="text"
-                  name="confirmpassword"
+                  :type="isPasswordShown"
+                  v-model="password"
+                  id="password"
                   placeholder="Confirm Password"
+                  name="confirmpassword"
+                  value
                 />
+                <div>
+                  <eva-icon
+                    v-if="!showPassword"
+                    name="eye-off"
+                    fill="#60CBEB"
+                    @click="togglePassword()"
+                  ></eva-icon>
+                  <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
+                </div>
               </div>
             </div>
           </div>
@@ -105,6 +125,30 @@ export default {
   },
   name: 'Agency',
   components: { RegisterPage },
+  data() {
+    return {
+      username: '',
+      user: null,
+      isPasswordShown: 'password',
+      selectItems: [{ text: 'password', value: 0 }],
+      selectErrors: 'Some error with the field',
+      select: null,
+      textErrors: 'Some error with the field',
+      text: '',
+      showPassword: false,
+      password: '',
+    };
+  },
+  methods: {
+    togglePassword() {
+      this.showPassword = true;
+      this.isPasswordShown = 'text';
+    },
+    passwordToggled() {
+      this.showPassword = false;
+      this.isPasswordShown = 'password';
+    },
+  },
 };
 </script>
 

src/components/user/registerPage.vue

@@ -18,13 +18,13 @@
 
           <div class="row" style="text-align:left">
             <div class="col-md-8">
-              <eva-icon name="email" fill="lightgrey"></eva-icon>
+              <eva-icon name="email" fill="#60CBEB"></eva-icon>
               <input class="form-control" type="text" name="email" placeholder="Email Address" />
               <div class="form-group row"></div>
             </div>
 
             <div class="col-md-6" style="text-align:left">
-              <eva-icon name="smartphone" fill="lightgrey"></eva-icon>
+              <eva-icon name="smartphone" fill="#60CBEB"></eva-icon>
               <input
                 class="form-control"
                 type="text"
@@ -41,16 +41,36 @@
             </div>
             <div class="col-md-7" style="margin-bottom: 1em">
               <eva-icon name="lock" fill="#60CBEB"></eva-icon>
-              <input class="form-control" type="text" name="password" placeholder="Password" />
+              <input
+                class="form-control"
+                :type="isPasswordShown"
+                v-model="password"
+                id="password"
+                placeholder="Password"
+                name="password"
+                value
+              />
             </div>
             <div class="col-md-7" style="margin-bottom: 1em">
               <eva-icon name="lock" fill="#60CBEB"></eva-icon>
               <input
                 class="form-control"
-                type="text"
-                name="confirmpassword"
+                :type="isPasswordShown"
+                v-model="password"
+                id="password"
                 placeholder="Confirm Password"
+                name="confirmpassword"
+                value
               />
+              <div>
+                <eva-icon
+                  v-if="!showPassword"
+                  name="eye-off"
+                  fill="#60CBEB"
+                  @click="togglePassword()"
+                ></eva-icon>
+                <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
+              </div>
             </div>
           </div>
         </div>
@@ -74,6 +94,20 @@ export default {
     RegisterHeader: { type: String, default: undefined },
   },
   name: 'PrivateIndividual',
+  data() {
+    return {
+      username: '',
+      user: null,
+      isPasswordShown: 'password',
+      selectItems: [{ text: 'password', value: 0 }],
+      selectErrors: 'Some error with the field',
+      select: null,
+      textErrors: 'Some error with the field',
+      text: '',
+      showPassword: false,
+      password: '',
+    };
+  },
   computed: {
     Header() {
       return this.RegisterHeader
@@ -81,6 +115,16 @@ export default {
         : 'Private Individual';
     },
   },
+  methods: {
+    togglePassword() {
+      this.showPassword = true;
+      this.isPasswordShown = 'text';
+    },
+    passwordToggled() {
+      this.showPassword = false;
+      this.isPasswordShown = 'password';
+    },
+  },
 };
 </script>