OpenAuth_server/Frontend/src/pages/user/Pages/PersonalInfo.svelte

<script lang="ts">
  import {
    type ContactInfo,
    type Account,
    Gender,
  } from "@hibas123/openauth-internalapi";
  import InternalAPI from "../../../helper/api";
  import Loading from "../Loading.svelte";
  import { onMount } from "svelte";
  import {
    Button,
    Card,
    Input,
    Label,
    Select,
    Heading,
    Spinner,
    Helper,
  } from "flowbite-svelte";

  let profileInfo: Account;
  let loadedProfileInfo: Account;
  let contactInfo: ContactInfo;

  let loading = true;
  let error: string | undefined;

  async function load() {
    error = undefined;
    loading = true;

    try {
      profileInfo = await InternalAPI.Account.GetProfile();
      loadedProfileInfo = { ...profileInfo };
      contactInfo = await InternalAPI.Account.GetContactInfos();
    } catch (e) {
      error = e.message;
    } finally {
      loading = false;
    }
  }

  let savingProfile = false;

  async function saveProfileChanges() {
    savingProfile = true;

    try {
      await new Promise((yes) => setTimeout(yes, 1000));
      await InternalAPI.Account.UpdateProfile(profileInfo);
      loadedProfileInfo = { ...profileInfo };
    } catch (e) {
      error = e.message;
    } finally {
      savingProfile = false;
    }
  }

  $: hasProfileChanged =
    JSON.stringify(profileInfo) != JSON.stringify(loadedProfileInfo);

  onMount(() => {
    load();
  });

  let genders = [
    {
      value: Gender.None,
      name: "Not saying",
    },
    {
      value: Gender.Male,
      name: "Male",
    },
    {
      value: Gender.Female,
      name: "Female",
    },
    {
      value: Gender.Other,
      name: "Other",
    },
  ];
</script>

<Loading {loading} {error}>
  <Card>
    <Heading tag="h5">General Account Details</Heading>
    <hr class="mb-6" />
    <div class="mb-6">
      <Label for="name-input" class="block mb-2">Name</Label>
      <Input id="name-input" placeholder="Name" bind:value={profileInfo.name} />
    </div>
    <div class="mb-6">
      <Label for="birthday-input" class="block mb-2">Birthday (WIP)</Label>
      <Input
        id="birthday-input"
        placeholder="Birthday"
        disabled
        bind:value={profileInfo.birthday}
      />
    </div>
    <div class="mb-6">
      <Label class="block mb-2"
        >Gender
        <Select items={genders} bind:value={profileInfo.gender} />
      </Label>
    </div>

    <Button
      disabled={!hasProfileChanged || savingProfile}
      on:click={saveProfileChanges}
    >
      {#if savingProfile}
        <Spinner class="mr-3" size="4" color="white" /> Saving...
      {:else}
        Save
      {/if}
    </Button>
  </Card>

  <Card class="mt-4">
    <Heading tag="h5">Contact Details (WIP)</Heading>
    <hr class="mb-6" />

    <Heading tag="h6" color="gray">Mails</Heading>
    <hr class="mb-6" />

    {#each contactInfo.mail as mail}
      <div class="mb-6">
        <!-- <Label for="mail-input" class="block mb-2">Mail</Label> -->
        <Input
          id="mail-input"
          placeholder="Mail"
          bind:value={mail.mail}
          color={mail.verified ? "green" : "base"}
          disabled
        />
        {#if mail.verified}
          <Helper class="mt-2" color="green"
            ><span class="font-medium">Well done!</span> E-Mail is verified.</Helper
          >
        {:else}
          <Helper class="mt-2" color="gray"
            ><span class="font-medium">Oh no!</span> E-Mail needs verification.</Helper
          >
        {/if}
      </div>
    {/each}

    <Heading tag="h6" color="gray">Phones</Heading>
    <hr class="mb-6" />

    {#each contactInfo.phone as phone}
      <div class="mb-6">
        <!-- <Label for="phone-input" class="block mb-2">Phone</Label> -->
        <Input
          id="phone-input"
          placeholder="Phone"
          bind:value={phone.phone}
          color={phone.verified ? "green" : "base"}
          disabled
        />
        {#if phone.verified}
          <Helper class="mt-2" color="green"
            ><span class="font-medium">Well done!</span> Phone is verified.</Helper
          >
        {:else}
          <Helper class="mt-2" color="gray"
            ><span class="font-medium">Oh no!</span> Phone needs verification.</Helper
          >
        {/if}
      </div>
    {/each}
    <!-- <div class="mb-6">
      <Label for="name-input" class="block mb-2">Name</Label>
      <Input id="name-input" placeholder="Name" bind:value={profileInfo.name} />
    </div>
    <div class="mb-6">
      <Label for="birthday-input" class="block mb-2">Birthday (WIP)</Label>
      <Input
        id="birthday-input"
        placeholder="Birthday"
        disabled
        bind:value={profileInfo.birthday}
      />
    </div>
    <div class="mb-6">
      <Label class="block mb-2"
        >Gender
        <Select items={genders} bind:value={profileInfo.gender} />
      </Label>
    </div> -->

    <!-- <Button>Save</Button> -->
  </Card>
</Loading>