アカウント登録画面 - バリデーションチェック+UI/UX

[takecchi]

Community Issue

cuculus-dev/.github#28

概要

現状フロント側でバリデーションチェックを行なっていないので、入力制限やバリデーションチェックを行うようにする。
また、ユーザー名や表示名に関する取り扱いなど不明瞭な情報の埋め合わせをする。
（※ ユーザー名は後で変更可能です。など）

エラーが出た際にエラーが出た理由と表示をわかりやすくする。
参考: https://mui.com/material-ui/react-text-field/#validation

Todo

• やることリスト

[takecchi]

フロントとバックエンドで共通化出来ると良い

[takecchi]

フロントエンドとバックエンド共通のバリデータとして以下を使用する。
https://github.com/cuculus-dev/validator

npm install @cuculus/validator
でインストール可能

[takecchi]

現状、ざっくりとしたパターンしか決まっていないので以下を決める必要あり。

• メールアドレス
• パスワード ... 文字数など極端に弱くなければ良い？
• ユーザー名 ... @〇〇の部分
• 表示名
• 認証コード
• 招待コード