OpenAuth_server/Frontend/src/pages/user_old/Pages/Account.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>