feat: WIP

package.json

@@ -23,7 +23,8 @@
     "react-dom": "latest",
     "react-hook-form": "^7.51.2",
     "react-icons": "^5.0.1",
-    "yup": "^1.4.0"
+    "yup": "^1.4.0",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/cookie": "^0.6.0",
@@ -34,4 +35,4 @@
     "eslint-config-next": "latest",
     "typescript": "latest"
   }
-}
+}

src/pages/auth/signup.tsx

@@ -0,0 +1,169 @@
+import { z } from "zod";
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { Button, Flex, Text, Stack, Box } from "@chakra-ui/react";
+
+// import { API } from '../../constant';
+
+import { Input } from "@/components/Form/Input";
+import { LogoSkateHub } from "@/components/LogoSkateHub";
+
+const strapiUrl = process.env.NEXT_PUBLIC_STRAPI_URL;
+
+export default function SignUp() {
+  const route = useRouter();
+  const [error, setError] = useState("");
+
+  const signUpSchema = z
+    .object({
+      name: z.string().nonempty("Campo obrigatório.").min(8, { message: "Nome deve ter no mínimo 8 caracteres." }),
+      username: z
+        .string()
+        .nonempty("Campo obrigatório.")
+        .min(3, { message: "Usuário deve ter no mínimo 3 caracteres." }),
+      email: z.string().nonempty("Campo obrigatório.").email({ message: "E-mail dever ser um e-mail válido." }),
+      password: z.string().nonempty("Campo obrigatório.").min(6, { message: "Senha deve ter no mínimo 6 caracteres." }),
+      confirmPassword: z.string().nonempty("Campo obrigatório.")
+    })
+    .superRefine(({ confirmPassword, password }, ctx) => {
+      if (confirmPassword !== password) {
+        ctx.addIssue({
+          code: "custom",
+          message: "Senhas não conferem.",
+          path: ["confirmPassword"]
+        });
+      }
+    });
+
+  type SignUpSchema = z.infer<typeof signUpSchema>;
+
+  const {
+    handleSubmit,
+    register,
+    formState: { errors, isSubmitting }
+  } = useForm<SignUpSchema>({
+    resolver: zodResolver(signUpSchema),
+    defaultValues: { username: "", email: "", password: "" }
+  });
+
+  const onFinish: SubmitHandler<SignUpSchema> = async values => {
+    try {
+      const response = await fetch(`${strapiUrl}/api/auth/local/register`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(values)
+      });
+
+      const data = await response.json();
+
+      if (data.error) {
+        throw data.error;
+      } else {
+        console.log("User created successfully");
+        route.push("/dashboard");
+      }
+    } catch (error) {
+      console.log(error);
+      setError((error as Error).message ?? "Couldn't create user");
+    } finally {
+    }
+  };
+
+  return (
+    <Flex alignItems="center" justifyContent="center">
+      <Flex
+        as="form"
+        w="100%"
+        maxWidth={720}
+        bg="gray.800"
+        p="8"
+        borderRadius={8}
+        flexDir="column"
+        onSubmit={handleSubmit(onFinish)}
+      >
+        <Stack spacing={4}>
+          <Flex justifyContent="center" mb="4">
+            <LogoSkateHub />
+          </Flex>
+          <Flex flexDir="column">
+            <Box border="1px solid" borderColor="gray.700" borderRadius="md" p="4">
+              <Text fontSize="smaller" align="left">
+                Por favor, preencha as informações iniciais abaixo para concluir seu pré-cadastro. Após o envio, nossa
+                equipe administrativa receberá uma notificação e avaliará suas informações.
+              </Text>
+              <Text fontSize="smaller" mt="4" align="left">
+                Assim que seu cadastro for aprovado, você receberá um e-mail de confirmação para realizar o login na
+                plataforma.
+              </Text>
+            </Box>
+          </Flex>
+          <Flex flexDir="column">
+            <Input
+              id="name"
+              type="text"
+              label="Nome completo"
+              placeholder="Digite seu nome completo"
+              {...register("name")}
+              error={errors.name}
+            />
+          </Flex>
+          <Flex flexDir={["column", null, "row"]} gap={[null, 4]}>
+            <Input
+              id="username"
+              type="text"
+              label="Usuário"
+              placeholder="Digite seu nome de usuário"
+              {...register("username")}
+              error={errors.username}
+            />
+            <Input
+              id="email"
+              type="email"
+              label="E-mail"
+              placeholder="Digite seu e-mail"
+              {...register("email")}
+              error={errors.email}
+            />
+          </Flex>
+          <Flex flexDir={["column", null, "row"]} gap={[null, 4]}>
+            <Input
+              id="password"
+              type="password"
+              label="Senha"
+              placeholder="Digite uma senha"
+              {...register("password")}
+              error={errors.password}
+            />
+            <Input
+              id="confirmPassword"
+              type="password"
+              label="Confirmar senha"
+              placeholder="Confirme a senha"
+              {...register("confirmPassword")}
+              error={errors.confirmPassword}
+            />
+          </Flex>
+        </Stack>
+
+        <Button
+          type="submit"
+          mt="6"
+          colorScheme="green"
+          size="lg"
+          isLoading={isSubmitting}
+          loadingText="Registrando..."
+        >
+          Registrar
+        </Button>
+
+        <Text as="small" color="red.500" mt="4" fontSize="smaller" fontWeight="300" align="center">
+          {error ? error : null}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+}