Skip to content

Commit

Permalink
username select
Browse files Browse the repository at this point in the history
  • Loading branch information
@sspenst
sspenst committed May 23, 2024
1 parent bf49e7f commit 8b91e09
Show file tree
Hide file tree
Showing 5 changed files with 53 additions and 50 deletions.
2 changes: 1 addition & 1 deletion components/forms/forgotPasswordForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export default function ForgotPasswordForm() {
{errorMessage}
</div>
}
<div className='text-center text-sm mt-2'>
<div className='text-center text-sm'>
<Link
className='font-medium text-sm text-blue-500 hover:text-blue-400'
href='/login'
Expand Down
2 changes: 1 addition & 1 deletion components/forms/loginForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export default function LoginForm() {
{errorMessage}
</div>
}
<div className='text-center text-sm mt-2'>
<div className='text-center text-sm'>
<span>
{'New to Thinky.gg? '}
</span>
Expand Down
67 changes: 37 additions & 30 deletions components/forms/signupFormWizard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export default function SignupFormWizard() {
const resObj = await res.json();

setIsExistsLoading(false);
setUsernameExists(!resObj.exists);
setUsernameExists(resObj.exists);
};

// debounce the checkUsername function
Expand Down Expand Up @@ -129,33 +129,38 @@ export default function SignupFormWizard() {

return (
<FormTemplate title='Create your Thinky.gg account'>
<form className='flex flex-col items-center gap-4' onSubmit={onSubmit}>
<form className='flex flex-col gap-6' onSubmit={onSubmit}>
<StepWizard className='w-full' instance={setWizard}>
<div className='flex flex-col gap-4'>
<div className='flex flex-col gap-6'>
<div>
<label className='block mb-2' htmlFor='username'>Username</label>
<div className='flex justify-between gap-2 flex-wrap mb-2'>
<label htmlFor='username'>Username</label>
{username.length >= 3 &&
<div className='flex items-center text-sm gap-2'>
{isExistsLoading ? <LoadingSpinner size={20} /> :
isValidUsername && !usernameExists ?
<div className='text-sm' style={{
color: 'var(--color-complete)',
}}>
Username is available
</div>
:
<div className='text-red-500 text-sm'>
{!isValidUsername ? 'Username is not valid' : 'Username is not available'}
</div>
}
</div>
}
</div>
<input required onChange={e => handleUsernameChange(e)} className='w-full' id='username' type='text' placeholder='Username' />
</div>
<button
className='bg-blue-600 enabled:hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:opacity-50'
disabled={!isValidUsername || !usernameExists}
disabled={isExistsLoading || !isValidUsername || usernameExists}
onClick={() => (wizard as any)?.nextStep()}
>
Continue
</button>
{username.length >= 3 &&
<div className='flex items-center gap-2'>
{isExistsLoading ? <LoadingSpinner size='small' /> : <>
<span className={`text-sm ${isValidUsername ? 'text-green-600' : 'text-red-600'}`}>
{isValidUsername && usernameExists ? '✅' : '❌'}
</span>
<span>
{!isValidUsername ? 'Username is not valid' : usernameExists ? 'Username is available' : 'Username is not available'}
</span>
</>
}
</div>
}
</div>
<div className='flex flex-col gap-2'>
<p className='text-center text-lg'>
Expand Down Expand Up @@ -186,22 +191,24 @@ export default function SignupFormWizard() {
</div>
</div>
</StepWizard>
<Link
className='font-medium mt-2 text-sm text-blue-500 hover:text-blue-400'
href='/play-as-guest'
>
Play as guest
</Link>
<div className='text-center text-sm'>
<span>
{'Already have an account? '}
</span>
<div className='flex flex-col gap-4 items-center'>
<Link
className='font-medium text-sm text-blue-500 hover:text-blue-400'
href='/login'
href='/play-as-guest'
>
Log in
Play as guest
</Link>
<div className='text-center text-sm'>
<span>
{'Already have an account? '}
</span>
<Link
className='font-medium text-sm text-blue-500 hover:text-blue-400'
href='/login'
>
Log in
</Link>
</div>
</div>
</form>
</FormTemplate>
Expand Down
30 changes: 13 additions & 17 deletions components/page/loadingSpinner.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,25 @@
import React from 'react';

interface LoadingSpinnerProps {
size?: 'small' | 'medium' | 'large';
size?: number;
}

export default function LoadingSpinner({ size }: LoadingSpinnerProps) {
if (size === 'small') {
return <svg className='text-gray-300 animate-spin' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'
width='24' height='24'>
export default function LoadingSpinner({ size = 32 }: LoadingSpinnerProps) {
return (
<svg className='animate-spin' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'
width={size} height={size} style={{
color: 'var(--color-gray)',
}}>
<path
d='M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z'
stroke='currentColor' strokeWidth='5' strokeLinecap='round' strokeLinejoin='round' />
stroke='currentColor' strokeWidth='5' strokeLinecap='round' strokeLinejoin='round' style={{
color: 'var(--bg-color)',
}}
/>
<path
d='M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762'
stroke='currentColor' strokeWidth='5' strokeLinecap='round' strokeLinejoin='round' className='text-gray-900' />
stroke='currentColor' strokeWidth='5' strokeLinecap='round' strokeLinejoin='round'
/>
</svg>
;
}

return (
<div className='flex justify-center'>
<svg aria-hidden='true' className='w-8 h-8 animate-spin text-gray-600 fill-blue-600' viewBox='0 0 100 101' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z' fill='currentColor' />
<path d='M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z' fill='currentFill' />
</svg>
</div>
);
}
2 changes: 1 addition & 1 deletion pages/[subdomain]/play/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export default function PlayPage({ reqUser }: PlayPageProps) {
<>
<PlayerRank levelsSolvedByDifficulty={levelsSolvedByDifficulty} user={reqUser} />
</>
: <LoadingSpinner size='small' />
: <LoadingSpinner size={24} />
}
</div>
<div className='flex flex-col items-center gap-6'>
Expand Down

0 comments on commit 8b91e09

Please sign in to comment.