init commit,

03_source/frontend/src/auth/view/auth-demo/centered/centered-sign-in-view.tsx

@@ -0,0 +1,147 @@
+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 { AnimateLogoRotate } from 'src/components/animate';
+
+import { FormHead } from '../../../components/form-head';
+import { FormSocials } from '../../../components/form-socials';
+import { FormDivider } from '../../../components/form-divider';
+
+// ----------------------------------------------------------------------
+
+export type SignInSchemaType = zod.infer<typeof SignInSchema>;
+
+export const SignInSchema = zod.object({
+  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 CenteredSignInView() {
+  const showPassword = useBoolean();
+
+  const defaultValues: SignInSchemaType = {
+    email: '',
+    password: '',
+  };
+
+  const methods = useForm<SignInSchemaType>({
+    resolver: zodResolver(SignInSchema),
+    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' }}>
+      <Field.Text name="email" label="Email address" slotProps={{ inputLabel: { shrink: true } }} />
+
+      <Box sx={{ gap: 1.5, display: 'flex', flexDirection: 'column' }}>
+        <Link
+          component={RouterLink}
+          href={paths.authDemo.centered.resetPassword}
+          variant="body2"
+          color="inherit"
+          sx={{ alignSelf: 'flex-end' }}
+        >
+          Forgot password?
+        </Link>
+
+        <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>
+              ),
+            },
+          }}
+        />
+      </Box>
+
+      <Button
+        fullWidth
+        color="inherit"
+        size="large"
+        type="submit"
+        variant="contained"
+        loading={isSubmitting}
+        loadingIndicator="Sign in..."
+      >
+        Sign in
+      </Button>
+    </Box>
+  );
+
+  return (
+    <>
+      <AnimateLogoRotate sx={{ mb: 3, mx: 'auto' }} />
+
+      <FormHead
+        title="Sign in to your account"
+        description={
+          <>
+            {`Don’t have an account? `}
+            <Link component={RouterLink} href={paths.authDemo.centered.signUp} variant="subtitle2">
+              Get started
+            </Link>
+          </>
+        }
+      />
+
+      <Form methods={methods} onSubmit={onSubmit}>
+        {renderForm()}
+      </Form>
+
+      <FormDivider />
+
+      <FormSocials
+        signInWithGoogle={() => {}}
+        singInWithGithub={() => {}}
+        signInWithTwitter={() => {}}
+      />
+    </>
+  );
+}