Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

パスワードリセットまわりの作成 #91

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
+180 −9
Open

パスワードリセットまわりの作成 #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
edf20ad
パスワードの再設定画面
ogu-kazemiya Dec 20, 2024
66a4e04
PWリセットメール送信後画面
ogu-kazemiya Dec 20, 2024
f5ce488
PW再設定フォーム画面
ogu-kazemiya Dec 20, 2024
c4ff00b
PWリセットのリクエスト送信
ogu-kazemiya Dec 21, 2024
c483f59
リセットしたPWのPOST
ogu-kazemiya Dec 27, 2024
85afc3e
PWリセットメールを再送できるように
ogu-kazemiya Dec 27, 2024
63f4a64
template部分の構造の修正いろいろ
ogu-kazemiya Jan 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 48 additions & 3 deletions src/views/ResetPasswordAfterMailView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,53 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import router from '@/router'
import { AuthenticationApi } from '@/api/generated'
import type { Email } from '@/api/generated'

import BorderedButton from '@/components/Controls/BorderedButton.vue'
import PrimaryButton from '@/components/Controls/PrimaryButton.vue'

const email: string = history.state.email ?? ''
const emailAddress: Email = { email: email }

const closeWindow = () => {
router.push('/')
}

const requestResetPassword = async () => {
console.log(email)
const authApi = new AuthenticationApi()
await authApi.postRequestResetPassword({ email: emailAddress })
router.push({ path: '/reset-password/after-mail', state: { email: email } })
}
</script>

<template>
<div>
<h1>Reset Password After Mail</h1>
<div class="flex h-[calc(100vh-56px)] items-center justify-center bg-background-secondary">
<div
class="flex w-[600px] flex-col items-start justify-center gap-6 rounded-[15px] bg-background-primary px-14 py-10"
>
ogu-kazemiya marked this conversation as resolved.
Show resolved Hide resolved
<h1 class="fontstyle-ui-title text-[#1E1E1E]">メールを送信しました</h1>
<div class="flex flex-col items-start gap-2 self-stretch">
<p class="fontstyle-ui-body text-[#3A3A3A]">
60分以内に、メールに記載されたリンクからパスワードの再設定を行ってください。
</p>
<p class="fontstyle-ui-body text-[#3A3A3A]">
入力されたメールアドレスがお使いのアカウントに登録されていない場合、メールは送信されません。
</p>
</div>
<div class="flex items-center justify-center gap-3 self-stretch">
<PrimaryButton
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここ意味のまとまりをわかりやすくするためにform要素とか使っても良さそう

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

「この画面を閉じる」ボタンは単なる画面遷移なので、まとめてform要素は適さないかなと思いました
入力欄とかがなくてもform要素にするものなんでしょうか？(よくわかっていないので教えてほしいです🙏)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

確かにサーバー側になんらかの情報を送るわけではないのでここでは使わなくて良さそうです，ごめんなさい:pray_shake:

text="この画面を閉じる"
class="flex shrink-0 grow basis-0 items-center justify-center gap-2.5 px-5 py-2"
@click="closeWindow"
/>
<BorderedButton
text="メールを再送信する"
class="flex shrink-0 grow basis-0 items-end justify-center gap-2.5 px-5 py-2"
@click="requestResetPassword"
/>
</div>
</div>
</div>
</template>

Expand Down
86 changes: 83 additions & 3 deletions src/views/ResetPasswordFormView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,88 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { AuthenticationApi } from '@/api/generated'

import PrimaryButton from '@/components/Controls/PrimaryButton.vue'
import PasswordTextbox from '@/components/Controls/Textbox/PasswordTextbox.vue'
import { passwordValidator } from '@/utils/validator'

const route = useRoute()
const token = Array.isArray(route.query.token) ? undefined : route.query.token

const password = ref<string>('')
const confirmation = ref<string>('')
const isValid = computed(() => passwordValidator(password.value))
const isConfirmed = computed(() => password.value === confirmation.value)

const submit = async () => {
const authApi = new AuthenticationApi()
await authApi.postResetPassword({
tokenWithUserid: token ?? undefined,
resetPasswordRequest: {
password: password.value,
token: token ?? ''
}
})
}
</script>

