Skip to content

Commit b9b699e

Browse files
NEKOYASANNEKOYASAN
committed
SignUp メール登録まで
1 parent 961999e commit b9b699e

File tree

4 files changed

+288
-40
lines changed

4 files changed

+288
-40
lines changed

‎src/pages/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
<action-button
3838
text="ユーザー登録する"
3939
class="registerButton"
40-
@click="$router.push('/terms')"
40+
@click="$router.push('/user/terms')"
4141
/>
4242

4343
<action-button

‎src/pages/terms.vue‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,19 @@
2222
<v-icon v-if="isCheck" color="#0071C2">mdi-check-box-outline</v-icon>
2323
<v-icon v-else color="#0071C2">mdi-checkbox-blank-outline</v-icon>
2424
</label>
25-
<action-button class="Button" theme="primary" text="利用を開始する" />
26-
<action-button class="Button" theme="border" text="同意しない" />
25+
<action-button
26+
:is-disabled="!isCheck"
27+
class="Button"
28+
theme="primary"
29+
text="利用を開始する"
30+
@click="doClassLogin"
31+
/>
32+
<action-button
33+
class="Button"
34+
theme="border"
35+
text="同意しない"
36+
@click="$router.push('/')"
37+
/>
2738
</div>
2839
</template>
2940

@@ -46,6 +57,9 @@ export default Vue.extend({
4657
return value === 'check'
4758
})
4859
}
60+
},
61+
methods: {
62+
doClassLogin(): void {}
4963
}
5064
})
5165
</script>

‎src/pages/user/signup.vue‎

Lines changed: 178 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,174 @@
11
<template>
2-
<bottom-sheet-layer title="ユーザー登録" title-en="STEP 1" fullscreen>
3-
<template v-slot:LayerContents>
4-
<dl>
5-
<dt class="SignUp-ItemTitle">お名前（表示名）</dt>
6-
<dd>
7-
<input-field label="name" placeholder="山田花子" require />
8-
</dd>
9-
<dt class="SignUp-ItemTitle">メールアドレス</dt>
10-
<dd>
11-
<input-field
12-
label="email"
13-
placeholder="[email protected]"
14-
type="email"
15-
require
2+
<div>
3+
<bottom-sheet-layer title="ユーザー登録" title-en="STEP 1" fullscreen>
4+
<template v-slot:LayerContents>
5+
<dl>
6+
<dt class="SignUp-ItemTitle">お名前（表示名）</dt>
7+
<dd>
8+
<input-field
9+
v-model="name"
10+
label="name"
11+
placeholder="山田花子"
12+
require
13+
/>
14+
</dd>
15+
<dt class="SignUp-ItemTitle">メールアドレス</dt>
16+
<dd>
17+
<input-field
18+
v-model="email"
19+
label="email"
20+
placeholder="[email protected]"
21+
type="email"
22+
require
23+
/>
24+
</dd>
25+
<dt class="SignUp-ItemTitle">パスワード</dt>
26+
<dd>
27+
<input-field
28+
v-model="password"
29+
label="password"
30+
type="password"
31+
require
32+
/>
33+
</dd>
34+
<dt class="SignUp-ItemTitle">パスワード（確認用）</dt>
35+
<dd>
36+
<input-field
37+
v-model="confirmation"
38+
label="confirmation"
39+
type="password"
40+
require
41+
/>
42+
</dd>
43+
<dt class="SignUp-ItemTitle text--red">{{ passwordConfirm }}</dt>
44+
</dl>
45+
</template>
46+
<template v-slot:LayerFooter>
47+
<div class="SignUp-ButtonOuter">
48+
<action-button
49+
theme="transparent"
50+
text="キャンセル"
51+
class="SignUp-Button"
52+
@click="$router.push('/')"
1653
/>
17-
</dd>
18-
<dt class="SignUp-ItemTitle">パスワード</dt>
19-
<dd>
20-
<input-field label="password" type="password" require />
21-
</dd>
22-
<dt class="SignUp-ItemTitle">パスワード（確認用）</dt>
23-
<dd>
24-
<input-field label="confirmation" type="password" require />
25-
</dd>
26-
</dl>
27-
</template>
28-
<template v-slot:LayerFooter>
29-
<div class="SignUp-ButtonOuter">
30-
<action-button
31-
theme="transparent"
32-
text="キャンセル"
33-
class="SignUp-Button"
34-
/>
35-
<action-button theme="primary" text="登録" class="SignUp-Button" />
36-
</div>
37-
</template>
38-
</bottom-sheet-layer>
54+
<action-button
55+
theme="primary"
56+
text="登録"
57+
class="SignUp-Button"
58+
:is-disabled="disableRegisterButton"
59+
:is-loading="loading"
60+
@click="doSignUp"
61+
/>
62+
</div>
63+
</template>
64+
</bottom-sheet-layer>
65+
<v-snackbar v-model="error" :timeout="5000" absolute top color="#C01B61">
66+
何らかのエラーが発生しました。時間をおいて再度お試しください。
67+
</v-snackbar>
68+
<v-dialog v-model="completion" max-width="460px">
69+
<v-card class="DialogCard">
70+
<v-container class="DialogCardContentContainer">
71+
入力いただいたメールアドレス宛に確認メールを送信しました。<br />
72+
メールに記載されているURLから認証を行ってください。
73+
</v-container>
74+
<v-card-actions class="DialogCardButtons px-4">
75+
<action-button
76+
text="トップに戻る"
77+
theme="border"
78+
class="my-3"
79+
@click="$router.push('/')"
80+
/>
81+
</v-card-actions>
82+
</v-card>
83+
</v-dialog>
84+
</div>
3985
</template>
4086

