Add Custom onboarding pages

package.json

@@ -27,10 +27,12 @@
     "@visx/vendor": "^3.5.0",
     "ethers": "^6.13.1",
     "framer-motion": "^11.3.17",
+    "input-otp": "^1.2.4",
     "loglevel": "^1.9.1",
     "mutative": "^1.0.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
     "react-router-dom": "^6.25.1",
     "use-mutative": "^1.1.5"
   },

src/onboarding/Login.jsx

@@ -1,7 +1,65 @@
+import { Button, Divider, Input } from '@nextui-org/react';
+import { useSignIn } from '@clerk/clerk-react';
 import { Link } from 'react-router-dom';
-import { SignIn } from '@clerk/clerk-react';
+import { reduceState } from '../shared/helpers';
+import { useForm } from 'react-hook-form';
+import { useMutativeReducer } from 'use-mutative';
 
 export default function Login() {
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors }
+  } = useForm();
+
+  const { isLoaded: isClerkLoaded, signIn, setActive } = useSignIn();
+  const [state, dispatch] = useMutativeReducer(reduceState, {
+    isLoading: false
+  });
+
+  const handleLogin = async data => {
+    if (!isClerkLoaded) {
+      return;
+    }
+    try {
+      dispatch({ isLoading: true });
+      const signInAttempt = await signIn.create({
+        identifier: data.email,
+        password: data.password
+      });
+      if (signInAttempt.status === 'complete') {
+        await setActive({ session: signInAttempt.createdSessionId });
+      } else {
+        console.error(JSON.stringify(signInAttempt, null, 2));
+      }
+    } catch (err) {
+      err.errors.forEach(e => {
+        if (e.meta.paramName === 'identifier') {
+          setError('email', {
+            message: e.message
+          });
+        }
+        if (e.meta.paramName === 'password') {
+          setError('password', {
+            message: e.message
+          });
+        }
+      });
+    } finally {
+      dispatch({ isLoading: false });
+    }
+  };
+
+  // const handleGoogleLogin = async () => {
+  //   await signIn.authenticateWithRedirect({
+  //     strategy: 'oauth_google',
+  //     redirectUrl:
+  //       'https://hip-primate-84.clerk.accounts.dev/v1/oauth_callback',
+  //     redirectUrlComplete: '/'
+  //   });
+  // };
+
   return (
     <div className="flex h-full flex-col items-center justify-center gap-y-9">
       <div className="flex flex-col gap-y-4 text-center">
@@ -12,44 +70,97 @@ export default function Login() {
           Let's sign in to your account or if you don't have one, sign up
         </p>
       </div>
-      <div className="flex flex-col items-center justify-center rounded-xl border border-outline bg-content1">
-        <SignIn
-          appearance={{
-            layout: {
-              socialButtonsPlacement: 'bottom'
-            },
-            elements: {
-              rootBox: 'lg:w-[31rem]',
-              cardBox: 'lg:w-[31rem]',
-              card: 'bg-content1 px-5',
-              headerTitle:
-                'text-foreground-1 text-3xl font-display font-normal',
-              headerSubtitle: 'hidden',
-              socialButtons: 'border rounded-md border-outline py-2',
-              socialButtonsBlockButtonText__google: 'text-foreground-2',
-              dividerLine: 'bg-outline',
-              formFieldLabel: 'text-foreground-1',
-              formFieldInput:
-                'bg-transparent !border !border-outline text-white px-4 py-4 focus:!border-foreground-1',
-              formFieldInputShowPasswordButton: 'text-foreground-2',
-              formButtonPrimary:
-                '!border bg-transparent text-secondary after:!bg-none after:border py-3 after:border-secondary hover:bg-content1 hover:border hover:border-focus hover:text-focus',
-              footer: 'hidden',
-              footerAction: 'bg-content1',
-              otpCodeFieldInput: '!border !border-outline text-white',
-              formResendCodeLink: 'text-foreground-2',
-              backLink: 'text-foreground-2'
+
+      {/* <GoogleOneTap /> */}
+
+      <form
+        className="flex w-full flex-col items-center justify-center gap-y-5 rounded-lg border border-outline bg-content1 p-5 md:w-[31rem]"
+        onSubmit={handleSubmit(handleLogin)}
+      >
+        <p className="font-display text-3xl text-foreground-1">
+          Log In to your account
+        </p>
+
+        <Input
+          classNames={{
+            inputWrapper: 'rounded-sm border border-outline bg-content1',
+            label: 'text-foreground-1',
+            input: 'placeholder:text-foreground-2'
+          }}
+          errorMessage={errors.email?.message}
+          isInvalid={!!errors.email}
+          label="Email"
+          name="email"
+          placeholder="Enter your email"
+          size="sm"
+          variant="bordered"
+          {...register('email', {
+            required: 'Email is required',
+            pattern: {
+              value: RegExp(/^[^\s@]+@[^\s@]+\.[^\s@]+$/),
+              message: 'Enter a valid email'
             }
+          })}
+        />
+
+        <Input
+          classNames={{
+            inputWrapper: 'rounded-sm border border-outline bg-content1',
+            label: 'text-foreground-1',
+            input: 'placeholder:text-foreground-2'
           }}
+          errorMessage={errors.password?.message}
+          isInvalid={!!errors.password}
+          label="Password"
+          name="password"
+          placeholder="Enter your password"
+          size="sm"
+          type="password"
+          variant="bordered"
+          {...register('password', {
+            required: 'Password is required',
+            minLength: {
+              value: 8,
+              message: 'Password must contain 8 characters'
+            }
+          })}
         />
-        <p className="mb-2 text-foreground-2">Don't have an account?</p>
-        <Link
-          className="mb-7 cursor-pointer text-foreground-1 hover:underline"
-          to={'/register'}
+
+        <div className="flex w-full items-center gap-x-2">
+          <Divider className="w-[46.5%] bg-outline" />
+          <p>or</p>
+          <Divider className="w-[46.5%] bg-outline" />
+        </div>
+        {/* <Button
+          className="rounded-sm border border-outline"
+          fullWidth
+          onPress={handleGoogleLogin}
+          startContent={<Image src="/images/google.svg" />}
+          variant="bordered"
         >
-          Create account
-        </Link>
-      </div>
+          Continue with Google
+        </Button> */}
+
+        <Button
+          className="rounded-sm border border-secondary text-secondary hover:border-focus hover:text-focus"
+          fullWidth
+          isLoading={state.isLoading}
+          type="submit"
+          variant="bordered"
+        >
+          Login
+        </Button>
+
+        <div className="text-center">
+          <p className="mb-2 text-foreground-2">Don't have an account?</p>
+          <Link
+            className="cursor-pointer text-foreground-1 hover:underline"
+            to={'/register'}
+          >
+            Create account
+          </Link>
+        </div>
+      </form>
     </div>
   );
 }