Skip to content

Commit 1daa70c

Browse files
shivanshs9shivanshs9
committed
Fixed password change & lookback.
1 parent d91bf94 commit 1daa70c

File tree

4 files changed

+116
-105
lines changed

4 files changed

+116
-105
lines changed

‎src/components/Lookback.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div :class="$style.lookback">
3-
<GridLayout itemWidth="250px">
3+
<GridLayout itemWidth="220px">
44
<div :class="$style.stat" v-for="(stat, i) in this.stats" :key="i" :slot="`item${i}`">
55
<div :class="$style.clip">
66
<img :src="stat.image" :class="$style.img">

‎src/components/layouts/TabLayout.vue

+21-20
Original file line numberDiff line numberDiff line change
@@ -116,31 +116,32 @@ $tab-height = 30px;
116116
}
117117
}
118118
119-
.active {
120-
.tabTitle {
121-
background: $chartreuse;
122-
color: white;
123-
z-index: 25;
119+
.active {
120+
.tabTitle {
121+
background: $chartreuse;
122+
color: white;
123+
z-index: 25;
124+
}
124125
}
125126
}
126-
}
127127
128-
.panelsContainer {
129-
margin: 0;
130-
padding: 0;
128+
.panelsContainer {
129+
margin: 0;
130+
padding: 0;
131131
132-
.tabContent {
133-
display: none;
134-
position: relative;
135-
top: $tab-height;
136-
border: 1px solid $limeade;
137-
border-radius: 0 0 10px 10px;
138-
box-shadow: inset 0px -2px 15px $chartreuse;
139-
background: $cod-gray;
140-
}
132+
.tabContent {
133+
display: none;
134+
position: relative;
135+
top: $tab-height;
136+
border: 1px solid $limeade;
137+
border-radius: 0 0 10px 10px;
138+
box-shadow: inset 0px -2px 15px $chartreuse;
139+
background: $cod-gray;
140+
}
141141
142-
.active .tabContent {
143-
display: block;
142+
.active .tabContent {
143+
display: block;
144+
}
144145
}
145146
}
146147
}

‎src/pages/ResetPassword.vue renamed to ‎src/pages/ChangePassword.vue

+80-71
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,41 @@
66
<div :class="$style.formContainer" slot="basic">
77
<form :class="$style.form" @submit.prevent="submitForm">
88
<div :class="$style.card">
9-
<h3>Reset Password</h3>
9+
<h3>Change Password</h3>
1010
<div :class="$style.fieldsContainer">
1111
<div :class="$style.field">
12-
<label for="currentPasswd" :class="$style.label">current password</label>
13-
<input
14-
type="password"
15-
id="currentPasswd"
16-
:class="$style.field"
17-
v-model="currentPasswd"
18-
required
19-
>
12+
<label for="old__password" :class="$style.label">current password</label>
13+
<span :class="$style.fieldWrapper">
14+
<input
15+
type="password"
16+
id="old__password"
17+
:class="$style.field"
18+
v-model="currentPasswd"
19+
required
20+
>
21+
<i
22+
class="fas"
23+
:class="isPasswordVisible('old__password') ? 'fa-eye' : 'fa-eye-slash'"
24+
@click="togglePasswordVisibility('old__password')"
25+
></i>
26+
</span>
2027
</div>
2128
<div :class="$style.field">
22-
<label for="newPasswd" :class="$style.label">new password</label>
23-
<input
24-
type="password"
25-
id="newPasswd"
26-
:class="$style.field"
27-
v-model="newPasswd"
28-
required
29-
>
30-
</div>
31-
<div :class="$style.field">
32-
<label for="confirmPasswd" :class="$style.label">retype new password</label>
33-
<input
34-
type="password"
35-
id="confirmPasswd"
36-
:class="$style.field"
37-
v-model="confirmPasswd"
38-
required
39-
>
29+
<label for="new__password" :class="$style.label">new password</label>
30+
<span :class="$style.fieldWrapper">
31+
<input
32+
type="password"
33+
id="new__password"
34+
:class="$style.field"
35+
v-model="newPasswd"
36+
required
37+
>
38+
<i
39+
class="fas"
40+
:class="isPasswordVisible('new__password') ? 'fa-eye' : 'fa-eye-slash'"
41+
@click="togglePasswordVisibility('new__password')"
42+
></i>
43+
</span>
4044
</div>
4145
</div>
4246
<div :class="$style.btnStyle">
@@ -53,12 +57,13 @@
5357
</div>
5458
</template>
5559

