mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.8 KiB
HTML
134 lines
3.8 KiB
HTML
1 week ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta name="description" content="User Profile">
|
||
|
|
<title>{{ $t('user.profile') }}</title>
|
||
|
|
<style>
|
||
|
|
.profile-container {
|
||
|
|
max-width: 600px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 20px;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
box-shadow: var(--shadow-sm);
|
||
|
|
}
|
||
|
|
.avatar-section {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
.avatar {
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: var(--color-primary-light);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 32px;
|
||
|
|
color: var(--color-primary);
|
||
|
|
}
|
||
|
|
.form-group {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.form-label {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
.form-input {
|
||
|
|
width: 100%;
|
||
|
|
padding: 10px;
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
}
|
||
|
|
.btn-save {
|
||
|
|
width: 100%;
|
||
|
|
padding: 12px;
|
||
|
|
background-color: var(--color-primary);
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
.btn-logout {
|
||
|
|
width: 100%;
|
||
|
|
padding: 12px;
|
||
|
|
background-color: var(--color-danger);
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 16px;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="profile-container">
|
||
|
|
<h2 style="text-align: center; margin-bottom: 30px;">{{ $t('user.profile') }}</h2>
|
||
|
|
|
||
|
|
<div class="avatar-section">
|
||
|
|
<div class="avatar">
|
||
|
|
{{ user.username ? user.username.charAt(0).toUpperCase() : 'U' }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<form @submit.prevent="updateProfile">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">{{ $t('auth.username') }}</label>
|
||
|
|
<input type="text" v:value="user.username" class="form-input" disabled>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">{{ $t('auth.email') }}</label>
|
||
|
|
<input type="email" v:value="user.email" class="form-input">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">Phone</label>
|
||
|
|
<input type="tel" v:value="user.phone" class="form-input">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button type="submit" class="btn-save">{{ $t('common.save') }}</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<button class="btn-logout" @click="handleLogout">{{ $t('auth.logout') }}</button>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script setup>
|
||
|
|
user = $env.$vbase.user || {};
|
||
|
|
|
||
|
|
// Fetch fresh data
|
||
|
|
loadUser = async () => {
|
||
|
|
try {
|
||
|
|
user = await $env.$vbase.fetchUser();
|
||
|
|
} catch (e) {
|
||
|
|
console.error(e);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
updateProfile = async () => {
|
||
|
|
try {
|
||
|
|
await $axios.patch('/api/auth/me', {
|
||
|
|
email: user.email,
|
||
|
|
phone: user.phone
|
||
|
|
});
|
||
|
|
$message.success("Profile updated");
|
||
|
|
loadUser();
|
||
|
|
} catch (e) {
|
||
|
|
$message.error(e.message);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
handleLogout = async () => {
|
||
|
|
await $env.$vbase.logout('/login');
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
$data.loadUser();
|
||
|
|
</script>
|
||
|
|
</html>
|