forked from OpenServer/OpenAuth_views
193 lines
3.9 KiB
Svelte
193 lines
3.9 KiB
Svelte
<script>
|
|
import Box from "./Box.svelte";
|
|
import BoxItem from "./BoxItem.svelte";
|
|
import NextIcon from "./NextIcon.svelte";
|
|
|
|
import request from "../../../helper/request.ts";
|
|
|
|
export let loading = false;
|
|
let account_error = undefined;
|
|
let contact_error = undefined;
|
|
|
|
const genderMap = new Map();
|
|
genderMap.set(0, "None");
|
|
genderMap.set(1, "Male");
|
|
genderMap.set(2, "Female");
|
|
genderMap.set(3, "Other");
|
|
|
|
let name = "";
|
|
let gender = 0;
|
|
$: genderHuman = genderMap.get(gender) || "ERROR";
|
|
let birthday = undefined;
|
|
|
|
async function saveName() {
|
|
//TODO: implement
|
|
await load();
|
|
}
|
|
|
|
async function saveGender() {
|
|
//TODO: implement
|
|
await load();
|
|
}
|
|
|
|
async function loadProfile() {
|
|
try {
|
|
let { user } = await request(
|
|
"/api/user/account",
|
|
{},
|
|
"GET",
|
|
undefined,
|
|
true,
|
|
true
|
|
);
|
|
|
|
name = user.name;
|
|
// username = user.username;
|
|
gender = user.gender;
|
|
birthday = user.birthday
|
|
? new Date(user.birthday).toLocaleDateString()
|
|
: undefined;
|
|
} catch (err) {
|
|
console.error(err);
|
|
account_error = err.message;
|
|
}
|
|
}
|
|
|
|
let email = [];
|
|
let phone = [];
|
|
|
|
async function loadContact() {
|
|
try {
|
|
let { contact } = await request(
|
|
"/api/user/contact",
|
|
{},
|
|
"GET",
|
|
undefined,
|
|
true,
|
|
true
|
|
);
|
|
|
|
email = contact.mails.map((e) => e.mail);
|
|
phone = contact.phones.map((e) => e.phone);
|
|
contact_error = undefined;
|
|
} catch (err) {
|
|
console.error(err);
|
|
contact_error = err.message;
|
|
}
|
|
}
|
|
|
|
async function load() {
|
|
loading = true;
|
|
await Promise.all([loadProfile(), loadContact()]);
|
|
loading = false;
|
|
}
|
|
|
|
load();
|
|
</script>
|
|
|
|
<style>
|
|
.btn {
|
|
background-color: var(--primary);
|
|
margin: auto 0;
|
|
margin-left: 1rem;
|
|
font-size: 1rem;
|
|
padding: 0 0.5rem;
|
|
}
|
|
|
|
.floating {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.input-container {
|
|
display: flex;
|
|
}
|
|
|
|
.input-container > *:first-child {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
select {
|
|
background-color: unset;
|
|
border: 0;
|
|
border-radius: 0;
|
|
color: unset;
|
|
font-size: unset;
|
|
border-bottom: 1px solid #757575;
|
|
/* Firefox */
|
|
-moz-appearance: none;
|
|
/* Safari and Chrome */
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
select > option {
|
|
background-color: unset;
|
|
}
|
|
|
|
.select-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.select-wrapper::after {
|
|
content: ">";
|
|
display: block;
|
|
position: absolute;
|
|
right: 2rem;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 1rem;
|
|
transform: rotate(90deg) scaleY(2);
|
|
}
|
|
|
|
.error {
|
|
color: var(--error);
|
|
}
|
|
</style>
|
|
|
|
<Box>
|
|
<h1>Profile</h1>
|
|
{#if account_error}
|
|
<p class="error">{account_error}</p>
|
|
{/if}
|
|
<BoxItem name="Name" value={name}>
|
|
<div class="input-container">
|
|
<div class="floating group">
|
|
<input
|
|
id="name-inp"
|
|
type="text"
|
|
autocomplete="username"
|
|
bind:value={name} />
|
|
<span class="highlight" />
|
|
<span class="bar" />
|
|
<label for="name-inp">Name</label>
|
|
</div>
|
|
<button class="btn" on:click={saveName}>Save</button>
|
|
</div>
|
|
</BoxItem>
|
|
<BoxItem name="Gender" value={genderHuman}>
|
|
<div class="input-container">
|
|
<div class="select-wrapper">
|
|
<select bind:value={gender}>
|
|
<option value={1}>Male</option>
|
|
<option value={2}>Female</option>
|
|
<option value={3}>Other</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn" on:click={saveGender}>Save</button>
|
|
</div>
|
|
</BoxItem>
|
|
<BoxItem name="Birthday" value={birthday} />
|
|
<BoxItem name="Password" value="******" />
|
|
</Box>
|
|
|
|
<Box>
|
|
<h1>Contact</h1>
|
|
{#if contact_error}
|
|
<p class="error">{contact_error}</p>
|
|
{/if}
|
|
<BoxItem name="E-Mail" value={email} noOpen={true} />
|
|
<BoxItem name="Phone" value={phone} noOpen={true} />
|
|
</Box>
|