56-
<script>
60+
<script>
61+
import firebase from "firebase";
62+
import API from "@js/api";
63+
5764
import AppBar from "@components/Menu/AppBar";
5865
import Footer from "@components/Footer";
5966
import TabLayout from "@components/layouts/TabLayout";
60-
import firebase from "firebase";
61-
import API from "@js/api";
6267
6368
export default {
6469
components: {
@@ -70,27 +75,45 @@ export default {
7075
return {
7176
currentPasswd: "",
7277
newPasswd: "",
73-
confirmPasswd: ""
78+
__stubbed: 0
7479
};
7580
},
81+
computed: {
82+
isPasswordVisible() {
83+
this.$data.__stubbed; // To make this computed data reactive.
84+
return inputId => {
85+
const inputElem = document.getElementById(inputId);
86+
if (inputElem) return inputElem.type !== "password";
87+
};
88+
}
89+
},
7690
methods: {
7791
submitForm() {
7892
var user = firebase.auth().currentUser;
79-
if (this.newPasswd == this.confirmPasswd)
80-
user
81-
.reauthenticateAndRetrieveDataWithCredential(this.currentPasswd)
82-
.then(_ => {
83-
user
84-
.updatePassword(this.newPassword)
85-
.then(_ => {})
86-
.catch(console.log);
87-
})
88-
.catch(console.log);
89-
else alert("Passwords do not match.");
93+
user
94+
.reauthenticateAndRetrieveDataWithCredential(this.currentPasswd)
95+
.then(_ => {
96+
user
97+
.updatePassword(this.newPassword)
98+
.then(_ => {
99+
this.$toasted.global.success({
100+
message: `Successfully updated password!`
101+
});
102+
})
103+
.catch(err => {
104+
this.$toasted.global.error_post({ message: err.message });
105+
});
106+
})
107+
.catch(err => {
108+
this.$toasted.global.error_post({ message: err.message });
109+
});
110+
},
111+
togglePasswordVisibility(inputId) {
112+
const inputElem = document.getElementById(inputId);
113+
inputElem.type = inputElem.type === "password" ? "text" : "password";
114+
this.$data.__stubbed++;
90115
}
91-
},
92-
created() {},
93-
mounted() {}
116+
}
94117
};
95118
</script>
96119
<style module lang="stylus">
@@ -213,6 +236,18 @@ export default {
213236
margin-bottom: 15px;
214237
}
215238
239+
.fieldWrapper {
240+
width: 100%;
241+
position: relative;
242+
243+
i {
244+
top: 0;
245+
right: 7px;
246+
position: absolute;
247+
cursor: pointer;
248+
}
249+
}
250+
216251
option {
217252
color: black;
218253
}
@@ -262,32 +297,6 @@ export default {
262297
}
263298
}
264299
}
265-
266-
.social {
267-
width: 100%;
268-
max-width: 600px;
269-
margin: auto;
270-
text-align: center;
271-
padding: 5px;
272-
margin-top: 20px;
273-
border: 0;
274-
border-top: 1px solid $chartreuse;
275-
276-
.socialButton {
277-
background-color: Transparent;
278-
background-repeat: no-repeat;
279-
border: none;
280-
cursor: pointer;
281-
overflow: hidden;
282-
outline: none;
283-
284-
img {
285-
margin: 10px;
286-
width: 40px;
287-
height: 40px;
288-
}
289-
}
290-
}
291300
}
292301
}
293302

‎src/router/index.js

+14-13
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ Vue.use(Router);
66

77
const router = new Router({
88
mode: "history",
9-
routes: [{
9+
routes: [
10+
{
1011
name: "~",
1112
path: "/",
1213
component: () => import(`@pages/Home`),
@@ -47,13 +48,14 @@ const router = new Router({
4748
}
4849
},
4950
{
50-
name: "~/auth/reset",
51-
path: "/auth/reset",
52-
component: () => import(`@pages/ResetPassword`),
51+
name: "~/password/change",
52+
path: "/password/change",
53+
component: () => import(`@pages/ChangePassword`),
5354
meta: {
54-
title: "CodeFest '19 | Reset Password",
55+
title: "CodeFest '19 | Change Password",
5556
metaTags: [],
56-
noTerminal: false
57+
noTerminal: false,
58+
requiresAuth: true
5759
}
5860
},
5961
{
@@ -188,9 +190,7 @@ router.beforeEach((to, from, next) => {
188190
.forEach(tag => document.head.appendChild(tag));
189191

190192
// Handle secure routes
191-
const {
192-
isLoggedIn
193-
} = store.getters;
193+
const { isLoggedIn } = store.getters;
194194
if (to.matched.some(record => record.meta.requiresAuth)) {
195195
if (isLoggedIn) return next();
196196

@@ -201,11 +201,12 @@ router.beforeEach((to, from, next) => {
201201
}
202202
});
203203
}
204-
if (isLoggedIn && to.name === "~/login") return next({
205-
name: "~/dashboard"
206-
});
204+
if (isLoggedIn && to.name === "~/login")
205+
return next({
206+
name: "~/dashboard"
207+
});
207208

208209
next();
209210
});
210211

211-
export default router;
212+
export default router;

0 commit comments

Comments
 (0)