4187
<script lang="ts">
4288
import Vue from 'vue'
4389
import BottomSheetLayer from '@/components/BottomSheetLayer.vue'
4490
import ActionButton from '@/components/ActionButton.vue'
4591
import InputField from '@/components/InputField.vue'
92+
import firebase from '@/plugins/firebase'
4693
4794
export default Vue.extend({
4895
components: { BottomSheetLayer, ActionButton, InputField },
49-
layout: 'background'
96+
layout: 'background',
97+
data() {
98+
return {
99+
name: '',
100+
email: '',
101+
password: '',
102+
confirmation: '',
103+
error: false,
104+
completion: false,
105+
loading: false
106+
}
107+
},
108+
computed: {
109+
passwordConfirm() {
110+
if (this.password && this.confirmation) {
111+
if (this.password !== this.confirmation) {
112+
return 'パスワードが一致していません'
113+
}
114+
return ''
115+
}
116+
return ''
117+
},
118+
disableRegisterButton() {
119+
if (this.password && this.confirmation && this.email && this.name) {
120+
if (this.password !== this.confirmation) {
121+
return true
122+
}
123+
return false
124+
}
125+
return true
126+
}
127+
},
128+
methods: {
129+
doSignUp(): void {
130+
this.loading = true
131+
firebase
132+
.auth()
133+
.createUserWithEmailAndPassword(this.email, this.password)
134+
.then(() => {
135+
const user = firebase.auth().currentUser
136+
if (user) {
137+
firebase
138+
.firestore()
139+
.collection('users')
140+
.doc(user.uid)
141+
.set({
142+
username: this.name,
143+
allow_access: [],
144+
created_at: new Date(),
145+
last_login: new Date(),
146+
updated_at: new Date()
147+
})
148+
.catch(() => {
149+
firebase
150+
.firestore()
151+
.collection('users')
152+
.doc(user.uid)
153+
.set({
154+
username: this.name,
155+
allow_access: [],
156+
created_at: new Date(),
157+
last_login: new Date(),
158+
updated_at: new Date()
159+
})
160+
})
161+
user.sendEmailVerification()
162+
this.completion = true
163+
this.loading = false
164+
}
165+
})
166+
.catch(() => {
167+
this.error = true
168+
this.loading = false
169+
})
170+
}
171+
}
50172
})
51173
</script>
52174

