feat: added visibility option to all password fields in frontend

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/App.vue

@@ -1063,4 +1063,18 @@ h4.section-title {
 		width: 175px;
 	}
 }
+
+#password-visibility-container {
+	display: flex;
+	align-items: center;
+
+	a {
+		width: 0;
+		margin-left: -30px;
+		z-index: 0;
+		top: 2px;
+		position: relative;
+		color: var(--light-grey-1);
+	}
+}
 </style>

frontend/src/components/modals/Login.vue

@@ -34,7 +34,7 @@
 							<label class="label">Password</label>
 						</p>
 
-						<div id="password-container">
+						<div id="password-visibility-container">
 							<input
 								v-model="password.value"
 								class="input"
@@ -200,20 +200,6 @@ export default {
 	}
 }
 
-#password-container {
-	display: flex;
-	align-items: center;
-
-	a {
-		width: 0;
-		margin-left: -30px;
-		z-index: 0;
-		top: 2px;
-		position: relative;
-		color: var(--light-grey-1);
-	}
-}
-
 .modal-card-foot {
 	display: flex;
 	justify-content: space-between;

frontend/src/components/modals/Register.vue

@@ -65,7 +65,7 @@
 						<label class="label">Password</label>
 					</p>
 
-					<div id="password-container">
+					<div id="password-visibility-container">
 						<input
 							v-model="password.value"
 							class="input"
@@ -337,20 +337,6 @@ export default {
 	}
 }
 
-#password-container {
-	display: flex;
-	align-items: center;
-
-	a {
-		width: 0;
-		margin-left: -30px;
-		z-index: 0;
-		top: 2px;
-		position: relative;
-		color: var(--light-grey-1);
-	}
-}
-
 .control {
 	margin-bottom: 2px !important;
 }

frontend/src/components/modals/RemoveAccount.vue

@@ -52,8 +52,7 @@
 					Enter your password
 				</h2>
 				<p class="content-box-description">
-					We will send a code to your email address to verify your
-					identity.
+					Confirming your password will let us verify your identity.
 				</p>
 
 				<p class="content-box-optional-helper">
@@ -68,7 +67,7 @@
 
 				<div class="content-box-inputs">
 					<div class="control is-grouped input-with-button">
-						<div id="password-container">
+						<div id="password-visibility-container">
 							<input
 								class="input"
 								type="password"
@@ -280,19 +279,8 @@ h2 {
 }
 
 #password-linked {
