add sign up page

web/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/icons": "^4.7.0",
     "antd": "^4.22.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

web/src/components/FormRegisterAuth/index.jsx

@@ -1,9 +1,94 @@
-import { Form, Input } from 'antd';
+import './styles.scss';
+
+import { Button, Checkbox, Form, Input } from 'antd';
+import { LoginOutlined } from '@ant-design/icons';
 
 export const FormRegisterAuth = () => {
   return (
-    <Form.Item>
-      <Input placeholder="Full Name" />
-    </Form.Item>
+    <div className="authContainer">
+      <LoginOutlined className="loginOutlinedSVG" style={{ color: 'var(--green-500)' }} />
+      <h1>Psychologist Center</h1>
+      <p>Create your account</p>
+      <Form.Item
+        name="name"
+        rules={[
+          {
+            required: true,
+            message: 'Please input your name.',
+          },
+        ]}
+      >
+        <Input placeholder="Name" />
+      </Form.Item>
+      <Form.Item
+        name="email"
+        rules={[
+          {
+            type: 'email',
+            message: 'The input is not valid e-mail.',
+          },
+          {
+            required: true,
+            message: 'Please input your e-mail.',
+          },
+        ]}
+      >
+        <Input placeholder="E-mail" />
+      </Form.Item>
+      <Form.Item
+        name="password"
+        rules={[
+          {
+            required: true,
+            message: 'Please input your password!',
+          },
+        ]}
+        hasFeedback
+      >
+        <Input.Password placeholder="Password" />
+      </Form.Item>
+      <Form.Item
+        name="confirm"
+        dependencies={['password']}
+        hasFeedback
+        rules={[
+          {
+            required: true,
+            message: 'Please confirm your password.',
+          },
+          ({ getFieldValue }) => ({
+            validator(_, value) {
+              if (!value || getFieldValue('password') === value) {
+                return Promise.resolve();
+              }
+
+              return Promise.reject(new Error('The two passwords that you entered do not match.'));
+            },
+          }),
+        ]}
+      >
+        <Input.Password placeholder="Confirm your password" />
+      </Form.Item>
+
+      <Form.Item
+        name="agreement"
+        valuePropName="checked"
+        rules={[
+          {
+            validator: (_, value) =>
+              value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),
+          },
+        ]}
+      >
+        <Checkbox>
+          I have read the <a href="">agreement</a>
+        </Checkbox>
+      </Form.Item>
+      <Form.Item>
+        <Button type="secondary" htmlType="submit">
+          Sign up
+        </Button>
+      </Form.Item>
+    </div>
   );
 };

web/src/components/FormRegisterAuth/styles.scss

@@ -0,0 +1,37 @@
+.authContainer {
+  .loginOutlinedSVG {
+    display: block;
+    text-align: center;
+    font-size: 50px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+
+  h1 {
+    text-align: center;
+    font-size: 30px;
+    color: var(--blue-400);
+    margin: 0;
+  }
+
+  p {
+    text-align: center;
+    color: var(--blue-400);
+    margin-bottom: 20px;
+  }
+
+  button {
+    float: right;
+    background-color: var(--green-500);
+    color: white;
+  }
+
+  border: 1px solid var(--gray-300);
+  padding: 20px;
+  max-width: 600px;
+  margin: auto;
+
+  background: #ffffff;
+  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+}

web/src/components/Page/index.jsx

@@ -29,7 +29,7 @@ export function Page({ children, user }) {
               className="site-layout-background"
               style={{
                 padding: 24,
-                minHeight: 360,
+                minHeight: '90vh',
               }}
             >
               {children}