Merge pull request #44 from design-sparx/ft/onboard

chore(ui): changed onboarding flow to landing -> signin -> dashboard,…
design-sparx · Apr 6, 2024 · 6d51ea5 · 6d51ea5
2 parents d5d5854 + 7bb3b54
commit 6d51ea5
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 45 deletions.
diff --git a/app/authentication/signin/page.tsx b/app/authentication/signin/page.tsx
@@ -14,14 +14,29 @@ import {
 } from '@mantine/core';
 import Link from 'next/link';
 import { PATH_AUTH, PATH_DASHBOARD } from '@/routes';
-import { Metadata } from 'next';
 import { Surface } from '@/components';
 import classes from './page.module.css';
+import { useForm } from '@mantine/form';
+import { useRouter } from 'next/navigation';
+
+const LINK_PROPS: TextProps = {
+  className: classes.link,
+};
 
 function Page() {
-  const LINK_PROPS: TextProps = {
-    className: classes.link,
-  };
+  const { push } = useRouter();
+  const form = useForm({
+    initialValues: { email: '[email protected]', password: 'Demo@123' },
+
+    // functions will be used to validate values at corresponding key
+    validate: {
+      email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),
+      password: (value) =>
+        value && value?.length < 6
+          ? 'Password must include at least 6 characters'
+          : null,
+    },
+  });
 
   return (
     <>
@@ -36,38 +51,44 @@ function Page() {
       <Text ta="center">Sign in to your account to continue</Text>
 
       <Surface component={Paper} className={classes.card}>
-        <TextInput
-          label="Email"
-          placeholder="[email protected]"
-          required
-          classNames={{ label: classes.label }}
-        />
-        <PasswordInput
-          label="Password"
-          placeholder="Your password"
-          required
-          mt="md"
-          classNames={{ label: classes.label }}
-        />
-        <Group justify="space-between" mt="lg">
-          <Checkbox label="Remember me" classNames={{ label: classes.label }} />
-          <Text
-            component={Link}
-            href={PATH_AUTH.passwordReset}
-            size="sm"
-            {...LINK_PROPS}
-          >
-            Forgot password?
-          </Text>
-        </Group>
-        <Button
-          fullWidth
-          mt="xl"
-          component={Link}
-          href={PATH_DASHBOARD.default}
+        <form
+          onSubmit={form.onSubmit(() => {
+            push(PATH_DASHBOARD.default);
+          })}
         >
-          Sign in
-        </Button>
+          <TextInput
+            label="Email"
+            placeholder="[email protected]"
+            required
+            classNames={{ label: classes.label }}
+            {...form.getInputProps('email')}
+          />
+          <PasswordInput
+            label="Password"
+            placeholder="Your password"
+            required
+            mt="md"
+            classNames={{ label: classes.label }}
+            {...form.getInputProps('password')}
+          />
+          <Group justify="space-between" mt="lg">
+            <Checkbox
+              label="Remember me"
+              classNames={{ label: classes.label }}
+            />
+            <Text
+              component={Link}
+              href={PATH_AUTH.passwordReset}
+              size="sm"
+              {...LINK_PROPS}
+            >
+              Forgot password?
+            </Text>
+          </Group>
+          <Button fullWidth mt="xl" type="submit">
+            Sign in
+          </Button>
+        </form>
         <Center mt="md">
           <Text
             fz="sm"

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -61,7 +61,7 @@ export default function RootLayout({
         <ColorSchemeScript defaultColorScheme="auto" />
       </head>
       <body>
-        <MantineProvider theme={myTheme} defaultColorScheme="auto">
+        <MantineProvider theme={myTheme} defaultColorScheme="light">
           <Notifications position="bottom-right" zIndex={1000} />
           <ModalsProvider>{children}</ModalsProvider>
         </MantineProvider>

diff --git a/components/AppMain/App.module.css b/components/AppMain/App.module.css
@@ -6,6 +6,6 @@
   }
 
   @mixin dark {
-    background-color: var(--mantine-color-dark-6);
+    background-color: var(--mantine-color-dark-9);
   }
 }
diff --git a/components/HeaderNav/HeaderNav.tsx b/components/HeaderNav/HeaderNav.tsx
@@ -369,12 +369,6 @@ const HeaderNav = (props: HeaderNavProps) => {
             >
               Dark
             </Menu.Item>
-            <Menu.Item
-              leftSection={<IconCircleHalf2 size={16} />}
-              onClick={() => setColorScheme('auto')}
-            >
-              Use System Colors
-            </Menu.Item>
           </Menu.Dropdown>
         </Menu>
       </Group>

diff --git a/layout/Guest/HeaderNav/HeaderNav.tsx b/layout/Guest/HeaderNav/HeaderNav.tsx
@@ -10,7 +10,7 @@ import {
   useMantineTheme,
 } from '@mantine/core';
 import { useDisclosure, useMediaQuery } from '@mantine/hooks';
-import { PATH_DASHBOARD, PATH_DOCS, PATH_GITHUB } from '@/routes';
+import { PATH_AUTH, PATH_DASHBOARD, PATH_DOCS, PATH_GITHUB } from '@/routes';
 import { Logo } from '@/components';
 import Link from 'next/link';
 import classes from './HeaderNav.module.css';
@@ -76,7 +76,7 @@ const HeaderNav = () => {
             </Button>
             <Button
               component={Link}
-              href={PATH_DASHBOARD.default}
+              href={PATH_AUTH.signin}
               leftSection={<IconPlayerPlay size={16} />}
             >
               Live Preview