Merge pull request #101 from bugout-dev/register-page

Register page

frontend/pages/register/index.js

@@ -0,0 +1,133 @@
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import {
+  Heading,
+  Text,
+  Stack,
+  Box,
+  FormControl,
+  FormErrorMessage,
+  InputGroup,
+  Button,
+  Input,
+  InputRightElement,
+} from "@chakra-ui/react";
+import Icon from "../../src/components/CustomIcon";
+import useSignUp from "../../src/core/hooks/useSignUp";
+import useUser from "../../src/core/hooks/useSignUp";
+import useRouter from "../../src/core/hooks/useSignUp";
+import { DEFAULT_METATAGS } from "../../src/components/constants";
+
+export async function getStaticProps() {
+  return {
+    props: { metaTags: { ...DEFAULT_METATAGS } },
+  };
+}
+
+const Register = () => {
+  const router = useRouter();
+  const { handleSubmit, errors, register } = useForm();
+  const [showPassword, togglePassword] = useState(false);
+
+  const { user } = useUser();
+  const loggedIn = user && user.username;
+
+  //   const { email, code } = router.query;
+  const email = router.query?.email;
+  const code = router.query?.code;
+  const { signUp, isLoading } = useSignUp(code);
+
+  loggedIn && router.push("/stream");
+
+  return (
+    <Box minH="900px" w="100%" px={["7%", null, "25%"]} alignSelf="center">
+      <Heading mt={2} size="md">
+        Create an account
+      </Heading>
+      <Text color="gray.300" fontSize="md">
+        Sign up for free
+      </Text>
+      <form onSubmit={handleSubmit(signUp)}>
+        <Stack width="100%" pt={4} spacing={3}>
+          <FormControl isInvalid={errors.username}>
+            <InputGroup>
+              <Input
+                variant="filled"
+                colorScheme="primary"
+                placeholder="Your username here"
+                name="username"
+                ref={register({ required: "Username is required!" })}
+              />
+              <InputRightElement>
+                <Icon icon="name" />
+              </InputRightElement>
+            </InputGroup>
+            <FormErrorMessage color="unsafe.400" pl="1">
+              {errors.username && errors.username.message}
+            </FormErrorMessage>
+          </FormControl>
+          <FormControl isInvalid={errors.email}>
+            <InputGroup>
+              {!email && (
+                <Input
+                  variant="filled"
+                  colorScheme="primary"
+                  placeholder="Your email here"
+                  name="email"
+                  ref={register({ required: "Email is required!" })}
+                />
+              )}
+              {email && (
+                <Input
+                  variant="filled"
+                  colorScheme="primary"
+                  placeholder="Your email here"
+                  defaultValue={email}
+                  isReadOnly={true}
+                  name="email"
+                  ref={register({ required: "Email is required!" })}
+                />
+              )}
+              <InputRightElement>
+                <Icon icon="name" />
+              </InputRightElement>
+            </InputGroup>
+            <FormErrorMessage color="unsafe.400" pl="1">
+              {errors.email && errors.email.message}
+            </FormErrorMessage>
+          </FormControl>
+          <FormControl isInvalid={errors.password}>
+            <InputGroup>
+              <Input
+                variant="filled"
+                colorScheme="primary"
+                autoComplete="new-password"
+                placeholder="Add password"
+                name="password"
+                type={showPassword ? "text" : "password"}
+                ref={register({ required: "Password is required!" })}
+              />
+              <InputRightElement onClick={() => togglePassword(!showPassword)}>
+                <Icon icon="password" />
+              </InputRightElement>
+            </InputGroup>
+            <FormErrorMessage color="unsafe.400" pl="1">
+              {errors.password && errors.password.message}
+            </FormErrorMessage>
+          </FormControl>
+        </Stack>
+        <Button
+          my={8}
+          variant="solid"
+          colorScheme="primary"
+          width="100%"
+          type="submit"
+          isLoading={isLoading}
+        >
+          Register
+        </Button>
+      </form>
+    </Box>
+  );
+};
+export default Register;