Skip to content

Commit

Permalink
Merge pull request #108 from ThatConference/cs/signup
Browse files Browse the repository at this point in the history
refactor: two signup pages in favor of form actions
  • Loading branch information
theClarkSell committed Oct 17, 2023
2 parents e46da2b + 66a15dd commit 5516b60
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 63 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@
</a>
<a
rel="external"
href="/sign-up"
href="/signup"
class="mb-1 ml-1 mt-4 block w-full flex-grow rounded-md bg-that-orange py-2 text-center text-sm font-semibold text-white">
Sign Up
</a>
Expand Down
2 changes: 1 addition & 1 deletion src/_components/navigation/_components/UserProfile.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@
</a>
<a
rel="external"
href="/sign-up"
href="/signup"
class="block cursor-pointer px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
Sign Up
</a>
Expand Down
43 changes: 0 additions & 43 deletions src/routes/(root)/sign-up/+server.js

This file was deleted.

45 changes: 45 additions & 0 deletions src/routes/(root)/signup/+page.server.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { redirect, error } from '@sveltejs/kit';
import * as Sentry from '@sentry/sveltekit';

export const actions = {
default: async ({ locals, fetch }) => {
let _url = '/';
try {
const session = await locals.getSession();
if (!session?.user) {
const tokenCall = await fetch('/auth/csrf');
const csrfTokenResponse = await new Response(tokenCall.body).json();
const csrfToken = csrfTokenResponse.csrfToken;

const qparams = new URLSearchParams();
qparams.append('screen_hint', 'signup');

const formData = new URLSearchParams();
formData.append('redirect', 'false');
formData.append('csrfToken', csrfToken);
formData.append('callbackUrl', '/my/profiles');

const signInRequest = await fetch('/auth/signin/auth0?' + qparams.toString(), {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Auth-Return-Redirect': '1'
},
body: formData.toString()
});

const signInResponse = await new Response(signInRequest.body).json();
if (signInResponse?.url) {
_url = signInResponse.url;
}
}
} catch (err) {
Sentry.setContext('error', { err });
throw error(500, 'Authentication Sign-up Error');
}

if (_url) {
throw redirect(302, _url);
}
}
};
46 changes: 28 additions & 18 deletions src/routes/(root)/signup/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import Seo from '$components/Seo.svelte';
import { Standard as StandardLink } from '$elements/links';
import Newsletter from '$components/newsletter/Short.svelte';
import { ChevronsRight } from 'lucide-svelte';
import WelcomeQuote from '../support/_components/_WelcomeQuote.svelte';
Expand Down Expand Up @@ -40,24 +41,27 @@
<ol class="overflow-hidden">
<li class="relative pb-10" in:fade={{ delay: 100, duration: 500 }}>
<div class="absolute left-12 top-4 ml-0.5 mt-0.5 h-full w-1 bg-thatOrange-500" />

<!-- Complete Step -->
<!-- todo how do we redirect after login? -->
<a rel="external" href="/sign-up" class="group relative flex items-center p-3">
<span class="flex h-20 items-center">
<span
class="relative z-10 flex h-20 w-20 items-center justify-center rounded-full bg-white p-3 ring-4 ring-thatOrange-500 group-hover:bg-thatOrange-500 group-hover:text-white">
<span class="text-5xl font-extrabold">1</span>
</span>
</span>
<span class="ml-4 flex min-w-0 flex-col items-start">
<span class="text-xl font-semibold uppercase tracking-wide"
>Create Your Login</span>
<span class="text-lg text-gray-500">
You will need an account to create or join any activities.
</span>
</span>
</a>
<form method="POST">
<button type="submit" class="group relative flex p-3">
<div class="flex h-20">
<span
class="relative z-10 flex h-20 w-20 items-center justify-center rounded-full bg-white p-3 ring-4 ring-thatOrange-500 group-hover:bg-thatOrange-500 group-hover:text-white">
<span class="text-5xl font-extrabold">1</span>
</span>
</div>
<div class="ml-4 min-w-0">
<p class="text-left text-xl font-semibold uppercase tracking-wide">
Create Your Login
</p>
<p class="flex text-left text-lg text-gray-500">
You will need an account to create or join any activities.
</p>
</div>
<div class="flex h-20 flex-col justify-center text-thatOrange-500">
<ChevronsRight />
</div>
</button>
</form>
</li>
<li class="relative pb-10" in:fade={{ delay: 300, duration: 500 }}>
<div class="absolute left-12 top-4 ml-0.5 mt-0.5 h-full w-1 bg-thatOrange-500" />
Expand All @@ -76,6 +80,9 @@
Tell everyone a bit about who you are and where to find you on the internet.
</span>
</span>
<div class="flex h-20 flex-col justify-center text-thatOrange-500">
<ChevronsRight />
</div>
</a>
</li>
<li class="relative pb-10" in:fade={{ delay: 500, duration: 500 }}>
Expand All @@ -92,6 +99,9 @@
We've put together a few words on how to get started with THAT.
</span>
</span>
<div class="flex h-20 flex-col justify-center text-thatOrange-500">
<ChevronsRight />
</div>
</a>
</li>
</ol>
Expand Down

0 comments on commit 5516b60

Please sign in to comment.