Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: two signup pages in favor of form actions #108

Merged
merged 1 commit into from
Oct 17, 2023
Merged

refactor: two signup pages in favor of form actions #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/_components/navigation/_components/MobileUsersProfile.svelte
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop

This file was deleted.

45 changes: 45 additions & 0 deletions src/routes/(root)/signup/+page.server.js
View file
Open in desktop
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
View file
Open in desktop
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