Added show password to login #154

eaa_frontend/src/pages/LoginPage.vue

@@ -12,7 +12,18 @@
 
         <div class="form-field">
           <label for="password">Salasõna</label>
-          <input type="password" id="password" v-model="password" placeholder="Sisesta salasõna" required />
+          <div class="password-container">
+            <input
+                :type="showPassword ? 'password-text' : 'password'"
+                id="password"
+                v-model="password"
+                placeholder="Sisesta salasõna"
+                required
+            />
+            <span class="toggle-password" @click="togglePasswordVisibility">
+              {{ showPassword ? 'Peida' : 'Näita' }}
+            </span>
+          </div>
         </div>
 
         <div class="button-container">
@@ -31,11 +42,14 @@ export default {
     return {
       email: '',
       password: '',
+      showPassword: false,
     };
   },
   methods: {
     ...mapActions(['login']),
-
+    togglePasswordVisibility() {
+      this.showPassword = !this.showPassword;
+    },
     async handleLogin() {
       try {
         //const response = await fetch('http://localhost:8080/api/login', {
@@ -113,6 +127,38 @@ input {
   font-size: 1em;
 }
 
+.password-container {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  border-radius: 5px;
+  margin-top: 5px;
+  font-size: 1em;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+}
+
+input[type="password"],
+input[type="password-text"]{
+  border: none;
+  outline: none;
+  padding: 0;
+  flex: 1;
+  background: transparent;
+}
+
+.toggle-password {
+  margin-left: 10px;
+  cursor: pointer;
+  color: #5E89A8;
+  font-size: 0.9em;
+}
+
+.toggle-password:hover {
+  text-decoration: underline;
+}
+
 .button-container {
   text-align: right; /* Align button to the right */
 }
@@ -131,19 +177,4 @@ button.login-button:hover {
   background-color: #89d970;
 }
 
-.forgot-password {
-  text-align: left;
-  margin-bottom: 10px;
-}
-
-.forgot-password a {
-  text-decoration: none;
-  color: #5E89A8;
-  font-size: 0.9em;
-}
-
-.forgot-password a:hover {
-  text-decoration: underline;
-}
-
 </style>