11<script lang =" ts" >
2+ import { goto } from ' $app/navigation' ;
23 import { page } from ' $app/state' ;
34 import { oauthApi } from ' $lib/api' ;
5+ import Container from ' $lib/components/Container.svelte' ;
6+ import EmailInput from ' $lib/components/input/EmailInput.svelte' ;
7+ import UsernameInput from ' $lib/components/input/UsernameInput.svelte' ;
8+ import { Button } from ' $lib/components/ui/button' ;
9+ import { isValidationError , mapToValRes } from ' $lib/errorhandling/ValidationProblemDetails' ;
10+ import { handleApiError } from ' $lib/errorhandling/apiErrorHandling' ;
11+ import { UserStore } from ' $lib/stores/UserStore' ;
412 import { onMount } from ' svelte' ;
513
6- let provider = $derived (page .params .provider );
14+ let username = $state <string >(' ' );
15+ let usernameValid = $state <boolean >(false );
716
8- let displayName = $state (' ' );
917 let email = $state (' ' );
10- let expires = $state <Date | null >(null );
18+ let emailValid = $state (false );
19+
20+ let password = $state (' ' );
21+
22+ let canSubmit = $derived (
23+ usernameValid && emailValid
24+ );
25+
26+ async function handleSubmission(e : SubmitEvent ) {
27+ e .preventDefault ();
28+
29+ if (! username || ! email ) {
30+ return ;
31+ }
32+
33+ try {
34+ const account = await oauthApi .oAuthOAuthSignupFinalize (page .params .provider ! , {
35+ username ,
36+ email ,
37+ password ,
38+ });
39+
40+ if (! account .isVerified ) {
41+ goto (' /login?message=signup-success' );
42+ return ;
43+ }
44+
45+ UserStore .setSelf ({
46+ id: account .accountId ,
47+ name: account .accountName ,
48+ avatar: account .profileImage ,
49+ email: account .accountEmail ,
50+ roles: account .accountRoles ,
51+ });
52+
53+ goto (' /home' );
54+ } catch (error ) {
55+ await handleApiError (error , (problem ) => {
56+ if (! isValidationError (problem )) return false ;
57+
58+ console .log (mapToValRes (problem , ' Username' ));
59+ console .log (mapToValRes (problem , ' Password' ));
60+ console .log (mapToValRes (problem , ' Email' ));
61+ console .log (mapToValRes (problem , ' TurnstileResponse' ));
62+
63+ return true ;
64+ });
65+ }
66+ }
1167
1268 onMount (() => {
13- if (! provider ) return ;
14- oauthApi .oAuthOAuthSignupGetData (provider ).then ((resp ) => {
15- if (resp .displayName ) displayName = resp .displayName ;
16- if (resp .email ) email = resp .email ;
17- expires = resp .expiresAt ;
18- });
69+ oauthApi .oAuthOAuthSignupGetData (page .params .provider ! )
70+ .then (data => {
71+ if (data .displayName ) {
72+ username = data .displayName ;
73+ usernameValid = true ;
74+ }
75+ if (data .email ) {
76+ email = data .email ;
77+ emailValid = true ;
78+ }
79+ })
80+ .catch (err => {
81+ console .error (' Failed to fetch OAuth signup data' , err );
82+ goto (' /login' );
83+ });
1984 });
2085 </script >
2186
22- {page .params .provider }
87+ <Container class =" items-center" >
88+ <form class ="flex flex-col gap-2" onsubmit ={handleSubmission }>
89+ <div class ="text-3xl font-semibold text-nowrap" >Sign Up With <span class ="capitalize" >{page .params .provider }</span ></div >
90+ <UsernameInput
91+ label =" Username"
92+ placeholder =" Username"
93+ bind:value ={username }
94+ bind:valid ={usernameValid }
95+ />
96+ <EmailInput label ="Email" placeholder ="Email" bind:value ={email } bind:valid ={emailValid } />
97+
98+ <Button type ="submit" disabled ={! canSubmit }>Sign Up</Button >
99+ </form >
100+ </Container >
0 commit comments