Merge pull request #20 from ThatConference/cs/slug

fix: profileSlug validation

src/_components/notifications/CreateProfile.svelte

@@ -3,13 +3,12 @@
 </script>
 
 {#if !wasDismissed}
-	<div class="relative bg-red-400">
+	<div class="relative z-50 bg-red-400">
 		<div class="mx-auto max-w-screen-xl px-3 py-3 sm:px-6 lg:px-8">
 			<div class="pr-16 sm:px-16 sm:text-center">
 				<p class="font-medium text-white">
 					<span class="hidden md:inline">
-						To Favorite, Submit or Join any activity you will first need to complete your user
-						profile.
+						To purchase a ticket, or apply to speak, you first need to complete your user profile.
 					</span>
 					<span class="block sm:ml-2 sm:inline-block">
 						<a href="/my/profiles/primary/" class="font-bold text-white underline">
@@ -24,7 +23,7 @@
 				<button
 					type="button"
 					class="flex rounded-md p-2 transition duration-150
-            ease-in-out hover:bg-indigo-500 focus:bg-indigo-500 focus:outline-none"
+            ease-in-out hover:bg-red-600 focus:bg-red-600 focus:outline-none"
 					aria-label="Dismiss"
 					on:click={() => (wasDismissed = !wasDismissed)}>
 					<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">

src/lib/formSchemas/emergencyContact.js

@@ -1,5 +1,7 @@
 import { z } from 'zod';
 
+const phoneNumberRegEx = /^\+(?:[0-9] ?){6,14}[0-9]$/;
+
 export default z.object({
 	fullName: z
 		.string({ required_error: 'Please enter the name of your contact.' })
@@ -16,7 +18,7 @@ export default z.object({
 	}),
 	phoneNumber: z
 		.string()
-		.regex(/^\+(?:[0-9] ?){6,14}[0-9]$/, {
+		.regex(phoneNumberRegEx, {
 			message: 'Phone number must be in the following format: +13476748428, +493083050, etc.'
 		})
 		.min(1, { message: 'Please enter a phone number we can reach them at.' })

src/lib/formSchemas/primaryProfile.js

@@ -1,41 +1,16 @@
 import { z } from 'zod';
-// import memberApi from '$dataSources/api.that.tech/members/queries';
-
-function validateSlug(slug) {
-	// const { isSlugTaken } = memberApi();
-
-	console.log('in validate slug', slug);
-
-	// message: 'Slug is already taken. Try again.',
-	if (!/^[a-zA-Z0-9-_]+$/g.test(slug)) {
-		console.log('here');
-		return (
-			false,
-			{
-				message: `Invalid format: use only letters, numbers, dash, and underscore`
-			}
-		);
-	}
-
-	return true;
-
-	// return new Promise((res) =>
-	// 	isSlugTaken(slug).then((r) => {
-	// 		if (isNewProfile) res(!r);
-	// 		res(true);
-	// 	})
-	// );
-}
 
 export default z.object({
 	firstName: z.string().trim().min(1, { message: 'Please enter your first or given name.' }),
 	lastName: z.string().trim().min(1, { message: 'Please enter your last or family name.' }),
 	email: z.string().email({ message: 'Please enter your email address.' }).trim(),
 	profileSlug: z
 		.string({ required_error: 'You must enter a value to represent your member page.' })
+		.regex(/^[a-zA-Z0-9-_]+$/, {
+			message: 'Invalid slug format: use only letters, numbers, dash, and underscore'
+		})
 		.trim()
-		.toLowerCase()
-		.refine(validateSlug),
+		.toLowerCase(),
 	acceptedCodeOfConduct: z
 		.literal(true, {
 			errorMap: () => ({ message: 'You must accept our Code of Conduct policy.' })
@@ -61,5 +36,6 @@ export default z.object({
 			errorMap: () => ({ message: 'You Must be 13 years or older.' })
 		})
 		.default(false),
-	isDeactivated: z.literal(false).default(false)
+	isDeactivated: z.literal(false).default(false),
+	canFeature: z.boolean().default(false)
 });

src/routes/(admin my)/my/profiles/primary/+page.server.js

@@ -1,12 +1,13 @@
 import lodash from 'lodash';
 import { fail } from '@sveltejs/kit';
-import { superValidate } from 'sveltekit-superforms/server';
+import { superValidate, setError } from 'sveltekit-superforms/server';
 import { redirect } from 'sveltekit-flash-message/server';
 
 import primaryProfileSchema from '$lib/formSchemas/primaryProfile';
 
 import meApi from '$dataSources/api.that.tech/me';
 import memberApi from '$dataSources/api.that.tech/members/mutations';
+import memberApiQueries from '$dataSources/api.that.tech/members/queries';
 
 const { isNil, isEmpty } = lodash;
 
@@ -29,15 +30,10 @@ async function getProfile({ parent, fetch }) {
 
 export const load = async (request) => {
 	let currentProfile = {};
-	const { isNewProfile, me, authUser } = await getProfile(request);
+	const { isNewProfile, me } = await getProfile(request);
 
 	if (isNewProfile) {
-		currentProfile = {
-			firstName: authUser.baseUser?.given_name ? authUser.baseUser.given_name : '',
-			lastName: authUser.baseUser?.family_name ? authUser.baseUser.family_name : '',
-			profileSlug: authUser.baseUser?.nickname ? authUser.baseUser.nickname : '',
-			email: authUser.baseUser?.email ? authUser.baseUser.email : ''
-		};
+		currentProfile = undefined;
 	} else {
 		currentProfile = me;
 	}
@@ -54,6 +50,7 @@ export const actions = {
 	default: async (event) => {
 		const { queryMe } = meApi(event.fetch);
 		const { createProfile, updateProfile } = memberApi(event.fetch);
+		const { isSlugTaken } = memberApiQueries(event.fetch);
 
 		const form = await superValidate(event, primaryProfileSchema);
 
@@ -66,11 +63,20 @@ export const actions = {
 		let isNewProfile = false;
 		const me = await queryMe(fetch);
 
-		if (me) {
-			if (!isNil(me) && !isEmpty(me)) {
-				isNewProfile = false;
-			} else {
-				isNewProfile = true;
+		if (!isNil(me) && !isEmpty(me)) {
+			isNewProfile = false;
+		} else {
+			// this is a new profile
+			isNewProfile = true;
+
+			// we need to validate the slug hasn't already been taken.
+			const isTaken = await isSlugTaken(form.data.profileSlug);
+
+			if (isTaken) {
+				setError(form, 'profileSlug', 'This member slug is already taken.');
+				return fail(400, {
+					form
+				});
 			}
 		}
 

src/routes/(admin my)/my/profiles/primary/+page.svelte

@@ -5,7 +5,7 @@
 	import Seo from '$components/Seo.svelte';
 	import ProfileForm from './profileForm.svelte';
 
-	let { form } = data;
+	let { form, isNewProfile } = data;
 
 	const metaTags = ((title = 'System Profile - THAT Conference') => ({
 		title,
@@ -23,4 +23,4 @@
 </script>
 
 <Seo title={metaTags.title} tags={metaTags.tags} />
-<ProfileForm sForm={form} />
+<ProfileForm sForm={form} {isNewProfile} />

src/routes/(admin my)/my/profiles/primary/profileForm.svelte

@@ -12,13 +12,13 @@
 
 	const { form, enhance, constraints, errors, allErrors } = superForm(sForm, {
 		dataType: 'json',
-		syncFlashMessage: false,
+		defaultValidator: 'clear',
 		taintedMessage:
 			'Are you sure you want to leave this page? There are changes to your profile and they will not be saved.',
 		flashMessage: {
 			module: flashModule
 		},
-		onUpdated({ form }) {
+		onUpdated: ({ form }) => {
 			if (form.valid) {
 				invalidateAll();
 			}
@@ -133,8 +133,13 @@
 					disabled={!isNewProfile}
 					name="profileSlug"
 					class="form-input block w-full min-w-0 flex-1 rounded-none rounded-r-md
-                  border bg-gray-50 text-gray-500" />
+                  border bg-gray-50 text-gray-500"
+					class:bg-white={isNewProfile} />
 			</div>
+
+			{#if $errors.profileSlug}
+				<small>{$errors.profileSlug}</small>
+			{/if}
 		</div>
 	</div>
 
@@ -268,6 +273,8 @@
 									</div>
 								</div>
 							</div>
+
+							<input name="canFeature" hidden bind:value={$form.canFeature} />
 						</div>
 					</div>
 				</div>

src/routes/(root)/verify-account/+page.svelte

@@ -26,12 +26,11 @@
 
 <Seo title={metaTags.title} tags={metaTags.tags} />
 
-<div
-	class="min-h-screen bg-white px-4 py-16 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
-	<div class="mx-auto max-w-max">
+<section class="relative overflow-x-hidden">
+	<div class="mx-auto my-12 max-w-screen-xl px-4 sm:px-6">
 		<main class="sm:flex">
-			<div>
-				<img class="h-28" src="/images/characters/Preston@2x.png" alt="Confused Preston" />
+			<div class="hidden md:block">
+				<img class="max-h-52" src="/images/characters/Preston@2x.png" alt="Confused Preston" />
 			</div>
 
 			<div class="sm:ml-6">
@@ -69,4 +68,4 @@
 			</div>
 		</main>
 	</div>
-</div>
+</section>