refactor(Settings): Passwords are now set and reset without duplicating code

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

frontend/src/main.js

@@ -99,6 +99,11 @@ const router = new VueRouter({
 			path: "/reset_password",
 			component: () => import("./pages/ResetPassword.vue")
 		},
+		{
+			path: "/set_password",
+			props: { mode: "set" },
+			component: () => import("./pages/ResetPassword.vue")
+		},
 		{
 			path: "/login",
 			component: () => import("./components/modals/Login.vue")

frontend/src/pages/ResetPassword.vue

@@ -1,10 +1,14 @@
 <template>
 	<div>
-		<metadata title="Reset password" />
+		<metadata
+			:title="mode === 'reset' ? 'Reset password' : 'Set password'"
+		/>
 		<main-header />
 		<div class="container">
 			<div class="content-wrapper">
-				<h1 id="title">Reset your password</h1>
+				<h1 id="title">
+					{{ mode === "reset" ? "Reset" : "Set" }} your password
+				</h1>
 
 				<div id="steps">
 					<p class="step" :class="{ selected: step === 1 }">1</p>
@@ -222,7 +226,6 @@ export default {
 			code: "",
 			newPassword: "",
 			newPasswordAgain: "",
-			step: 1,
 			validation: {
 				email: {
 					entered: false,
@@ -239,9 +242,17 @@ export default {
 					valid: false,
 					message: "This password must match."
 				}
-			}
+			},
+			step: 1
 		};
 	},
+	props: {
+		mode: {
+			default: "reset",
+			enum: ["reset", "set"],
+			type: String
+		}
+	},
 	mounted() {
 		io.getSocket(socket => {
 			this.socket = socket;
@@ -311,6 +322,16 @@ export default {
 					content: "Email cannot be empty",
 					timeout: 8000
 				});
+
+			if (this.mode === "set") {
+				return this.socket.emit("users.requestPassword", res => {
+					new Toast({ content: res.message, timeout: 8000 });
+					if (res.status === "success") {
+						this.step = 2;
+					}
+				});
+			}
+
 			return this.socket.emit(
 				"users.requestPasswordReset",
 				this.email,
@@ -331,7 +352,9 @@ export default {
 				});
 
 			return this.socket.emit(
-				"users.verifyPasswordResetCode",
+				this.mode === "set"
+					? "users.verifyPasswordCode"
+					: "users.verifyPasswordResetCode",
 				this.code,
 				res => {
 					new Toast({ content: res.message, timeout: 8000 });
@@ -358,7 +381,9 @@ export default {
 				});
 
 			return this.socket.emit(
-				"users.changePasswordWithResetCode",
+				this.mode === "set"
+					? "users.changePasswordWithCode"
+					: "users.changePasswordWithResetCode",
 				this.code,
 				this.newPassword,
 				res => {

frontend/src/pages/Settings.vue

@@ -124,62 +124,10 @@
 			</div>
 			<div class="content security-tab" v-if="activeTab === 'security'">
 				<label v-if="!password" class="label">Add password</label>
-				<div v-if="!password" class="control is-grouped">
-					<button
-						v-if="passwordStep === 1"
-						class="button is-success"
-						@click="requestPassword()"
-					>
-						Request password email
-					</button>
-					<br />
-
-					<p
-						v-if="passwordStep === 2"
-						class="control is-expanded has-icon has-icon-right"
-					>
-						<input
-							v-model="passwordCode"
-							class="input"
-							type="text"
-							placeholder="Code"
-						/>
-					</p>
-					<p v-if="passwordStep === 2" class="control is-expanded">
-						<button
-							class="button is-success"
-							v-on:click="verifyCode()"
-						>
-							Verify code
-						</button>
-					</p>
-
-					<p
-						v-if="passwordStep === 3"
-						class="control is-expanded has-icon has-icon-right"
-					>
-						<input
-							v-model="setNewPassword"
-							class="input"
-							type="password"
-							placeholder="New password"
-						/>
-					</p>
-					<p v-if="passwordStep === 3" class="control is-expanded">
-						<button
-							class="button is-success"
-							@click="setPassword()"
-						>
-							Set password
-						</button>
-					</p>
-				</div>
-				<a
-					v-if="passwordStep === 1 && !password"
-					href="#"
-					@click="passwordStep = 2"
-					>Skip this step</a
-				>
+
+				<router-link v-if="!password" to="/set_password">
+					Set Password
+				</router-link>
 
 				<a
 					v-if="!github"
@@ -273,9 +221,6 @@ export default {
 			newPassword: "",
 			password: false,
 			github: false,
-			setNewPassword: "",
-			passwordStep: 1,
-			passwordCode: "",
 			serverDomain: "",
 			activeTab: "",
 			localNightmode: false
@@ -576,54 +521,6 @@ export default {
 				}
 			);
 		},
-		requestPassword() {
-			return this.socket.emit("users.requestPassword", res => {
-				new Toast({ content: res.message, timeout: 8000 });
-				if (res.status === "success") {
-					this.passwordStep = 2;
-				}
-			});
-		},
-		verifyCode() {
-			if (!this.passwordCode)
-				return new Toast({
-					content: "Code cannot be empty",
-					timeout: 8000
-				});
-			return this.socket.emit(
-				"users.verifyPasswordCode",
-				this.passwordCode,
-				res => {
-					new Toast({ content: res.message, timeout: 8000 });
-					if (res.status === "success") {
-						this.passwordStep = 3;
-					}
-				}
-			);
-		},
-		setPassword() {
-			const newPassword = this.setNewPassword;
-			if (!validation.isLength(newPassword, 6, 200))
-				return new Toast({
-					content: "Password must have between 6 and 200 characters.",
-					timeout: 8000
-				});
-			if (!validation.regex.password.test(newPassword))
-				return new Toast({
-					content:
-						"Invalid password format. Must have one lowercase letter, one uppercase letter, one number and one special character.",
-					timeout: 8000
-				});
-
-			return this.socket.emit(
-				"users.changePasswordWithCode",
-				this.passwordCode,
-				newPassword,
-				res => {
-					new Toast({ content: res.message, timeout: 8000 });
-				}
-			);
-		},
 		unlinkPassword() {
 			this.socket.emit("users.unlinkPassword", res => {
 				new Toast({ content: res.message, timeout: 8000 });