createuser.svelte

<section>
  <h1>Opprett en konto</h1>
  <div>
    Brukernavn kan være hva som helst, men passord må inneholde følgende: 2
    store bokstaver, 2 spesialtegn (ek s: @!& osv) og minst 1 tall.
  </div>
  <div>
    Har du allerede en bruker?
    <a use:link href="/user/login">Klikk her</a>
    for å logge inn.
  </div>
  <form on:submit|preventDefault="{handleSubmit}">
    <div class="login">
      <label>
        <div>E-post:</div>
        <input
          class="{mailStyle}"
          type="text"
          bind:value="{email}"
          placeholder="email"
        />
      </label>

      <label>
        <div>Brukernavn:</div>
        <input
          type="text"
          class="{userStyle}"
          bind:value="{username}"
          placeholder="username"
        />
      </label>
      <label>
        <div>Passord:</div>
        <input
          class="{pwdStyle}"
          type="password"
          bind:value="{password}"
          placeholder="password"
        />
      </label>
      <label>
        <input
          class="submit"
          on:submit|preventDefault="{handleSubmit}"
          type="submit"
          value="Opprett konto"
        />
      </label>
    </div>
  </form>
</section>

<script>
  import { link, push } from "svelte-spa-router";
  import {validatePassword} from "../../../../lib/security/password/password_validation";
  import {validateEmail} from "../../../../lib/security/email/validation";
  
  var hasSubmitted, hasError;
  hasSubmitted = hasError = false;
  
  var pwdStyle, mailStyle, userStyle;
  pwdStyle = mailStyle = userStyle = "untouched";
  
  var isValidPassword, isValidEmail, isValidUsername;
  isValidPassword = isValidEmail = isValidUsername = false;
  
  var email, username, password;
  email = username = password = "";

  function validator() {
    // email
    isValidEmail = validateEmail(email);
    mailStyle = !isValidEmail && hasSubmitted ? "red" : "green";

    // username
    isValidUsername = username.length > 2;
    userStyle = !isValidUsername && hasSubmitted ? "red" : "green";

    //password
    isvalidPassword = validatePassword(password);
    pwdStyle = !isValidPassword && hasSubmitted ? "red" : "green";
  }

  function handleSubmit(event) {
    hasSubmitted = true;
    validator();
    if (hasError) {
      return;
    }
    fetch("/api/v1/user/create", {
      method: "POST",
      body: JSON.stringify({
            username,
            password,
            email
          })
    })
      .then(res => res.json())
      .then(loginResult => {
        if (loginResult.status === "success") {
          push("/user/profile");
        }
      });
  }
</script>