fix: better sign up flow (closes #215)

src/components/SignUp/Form.tsx

@@ -8,9 +8,11 @@ export function SignUpForm() {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
 
   const handleSignUp = async () => {
+    setIsLoading(true);
     const { error } = await supabase.auth.signUp(
       { email, password },
       {
@@ -19,8 +21,10 @@ export function SignUpForm() {
         },
       },
     );
-    if (error) alert(error.message);
-    else {
+    if (error) {
+      setIsLoading(false);
+      alert(error.message);
+    } else {
       router.push('/confirm-email');
     }
   };
@@ -89,10 +93,11 @@ export function SignUpForm() {
         </div>
       </div>
       <button
+        disabled={isLoading}
         type='submit'
-        className='group relative my-4 flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
+        className='group relative my-4 flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-70'
       >
-        Sign up
+        {isLoading ? 'Loading...' : 'Sign up'}
       </button>
     </form>
   );

src/pages/confirm-email.tsx

@@ -1,4 +1,5 @@
 import Head from 'next/head';
+import Link from 'next/link';
 import { MdOutlineMarkEmailRead } from 'react-icons/md';
 import type { PageProps } from '../lib/types';
 
@@ -15,6 +16,12 @@ export default function ConfirmEmail({}: PageProps) {
           <p className='text-center text-gray-700'>
             Thanks for signing up! We&#39;ve sent you an email to confirm your account.
           </p>
+          <Link
+            href='/signin'
+            className='rounded-md bg-blue-500 py-2 px-4 text-sm font-medium text-white hover:bg-blue-700'
+          >
+            Go to Sign in
+          </Link>
         </div>
       </main>
     </>