-	#password-container {
-		display: flex;
-		align-items: center;
-		width: 100%; // new
-
-		a {
-			width: 0;
-			margin-left: -30px;
-			z-index: 0;
-			top: 2px;
-			position: relative;
-			color: var(--light-grey-1);
-		}
+	#password-visibility-container {
+		width: 100%;
 	}
 
 	> a {

frontend/src/pages/ResetPassword.vue

@@ -131,16 +131,33 @@
 						<div class="content-box-inputs">
 							<p class="control is-expanded">
 								<label for="new-password">New password</label>
+							</p>
+
+							<div id="password-visibility-container">
 								<input
 									class="input"
 									id="new-password"
 									type="password"
+									ref="password"
 									placeholder="Enter password here..."
 									v-model="password.value"
 									@keypress="onInput('password')"
 									@paste="onInput('password')"
 								/>
-							</p>
+								<a
+									@click="
+										togglePasswordVisibility('password')
+									"
+								>
+									<i class="material-icons">
+										{{
+											!password.visible
+												? "visibility"
+												: "visibility_off"
+										}}
+									</i>
+								</a>
+							</div>
 
 							<transition name="fadein-helpbox">
 								<input-help-box
@@ -157,17 +174,36 @@
 								<label for="new-password-again"
 									>New password again</label
 								>
+							</p>
+
+							<div id="password-visibility-container">
 								<input
 									class="input"
 									id="new-password-again"
 									type="password"
+									ref="passwordAgain"
 									placeholder="Enter password here..."
 									v-model="passwordAgain.value"
 									@keyup.enter="changePassword()"
 									@keypress="onInput('passwordAgain')"
 									@paste="onInput('passwordAgain')"
 								/>
-							</p>
+								<a
+									@click="
+										togglePasswordVisibility(
+											'passwordAgain'
+										)
+									"
+								>
+									<i class="material-icons">
+										{{
+											!passwordAgain.visible
+												? "visibility"
+												: "visibility_off"
+										}}
+									</i>
+								</a>
+							</div>
 
 							<transition name="fadein-helpbox">
 								<input-help-box
@@ -259,6 +295,7 @@ export default {
 			},
 			password: {
 				value: "",
+				visible: false,
 				entered: false,
 				valid: false,
 				message:
@@ -266,6 +303,7 @@ export default {
 			},
 			passwordAgain: {
 				value: "",
+				visible: false,
 				entered: false,
 				valid: false,
 				message: "This password must match."
@@ -318,6 +356,15 @@ export default {
 		this.email.value = this.accountEmail;
 	},
 	methods: {
+		togglePasswordVisibility(ref) {
+			if (this.$refs[ref].type === "password") {
+				this.$refs[ref].type = "text";
+				this[ref].visible = true;
+			} else {
+				this.$refs[ref].type = "password";
+				this[ref].visible = false;
+			}
+		},
 		checkPasswordMatch(password, passwordAgain) {
 			if (passwordAgain !== password) {
 				this.passwordAgain.message = "This password must match.";

frontend/src/pages/Settings/tabs/Security.vue

@@ -10,29 +10,56 @@
 			<hr class="section-horizontal-rule" />
 
 			<p class="control is-expanded margin-top-zero">
-				<label for="previous-password">Previous password</label>
+				<label for="old-password">Previous password</label>
+			</p>
+
+			<div id="password-visibility-container">
 				<input
 					class="input"
-					id="previous-password"
+					id="old-password"
+					ref="oldPassword"
 					type="password"
 					placeholder="Enter your old password here..."
-					v-model="previousPassword"
+					v-model="validation.oldPassword.value"
 				/>
-			</p>
+				<a @click="togglePasswordVisibility('oldPassword')">
+					<i class="material-icons">
+						{{
+							!validation.oldPassword.visible
+								? "visibility"
+								: "visibility_off"
+						}}
+					</i>
+				</a>
+			</div>
 
-			<p id="new-password-again-input" class="control is-expanded">
+			<p class="control is-expanded">
 				<label for="new-password">New password</label>
+			</p>
+
+			<div id="password-visibility-container">
 				<input
 					class="input"
 					id="new-password"
 					type="password"
+					ref="newPassword"
 					placeholder="Enter new password here..."
 					v-model="validation.newPassword.value"
 					@keyup.enter="changePassword()"
 					@keypress="onInput('newPassword')"
 					@paste="onInput('newPassword')"
 				/>
-			</p>
+
+				<a @click="togglePasswordVisibility('newPassword')">
+					<i class="material-icons">
+						{{
+							!validation.newPassword.visible
+								? "visibility"
+								: "visibility_off"
+						}}
+					</i>
+				</a>
+			</div>
 
 			<transition name="fadein-helpbox">
 				<input-help-box
@@ -149,10 +176,14 @@ export default {
 	data() {
 		return {
 			apiDomain: "",
-			previousPassword: "",
 			validation: {
+				oldPassword: {
+					value: "",
+					visible: false
+				},
 				newPassword: {
 					value: "",
+					visible: false,
 					valid: false,
 					entered: false,
 					message:
@@ -192,26 +223,35 @@ export default {
 		this.apiDomain = await lofig.get("apiDomain");
 	},
 	methods: {
+		togglePasswordVisibility(ref) {
+			if (this.$refs[ref].type === "password") {
+				this.$refs[ref].type = "text";
+				this.validation[ref].visible = true;
+			} else {
+				this.$refs[ref].type = "password";
+				this.validation[ref].visible = false;
+			}
+		},
 		onInput(inputName) {
 			this.validation[inputName].entered = true;
 		},
 		changePassword() {
 			const newPassword = this.validation.newPassword.value;
 
-			if (this.previousPassword === "")
-				return new Toast("Please enter a previous password.");
+			if (this.validation.oldPassword.value === "")
+				return new Toast("Please enter your previous password.");
 
 			if (!this.validation.newPassword.valid)
 				return new Toast("Please enter a valid new password.");
 
 			return this.socket.dispatch(
 				"users.updatePassword",
-				this.previousPassword,
+				this.validation.oldPassword.value,
 				newPassword,
 				res => {
 					if (res.status !== "success") new Toast(res.message);
 					else {
-						this.previousPassword = "";
+						this.validation.prevPassword.value = "";
 						this.validation.newPassword.value = "";
 
 						new Toast("Successfully changed password.");