Skip to content

Commit e8c1735

Browse files
NEKOYASANNEKOYASAN
authored
Merge pull request #20 from codeforjapan/future/19-add-signup-resetpassword
Login Signup ResetPasswordの実装
2 parents 1bdb5e1 + b9a1dfd commit e8c1735

File tree

2 files changed

+176
-50
lines changed

2 files changed

+176
-50
lines changed

‎src/pages/account/resetPassword.vue‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<template>
2+
<div class="SignUpPage">
3+
<v-flex>
4+
<div class="Logo">
5+
<Logo style="height: 80vw; max-height: 350px; width: 100%;" />
6+
</div>
7+
<div class="SignUpForm">
8+
<v-form>
9+
<v-text-field
10+
v-model="email"
11+
:counter="32"
12+
label="email"
13+
outlined
14+
dark
15+
prepend-icon="mdi-email"
16+
/>
17+
<v-btn
18+
block
19+
outlined
20+
color="white"
21+
height="40px"
22+
:loading="loading"
23+
:disabled="loading"
24+
@click="doSignup"
25+
>
26+
再設定メールを送信する
27+
</v-btn>
28+
</v-form>
29+
</div>
30+
</v-flex>
31+
</div>
32+
</template>
33+
34+
<script>
35+
import { mapActions } from 'vuex'
36+
import firebase from '@/plugins/firebase'
37+
import Logo from '@/assets/svgs/logo.svg'
38+
39+
export default {
40+
components: {
41+
Logo,
42+
},
43+
data() {
44+
return {
45+
email: '',
46+
loading: false,
47+
}
48+
},
49+
methods: {
50+
...mapActions('modules/user', ['login']),
51+
doSignup() {
52+
this.loading = true
53+
firebase
54+
.auth()
55+
.sendPasswordResetEmail(this.email)
56+
.then(() => {
57+
this.$router.push('/account/signin')
58+
})
59+
.catch((error) => {
60+
this.loading = false
61+
alert(error)
62+
})
63+
},
64+
gotoSignin() {
65+
this.$router.push('/account/signin')
66+
},
67+
gotoResetPassword() {
68+
this.$router.push('/reset-password')
69+
},
70+
},
71+
}
72+
</script>
73+
74+
<style lang="scss" scoped>
75+
.SignUpPage {
76+
text-align: center;
77+
.Logo {
78+
text-align: center;
79+
}
80+
.SignUpTitle {
81+
color: #ffffff;
82+
font-family: 'Noto Sans JP';
83+
font-size: 5em;
84+
}
85+
.DataBlock {
86+
margin: 0 -12px;
87+
.studycard {
88+
margin-bottom: 20px;
89+
}
90+
}
91+
.SignUpForm {
92+
width: 90%;
93+
max-width: 600px;
94+
margin: 50px auto;
95+
}
96+
}
97+
</style>

‎src/pages/account/signup.vue‎

