init commit,

03_source/frontend/src/auth/view/auth-demo/split/split-sign-up-view.tsx

@@ -0,0 +1,153 @@
+import { z as zod } from 'zod';
+import { useForm } from 'react-hook-form';
+import { useBoolean } from 'minimal-shared/hooks';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+
+import { paths } from 'src/routes/paths';
+import { RouterLink } from 'src/routes/components';
+
+import { Iconify } from 'src/components/iconify';
+import { Form, Field } from 'src/components/hook-form';
+
+import { FormHead } from '../../../components/form-head';
+import { FormDivider } from '../../../components/form-divider';
+import { FormSocials } from '../../../components/form-socials';
+import { SignUpTerms } from '../../../components/sign-up-terms';
+
+// ----------------------------------------------------------------------
+
+export type SignUpSchemaType = zod.infer<typeof SignUpSchema>;
+
+export const SignUpSchema = zod.object({
+  firstName: zod.string().min(1, { message: 'First name is required!' }),
+  lastName: zod.string().min(1, { message: 'Last name is required!' }),
+  email: zod
+    .string()
+    .min(1, { message: 'Email is required!' })
+    .email({ message: 'Email must be a valid email address!' }),
+  password: zod
+    .string()
+    .min(1, { message: 'Password is required!' })
+    .min(6, { message: 'Password must be at least 6 characters!' }),
+});
+
+// ----------------------------------------------------------------------
+
+export function SplitSignUpView() {
+  const showPassword = useBoolean();
+
+  const defaultValues: SignUpSchemaType = {
+    firstName: '',
+    lastName: '',
+    email: '',
+    password: '',
+  };
+
+  const methods = useForm<SignUpSchemaType>({
+    resolver: zodResolver(SignUpSchema),
+    defaultValues,
+  });
+
+  const {
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  const onSubmit = handleSubmit(async (data) => {
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      console.info('DATA', data);
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  const renderForm = () => (
+    <Box sx={{ gap: 3, display: 'flex', flexDirection: 'column' }}>
+      <Box
+        sx={{ display: 'flex', gap: { xs: 3, sm: 2 }, flexDirection: { xs: 'column', sm: 'row' } }}
+      >
+        <Field.Text
+          name="firstName"
+          label="First name"
+          slotProps={{ inputLabel: { shrink: true } }}
+        />
+        <Field.Text
+          name="lastName"
+          label="Last name"
+          slotProps={{ inputLabel: { shrink: true } }}
+        />
+      </Box>
+
+      <Field.Text name="email" label="Email address" slotProps={{ inputLabel: { shrink: true } }} />
+
+      <Field.Text
+        name="password"
+        label="Password"
+        placeholder="6+ characters"
+        type={showPassword.value ? 'text' : 'password'}
+        slotProps={{
+          inputLabel: { shrink: true },
+          input: {
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton onClick={showPassword.onToggle} edge="end">
+                  <Iconify icon={showPassword.value ? 'solar:eye-bold' : 'solar:eye-closed-bold'} />
+                </IconButton>
+              </InputAdornment>
+            ),
+          },
+        }}
+      />
+
+      <Button
+        fullWidth
+        color="inherit"
+        size="large"
+        type="submit"
+        variant="contained"
+        loading={isSubmitting}
+        loadingIndicator="Create account..."
+      >
+        Create account
+      </Button>
+    </Box>
+  );
+
+  return (
+    <>
+      <FormHead
+        title="Get started absolutely free"
+        description={
+          <>
+            {`Already have an account? `}
+            <Link component={RouterLink} href={paths.authDemo.split.signIn} variant="subtitle2">
+              Get started
+            </Link>
+          </>
+        }
+        sx={{ textAlign: { xs: 'center', md: 'left' } }}
+      />
+
+      <Form methods={methods} onSubmit={onSubmit}>
+        {renderForm()}
+      </Form>
+
+      <SignUpTerms />
+
+      <FormDivider />
+
+      <FormSocials
+        signInWithGoogle={() => {}}
+        singInWithGithub={() => {}}
+        signInWithTwitter={() => {}}
+      />
+    </>
+  );
+}