新規登録関連画面の実装 #73
新規登録関連画面の実装 #73
Conversation
| <OAuthButton app="Github" mode="signup" class="w-full" /> | ||
| <OAuthButton app="Google" mode="signup" class="w-full" /> | ||
| <OAuthButton app="traQ" mode="signup" class="w-full" /> |
There was a problem hiding this comment.
この辺りの要素はgridクラスを使用して整列してもらえると良いと思います。
src/views/SignupView.vue
Outdated
| <div class="space-y-3 p-2.5"> | ||
| <div class="fontstyle-ui-body-strong text-left">メールアドレスで新規登録</div> | ||
| <EmailTextbox v-model="emailAddress" placeholder="メールアドレス" /> | ||
| <PrimaryButton text="次へ" class="w-full" @click="onEmailSignup" /> | ||
| <div class="fontstyle-ui-caption-link text-left"> | ||
| <a href="login">すでにアカウントをお持ちの場合</a> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
この辺りも同様にgridクラスを用いるのが良いと思います。
src/views/SignupRegisterView.vue
Outdated
| <div class="flex-1"> | ||
| <PlainTextbox v-model="username" /> | ||
| <div class="fontstyle-ui-caption-strong pt-1 text-text-secondary"> | ||
| 文字数は〇以上〇以下で、半角英数字とアンダースコアのみが使用できます。 |
There was a problem hiding this comment.
pタグとかで適当に囲ってあげた方が良いと思います。それから，僕の画面だとこの文字列が改行されてしまっているので，常に一行に収まることを保証したいです。
| style="height: calc(100vh - 56px)" | ||
| > | ||
| <div class="max-w-3xl space-y-5 rounded-2xl bg-white px-14 py-10"> | ||
| <div class="fontstyle-ui-title text-left">新規登録</div> |
There was a problem hiding this comment.
このようなformのタイトル？を表すようなものは全てlabel要素で書き換え，それぞれのformとfor，idにより対応づけをしてください。(このドキュメントを参照してください。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/label)
上記の修正をしても現状では正しくformがフォーカスされないと思いますが，それはTextboxコンポーネントの実装の問題なので別issueで作業しますl。
| class="flex items-center justify-center bg-background-tertiary px-8 py-6" | ||
| style="height: calc(100vh - 56px)" | ||
| > | ||
| <div class="max-w-3xl space-y-5 rounded-2xl bg-white px-14 py-10"> |
There was a problem hiding this comment.
以下の各種ラベルとフォームもgridで整列すると良さそうです。
src/views/SignupRegisterView.vue
Outdated
| <div class="flex-1"> | ||
| <PlainTextbox v-model="username" /> | ||
| <div class="fontstyle-ui-caption-strong pt-1 text-text-secondary"> | ||
| 文字数は〇以上〇以下で、半角英数字とアンダースコアのみが使用できます。 |
There was a problem hiding this comment.
正規表現を使ったvalidateを実装してもらえると助かります！字数制限は仮に5以上10以下などにしてください。
また，validateルールは例えばrules.tsのようなファイルを用意してそこに記述すると再利用できて良さそうなので，可能ならそうしてください。
|
traQでしていただいた質問に対してここで回答させていただきます。
これは全くその通りで，別issueで対応します。
これについて，traQによる認証はNeoShowcaseの機能を利用することを検討しているので，traQOAuthに関連するAPIを残すかどうかは考え中です:loading:
大半のケースにおいて正しい形式のJWTが渡されると予想されるので，毎回ページを開く際に検証する必要はない(つまり検証は最終的にそのほかのデータとともに投げるときで構わない)と個人的には考えています。 |
|
レビューありがとうございます！ご指摘いただいた箇所を修正しました |
…ession causing validator failure
src/views/SignupView.vue
Outdated
| <OAuthButton app="Github" mode="signup" class="w-full" /> | ||
| <OAuthButton app="Google" mode="signup" class="w-full" /> | ||
| <OAuthButton app="traQ" mode="signup" class="w-full" /> | ||
| </div> | ||
| </div> | ||
| <div class="flex-1 pl-4"> | ||
| <div class="space-y-3 p-2.5"> | ||
| <div class="grid space-y-3 p-2.5"> |
There was a problem hiding this comment.
ここが直接関係しているかはわかりませんが，メールアドレス入力フォームに文字を入れないとデザインより小さく表示されてしまっているようなので，修正をお願いします(おそらくボタンやフォームにw-[適切な幅サイズ]クラスを適用すれば良いと思います。)
|
traQOAuthについて，NeoShowcaseのユーザー認証を利用する方針で行こうと思うので，traQOAuthボタンを押したときの動作は，" |
|
ご指摘ありがとうございます |
Closes #57, #58 and #59