<template>
<div>
<h1>Reset Password Form</h1>
<div class="flex h-[calc(100vh-56px)] items-center justify-center bg-background-secondary">
<div
class="flex w-[800px] flex-col items-start justify-center gap-5 rounded-[15px] bg-background-primary px-14 py-10"
>
<h1 class="fontstyle-ui-title text-[#1E1E1E]">パスワードの再設定</h1>
<div class="flex flex-col items-start gap-2 self-stretch">
<p class="fontstyle-ui-body text-right text-[#3A3A3A]">パスワードを再設定します。</p>
</div>
<form class="flex flex-col items-start self-stretch p-2.5">
<div class="flex items-center justify-center gap-6 self-stretch">
<div class="flex w-50 items-center justify-end gap-2.5">
<label for="password" class="fontstyle-ui-body-strong text-[#3A3A3A]">パスワード</label>
</div>
<div class="flex grow flex-col gap-1">
<PasswordTextbox
id="password"
v-model="password"
:error-message="
isValid || password.length === 0 ? '' : 'このパスワードは使用できません'
"
class="grow gap-1"
/>
<div class="flex shrink-0 grow basis-0 flex-col items-start justify-center">
<p class="fontstyle-ui-caption-strong text-text-secondary">
文字数は〇以上〇以下で、半角英数字と記号が使用できます。
</p>
<p class="fontstyle-ui-caption-strong text-text-secondary">
英字、数字、記号がそれぞれ1文字以上含まれている必要があります。
</p>
</div>
</div>
</div>
<div class="flex items-center justify-center gap-6 self-stretch pb-5">
<div class="flex w-50 items-center justify-end gap-2.5">
<label for="confirmation" class="fontstyle-ui-body-strong text-[#3A3A3A]">パスワード (確認)</label>
</div>
<PasswordTextbox
id="confirmation"
v-model="confirmation"
:error-message="
isConfirmed || confirmation.length === 0 ? '' : 'パスワードが一致しません'
"
class="grow gap-1"
/>
</div>
<div class="flex items-center justify-center gap-4 self-stretch">
<PrimaryButton
text="再設定"
:disabled="!(isValid && isConfirmed)"
class="flex items-end justify-center gap-2.5 px-8 py-2"
@click="submit"
/>
</div>
</form>
</div>
</div>
</template>

Expand Down
52 changes: 49 additions & 3 deletions src/views/ResetPasswordView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,54 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref } from 'vue'
import router from '@/router'
import { AuthenticationApi } from '@/api/generated'
import type { Email } from '@/api/generated'
import isEmail from 'validator/lib/isEmail'

import EmailTextbox from '@/components/Controls/Textbox/EmailTextbox.vue'
import PrimaryButton from '@/components/Controls/PrimaryButton.vue'

const emailAddress = ref<Email>({
email: ''
})

const requestResetPassword = async () => {
if (!isEmail(emailAddress.value.email)) return
const authApi = new AuthenticationApi()
await authApi.postRequestResetPassword({ email: emailAddress.value })
router.push({ path: '/reset-password/after-mail', state: { email: emailAddress.value.email } })
}
</script>

<template>
<div>
<h1>Reset Password</h1>
<div class="flex h-[calc(100vh-56px)] items-center justify-center bg-background-secondary">
<div
class="flex w-[800px] flex-col items-start justify-center gap-4 rounded-[15px] bg-background-primary px-14 py-10"
>
<h1 class="fontstyle-ui-title text-[#1E1E1E]">パスワードの再設定</h1>
<div class="flex items-start gap-4 self-stretch">
<div class="flex shrink-0 grow basis-0 flex-col items-start gap-2 p-2">
<p class="fontstyle-ui-body text-[#3A3A3A]">再設定用のリンクをメールで送信します。</p>
<p class="fontstyle-ui-body text-[#3A3A3A]">
60分以内に、メールに記載されたリンクから再設定を行ってください。
</p>
</div>
<div class="h-[100px] w-px bg-border-secondary"></div>
<form class="flex shrink-0 grow basis-0 flex-col items-start gap-3 p-2">
<EmailTextbox
v-model="emailAddress.email"
placeholder="メールアドレス"
class="flex items-center gap-2.5 self-stretch"
/>
<PrimaryButton
text="送信"
:disabled="!isEmail(emailAddress.email)"
class="flex items-center justify-center gap-2.5 self-stretch px-5 py-2"
@click="requestResetPassword"
/>
</form>
</div>
</div>
</div>
</template>

Expand Down
Loading