Skip to content

Commit d7b7b6f

Browse files
MasaGonMasaGon
authored
Merge pull request #420 from kaizumaki/aws-migration
ユーザー情報変更ページをAmplifyに対応
2 parents 1d3f511 + 1b4f152 commit d7b7b6f

File tree

4 files changed

+189
-52
lines changed

4 files changed

+189
-52
lines changed

‎src/assets/locales/ja.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,7 @@
149149
"user_edit_user_data": {
150150
"title": "ユーザー情報の変更",
151151
"labels": {
152+
"old_password": "現在のパスワード",
152153
"new_password": "変更先パスワード",
153154
"new_password_confirm": "変更先パスワード（確認用）"
154155
}
@@ -194,6 +195,12 @@
194195
"go_back_to_top": "トップに戻る",
195196
"message": "入力いただいたメールアドレス宛に確認メールを送信しました。メールに記載されているURLから認証を行ってください。"
196197
}
198+
},
199+
"user_verify": {
200+
"title": "メールアドレス確認"
201+
},
202+
"user_verify_new_email": {
203+
"title": "メールアドレス変更確認"
197204
}
198205
}
199206
}

‎src/pages/user/editUserData.vue‎

Lines changed: 53 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,17 @@
3030
require
3131
/>
3232
</dd>
33+
<dt class="SignUp-ItemTitle">
34+
{{ $t('pages.user_edit_user_data.labels.old_password') }}
35+
</dt>
36+
<dd>
37+
<base-input-field
38+
v-model="oldPassword"
39+
label="password"
40+
type="password"
41+
require
42+
/>
43+
</dd>
3344
<dt class="SignUp-ItemTitle">
3445
{{ $t('pages.user_edit_user_data.labels.new_password') }}
3546
</dt>
@@ -38,8 +49,8 @@
3849
</dt>
3950
<dd>
4051
<base-input-field
41-
v-model="password"
42-
label="password"
52+
v-model="newPassword"
53+
label="new password"
4354
type="password"
4455
require
4556
/>
@@ -105,7 +116,8 @@ import { vxm } from '~/store'
105116
type Data = {
106117
name: typeof vxm.user.displayName
107118
email: typeof vxm.user.email
108-
password: string
119+
oldPassword: string
120+
newPassword: string
109121
confirmation: string
110122
error: boolean
111123
completion: boolean
@@ -130,7 +142,8 @@ export default Vue.extend<Data, Methods, Computed, unknown>({
130142
return {
131143
name: vxm.user.displayName,
132144
email: vxm.user.email,
133-
password: '',
145+
oldPassword: '',
146+
newPassword: '',
134147
confirmation: '',
135148
error: false,
136149
completion: false,
@@ -139,35 +152,34 @@ export default Vue.extend<Data, Methods, Computed, unknown>({
139152
},
140153
computed: {
141154
passwordConfirm() {
142-
if (this.password) {
155+
if (this.newPassword) {
143156
// 6文字以上であること
144157
const reg = new RegExp(/[ -~]{6,}$/)
145-
const response = reg.test(this.password)
158+
const response = reg.test(this.newPassword)
146159
if (!response) {
147160
return this.$t(
148161
'common.user_data.labels.password_not_acceptable'
149162
).toString()
150163
}
151164
}
152-
if (this.password && this.confirmation) {
153-
if (this.password !== this.confirmation) {
165+
if (this.newPassword && this.confirmation) {
166+
if (this.newPassword !== this.confirmation) {
154167
return this.$t('common.user_data.labels.password_not_same').toString()
155168
}
156169
return ''
157170
}
158171
return ''
159172
},
160173
disableRegisterButton() {
161-
if (this.email && this.name) {
162-
if (this.password !== this.confirmation) {
163-
return true
164-
}
174+
if (this.email || this.name) {
175+
return false
176+
}
177+
if (this.oldPassword && this.newPassword === this.confirmation) {
165178
const reg = new RegExp(/[ -~]{6,}$/)
166-
const response = reg.test(this.password)
167-
if (!response) {
168-
return true
179+
const response = reg.test(this.newPassword)
180+
if (response) {
181+
return false
169182
}
170-
return false
171183
}
172184
return true
173185
},
@@ -178,47 +190,37 @@ export default Vue.extend<Data, Methods, Computed, unknown>({
178190
const user = await Auth.currentAuthenticatedUser()
179191
if (user) {
180192
if (this.email !== vxm.user.email) {
181-
if (this.email) {
182-
user
183-
.updateEmail(this.email)
184-
.then(() => {
185-
vxm.user.login()
186-
})
187-
.catch(() => {
188-
this.error = true
189-
this.loading = false
190-
})
193+
try {
194+
await Auth.updateUserAttributes(user, {
195+
email: this.email,
196+
})
197+
await this.$router.push('/user/verifyNewEmail')
198+
} catch {
199+
this.error = true
200+
this.loading = false
191201
}
192202
}
193203
if (this.name !== vxm.user.displayName) {
194-
// firebase
195-
// .firestore()
196-
// .collection('users')
197-
// .doc(user.uid)
198-
// .update({
199-
// username: this.name,
200-
// })
201-
// .then(() => {
202-
// vxm.user.login()
203-
// })
204-
// .catch(() => {
205-
// this.error = true
206-
// this.loading = false
207-
// })
204+
try {
205+
await Auth.updateUserAttributes(user, {
206+
name: this.name,
207+
})
208+
await this.$router.push('/edit')
209+
} catch {
210+
this.error = true
211+
this.loading = false
212+
}
208213
}
209-
if (this.password) {
210-
// user
211-
// .updatePassword(this.password)
212-
// .then(() => {
213-
// vxm.user.login()
214-
// })
215-
// .catch(() => {
216-
// this.error = true
217-
// this.loading = false
218-
// })
214+
if (this.newPassword) {
215+
try {
216+
await Auth.changePassword(user, this.oldPassword, this.newPassword)
217+
await this.$router.push('/edit')
218+
} catch {
219+
this.error = true
220+
this.loading = false
221+
}
219222
}
220223
}
221-
await this.$router.push('/edit')
222224
},
223225
async doLogout(): Promise<void> {
224226
try {

‎src/pages/user/verify.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<base-bottom-sheet-layer
44
fullscreen
55
:title="$t('pages.user_verify.title')"
6-
title-en="LOGIN"
6+
title-en="VERIFY EMAIL"
77
>
88
<template v-slot:LayerContents>
99
<dl>

‎src/pages/user/verifyNewEmail.vue‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<template>
2+
<div>
3+
<base-bottom-sheet-layer
4+
fullscreen
5+
:title="$t('pages.user_verify_new_email.title')"
6+
title-en="VERIFY NEW EMAIL"
7+
>
8+
<template v-slot:LayerContents>
9+
<dl>
10+
<dt class="SignIn-ItemTitle">
11+
{{ $t('common.user_data.labels.email') }}
12+
</dt>
13+
<dd class="SignIn-Item">
14+
<base-input-field
15+
v-model="email"
16+
label="[email protected]"
17+
require
18+
type="email"
19+
/>
20+
</dd>
21+
<dt class="SignIn-ItemTitle">
22+
{{ $t('common.user_data.labels.verification_code') }}
23+
</dt>
24+
<dd class="SignIn-Item">
25+
<base-input-field
26+
v-model="verification_code"
27+
:label="$t('common.user_data.labels.verification_code')"
28+
require
29+
type="number"
30+
/>
31+
</dd>
32+
</dl>
33+
</template>
34+
<template v-slot:LayerFooter>
35+
<div class="SignIn-ButtonOuter">
36+
<base-action-button
37+
:is-disabled="disableLogin"
38+
:is-loading="loading"
39+
class="SignIn-Button"
40+
:text="$t('common.general.buttons.verify')"
41+
theme="primary"
42+
@click="doVerify"
43+
/>
44+
<v-btn
45+
:disabled="loading"
46+
block
47+
class="button"
48+
color="#ffffff"
49+
height="60px"
50+
text
51+
to="/"
52+
>
53+
<span>{{ $t('common.general.buttons.go_back') }}</span>
54+
</v-btn>
55+
</div>
56+
</template>
57+
</base-bottom-sheet-layer>
58+
<v-snackbar v-model="error" :timeout="5000" top color="#C01B61">
59+
{{ $t('pages.user_verify.error.invalid') }}
60+
</v-snackbar>
61+
</div>
62+
</template>
63+
64+
<script lang="ts">
65+
import Vue from 'vue'
66+
import BaseBottomSheetLayer from '@/components/BaseBottomSheetLayer.vue'
67+
import BaseActionButton from '@/components/BaseActionButton.vue'
68+
import BaseInputField from '@/components/BaseInputField.vue'
69+
import { Auth } from 'aws-amplify'
70+
71+
export default Vue.extend({
72+
components: { BaseBottomSheetLayer, BaseActionButton, BaseInputField },
73+
layout: 'background',
74+
middleware: 'authenticated',
75+
data() {
76+
return {
77+
email: '',
78+
verification_code: '',
79+
loading: false,
80+
error: false,
81+
}
82+
},
83+
computed: {
84+
disableVerify(): boolean {
85+
return !(
86+
this.email &&
87+
this.verification_code &&
88+
this.email.match(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)
89+
)
90+
},
91+
},
92+
methods: {
93+
async doVerify(): Promise<void> {
94+
this.loading = true
95+
await Auth.verifyCurrentUserAttributeSubmit(
96+
'email',
97+
this.verification_code
98+
)
99+
.then(() => {
100+
this.$router.push('/user/classlist')
101+
})
102+
.catch(() => {
103+
this.loading = false
104+
this.error = true
105+
})
106+
},
107+
},
108+
})
109+
</script>
110+
111+
<style lang="scss" scoped>
112+
.SignIn-ItemTitle {
113+
font-size: 16px;
114+
font-weight: bold;
115+
color: $color-white;
116+
text-align: center;
117+
margin: 4px 0;
118+
}
119+
.SignIn-Item {
120+
margin: 20px 0;
121+
}
122+
.SignIn-ButtonOuter {
123+
justify-content: space-between;
124+
}
125+
.SignIn-Button {
126+
flex: 0 1 48%;
127+
}
128+
</style>

0 commit comments

Comments
 (0)