@@ -65,4 +187,23 @@ export default Vue.extend({
65187
.SignUp-Button {
66188
flex: 0 1 48%;
67189
}
190+
.Dialog {
191+
margin: auto !important;
192+
}
193+
.v-dialog {
194+
.DialogCard {
195+
border-radius: 14px;
196+
197+
&Title,
198+
&Buttons {
199+
flex-direction: column;
200+
}
201+
202+
&Title,
203+
&TitleIcon {
204+
color: $color-base-color-01;
205+
font-size: 16px;
206+
}
207+
}
208+
}
68209
</style>

‎src/pages/user/terms.vue‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<template>
2+
<div class="MainPage">
3+
<div class="Logo-outer">
4+
<prj-logo class="Logo" />
5+
</div>
6+
<div class="PolicyText-outer">
7+
<p>
8+
一般社団法人コード・フォー・ジャパン（以下、「弊団体」といいます）は、個人情報に関する法令を遵守し、個人情報の適切な取り扱いを実現致します。
9+
</p>
10+
<p>
11+
なお、弊団体が、参加者等（弊団体が運営するイベントやWebページ等への参加者や訪問者をいいます。以下同じ。）から取得した個人情報は、本プライバシーポリシーに従って管理され、参加者等は、弊団体が提供する各種イベントやWebページ（以下、総称して「弊社イベント等」という）を利用する際には、本プライバシーポリシーに定める内容を理解し、これに同意した上で利用するものとします。
12+
</p>
13+
</div>
14+
<label class="Checkbox-label">
15+
利用規約に同意します
16+
<input
17+
v-model="toggle"
18+
type="checkbox"
19+
value="check"
20+
class="Checkbox-original"
21+
/>
22+
<v-icon v-if="isCheck" color="#0071C2">mdi-check-box-outline</v-icon>
23+
<v-icon v-else color="#0071C2">mdi-checkbox-blank-outline</v-icon>
24+
</label>
25+
<action-button
26+
:is-disabled="!isCheck"
27+
class="Button"
28+
theme="primary"
29+
text="登録へ進む"
30+
@click="$router.push('/user/signup')"
31+
/>
32+
<action-button
33+
class="Button"
34+
theme="border"
35+
text="同意しない"
36+
@click="$router.push('/')"
37+
/>
38+
</div>
39+
</template>
40+
41+
<script lang="ts">
42+
import Vue from 'vue'
43+
import PrjLogo from '@/assets/svgs/prj_logo.svg'
44+
import ActionButton from '@/components/ActionButton.vue'
45+
46+
export default Vue.extend({
47+
components: { PrjLogo, ActionButton },
48+
layout: 'simple',
49+
data() {
50+
return {
51+
toggle: []
52+
}
53+
},
54+
computed: {
55+
isCheck(): boolean {
56+
return this.toggle.some(value => {
57+
return value === 'check'
58+
})
59+
}
60+
}
61+
})
62+
</script>
63+
64+
<style lang="scss" scoped>
65+
.MainPage {
66+
background-color: $color-white;
67+
border-radius: 14px;
68+
padding: 16px;
69+
}
70+
.Logo-outer {
71+
display: flex;
72+
justify-content: center;
73+
}
74+
.Logo {
75+
width: 115px;
76+
}
77+
.PolicyText-outer {
78+
background-color: $color-back-gray;
79+
border-radius: 14px;
80+
padding: 16px;
81+
}
82+
.Checkbox-label {
83+
display: flex;
84+
justify-content: center;
85+
margin: 24px 0;
86+
}
87+
.Checkbox-original {
88+
display: none;
89+
}
90+
.Button {
91+
margin-bottom: 16px;
92+
}
93+
</style>

0 commit comments

Comments
 (0)