Cadastro do cliente

Ao clicar em "Quero me cadastrar" na página do carrinho de compras, você é levado para "/cadastro" que deve ser implementado com o arquivo src/routes/cadastro.svelte com o seguinte conteúdo:

<script>
  let usuario = {
    name: '',
    email: '',
    password: ''
  }
  async function cadastrarUsuario() {
    const res = await fetch(`http://localhost:3000/api/auth/client/registration`, {
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: usuario.name,
        email: usuario.email,
        password: usuario.password
      })
    });
    if (res.ok) {
      const json = await res.json();
      alert('Usuário cadastrado com sucesso', json);
      window.location.href = "/carrinho";
    } else {
      alert('Erro cadastrando usuário');
    }
  }

</script>

<h1>Cadastro de usuário</h1>

<form>
  Nome: <input bind:value={usuario.name} /><br/>
  E-Mail: <input bind:value={usuario.email} /><br/>
  Senha: <input bind:value={usuario.password} /><br/>
  <button on:click|preventDefault={cadastrarUsuario}>
    Me cadastrar
  </button>

</form>

Esse arquivo tem no HTML um formulári ocomun, com os campos (INPUTs) associados aos atributos da variável de estado "usuario" (name, email, password) e quando se clica em "Me cadastrar" a função cadastrarUsuario() é chamada realizando um acesso à API em "http://localhost:3000/api/auth/client/registration", passando o nome, e-mail e senha do usuário. Caso a tentativa de cadastro seja realizada com sucesso o usuário é redirecionado para "/carrinho" novamente com o comando:

      window.location.href = "/carrinho";

O SvelteKit tem outras formas nativas de navegação mas é importante mostrar que operações comuns do Javascript funcionam bem com o SvelteKit, como por exemplo o comando do código acima.

Página de cadastro do usuário: