viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit a322c8b1454ab960cefd0c60abdf242502dfaf8f

Authored by Shikha Mishra
1 parent e659e774fe
Exists in master and in 1 other branch ui-design

call reset api on enter

Showing 1 changed file with 27 additions and 1 deletions   Show diff stats
src/pages/Authentication/forgetpassword.vue
Diff comments   View file @a322c8b
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-toolbar dense flat class="transparent mb-4"> 3 <v-toolbar dense flat class="transparent mb-4">
4 <v-toolbar-items class="mx-auto"> 4 <v-toolbar-items class="mx-auto">
5 <img src="/static/icon.png" height="50" width="140" alt="logo" style=" margin-top: 15%" /> 5 <img src="/static/icon.png" height="50" width="140" alt="logo" style=" margin-top: 15%" />
6 </v-toolbar-items> 6 </v-toolbar-items>
7 </v-toolbar> 7 </v-toolbar>
8 <v-container fluid> 8 <v-container fluid>
9 <v-layout align-center justify-center fill-height> 9 <v-layout align-center justify-center fill-height>
10 <v-flex xs12 sm10 md6 lg4> 10 <v-flex xs12 sm10 md6 lg4>
11 <div> 11 <div>
12 <v-app> 12 <v-app>
13 <v-stepper v-model="e2"> 13 <v-stepper v-model="e2">
14 <v-stepper-header> 14 <v-stepper-header>
15 <v-stepper-step :complete="e2 > 1" step="1">Fill Your Email</v-stepper-step> 15 <v-stepper-step :complete="e2 > 1" step="1">Fill Your Email</v-stepper-step>
16 <v-divider></v-divider> 16 <v-divider></v-divider>
17 <v-stepper-step step="2">Last Step of Forget Password</v-stepper-step> 17 <v-stepper-step step="2">Last Step of Forget Password</v-stepper-step>
18 </v-stepper-header> 18 </v-stepper-header>
19 <v-stepper-items> 19 <v-stepper-items>
20 <v-stepper-content step="1"> 20 <v-stepper-content step="1">
21 <v-content> 21 <v-content>
22 <v-container fluid class="content"> 22 <v-container fluid class="content">
23 <v-layout align-center justify-center fill-height> 23 <v-layout align-center justify-center fill-height>
24 <v-flex> 24 <v-flex>
25 <v-toolbar style="background-color: #7852cc" dark> 25 <v-toolbar style="background-color: #7852cc" dark>
26 <v-spacer></v-spacer> 26 <v-spacer></v-spacer>
27 <v-toolbar-title>Forget Password</v-toolbar-title> 27 <v-toolbar-title>Forget Password</v-toolbar-title>
28 <v-spacer></v-spacer> 28 <v-spacer></v-spacer>
29 </v-toolbar> 29 </v-toolbar>
30 <v-card class="elevation-1 pa-1"> 30 <v-card class="elevation-1 pa-1">
31 <v-card-text> 31 <v-card-text>
32 <h5 32 <h5
33 class="text-xs-center" 33 class="text-xs-center"
34 >Not to Worry! Enter to your registered Email ID.</h5> 34 >Not to Worry! Enter to your registered Email ID.</h5>
35 <h5 class="text-xs-center">We'll send you a reset.</h5> 35 <h5 class="text-xs-center">We'll send you a reset.</h5>
36 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3> 36 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3>
37 <v-form ref="form" v-model="valid" lazy-validation> 37 <v-form
38 ref="form"
39 v-model="valid"
40 lazy-validation
41 v-on:submit.prevent="reset"
42 >
43 <!-- <div style="margin-top:10%">
44 <label for="isEmail" v-if="isEmail">Email</label>
45 <label for="isEmail" v-if="!isEmail">Phone Number</label>
46 <v-switch class="pl-3" v-model="isEmail"></v-switch>
47 </div>-->
48 <!-- <v-switch class="pl-3" v-model="isEmail" label="Email"></v-switch> -->
38 <div class="custom-input-align"> 49 <div class="custom-input-align">
39 <v-text-field 50 <v-text-field
40 class="text-md-center" 51 class="text-md-center"
41 :rules="emailRules" 52 :rules="emailRules"
42 v-model="forgetemail" 53 v-model="forgetemail"
43 label="Enter Your email ID" 54 label="Enter Your email ID"
44 required 55 required
45 ></v-text-field> 56 ></v-text-field>
46 </div> 57 </div>
58 <!-- <div class="custom-input-align" v-if="!isEmail">
59 <v-text-field
60 class="text-md-center"
61 :rules="numberRules"
62 v-model="phoneNumber"
63 label="Enter Your Phone Number"
64 required
65 ></v-text-field>
66 </div>-->
47 </v-form> 67 </v-form>
48 </v-flex> 68 </v-flex>
49 </v-card-text> 69 </v-card-text>
50 <v-card-actions> 70 <v-card-actions>
51 <v-flex text-xs-center> 71 <v-flex text-xs-center>
52 <v-btn 72 <v-btn
53 style="background-color: #71d9ea; color: #0c0754;" 73 style="background-color: #71d9ea; color: #0c0754;"
54 dark 74 dark
55 flat 75 flat
56 @click="reset" 76 @click="reset"
57 >Send Request</v-btn> 77 >Send Request</v-btn>
58 </v-flex> 78 </v-flex>
59 </v-card-actions> 79 </v-card-actions>
60 <v-snackbar 80 <v-snackbar
61 :timeout="timeout" 81 :timeout="timeout"
62 :top="y === 'top'" 82 :top="y === 'top'"
63 :right="x === 'right'" 83 :right="x === 'right'"
64 :vertical="mode === 'vertical'" 84 :vertical="mode === 'vertical'"
65 v-model="snackbar" 85 v-model="snackbar"
66 :color="color" 86 :color="color"
67 >{{ text }}</v-snackbar> 87 >{{ text }}</v-snackbar>
68 </v-card> 88 </v-card>
69 </v-flex> 89 </v-flex>
70 </v-layout> 90 </v-layout>
71 </v-container> 91 </v-container>
72 </v-content> 92 </v-content>
73 </v-stepper-content> 93 </v-stepper-content>
74 <v-stepper-content step="2"> 94 <v-stepper-content step="2">
75 <v-content> 95 <v-content>
76 <v-container fluid fill-height> 96 <v-container fluid fill-height>
77 <v-layout align-center justify-center> 97 <v-layout align-center justify-center>
78 <v-flex> 98 <v-flex>
79 <v-toolbar style="background-color: #7852cc" dark> 99 <v-toolbar style="background-color: #7852cc" dark>
80 <v-spacer></v-spacer> 100 <v-spacer></v-spacer>
81 <v-toolbar-title>Forget Password</v-toolbar-title> 101 <v-toolbar-title>Forget Password</v-toolbar-title>
82 <v-spacer></v-spacer> 102 <v-spacer></v-spacer>
83 </v-toolbar> 103 </v-toolbar>
84 <v-card class="elevation-1 pa-1"> 104 <v-card class="elevation-1 pa-1">
85 <v-card-text> 105 <v-card-text>
86 <h5 106 <h5
87 class="text-xs-center" 107 class="text-xs-center"
88 >Not to Worry! Enter to your registered Email ID And New Password.</h5> 108 >Not to Worry! Enter to your registered Email ID And New Password.</h5>
89 <h5 class="text-xs-center">We'll send you a reset.</h5> 109 <h5 class="text-xs-center">We'll send you a reset.</h5>
90 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3> 110 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3>
91 <v-form class="mt-4"> 111 <v-form class="mt-4">
92 <div class="custom-input-align"> 112 <div class="custom-input-align">
93 <v-text-field 113 <v-text-field
94 class="text-md-center" 114 class="text-md-center"
95 v-model="uniqueCode" 115 v-model="uniqueCode"
96 type="text" 116 type="text"
97 label="Enter Unique Code" 117 label="Enter Unique Code"
98 required 118 required
99 ></v-text-field> 119 ></v-text-field>
100 <v-text-field 120 <v-text-field
101 :rules="[rules.required,rules.min]" 121 :rules="[rules.required,rules.min]"
102 v-model="changepassword" 122 v-model="changepassword"
103 :append-icon="e1 ? 'visibility_off' : 'visibility'" 123 :append-icon="e1 ? 'visibility_off' : 'visibility'"
104 :append-icon-cb="() => (e1 = !e1)" 124 :append-icon-cb="() => (e1 = !e1)"
105 :type="e1 ? 'password' : 'text'" 125 :type="e1 ? 'password' : 'text'"
106 name="input-10-1" 126 name="input-10-1"
107 label="New Password" 127 label="New Password"
108 counter 128 counter
109 ></v-text-field> 129 ></v-text-field>
110 </div> 130 </div>
111 </v-form> 131 </v-form>
112 </v-flex> 132 </v-flex>
113 </v-card-text> 133 </v-card-text>
114 <v-card-actions> 134 <v-card-actions>
115 <v-flex text-xs-center> 135 <v-flex text-xs-center>
116 <v-btn 136 <v-btn
117 style="background-color: #71d9ea; color: #0c0754;" 137 style="background-color: #71d9ea; color: #0c0754;"
118 dark 138 dark
119 flat 139 flat
120 @click="resetPassword" 140 @click="resetPassword"
121 >Send Request</v-btn> 141 >Send Request</v-btn>
122 </v-flex> 142 </v-flex>
123 </v-card-actions> 143 </v-card-actions>
124 <v-snackbar 144 <v-snackbar
125 :timeout="timeout" 145 :timeout="timeout"
126 :top="y === 'top'" 146 :top="y === 'top'"
127 :right="x === 'right'" 147 :right="x === 'right'"
128 :vertical="mode === 'vertical'" 148 :vertical="mode === 'vertical'"
129 v-model="snackbar" 149 v-model="snackbar"
130 :color="color" 150 :color="color"
131 >{{ text }}</v-snackbar> 151 >{{ text }}</v-snackbar>
132 </v-card> 152 </v-card>
133 </v-flex> 153 </v-flex>
134 </v-layout> 154 </v-layout>
135 </v-container> 155 </v-container>
136 </v-content> 156 </v-content>
137 <v-btn color="#7852cc" dark @click="e2 = 1">Back</v-btn> 157 <v-btn color="#7852cc" dark @click="e2 = 1">Back</v-btn>
138 </v-stepper-content> 158 </v-stepper-content>
139 </v-stepper-items> 159 </v-stepper-items>
140 </v-stepper> 160 </v-stepper>
141 </v-app> 161 </v-app>
142 </div> 162 </div>
143 </v-flex> 163 </v-flex>
144 </v-layout> 164 </v-layout>
145 </v-container> 165 </v-container>
146 <!-- <v-footer class="pa-4 fixcolors"> 166 <!-- <v-footer class="pa-4 fixcolors">
147 </v-footer>--> 167 </v-footer>-->
148 </v-app> 168 </v-app>
149 </template> 169 </template>
150 170
151 171
152 172
153 <script> 173 <script>
154 import http from "@/Services/http.js"; 174 import http from "@/Services/http.js";
155 175
156 export default { 176 export default {
157 data: () => ({ 177 data: () => ({
158 e1: true, 178 e1: true,
159 e2: 0, 179 e2: 0,
160 snackbar: false, 180 snackbar: false,
161 y: "top", 181 y: "top",
162 x: "right", 182 x: "right",
163 mode: "", 183 mode: "",
164 timeout: 4000, 184 timeout: 4000,
165 text: "", 185 text: "",
166 loading: false, 186 loading: false,
167 forgetemail: "", 187 forgetemail: "",
168 uniqueCode: "", 188 uniqueCode: "",
169 password: "", 189 password: "",
170 changepassword: "", 190 changepassword: "",
171 valid: true, 191 valid: true,
192 isEmail: true,
193 // phoneNumber: null,
172 emailRules: [ 194 emailRules: [
173 (v) => !!v || "E-mail is required", 195 (v) => !!v || "E-mail is required",
174 (v) => 196 (v) =>
175 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 197 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
176 "E-mail must be valid", 198 "E-mail must be valid",
177 ], 199 ],
200 // numberRules: [
201 // (v) => !!v || " Phone Number is required",
202 // (v) => v <= 10000000000 || "Max 10 characters is required",
203 // ],
178 204
179 rules: { 205 rules: {
180 required: (value) => !!value || "password is Required.", 206 required: (value) => !!value || "password is Required.",
181 min: (v) => 207 min: (v) =>
182 (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test( 208 (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test(
183 v 209 v
184 ) && 210 ) &&
185 v.length >= 6) || 211 v.length >= 6) ||
186 "Min 4 characters upper case lower case symbol required", 212 "Min 4 characters upper case lower case symbol required",
187 }, 213 },
188 }), 214 }),
189 215
190 methods: { 216 methods: {
191 reset() { 217 reset() {
192 if (this.$refs.form.validate()) { 218 if (this.$refs.form.validate()) {
193 http() 219 http()
194 .get("/forgot-password?email=" + this.forgetemail) 220 .get("/forgot-password?email=" + this.forgetemail)
195 .then((response) => { 221 .then((response) => {
196 // console.log("response=====>",response.data.data.token); 222 // console.log("response=====>",response.data.data.token);
197 this.$store.dispatch("setToken", response.data.data.token); 223 this.$store.dispatch("setToken", response.data.data.token);
198 this.loading = true; 224 this.loading = true;
199 this.e2 = 2; 225 this.e2 = 2;
200 if ((this.snackbar = true)) { 226 if ((this.snackbar = true)) {
201 this.text = "Please Fill your Last Step of Forget Password!"; 227 this.text = "Please Fill your Last Step of Forget Password!";
202 } 228 }
203 }) 229 })
204 .catch((err) => { 230 .catch((err) => {
205 this.text = "User Not Found or Incorrect Email"; 231 this.text = "User Not Found or Incorrect Email";
206 this.snackbar = true; 232 this.snackbar = true;
207 this.loading = false; 233 this.loading = false;
208 }); 234 });
209 } 235 }
210 }, 236 },
211 resetPassword() { 237 resetPassword() {
212 let forgotPassword = { 238 let forgotPassword = {
213 email: this.forgetemail, 239 email: this.forgetemail,
214 uniqueCode: this.uniqueCode, 240 uniqueCode: this.uniqueCode,
215 password: this.changepassword, 241 password: this.changepassword,
216 }; 242 };
217 http() 243 http()
218 .post("/reset-password", forgotPassword) 244 .post("/reset-password", forgotPassword)
219 .then((response) => { 245 .then((response) => {
220 // console.log("response=====>",response); 246 // console.log("response=====>",response);
221 this.loading = true; 247 this.loading = true;
222 if ((this.snackbar = true)) { 248 if ((this.snackbar = true)) {
223 this.text = "Successfully Change your Password"; 249 this.text = "Successfully Change your Password";
224 } 250 }
225 setTimeout(() => { 251 setTimeout(() => {
226 this.$router.push("/"); 252 this.$router.push("/");
227 }, 1000); 253 }, 1000);
228 }) 254 })
229 .catch((err) => { 255 .catch((err) => {
230 this.text = "User Not Found or Incorrect Email"; 256 this.text = "User Not Found or Incorrect Email";
231 this.snackbar = true; 257 this.snackbar = true;
232 this.loading = false; 258 this.loading = false;
233 }); 259 });
234 }, 260 },
235 }, 261 },
236 computed: { 262 computed: {
237 color() { 263 color() {
238 return this.loading ? "success" : "error"; 264 return this.loading ? "success" : "error";
239 }, 265 },
240 }, 266 },
241 }; 267 };
242 </script> 268 </script>
243 <style scoped lang="css"> 269 <style scoped lang="css">
244 .content { 270 .content {
245 padding: 100px 0px 100px 0px !important; 271 padding: 100px 0px 100px 0px !important;
246 } 272 }
247 #login { 273 #login {
248 height: 50%; 274 height: 50%;
249 width: 100%; 275 width: 100%;
250 position: absolute; 276 position: absolute;
251 top: 0; 277 top: 0;
252 left: 0; 278 left: 0;
253 content: ""; 279 content: "";
254 z-index: 0; 280 z-index: 0;
255 } 281 }
256 img { 282 img {
257 /* position:absolute; */ 283 /* position:absolute; */
258 top: 13px; 284 top: 13px;
259 left: 8px; 285 left: 8px;
260 } 286 }
261 .v-btn--large { 287 .v-btn--large {
262 padding: 0px 74px; 288 padding: 0px 74px;
263 } 289 }
264 .button { 290 .button {
265 text-transform: none; 291 text-transform: none;
266 } 292 }
267 @media screen and (max-width: 472px) { 293 @media screen and (max-width: 472px) {
268 .v-btn--large { 294 .v-btn--large {
269 padding: 0px 20px !important; 295 padding: 0px 20px !important;
270 font-size: 13px; 296 font-size: 13px;
271 } 297 }
272 h5 { 298 h5 {
273 font-size: 11px; 299 font-size: 11px;
274 } 300 }
275 } 301 }
276 @media screen and (max-width: 600px) { 302 @media screen and (max-width: 600px) {
277 .theme--light .v-btn, 303 .theme--light .v-btn,
278 .application .theme--light.v-btn { 304 .application .theme--light.v-btn {
279 color: white !important; 305 color: white !important;
280 } 306 }
281 .logoSchool { 307 .logoSchool {
282 font-size: 18px; 308 font-size: 18px;
283 margin-top: 20px !important; 309 margin-top: 20px !important;
284 } 310 }
285 .content { 311 .content {
286 padding: 0px 0px 0px 0px !important; 312 padding: 0px 0px 0px 0px !important;
287 } 313 }
288 } 314 }
289 </style> 315 </style>