ユーザーセッティング画面実装 #80
ユーザーセッティング画面実装 #80
Conversation
There was a problem hiding this comment.
実装ありがとうございます！ロジック面，デザイン面とも必要な事項が揃っておりとても良いと思います。
このPR内ではサイドメニューやフォーム，ボタンなどを直接実装してもらっていると思いますが，そちらについては@/components内に定義された各種コンポーネントで再定義していただければと思います。ボタンなどの配置のためのクラスはそのままに，buttonやinputなどをそのままコンポーネントで置き換えてもらえればと思います。
自分の周知不足もあり手戻りが多くなってしまって大変申し訳ございませんが，よろしくお願いします:pray:
その他少しですがコメントもしてあるのでご確認をお願いします。
| import GitHubIcon from '@/assets/service_icons/github.svg'; | ||
| import GoogleIcon from '@/assets/service_icons/google.svg'; | ||
| import traQIcon from '@/assets/service_icons/traq.svg'; | ||
|
|
||
| import checkIcon from '@/assets/status_icons/check.svg'; | ||
| import profileIcon from '@/assets/status_icons/profile.svg'; | ||
| import accountIcon from '@/assets/status_icons/account.svg'; |
There was a problem hiding this comment.
importは先頭にまとめてしまった方が読みやすいと思います
| function selectItem(item: string) { | ||
| selectedItem.value = item; | ||
| router.push(`/settings/${item}`); | ||
| } |
There was a problem hiding this comment.
これでも全く問題ないのですが，tOJ-frontの他のコードではarrowを用いた関数式の形式で関数を定義しているので，それに合わせてもらえるとありがたいです:pray:
それぞれ微妙に動作が異なりますが，今回はそのまま書き換えて問題ないと思います。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/function
| <aside class="gap-3 p-3" style="min-width: 250px;"> | ||
| <h2 class="h-10 pb-3 text-xl font-medium">設定</h2> | ||
| <ul> | ||
| <li class="mb-3"> | ||
| <a | ||
| href="/settings/account" | ||
| class="flex rounded px-4 py-1" | ||
| style="font-weight: 500; background-color: #FFE5E5; color: #8E3535; gap: 5px;" | ||
| @click.prevent="selectItem('account')" | ||
| > | ||
| <img :src="accountIcon" alt="" width="20" height="20" /> | ||
| <p>アカウント</p> | ||
| </a> | ||
| </li> | ||
| <li class="mb-3"> | ||
| <a | ||
| href="/settings/profile" | ||
| class="flex rounded px-4 py-1" | ||
| style="font-weight: 500; background-color: white; color: #5F5F5F; gap: 5px;" | ||
| @click.prevent="selectItem('profile')" | ||
| > | ||
| <img :src="profileIcon" alt="" width="20" height="20" style="filter: invert(33%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(95%) contrast(85%);" /> | ||
| <p>プロフィール</p> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </aside> |
There was a problem hiding this comment.
これは僕が周知していなかったのが悪い部分も大きいのですが，ページ左側のメニュー/ボタン/フォームなど多くのページで共通に使われることがわかっているものはすでにコンポーネントとしてcomponents以下に定義されています。このページのメニュー，ボタン，フォームなどもそちらを使って描画していただくようにお願いいたします。少し手戻りが多くなってしまって申し訳ないです:pray_shake:
| <div class="flex-col"> | ||
| <label class="text-sm font-medium" for="username">ユーザー名</label> | ||
| <div class="flex items-center gap-2"> | ||
| <input id="username" v-model="username" type="text" class="h-8 w-48 rounded border" style="border-color: #D8D8D8; padding-left: 10px; color: #3A3A3A;" /> |
There was a problem hiding this comment.
@/components/Controls/Textbox/PlainTextbox.vueを使って再定義をお願いします:pray:
| <label class="text-sm font-medium" for="username">ユーザー名</label> | ||
| <div class="flex items-center gap-2"> | ||
| <input id="username" v-model="username" type="text" class="h-8 w-48 rounded border" style="border-color: #D8D8D8; padding-left: 10px; color: #3A3A3A;" /> | ||
| <button class="h-10 w-20 rounded-lg" style="background-color: #AC004B; color: white;" @click="changeUsername">変更</button> |
There was a problem hiding this comment.
@/components/Controls/PrimaryButton.vueを使って再定義をお願いします:pray:
| <div class="flex-col"> | ||
| <label class="text-sm font-medium" for="email">メールアドレス</label> | ||
| <div class="flex items-center gap-2"> | ||
| <input id="email" v-model="email" type="email" class="h-8 w-96 rounded border" style="border-color: #D8D8D8; padding-left: 10px; color: #3A3A3A;" /> |
There was a problem hiding this comment.
@/components/Controls/Textbox/EmailTextbox.vueを使って再定義をお願いします:pray:
| <label class="text-sm font-medium" for="email">メールアドレス</label> | ||
| <div class="flex items-center gap-2"> | ||
| <input id="email" v-model="email" type="email" class="h-8 w-96 rounded border" style="border-color: #D8D8D8; padding-left: 10px; color: #3A3A3A;" /> | ||
| <button class="h-10 w-20 rounded-lg" style="background-color: #AC004B; color: white;" @click="changeEmail">変更</button> |
There was a problem hiding this comment.
@/components/Controls/PrimaryButton.vueを使って再定義をお願いします:pray:
| <h2 class="h-9 border-b-2 pb-2 text-xl font-medium" style="border-color: #D8D8D8B2;">パスワードの変更</h2> | ||
| <div class="flex flex-col gap-2"> | ||
| <div class="flex-col"> | ||
| <label class="text-sm font-medium" for="current-password">現在のパスワード</label> | ||
| <div class="flex items-center "> | ||
| <input id="current-password" v-model="currentPassword" type="password" class="h-8 w-72 rounded border" style="border-color: #D8D8D8; padding-left: 10px; color: #3A3A3A;" /> | ||
| </div> | ||
| </div> | ||
| <div class="flex-col"> | ||
| <label class="text-sm font-medium" for="new-password">新しいパスワード</label> | ||
| <div class="flex items-center "> | ||
| <input id="new-password" v-model="newPassword" type="password" class="h-8 w-72 rounded border" style="border-color: #D8D8D8; padding-left: 10px; color: #3A3A3A;" /> | ||
| </div> | ||
| </div> | ||
| <div class="flex-col"> | ||
| <label class="text-sm font-medium" for="confirm-password">新しいパスワード (確認)</label> | ||
| <div class="flex items-center "> | ||
| <input id="confirm-password" v-model="confirmPassword" type="password" class="h-8 w-72 rounded border" style="border-color: #D8D8D8; padding-left: 10px; color: #3A3A3A;" /> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <button class="h-10 w-20 rounded-lg" style="background-color: #AC004B; color: white;" @click="changePassword"> | ||
| 変更 | ||
| </button> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
@/components/Controls/Textbox/PasswordTextbox.vueと@/components/Controls/PrimaryButton.vueを使って再定義をお願いします:pray:
| const services = ref<Service[]>([ | ||
| { name: 'GitHub', linked: false, ID: '', icon: GitHubIcon }, | ||
| { name: 'Google', linked: false, ID: '', icon: GoogleIcon }, | ||
| { name: 'traQ', linked: false, ID: '@test_user', icon: traQIcon }, | ||
| ]); |
There was a problem hiding this comment.
ここの値のlinkedについては，ページのマウント時に/users/meを叩いて，そのときの値を元にlinkされているか決めたいですね。
一旦，GitHubとtraQのlinkedについてはそれぞれ/users/meのレスポンスのgithubIdとtraqIdがnullかどうかで判定するようにしてみてください。(Googleは連携しているかどうか判定できるプロパティがなかったので別issueに直しておきます。)
参照; https://github.com/traP-jp/traO-Judge-docs/blob/develop/api/backend/frontend-backend.yaml
| import { useRouter } from 'vue-router'; | ||
|
|
||
| const router = useRouter(); | ||
| const selectedItem = ref<string>(window.location.pathname.split('/').pop() || 'account'); |
There was a problem hiding this comment.
このページが呼び出されるのは/settings/accountだけなのでわざわざパスからとってこなくても良い気がします。(Profileの方も同様に。)
実装方針とかでおかしな点などあったら教えてください
close #64