ysc/thebet365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin,player,api): 玩家账号密码管理与代理上下分

Browse Source 
新增玩家头像、可查密码与全局改密/改账号开关；玩家资料页合并账号密码展示；代理直属玩家列表支持自定义上下分。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mars
2026-06-04 11:36:53 +08:00
parent f76728dc3e
commit a8e4ead618
81 changed files with 1763 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
apps/player/src/assets/images/vs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

125
apps/player/src/components/PlayerAvatarModal.vue Normal file
View File

@@ -0,0 +1,125 @@
<script setup lang="ts">
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import PlayerAvatarPicker from './PlayerAvatarPicker.vue';
const props = defineProps<{
open: boolean;
modelValue: string | null;
}>();
const emit = defineEmits<{
close: [];
confirm: [value: string | null];
}>();
const { t } = useI18n();
const draft = ref<string | null>(null);
watch(
() => props.open,
(visible) => {
if (visible) draft.value = props.modelValue;
},
);
function close() {
emit('close');
}
function confirm() {
emit('confirm', draft.value);
}
</script>
<template>
<Teleport to="body">
<div v-if="open" class="overlay" @click.self="close">
<div class="modal" role="dialog" aria-modal="true" :aria-label="t('profile.avatar')">
<button type="button" class="close-x" :aria-label="t('bet.cancel')" @click="close">✕</button>
<h3 class="title">{{ t('profile.avatar') }}</h3>
<PlayerAvatarPicker v-model="draft" />
<div class="actions">
<button type="button" class="btn-cancel" @click="close">{{ t('bet.cancel') }}</button>
<button type="button" class="btn-confirm btn-gold-outline" @click="confirm">
{{ t('profile.avatar_confirm') }}
</button>
</div>
</div>
</div>
</Teleport>
</template>
<style scoped>
.overlay {
position: fixed;
inset: 0;
z-index: 210;
background: rgba(0, 0, 0, 0.72);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
backdrop-filter: blur(4px);
}
.modal {
position: relative;
width: 100%;
max-width: 360px;
max-height: 85vh;
overflow-y: auto;
background: linear-gradient(165deg, #1a1810 0%, #121212 45%, #0a0a0a 100%);
border: 1px solid var(--border-gold-soft);
border-radius: var(--radius);
padding: 16px 14px 14px;
box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.08);
}
.close-x {
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--border);
background: rgba(0, 0, 0, 0.35);
color: var(--text-muted);
font-size: 12px;
line-height: 1;
padding: 0;
}
.title {
margin: 0 28px 12px 0;
font-size: 15px;
font-weight: 800;
color: var(--primary-light);
}
.actions {
display: flex;
gap: 8px;
margin-top: 12px;
}
.btn-cancel,
.btn-confirm {
flex: 1;
min-height: 40px;
border-radius: 6px;
font-size: 13px;
font-weight: 800;
}
.btn-cancel {
border: 1px solid var(--border);
background: #0a0a0a;
color: var(--text-muted);
}
.btn-confirm {
border: none;
}
</style>

162
apps/player/src/components/PlayerAvatarPicker.vue Normal file
View File

