update layu

dashboard_js/app/routes/auth/login/index.jsx

@@ -0,0 +1,104 @@
+import { useNavigate, useSearchParams, Link } from 'react-router'
+import { useForm } from 'react-hook-form'
+import { ErrorMessage } from '@hookform/error-message'
+import { isValidCPF } from '@brazilian-utils/brazilian-utils'
+import { yupResolver } from '@hookform/resolvers/yup'
+import { Card } from '~/layouts/auth/layout'
+import { Control, Label, Input, Button, Error } from '~/components/form'
+import { Heading } from '~/components/heading'
+import Password from './_password'
+import * as yup from 'yup'
+
+yup.addMethod(yup.string, 'username', function (message) {
+  return this.test(
+    'username',
+    message,
+    (x) => isValidCPF(x) || yup.string().email().isValid(x),
+  )
+})
+
+export const schema = yup.object({
+  username: yup
+    .string()
+    .trim()
+    .lowercase()
+    .username('Deve ser um Email ou CPF válido')
+    .transform((x) => (isValidCPF(x) ? x.replace(/\D/g, '') : x))
+    .required('Digite um Email ou CPF'),
+})
+
+export default function Component() {
+  const [searchParams] = useSearchParams()
+
+  if (searchParams.get('username')) {
+    return <Password />
+  }
+
+  return <SignIn />
+}
+
+function SignIn() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const { handleSubmit, formState, setError, register } = useForm({
+    resolver: yupResolver(schema),
+  })
+
+  const onSubmit = async ({ username }) => {
+    setSearchParams((searchParams) => {
+      searchParams.set('username', username)
+      return searchParams
+    })
+  }
+
+  return (
+    <Card>
+      <Heading>Digite o seu email ou cpf para continuar</Heading>
+
+      {/* Sign in */}
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-2.5">
+        <Control
+          className="space-y-0.5"
+          aria-invalid={'username' in formState.errors}
+        >
+          <Label aria-required={true}>Email ou CPF</Label>
+          <Input
+            className="w-full"
+            autoFocus={true}
+            {...register('username')}
+          />
+          <ErrorMessage
+            errors={formState.errors}
+            name="username"
+            render={({ message }) => <Error>{message}</Error>}
+          />
+        </Control>
+
+        <Button
+          type="submit"
+          className="w-full"
+          isLoading={formState.isSubmitting}
+        >
+          Continuar
+        </Button>
+      </form>
+
+      <div className="flex justify-center items-center gap-4">
+        <span className="flex-1 h-px bg-yellow-secondary dark:bg-gray-700" />
+        <span>ou</span>
+        <span className="flex-1 h-px bg-yellow-secondary dark:bg-gray-700" />
+      </div>
+
+      <Button
+        as={Link}
+        to={{
+          pathname: './passcode',
+          search: searchParams.toString(),
+        }}
+        relative="path"
+        className="flex justify-center items-center !bg-yellow-primary w-full"
+      >
+        Entrar com código de acesso
+      </Button>
+    </Card>
+  )
+}