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

ユーザーセッティング画面実装 #80

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

ユーザーセッティング画面実装 #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
317d19b
仮作成
Kaki256 Dec 17, 2024
c7a2ea8
🍲 見た目の修正 + アイコンの追加
Kaki256 Dec 19, 2024
e588edb
🍇 traQ アイコン
Kaki256 Dec 19, 2024
8102cb3
🍩 traQ アイコンを入れる
Kaki256 Dec 19, 2024
e548c42
🌮 アイコンを追加
Kaki256 Dec 19, 2024
a0cf8ad
アイコンを追加 + 見た目の調整
Kaki256 Dec 19, 2024
cd83243
☕ SettingsView.vue から `Settings` を削除
Kaki256 Dec 19, 2024
d84aa85
🍱 コンポーネントを使う
Kaki256 Dec 28, 2024
b7da2ce
🍫 必要ない svg ファイルを削除
Kaki256 Dec 28, 2024
fb8a282
SettingsProfile 修正
Kaki256 Dec 28, 2024
fd3c32e
fetchUserData
Kaki256 Dec 28, 2024
376d954
🥯 ID のケースが違いました～
Kaki256 Dec 28, 2024
4b0a17e
Merge branch 'main' of github.com:traP-jp/traO-Judge-frontend into Pi…
Kaki256 Jan 16, 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
2 changes: 1 addition & 1 deletion src/assets/service_icons/github.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/assets/service_icons/traq.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/assets/status_icons/check.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/views/SettingsView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

<template>
<div>
<h1>Settings</h1>
<RouterView />
</div>
</template>
Expand Down
160 changes: 157 additions & 3 deletions src/views/settings/SettingsAccount.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,162 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
import SideMenuUserSetting from '@/components/Navigations/SideMenu/SideMenuUserSetting.vue';
import PrimaryButton from '@/components/Controls/PrimaryButton.vue';
import PlainTextbox from '@/components/Controls/Textbox/PlainTextbox.vue';
import PasswordTextbox from '@/components/Controls/Textbox/PasswordTextbox.vue';
import EmailTextbox from '@/components/Controls/Textbox/EmailTextbox.vue';

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';

const username = ref<string>('');
const email = ref<string>('');
const currentPassword = ref<string>('');
const newPassword = ref<string>('');
const confirmPassword = ref<string>('');

interface Service {
name: string;
linked: boolean;
ID: string;
icon: string;
}

const services = ref<Service[]>([
{ name: 'GitHub', linked: false, ID: '', icon: GitHubIcon },
{ name: 'Google', linked: false, ID: '', icon: GoogleIcon },
{ name: 'traQ', linked: false, ID: '', icon: traQIcon },
]);

function toggleLink(service: Service) {
console.log(`TODO: ${service.name} との連携を${service.linked ? '解除' : '開始'}する`);
}

function changeUsername() {
console.log('TODO: ユーザー名の変更を反映する');
}

function changeEmail() {
console.log('TODO: メールアドレスの変更を反映する');
}

function changePassword() {
console.log('TODO: パスワードの変更を反映する');
}

async function fetchUserData() {
try {
Copy link
Collaborator

Choose a reason for hiding this comment

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

この辺り自前実装してくださってありがとうございます！ただ，APIの関数は基本的に@/api/generated/apis/以下に定義してある自動生成の関数がありますので，こちらを利用する形でお願いいたします:pray:
API定義周りで若干の変更が入っているので，mainの変更をマージしてもらってから作業してもらえると良いと思います。

合わせて，コメントの方でいただいていた質問に回答しておきます。

User 型がどこかで定義されていたりしますか

これは@/api/generated/modelsで定義されています。(このコードであれば明示的にUser型を宣言せずともgetMeを呼び出すだけで事足りるとは思います。)

モックサーバー立てて 'http://localhost:4010/users/me' にアクセスすることで情報を取れることは確認しましたが、本番用のリンクがこれでいいのかわからない

本番用のリンクはまだ確定していないです:gomen:前述した通り，自動生成の関数を利用すれば自動的にベースが設定されますので，このコードを書く上では気にしなくても問題ないです。

const response = await axios.get('/api/users/me');
console.log(response);
const user = response.data;
services.value = services.value.map(service => {
switch (service.name) {
case 'GitHub':
console.log(user.githubId);
service.linked = user.githubId !== null;
service.ID = user.githubId;
break;
case 'traQ':
console.log(user.traqId);
service.linked = user.traqId !== null;
service.ID = user.traqId;
break;
case 'Google':
console.log('TODO: Google との連携状況を取得する');
break;
default:
break;
}
return service;
});
} catch (error) {
console.error('Error fetching user data:', error);
}
}

onMounted(() => {
fetchUserData();
});
</script>

<template>
<div>
<h2>Settings Account</h2>
<div class="flex gap-12 px-6 py-8" style="font-family: 'Open Sans', 'Noto Sans', sans-serif;">
<SideMenuUserSetting />
Copy link
Collaborator

Choose a reason for hiding this comment

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

この部分のフォントスタイルはtailwind.config.jsに定義してあるので，そちらのカスタムクラスを利用するようにしてください！

<div class="flex flex-col gap-6 p-3" style="width: 800px;">
<div class="flex flex-col gap-3 pb-3">
<h2 class="h-9 border-b-2 pb-2 text-xl font-medium" style="border-color: #D8D8D8B2;">基本情報</h2>
<div class="flex-col">
Copy link
Collaborator

Choose a reason for hiding this comment

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

この部分のカラーコードはtailwind.config.jsに定義してあるので，そちらのカスタムクラスを利用するようにしてください！(他のカラーコードが直書きされている部分も同様に修正をお願いします。)

<label class="text-sm font-medium" for="username">ユーザー名</label>
<div class="flex items-center gap-2">
<PlainTextbox v-model="username" />
<PrimaryButton text="変更" @click="changeUsername" />
</div>
</div>
<div class="flex-col">
Copy link
Collaborator

Choose a reason for hiding this comment

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

この辺りはネストを一つ落とせそうです。例えば下のように

        <label class="text-sm font-medium" for="username">ユーザー名</label>
        <div class="flex items-center gap-2">
          <PlainTextbox id="username" v-model="username" />
          <PrimaryButton text="変更" @click="changeUsername" />
        </div>

他の類似部分もネストを減らしてもらえると良いと思います！
また，Textboxに対してforと対応づくidを指定してもらえると助かります:pray:
今まではコンポーネントの実装に抜けがあったのですが，修正PRがマージされているので，最新のmainブランチを取り込んでからidの指定をお願いいたします。(これは他すべてのTextbox系コンポーネントについても同様です。)

<label class="text-sm font-medium" for="email">メールアドレス</label>
<div class="flex items-center gap-2">
<EmailTextbox v-model="email" />
<PrimaryButton text="変更" @click="changeEmail" />
</div>
</div>
</div>
<div class="flex flex-col gap-3 pb-3">
<h2 class="h-9 border-b-2 pb-2 text-xl font-medium" style="border-color: #D8D8D8B2;">パスワードの変更</h2>
<form class="flex flex-col gap-2" @submit.prevent="changePassword">
<input v-model="username" type="text" autocomplete="username" hidden />
<div class="flex-col">
<label class="text-sm font-medium" for="current-password">現在のパスワード</label>
<div class="flex items-center ">
<PasswordTextbox v-model="currentPassword" autocomplete="current-password" />
</div>
</div>
<div class="flex-col">
Comment on lines +111 to +116
Copy link
Collaborator

Choose a reason for hiding this comment

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

この部分も前述のようにネストが減らせそうなので，例えば以下のようにしてネストを減らしてもらえると助かります

          <label class="text-sm font-medium" for="current-password">現在のパスワード</label>
          <PasswordTextbox v-model="currentPassword"  id="current-password"  autocomplete="current-password" class="w-64" />

他の類似部分も同様に修正をお願いいたします

<label class="text-sm font-medium" for="new-password">新しいパスワード</label>
<div class="flex items-center ">
<PasswordTextbox v-model="newPassword" autocomplete="new-password" />
</div>
</div>
<div class="flex-col">
<label class="text-sm font-medium" for="confirm-password">新しいパスワード (確認)</label>
<div class="flex items-center ">
<PasswordTextbox v-model="confirmPassword" autocomplete="new-password" />
</div>
</div>
<div>
<PrimaryButton text="変更" type="submit" />
</div>
</form>
</div>
<div class="flex flex-col gap-3 pb-3">
<h2 class="h-9 border-b-2 pb-2 text-xl font-medium" style="border-color: #D8D8D8B2;">外部サービスとの連携</h2>
<div>
<div v-for="service in services" :key="service.name" class="flex-col border-b-2" style="border-color: #D8D8D8B2;">
Copy link
Collaborator

Choose a reason for hiding this comment

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

このdivはなくても支障がなさそうですので，削ってネストを浅くしてください

<div class="flex h-12 items-center gap-2.5">
<div class="flex items-center gap-2">
<img :src="service.icon" alt="" width="20" height="20" />
<label class="w-32">
{{ service.name }}
</label>
</div>
<span :style="[service.linked ? 'color: #16B179;' : 'color: #5F5F5F;']" class="flex w-32 gap-1">
{{ service.linked ? '連携済' : '未連携' }}
<img v-if="service.linked" :src="checkIcon" alt="" width="16" height="16" />
</span>
<span class="h-12 min-w-72 content-around text-base font-normal" style="color: #5F5F5F;">
{{ service.ID }}
</span>
<button class="mr-10 h-8 rounded border px-4 py-1 text-sm" style="border-color: #D8D8D8; color: #5F5F5F;" @click="toggleLink(service)">
{{ service.linked ? '連携解除' : '連携' }}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

Expand Down
31 changes: 28 additions & 3 deletions src/views/settings/SettingsProfile.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,33 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref } from 'vue';
import SideMenuUserSetting from '@/components/Navigations/SideMenu/SideMenuUserSetting.vue';
import PrimaryButton from '@/components/Controls/PrimaryButton.vue';

const words = ref<string>('');

function changeWords() {
console.log('TODO: ひとことの変更を反映する');
}

</script>

<template>
<div>
<h2>Settings Profile</h2>
<div class="flex gap-12 px-6 py-8" style="font-family: 'Open Sans', 'Noto Sans', sans-serif;">
<SideMenuUserSetting />
<div class="flex flex-col gap-2.5 p-3" style="width: 800px;">
<div class="flex flex-col gap-3 p-3">
<h2 class="h-9 border-b-2 pb-2 text-xl font-medium" style="border-color: #D8D8D8B2;">プロフィール</h2>
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-0.5">
<label class="text-sm font-medium" for="word">ひとこと</label>
<textarea v-model="words" class="rounded border px-3 py-1" style="height: 256px; width: 600px;"></textarea>
</div>
<div>
<PrimaryButton text="保存" @click="changeWords" />
</div>
</div>
</div>
</div>
</div>
</template>

Expand Down
Loading