Jelajahi Sumber

Fixed styling and content of Reset Password route

theflametrooper 7 tahun lalu
induk
melakukan
feed724517
1 mengubah file dengan 10 tambahan dan 7 penghapusan
  1. 10 7
      frontend/components/User/ResetPassword.vue

+ 10 - 7
frontend/components/User/ResetPassword.vue

@@ -4,29 +4,27 @@
 		<!--Implement Validation-->
 		<h1>Step {{step}}</h1>
 
-		<label class="label" v-if="step === 1">Email</label>
+		<label class="label" v-if="step === 1">Email Address</label>
 		<div class="control is-grouped" v-if="step === 1">
 			<p class="control is-expanded has-icon has-icon-right">
-				<input class="input" type="email" placeholder="Email" v-model="email">
+				<input class="input" type="email" placeholder="The email address associated with your account" v-model="email">
 			</p>
 			<p class="control">
 				<button class="button is-success" @click="submitEmail()">Request</button>
+				<button @click="step = 2" v-if="step === 1" class="button is-default skip-step">Skip this step</button>
 			</p>
 		</div>
-		<button @click="step = 2" v-if="step === 1" class="button is-success">Skip this step</button>
 
-
-		<label class="label" v-if="step === 2">Reset code (the code that was sent to your account email address)</label>
+		<label class="label" v-if="step === 2">Reset Code</label>
 		<div class="control is-grouped" v-if="step === 2">
 			<p class="control is-expanded has-icon has-icon-right">
-				<input class="input" type="text" placeholder="Reset code" v-model="code">
+				<input class="input" type="text" placeholder="The reset code that was sent to your account's email address" v-model="code">
 			</p>
 			<p class="control">
 				<button class="button is-success" @click="verifyCode()">Verify reset code</button>
 			</p>
 		</div>
 
-
 		<label class="label" v-if="step === 3">Change password</label>
 		<div class="control is-grouped" v-if="step === 3">
 			<p class="control is-expanded has-icon has-icon-right">
@@ -101,4 +99,9 @@
 	.container {
 		padding: 25px;
 	}
+
+	.skip-step {
+		background-color: #7e7e7e;
+		color: #fff;
+	}
 </style>