@@ -0,0 +1,162 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { BUILTIN_PLAYERS, playerAvatarUrl } from '@thebet365/shared';
const props = defineProps<{
modelValue: string | null;
}>();
const emit = defineEmits<{
'update:modelValue': [value: string | null];
}>();
const { t } = useI18n();
const keyword = ref('');
const filtered = computed(() => {
const q = keyword.value.trim().toLowerCase();
if (!q) return BUILTIN_PLAYERS;
return BUILTIN_PLAYERS.filter(
(p) =>
p.name.toLowerCase().includes(q) ||
p.country.toLowerCase().includes(q) ||
p.position.toLowerCase().includes(q),
);
});
function select(key: string) {
emit('update:modelValue', props.modelValue === key ? null : key);
}
</script>
<template>
<div class="picker">
<div class="picker-head">
<label class="picker-label">{{ t('profile.avatar') }}</label>
<input
v-model="keyword"
type="search"
class="picker-search"
:placeholder="t('profile.avatar_search')"
/>
</div>
<div class="picker-grid">
<button
v-for="player in filtered"
:key="player.id"
type="button"
class="picker-item"
:class="{ active: modelValue === player.id }"
@click="select(player.id)"
>
<img :src="playerAvatarUrl(player.id) ?? ''" :alt="player.name" class="picker-photo" />
<span class="picker-name">{{ player.name }}</span>
<span class="picker-meta">{{ player.position }} · {{ player.country }}</span>
</button>
</div>
<p v-if="!filtered.length" class="picker-empty">{{ t('profile.avatar_empty') }}</p>
</div>
</template>
<style scoped>
.picker {
margin-bottom: 12px;
}
.picker-head {
margin-bottom: 10px;
}
.picker-label {
display: block;
font-size: 11px;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 6px;
}
.picker-search {
width: 100%;
padding: 8px 10px;
border-radius: 6px;
border: 1px solid var(--border);
background: #0a0a0a;
color: var(--text);
font-size: 13px;
}
.picker-search:focus {
outline: none;
border-color: var(--border-gold-soft);
}
.picker-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
max-height: 280px;
overflow-y: auto;
padding-right: 2px;
}
.picker-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 4px 6px;
border-radius: 8px;
border: 1px solid var(--border);
background: #0a0a0a;
cursor: pointer;
min-width: 0;
}
.picker-item.active {
border-color: var(--border-gold-soft);
box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.18);
background: rgba(212, 175, 55, 0.08);
}
.picker-photo {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
object-position: top;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.picker-name {
width: 100%;
font-size: 10px;
font-weight: 700;
color: var(--text);
text-align: center;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.picker-meta {
width: 100%;
font-size: 9px;
color: var(--text-muted);
text-align: center;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.picker-empty {
margin: 8px 0 0;
font-size: 12px;
color: var(--text-muted);
text-align: center;
}
</style>

27
apps/player/src/components/UserAvatarMenu.vue
View File

@@ -1,17 +1,25 @@
<script setup lang="ts">
import { ref, computed } from 'vue';
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { playerAvatarUrl, randomAvatarKey } from '@thebet365/shared';
import { useAuthStore } from '../stores/auth';
import { usePlayerProfile } from '../composables/usePlayerProfile';
const { t } = useI18n();
const auth = useAuthStore();
const router = useRouter();
const { avatarUrl, loadProfile } = usePlayerProfile();
const open = ref(false);
const initial = computed(() => {
const name = auth.user?.username ?? '?';
return name.charAt(0).toUpperCase();
const displayAvatarUrl = computed(() => {
if (avatarUrl.value) return avatarUrl.value;
const seed = auth.user?.username;
return seed ? playerAvatarUrl(randomAvatarKey(seed)) : null;
});
onMounted(() => {
void loadProfile();
});
function toggle() {
@@ -37,7 +45,7 @@ function logout() {
<template>
<div class="avatar-wrap">
<button type="button" class="avatar-btn" :aria-expanded="open" @click="toggle">
<span class="avatar-letter">{{ initial }}</span>
<img v-if="displayAvatarUrl" :src="displayAvatarUrl" alt="" class="avatar-img" />
</button>
<div v-if="open" class="avatar-menu">
@@ -68,6 +76,15 @@ function logout() {
justify-content: center;
cursor: pointer;
flex-shrink: 0;
overflow: hidden;
padding: 0;
}
.avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.avatar-letter {

2
apps/player/src/composables/usePlayerHome.ts
View File

@@ -9,6 +9,8 @@ export interface PlayerHomeMatch {
id: string;
homeTeamName: string;
awayTeamName: string;
homeTeamCode?: string;
awayTeamCode?: string;
startTime: string;
isHot?: boolean;
}

143
apps/player/src/composables/usePlayerProfile.ts Normal file
View File

@@ -0,0 +1,143 @@
import { ref, computed } from 'vue';
import { isValidAvatarKey, playerAvatarUrl, randomAvatarKey } from '@thebet365/shared';
import api from '../api';
type ProfileData = {
id?: string | number;
username?: string;
locale?: string;
preferences?: {
phone?: string | null;
email?: string | null;
avatarKey?: string | null;
allowPasswordChange?: boolean;
allowUsernameChange?: boolean;
viewablePassword?: string | null;
};
wallet?: { availableBalance: string; frozenBalance: string };
};
const AVATAR_CACHE_PREFIX = 'player_avatar_key:';
const profileRaw = ref<ProfileData | null>(null);
const loading = ref(false);
let loadPromise: Promise<void> | null = null;
let assigningDefault = false;
function profileSeed(profile: ProfileData | null): string {
if (!profile) return '';
return String(profile.id ?? profile.username ?? '');
}
function readCachedAvatarKey(seed: string): string | null {
if (!seed) return null;
try {
const key = localStorage.getItem(`${AVATAR_CACHE_PREFIX}${seed}`);
return key && isValidAvatarKey(key) ? key : null;
} catch {
return null;
}
}
function writeCachedAvatarKey(seed: string, key: string) {
if (!seed || !key) return;
try {
localStorage.setItem(`${AVATAR_CACHE_PREFIX}${seed}`, key);
} catch {
/* ignore */
}
}
function applyAvatarKey(key: string | null) {
if (!profileRaw.value) {
profileRaw.value = { preferences: { avatarKey: key } };
return;
}
profileRaw.value = {
...profileRaw.value,
preferences: {
...profileRaw.value.preferences,
avatarKey: key,
},
};
}
async function ensureDefaultAvatar() {
if (assigningDefault || !profileRaw.value) return;
const seed = profileSeed(profileRaw.value);
const current =
profileRaw.value.preferences?.avatarKey ?? readCachedAvatarKey(seed);
if (current && isValidAvatarKey(current)) {
applyAvatarKey(current);
return;
}
assigningDefault = true;
const key = randomAvatarKey(seed);
try {
try {
await api.patch('/player/profile', { avatarKey: key });
} catch {
/* 数据库未迁移等情况仍展示本地头像 */
}
applyAvatarKey(key);
writeCachedAvatarKey(seed, key);
} finally {
assigningDefault = false;
}
}
async function loadProfile(force = false) {
if (loadPromise) return loadPromise;
if (!force && profileRaw.value) {
await ensureDefaultAvatar();
return;
}
loadPromise = (async () => {
loading.value = true;
try {
const { data } = await api.get('/player/profile');
profileRaw.value = data.data ?? null;
await ensureDefaultAvatar();
} finally {
loading.value = false;
loadPromise = null;
}
})();
return loadPromise;
}
const avatarKey = computed(() => {
const saved = profileRaw.value?.preferences?.avatarKey;
if (saved && isValidAvatarKey(saved)) return saved;
const seed = profileSeed(profileRaw.value);
if (!seed) return null;
const cached = readCachedAvatarKey(seed);
if (cached) return cached;
return randomAvatarKey(seed);
});
const avatarUrl = computed(() => playerAvatarUrl(avatarKey.value));
function setAvatarKey(key: string | null) {
applyAvatarKey(key);
const seed = profileSeed(profileRaw.value);
if (key && seed) writeCachedAvatarKey(seed, key);
}
export function usePlayerProfile() {
return {
profileRaw,
loading,
avatarKey,
avatarUrl,
loadProfile,
setAvatarKey,
};
}

8
apps/player/src/layouts/MainLayout.vue
View File

@@ -13,6 +13,7 @@ import BottomNavIcon from '../components/BottomNavIcon.vue';
import { computed, onMounted, watch } from 'vue';
import { usePlayerHome } from '../composables/usePlayerHome';
import { useOnLocaleChange } from '../composables/useOnLocaleChange';
import { usePlayerProfile } from '../composables/usePlayerProfile';
const { t } = useI18n();
const auth = useAuthStore();
@@ -22,6 +23,7 @@ const slip = useBetSlipStore();
const showAnnouncement = computed(() => !route.path.startsWith('/profile'));
const { announcements, load: loadPlayerHome } = usePlayerHome();
const { loadProfile } = usePlayerProfile();
useOnLocaleChange(loadPlayerHome);
@@ -32,8 +34,12 @@ onMounted(() => {
watch(
() => auth.token,
(token) => {
if (token) void loadPlayerHome();
if (token) {
void loadPlayerHome();
void loadProfile(true);
}
},
{ immediate: true },
);
</script>

54
apps/player/src/main.ts
View File

@@ -174,6 +174,20 @@ const i18n = createI18n({
profile: {
edit: '修改资料',
language: '语言',
avatar: '选择头像',
avatar_change: '修改头像',
avatar_confirm: '确定',
section_contact: '联系方式',
section_account: '账号信息',
change_password: '修改密码',
show_password: '查看',
hide_password: '隐藏',
password_unavailable: '••••••••',
password_unavailable_hint: '密码不可查看，如需重置请联系客服',
section_password: '修改密码（可选）',
avatar_hint: '从内置球员中选择头像',
avatar_search: '搜索球员、位置或国家',
avatar_empty: '未找到匹配球员',
phone: '手机号',
email: '邮箱',
phone_placeholder: '请输入手机号',
@@ -193,6 +207,10 @@ const i18n = createI18n({
password_failed: '密码修改失败',
password_mismatch: '两次新密码不一致',
password_incomplete: '修改密码需填写当前密码、新密码及确认密码',
username_placeholder: '登录账号名',
username_readonly_hint: '账号名称由后台管理，如需修改请联系客服',
username_updated: '账号名称已更新',
password_disabled: '当前账号不允许自行修改密码，请联系客服',
rules_title: '投注规则',
rules_p1: '本平台第一版仅支持足球赛前盘，不含滚球、Cash Out、改单及系统串关。',
rules_p2: '串关为 2 串 1 至 5 串 1，不可同场串关；冠军盘、四分盘让球/大小不可进入串关。',
@@ -365,6 +383,20 @@ const i18n = createI18n({
profile: {
edit: 'Edit Profile',
language: 'Language',
avatar: 'Avatar',
avatar_change: 'Change avatar',
avatar_confirm: 'Confirm',
section_contact: 'Contact',
section_account: 'Account',
change_password: 'Change password',
show_password: 'Show',
hide_password: 'Hide',
password_unavailable: '••••••••',
password_unavailable_hint: 'Password not available; contact support to reset',
section_password: 'Change password (optional)',
avatar_hint: 'Choose from built-in player portraits',
avatar_search: 'Search player, position or country',
avatar_empty: 'No players found',
phone: 'Phone',
email: 'Email',
phone_placeholder: 'Phone number',
@@ -384,6 +416,10 @@ const i18n = createI18n({
password_failed: 'Password change failed',
password_mismatch: 'Passwords do not match',
password_incomplete: 'Fill current, new and confirm password to change password',
username_placeholder: 'Login username',
username_readonly_hint: 'Username is managed by admin; contact support to change',
username_updated: 'Username updated',
password_disabled: 'Password change is disabled for this account; contact support',
rules_title: 'Betting Rules',
rules_p1: 'Football pre-match only in v1. No live betting, Cash Out, bet edits, or system parlays.',
rules_p2: 'Parlays: 2–5 legs, different matches only. Outright and quarter-ball HDP/O-U are excluded from parlays.',
@@ -562,6 +598,20 @@ const i18n = createI18n({
profile: {
edit: 'Edit Profil',
language: 'Bahasa',
avatar: 'Avatar',
avatar_change: 'Tukar avatar',
avatar_confirm: 'Sahkan',
section_contact: 'Maklumat hubungan',
section_account: 'Akaun',
change_password: 'Tukar kata laluan',
show_password: 'Lihat',
hide_password: 'Sembunyi',
password_unavailable: '••••••••',
password_unavailable_hint: 'Kata laluan tidak tersedia; hubungi sokongan',
section_password: 'Tukar kata laluan (pilihan)',
avatar_hint: 'Pilih dari potret pemain terbina',
avatar_search: 'Cari pemain, posisi atau negara',
avatar_empty: 'Tiada pemain dijumpai',
phone: 'Telefon',
email: 'E-mel',
phone_placeholder: 'Nombor telefon',
@@ -581,6 +631,10 @@ const i18n = createI18n({
password_failed: 'Gagal tukar kata laluan',
password_mismatch: 'Kata laluan tidak sepadan',
password_incomplete: 'Isi kata laluan semasa, baharu dan pengesahan untuk menukar',
username_placeholder: 'Nama log masuk',
username_readonly_hint: 'Nama akaun diurus admin; hubungi sokongan untuk ubah',
username_updated: 'Nama akaun dikemas kini',
password_disabled: 'Akaun ini tidak dibenarkan tukar kata laluan; hubungi sokongan',
rules_title: 'Peraturan Pertaruhan',
rules_p1: 'Versi pertama: hanya bola sepak pra-perlawanan. Tiada live, Cash Out, edit pertaruhan atau parlay sistem.',
rules_p2: 'Parlay 2–5 perlawanan, bukan perlawanan sama. Outright dan suku bola HDP/O-U tidak boleh parlay.',

127
apps/player/src/views/HomeView.vue
View File

@@ -4,14 +4,34 @@ import { useI18n } from 'vue-i18n';
import emptyMatchesImg from '../assets/images/empty-matches.svg';
import BannerCarousel from '../components/BannerCarousel.vue';
import { usePlayerHome } from '../composables/usePlayerHome';
import { teamFlagUrl } from '../utils/teamFlag';
const { t } = useI18n();
const { t, locale } = useI18n();
const router = useRouter();
const { banners, hotMatches, loading } = usePlayerHome();
function goMatch(id: string) {
router.push(`/match/${id}`);
}
function formatKickoff(startTime: string) {
return new Date(startTime).toLocaleString(locale.value, {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
});
}
function homeFlag(match: (typeof hotMatches.value)[number]) {
return teamFlagUrl(match.homeTeamCode, match.homeTeamName);
}
function awayFlag(match: (typeof hotMatches.value)[number]) {
return teamFlagUrl(match.awayTeamCode, match.awayTeamName);
}
</script>
<template>
@@ -19,9 +39,23 @@ function goMatch(id: string) {
<BannerCarousel :banners="banners" />
<h2 class="section-title">{{ t('home.hot_matches') }}</h2>
<div v-for="match in hotMatches" :key="match.id" class="card match-card" @click="goMatch(match.id)">
<div class="match-teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</div>
<div class="match-time">{{ new Date(match.startTime).toLocaleString() }}</div>
<div
v-for="match in hotMatches"
:key="match.id"
class="card match-card"
@click="goMatch(match.id)"
>
<div class="match-info">
<div class="match-teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</div>
<div class="match-time">{{ formatKickoff(match.startTime) }}</div>
</div>
<div class="match-flags" aria-hidden="true">
<img v-if="homeFlag(match)" :src="homeFlag(match)" alt="" class="flag" />
<span v-else class="flag-ph">⚽</span>
<span class="vs">VS</span>
<img v-if="awayFlag(match)" :src="awayFlag(match)" alt="" class="flag" />
<span v-else class="flag-ph">⚽</span>
</div>
</div>
<div v-if="!loading && !hotMatches.length" class="empty">
@@ -32,10 +66,83 @@ function goMatch(id: string) {
</template>
<style scoped>
.match-card { cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.match-card:active { border-color: var(--border-gold-soft); }
.match-teams { font-weight: 800; margin-bottom: 8px; font-size: 16px; }
.match-time { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.empty { text-align: center; color: var(--text-muted); padding: 40px 20px; font-weight: 600; }
.empty-icon { width: 96px; height: 96px; margin-bottom: 14px; }
.match-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
}
.match-card:active {
border-color: var(--border-gold-soft);
}
.match-info {
flex: 1;
min-width: 0;
}
.match-teams {
font-weight: 800;
margin-bottom: 8px;
font-size: 16px;
line-height: 1.3;
}
.match-time {
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
}
.match-flags {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid #2a2a2a;
border-radius: 8px;
}
.flag {
width: 32px;
height: 22px;
object-fit: cover;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.flag-ph {
width: 32px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
opacity: 0.45;
}
.vs {
font-size: 11px;
font-weight: 900;
color: var(--primary-light);
letter-spacing: 0.04em;
}
.empty {
text-align: center;
color: var(--text-muted);
padding: 40px 20px;
font-weight: 600;
}
.empty-icon {
width: 96px;
height: 96px;
margin-bottom: 14px;
}
</style>

367
apps/player/src/views/ProfileEditView.vue
View File

@@ -1,15 +1,25 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { playerAvatarUrl, randomAvatarKey } from '@thebet365/shared';
import api from '../api';
import PlayerAvatarModal from '../components/PlayerAvatarModal.vue';
import { usePlayerProfile } from '../composables/usePlayerProfile';
import { useAuthStore } from '../stores/auth';
const { t } = useI18n();
const router = useRouter();
const auth = useAuthStore();
const { loadProfile, setAvatarKey, profileRaw, avatarUrl, avatarKey } = usePlayerProfile();
const username = ref('');
const viewablePassword = ref('');
const passwordVisible = ref(false);
const phone = ref('');
const email = ref('');
const avatarModalOpen = ref(false);
const passwordChangeOpen = ref(false);
const oldPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('');
@@ -17,14 +27,60 @@ const message = ref('');
const error = ref('');
const saving = ref(false);
onMounted(async () => {
const { data } = await api.get('/player/profile');
const user = data.data;
username.value = user?.username ?? '';
const allowPasswordChange = computed(
() => profileRaw.value?.preferences?.allowPasswordChange ?? true,
);
const allowUsernameChange = computed(
() => profileRaw.value?.preferences?.allowUsernameChange ?? false,
);
const passwordDisplay = computed(() => viewablePassword.value || '');
const canTogglePassword = computed(() => !!viewablePassword.value);
const passwordInputType = computed(() =>
passwordVisible.value && canTogglePassword.value ? 'text' : 'password',
);
const displayAvatarUrl = computed(() => {
if (avatarUrl.value) return avatarUrl.value;
const seed = profileRaw.value?.username ?? auth.user?.username;
return seed ? playerAvatarUrl(randomAvatarKey(seed)) : null;
});
function syncFromProfile() {
const user = profileRaw.value;
username.value = user?.username ?? auth.user?.username ?? '';
viewablePassword.value = user?.preferences?.viewablePassword ?? '';
phone.value = user?.preferences?.phone ?? '';
email.value = user?.preferences?.email ?? '';
}
function togglePasswordVisible() {
if (!canTogglePassword.value) return;
passwordVisible.value = !passwordVisible.value;
}
onMounted(async () => {
await loadProfile(true);
syncFromProfile();
});
function openAvatarModal() {
avatarModalOpen.value = true;
}
async function confirmAvatar(key: string | null) {
avatarModalOpen.value = false;
try {
await api.patch('/player/profile', { avatarKey: key });
setAvatarKey(key);
} catch (e: unknown) {
setAvatarKey(key);
error.value =
(e as { response?: { data?: { message?: string } } })?.response?.data?.message ||
t('profile.save_failed');
}
}
function wantsPasswordChange() {
return !!(oldPassword.value || newPassword.value || confirmPassword.value);
}
@@ -48,11 +104,21 @@ async function saveAll() {
const parts: string[] = [];
try {
await api.patch('/player/profile', {
const profilePayload: { phone?: string; email?: string; username?: string } = {
phone: phone.value.trim() || undefined,
email: email.value.trim() || undefined,
});
};
if (allowUsernameChange.value) {
profilePayload.username = username.value.trim();
}
await api.patch('/player/profile', profilePayload);
if (allowUsernameChange.value && username.value.trim() && auth.user) {
auth.user.username = username.value.trim();
}
parts.push(t('profile.saved'));
if (allowUsernameChange.value && profilePayload.username) {
parts.push(t('profile.username_updated'));
}
} catch (e: unknown) {
error.value =
(e as { response?: { data?: { message?: string } } })?.response?.data?.message ||
@@ -62,14 +128,22 @@ async function saveAll() {
}
if (wantsPasswordChange()) {
if (!allowPasswordChange.value) {
error.value = t('profile.password_disabled');
saving.value = false;
return;
}
try {
await api.post('/player/auth/change-password', {
oldPassword: oldPassword.value,
newPassword: newPassword.value,
});
viewablePassword.value = newPassword.value;
passwordVisible.value = false;
oldPassword.value = '';
newPassword.value = '';
confirmPassword.value = '';
passwordChangeOpen.value = false;
parts.push(t('profile.password_changed'));
} catch (e: unknown) {
error.value =
@@ -96,57 +170,117 @@ function back() {
<h2 class="page-title">{{ t('profile.edit') }}</h2>
</header>
<section class="avatar-card">
<div class="avatar-circle">
<img v-if="displayAvatarUrl" :src="displayAvatarUrl" alt="" class="avatar-img" />
</div>
<button type="button" class="avatar-change-btn" @click="openAvatarModal">
{{ t('profile.avatar_change') }}
</button>
</section>
<form class="form-card" @submit.prevent="saveAll">
<h3 class="section-title">{{ t('profile.section_account') }}</h3>
<div class="field">
<label>{{ t('auth.username') }}</label>
<input :value="username" class="readonly" disabled />
<input
v-model="username"
class="field-input"
:class="{ readonly: !allowUsernameChange }"
:disabled="!allowUsernameChange"
:placeholder="t('profile.username_placeholder')"
/>
<p v-if="!allowUsernameChange" class="field-hint inline-hint">{{ t('profile.username_readonly_hint') }}</p>
</div>
<div class="field">
<label>{{ t('auth.password') }}</label>
<div class="input-eye-wrap">
<input
:type="passwordInputType"
:value="passwordDisplay"
class="field-input input-with-eye"
readonly
:placeholder="canTogglePassword ? '' : t('profile.password_unavailable')"
/>
<button
type="button"
class="eye-btn"
:disabled="!canTogglePassword"
:aria-label="passwordVisible ? t('profile.hide_password') : t('profile.show_password')"
@click="togglePasswordVisible"
>
{{ passwordVisible ? t('profile.hide_password') : t('profile.show_password') }}
</button>
</div>
<p v-if="!canTogglePassword" class="field-hint inline-hint">{{ t('profile.password_unavailable_hint') }}</p>
</div>
<template v-if="allowPasswordChange">
<button type="button" class="section-toggle compact-toggle" @click="passwordChangeOpen = !passwordChangeOpen">
<span>{{ t('profile.change_password') }}</span>
<span class="chevron" :class="{ open: passwordChangeOpen }">›</span>
</button>
<div v-show="passwordChangeOpen" class="password-block">
<div class="field">
<label>{{ t('profile.old_password') }}</label>
<input
v-model="oldPassword"
type="password"
class="field-input"
autocomplete="current-password"
:placeholder="t('profile.old_password_placeholder')"
/>
</div>
<div class="field">
<label>{{ t('profile.new_password') }}</label>
<input
v-model="newPassword"
type="password"
class="field-input"
autocomplete="new-password"
:placeholder="t('profile.new_password_placeholder')"
/>
</div>
<div class="field">
<label>{{ t('profile.confirm_password') }}</label>
<input
v-model="confirmPassword"
type="password"
class="field-input"
autocomplete="new-password"
:placeholder="t('profile.confirm_password_placeholder')"
/>
</div>
</div>
</template>
<div class="section-divider" />
<h3 class="section-title">{{ t('profile.section_contact') }}</h3>
<div class="field">
<label>{{ t('profile.phone') }}</label>
<input v-model="phone" type="tel" class="field-input" :placeholder="t('profile.phone_placeholder')" />
</div>
<div class="field">
<div class="field field-last">
<label>{{ t('profile.email') }}</label>
<input v-model="email" type="email" class="field-input" :placeholder="t('profile.email_placeholder')" />
</div>
<p class="field-hint">{{ t('profile.password_optional_hint') }}</p>
<div class="field">
<label>{{ t('profile.old_password') }}</label>
<input
v-model="oldPassword"
type="password"
class="field-input"
autocomplete="current-password"
:placeholder="t('profile.old_password_placeholder')"
/>
</div>
<div class="field">
<label>{{ t('profile.new_password') }}</label>
<input
v-model="newPassword"
type="password"
class="field-input"
autocomplete="new-password"
:placeholder="t('profile.new_password_placeholder')"
/>
</div>
<div class="field">
<label>{{ t('profile.confirm_password') }}</label>
<input
v-model="confirmPassword"
type="password"
class="field-input"
autocomplete="new-password"
:placeholder="t('profile.confirm_password_placeholder')"
/>
</div>
<button type="submit" class="btn-action btn-gold-outline" :disabled="saving">
{{ t('profile.save') }}
</button>
</form>
<PlayerAvatarModal
:open="avatarModalOpen"
:model-value="avatarKey"
@close="avatarModalOpen = false"
@confirm="confirmAvatar"
/>
<p v-if="message" class="msg ok">{{ message }}</p>
<p v-if="error" class="msg err">{{ error }}</p>
</div>
@@ -154,11 +288,14 @@ function back() {
<style scoped>
.edit-page {
padding: 8px 0 12px;
padding: 8px 0 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.page-head {
margin-bottom: 10px;
margin-bottom: 0;
}
.back-btn {
@@ -177,22 +314,150 @@ function back() {
letter-spacing: 0.04em;
}
.avatar-card,
.form-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px;
}
.avatar-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 20px 16px;
}
.avatar-circle {
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid var(--border-gold-soft);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #2a2210, #141008);
}
.avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.avatar-change-btn {
padding: 7px 18px;
border-radius: 999px;
border: 1px solid var(--border-gold-soft);
background: rgba(212, 175, 55, 0.08);
color: var(--primary-light);
font-size: 13px;
font-weight: 700;
}
.form-card {
padding: 16px;
}
.section-title {
margin: 0 0 14px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.section-divider {
height: 1px;
background: var(--border);
margin: 6px 0 12px;
}
.section-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 0 12px;
background: none;
color: var(--text);
font-size: 14px;
font-weight: 700;
}
.chevron {
color: var(--text-muted);
font-size: 20px;
line-height: 1;
transition: transform 0.15s ease;
}
.chevron.open {
transform: rotate(90deg);
}
.password-block {
padding-bottom: 4px;
}
.field {
margin-bottom: 10px;
margin-bottom: 14px;
}
.field-last {
margin-bottom: 18px;
}
.field-hint {
font-size: 11px;
color: var(--text-muted);
margin: 4px 0 10px;
line-height: 1.4;
margin: 6px 0 0;
line-height: 1.45;
}
.inline-hint {
margin-bottom: 0;
}
.input-eye-wrap {
position: relative;
display: flex;
align-items: stretch;
}
.input-with-eye {
padding-right: 52px;
}
.eye-btn {
position: absolute;
right: 0;
top: 0;
bottom: 0;
min-width: 48px;
padding: 0 10px;
border: none;
border-left: 1px solid var(--border);
border-radius: 0 6px 6px 0;
background: rgba(212, 175, 55, 0.06);
color: var(--primary-light);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
}
.eye-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.compact-toggle {
padding: 2px 0 10px;
font-size: 13px;
}
label {
@@ -200,14 +465,14 @@ label {
font-size: 11px;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 4px;
margin-bottom: 6px;
}
.field-input,
.readonly {
display: block;
width: 100%;
padding: 9px 11px;
padding: 10px 12px;
font-size: 14px;
font-weight: 500;
border-radius: 6px;
@@ -243,7 +508,7 @@ label {
.btn-action {
width: 100%;
margin-top: 4px;
padding: 10px 14px;
padding: 12px 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 800;
@@ -256,7 +521,7 @@ label {
}
.msg {
margin-top: 10px;
margin-top: 0;
font-size: 13px;
font-weight: 600;
}