129 lines
3.2 KiB
Svelte
129 lines
3.2 KiB
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>
|