QuiplashClone/apps/quippy/src/pages/Signup.svelte

<script lang="ts">
  import { pb } from "../lib/pocketbase";
  import { onMount } from "svelte";
  import { replace } from "svelte-spa-router";

  let username: string;
  let email: string;
  let password: string;
  let passwordConfirm: string;

  let passwordField;
  let passwordConfirmField;
  let usernameField;
  let emailField;

  async function signup() {
    if (password === passwordConfirm) {
      try {
        const data = {
          username,
          password,
          passwordConfirm,
          email,
        };
        const createdUser = await pb.collection("users").create(data);
        await pb.collection("users").authWithPassword(email, password);
        replace("/");

      } catch (err) {
        const errData = err.response.data;

        if (errData.email) {
          console.log("An account with that email already exists.");
          emailField.classList.add("invalid");
        }

        if (errData.username) {
          console.log("Invalid username");
          usernameField.classList.add("invalid");
        }
      }
    } else {
      console.log("Passwords do not match!");
      passwordField.classList.add("invalid");
      passwordConfirmField.classList.add("invalid");
    }
  }

  function generateUsername() {
    username =
      email.split("@")[0].replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "") +
      randomNumberofLength(3);
  }

  function randomNumberofLength(length) {
    return Math.floor(
      Math.pow(10, length - 1) +
        Math.random() * (Math.pow(10, length) - Math.pow(10, length - 1) - 1)
    );
  }

  onMount(() => {
    username = "";
  });
</script>

<main class="responsive">
  <div class="absolute center middle">
    <img
    class="responsive small"
    src="/vite.svg"
    alt=""
    style="object-fit: contain;"
  />
  <div class="row">
    <h3 class="center">Create a Quippy Account</h3>
  </div>
  <div class="medium-divider" />
    <div class="field label border" bind:this={emailField}>
      <input type="text" bind:value={email} on:change={generateUsername} />
      <!-- svelte-ignore a11y-label-has-associated-control -->
      <label>Email</label>
    </div>
    <div class="field label border suffix" bind:this={usernameField}>
      <input
        type="text"
        bind:value={username}
        class:clippath={username != ""}
      />
      <!-- svelte-ignore a11y-label-has-associated-control -->
      <label class:active={username != ""}>Username</label>
    </div>
    <div class="field label border" bind:this={passwordField}>
      <input type="password" bind:value={password} />
      <!-- svelte-ignore a11y-label-has-associated-control -->
      <label>Password</label>
    </div>
    <div class="field label border" bind:this={passwordConfirmField}>
      <input type="password" bind:value={passwordConfirm} />
      <!-- svelte-ignore a11y-label-has-associated-control -->
      <label>Confirm Password</label>
    </div>
    <button class="responsive" on:click={signup}>Create Account</button>
  </div>
</main>

<style>
  main {
    max-width: 95%;
  }

  div {
    min-width: 40%;
  }

  .clippath {
    clip-path: polygon(
      0% 0%,
      0.75rem 0%,
      0.75rem 0.5rem,
      4.625rem 0.5rem,
      4.625rem 0%,
      100% 0%,
      100% 100%,
      0% 100%
    );
  }
</style>