feature: add first time install process

frontend/src/shared/components/Register/index.tsx

@@ -0,0 +1,150 @@
+import React, { useState } from 'react';
+import AccessAccount from 'shared/undraw/AccessAccount';
+import { User, Lock, Citadel } from 'shared/icons';
+import { useForm } from 'react-hook-form';
+
+import {
+  Form,
+  LogoWrapper,
+  LogoTitle,
+  ActionButtons,
+  RegisterButton,
+  FormError,
+  FormIcon,
+  FormLabel,
+  FormTextInput,
+  Wrapper,
+  Column,
+  LoginFormWrapper,
+  LoginFormContainer,
+  Title,
+  SubTitle,
+} from './Styles';
+
+const EMAIL_PATTERN = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i;
+const INITIALS_PATTERN = /[a-zA-Z]{2,3}/i;
+
+const Register = ({ onSubmit }: RegisterProps) => {
+  const [isComplete, setComplete] = useState(true);
+  const { register, handleSubmit, errors, setError } = useForm<RegisterFormData>();
+  const loginSubmit = (data: RegisterFormData) => {
+    setComplete(false);
+    onSubmit(data, setComplete, setError);
+  };
+  return (
+    <Wrapper>
+      <Column>
+        <AccessAccount width={275} height={250} />
+      </Column>
+      <Column>
+        <LoginFormWrapper>
+          <LoginFormContainer>
+            <LogoWrapper>
+              <Citadel width={42} height={42} />
+              <LogoTitle>Citadel</LogoTitle>
+            </LogoWrapper>
+            <Title>Register</Title>
+            <SubTitle>Please create the system admin user</SubTitle>
+            <Form onSubmit={handleSubmit(loginSubmit)}>
+              <FormLabel htmlFor="fullname">
+                Full name
+                <FormTextInput
+                  type="text"
+                  id="fullname"
+                  name="fullname"
+                  ref={register({ required: 'Full name is required' })}
+                />
+                <FormIcon>
+                  <User color="#c2c6dc" size={20} />
+                </FormIcon>
+              </FormLabel>
+              {errors.username && <FormError>{errors.username.message}</FormError>}
+              <FormLabel htmlFor="username">
+                Username
+                <FormTextInput
+                  type="text"
+                  id="username"
+                  name="username"
+                  ref={register({ required: 'Username is required' })}
+                />
+                <FormIcon>
+                  <User color="#c2c6dc" size={20} />
+                </FormIcon>
+              </FormLabel>
+              {errors.username && <FormError>{errors.username.message}</FormError>}
+              <FormLabel htmlFor="email">
+                Email
+                <FormTextInput
+                  type="text"
+                  id="email"
+                  name="email"
+                  ref={register({
+                    required: 'Email is required',
+                    pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
+                  })}
+                />
+                <FormIcon>
+                  <User color="#c2c6dc" size={20} />
+                </FormIcon>
+              </FormLabel>
+              {errors.email && <FormError>{errors.email.message}</FormError>}
+              <FormLabel htmlFor="initials">
+                Initials
+                <FormTextInput
+                  type="text"
+                  id="initials"
+                  name="initials"
+                  ref={register({
+                    required: 'Initials is required',
+                    pattern: {
+                      value: INITIALS_PATTERN,
+                      message: 'Initials must be between 2 to 3 characters.',
+                    },
+                  })}
+                />
+                <FormIcon>
+                  <User color="#c2c6dc" size={20} />
+                </FormIcon>
+              </FormLabel>
+              {errors.initials && <FormError>{errors.initials.message}</FormError>}
+              <FormLabel htmlFor="password">
+                Password
+                <FormTextInput
+                  type="password"
+                  id="password"
+                  name="password"
+                  ref={register({ required: 'Password is required' })}
+                />
+                <FormIcon>
+                  <Lock width={20} height={20} />
+                </FormIcon>
+              </FormLabel>
+              {errors.password && <FormError>{errors.password.message}</FormError>}
+              <FormLabel htmlFor="password_confirm">
+                Password (Confirm)
+                <FormTextInput
+                  type="password"
+                  id="password_confirm"
+                  name="password_confirm"
+                  ref={register({ required: 'Password (confirm) is required' })}
+                />
+                <FormIcon>
+                  <Lock width={20} height={20} />
+                </FormIcon>
+              </FormLabel>
+              {errors.password_confirm && <FormError>{errors.password_confirm.message}</FormError>}
+
+              <ActionButtons>
+                <RegisterButton type="submit" disabled={!isComplete}>
+                  Register
+                </RegisterButton>
+              </ActionButtons>
+            </Form>
+          </LoginFormContainer>
+        </LoginFormWrapper>
+      </Column>
+    </Wrapper>
+  );
+};
+
+export default Register;