Lines changed: 79 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,80 @@
11
<template>
2-
<div>
3-
<v-container fluid fill-height>
4-
<v-layout align-center justify-center>
5-
<v-flex xs12 sm8 md4>
6-
<v-card>
7-
<v-toolbar>
8-
<v-toolbar-title>Login</v-toolbar-title>
9-
</v-toolbar>
10-
<v-card-text>
11-
<v-form>
12-
<v-text-field
13-
v-model="email"
14-
:counter="32"
15-
label="email"
16-
prepend-icon="mdi-email"
17-
/>
18-
<v-text-field
19-
v-model="password"
20-
:append-icon="
21-
show_password ? 'mdi-visibility' : 'mdi-visibility_off'
22-
"
23-
:type="show_password ? 'text' : 'password'"
24-
:counter="32"
25-
label="password"
26-
prepend-icon="mdi-lock"
27-
@click:append="show_password = !show_password"
28-
/>
29-
</v-form>
30-
</v-card-text>
31-
<v-card-actions>
32-
<v-btn @click="gotoSignin">Login</v-btn>
33-
<v-spacer />
34-
<v-btn @click="doSignup">Signup</v-btn>
35-
</v-card-actions>
36-
<hr />
37-
<v-spacer />
38-
<v-btn @click="gotoResetPassword"
39-
>パスワードを忘れたかたはこちら</v-btn
40-
>
41-
</v-card>
42-
</v-flex>
43-
</v-layout>
44-
</v-container>
2+
<div class="SignUpPage">
3+
<v-flex>
4+
<div class="Logo">
5+
<Logo style="height: 80vw; max-height: 350px; width: 100%;" />
6+
</div>
7+
<div class="SignUpForm">
8+
<v-form>
9+
<v-text-field
10+
v-model="email"
11+
:counter="32"
12+
label="email"
13+
outlined
14+
dark
15+
prepend-icon="mdi-email"
16+
/>
17+
<v-text-field
18+
v-model="password"
19+
:append-icon="show_password ? 'mdi-eye' : 'mdi-eye-off'"
20+
:type="show_password ? 'text' : 'password'"
21+
:counter="32"
22+
label="Password"
23+
outlined
24+
dark
25+
prepend-icon="mdi-lock"
26+
@click:append="show_password = !show_password"
27+
/>
28+
<v-btn
29+
block
30+
outlined
31+
color="white"
32+
height="40px"
33+
:loading="loading"
34+
:disabled="loading"
35+
@click="doSignup"
36+
>
37+
SIGNUP
38+
</v-btn>
39+
</v-form>
40+
</div>
41+
</v-flex>
4542
</div>
4643
</template>
4744

4845
<script>
4946
import { mapActions } from 'vuex'
5047
import firebase from '@/plugins/firebase'
48+
import Logo from '@/assets/svgs/logo.svg'
49+
5150
export default {
51+
components: {
52+
Logo,
53+
},
5254
data() {
5355
return {
5456
email: '',
5557
password: '',
5658
show_password: false,
59+
loading: false,
5760
}
5861
},
5962
methods: {
6063
...mapActions('modules/user', ['login']),
6164
doSignup() {
65+
this.loading = true
6266
firebase
6367
.auth()
6468
.createUserWithEmailAndPassword(this.email, this.password)
6569
.then((userInfo) => {
66-
this.login({
67-
uid: userInfo.user.uid,
68-
email: userInfo.user.email,
69-
username: userInfo.user.displayName,
70-
userImage: userInfo.user.photoURL,
71-
})
70+
this.login(userInfo)
7271
this.writeUserData(userInfo.user.uid, userInfo.user.email)
7372
})
7473
.then(() => {
7574
this.$router.push('/edit')
7675
})
7776
.catch((error) => {
77+
this.loading = false
7878
alert(error)
7979
})
8080
},
@@ -85,10 +85,39 @@ export default {
8585
this.$router.push('/reset-password')
8686
},
8787
writeUserData(userId, email) {
88+
const today = new Date()
8889
return firebase.firestore().collection('users').doc(userId).set({
89-
email,
90+
allow_access: [],
91+
created_at: today,
92+
updated_at: today,
93+
last_login: today,
9094
})
9195
},
9296
},
9397
}
9498
</script>
99+
100+
<style lang="scss" scoped>
101+
.SignUpPage {
102+
text-align: center;
103+
.Logo {
104+
text-align: center;
105+
}
106+
.SignUpTitle {
107+
color: #ffffff;
108+
font-family: 'Noto Sans JP';
109+
font-size: 5em;
110+
}
111+
.DataBlock {
112+
margin: 0 -12px;
113+
.studycard {
114+
margin-bottom: 20px;
115+
}
116+
}
117+
.SignUpForm {
118+
width: 90%;
119+
max-width: 600px;
120+
margin: 50px auto;
121+
}
122+
}
123+
</style>

0 commit comments

Comments
 (0)