Compare commits

..

2 commits

Author SHA1 Message Date
zuma
d64b20c44b Fix: Remove card search until it has been clearly defined 2025-04-16 18:46:22 +02:00
zuma
1005549f17 Feat: Added signup page 2025-04-16 18:45:37 +02:00
3 changed files with 61 additions and 5 deletions

View file

@ -7,13 +7,11 @@
import Red from "./icons/Red.svelte"; import Red from "./icons/Red.svelte";
import Green from "./icons/Green.svelte"; import Green from "./icons/Green.svelte";
import IconBase from "./icons/IconBase.svelte"; import IconBase from "./icons/IconBase.svelte";
import CardSearch from "./CardSearch.svelte";
import SearchIcon from "./icons/SearchIcon.svelte"; import SearchIcon from "./icons/SearchIcon.svelte";
import DeckIcon from "./icons/DeckIcon.svelte"; import DeckIcon from "./icons/DeckIcon.svelte";
import MenuIcon from "./icons/MenuIcon.svelte"; import MenuIcon from "./icons/MenuIcon.svelte";
import Accordion from "./Accordion.svelte"; import Accordion from "./Accordion.svelte";
let dialog
let openMobileMenu = $state(false) let openMobileMenu = $state(false)
let username = $state("") let username = $state("")
@ -246,8 +244,6 @@
</div> </div>
</div> </div>
<CardSearch bind:dialog={dialog} />
<style> <style>
/* Close the dropdown with outside clicks */ /* Close the dropdown with outside clicks */
.dropdown > summary::before { .dropdown > summary::before {

View file

@ -2,4 +2,4 @@
let { src, alt } = $props(); let { src, alt } = $props();
</script> </script>
<img src={src} alt={alt} loading="lazy" class="min-h-4 min-w-4 size-4" /> <img src={src} alt={alt} class="min-h-4 min-w-4 size-4" />

View file

@ -0,0 +1,60 @@
<script>
import PocketBase from 'pocketbase';
import Input from '$lib/components/base/Input.svelte';
import Button from '$lib/components/base/Button.svelte';
import { onMount } from 'svelte';
let pb
let error = $state("")
let validation = $state("")
onMount(() => {
pb = new PocketBase(window.location.origin)
})
async function signup(form) {
error = ""
validation = ""
const formData = new FormData(form.target)
const data = {};
for (let field of formData) {
const [key, value] = field;
data[key] = value;
}
console.log(data)
try {
const record = await pb.collection('users').create({
"password": data.password,
"passwordConfirm": data.confirm_password,
"email": data.email,
"name": data.username,
"emailVisibility": false
})
await pb.collection('users').requestVerification(data.email);
validation = "Email de vérification envoyé à " + data.email
} catch (err) {
error = err.toString()
console.log("Failed to create account");
}
}
</script>
<div class="flex flex-col items-center mt-32 h-full p-8">
<form class="flex flex-col gap-4 max-w-lg w-full" onsubmit={(e) => {e.preventDefault(); signup(e)}}>
<Input name="email" placeholder="Email" type="email" />
<Input name="username" placeholder="Nom d'utilisateur·rice" type="text" />
<Input name="password" placeholder="Mot de passe" type="password" />
<Input name="confirm_password" placeholder="Confirmation du mot de passe" type="password" />
{#if error != ""}
<span class="bg-red-200 text-sm rounded-md p-2">{error}</span>
{/if}
{#if validation != ""}
<span class="bg-green-200 text-sm rounded-md p-2">{validation}</span>
{/if}
<Button>Inscription</Button>
</form>
</div>