feat: update front layout

assets/pages/FAQPage.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+
+export default function FAQPage() {
+    return <p>
+        FAQ Page
+    </p>
+}

assets/pages/LoginPage.tsx

@@ -1,7 +1,74 @@
-import React from "react";
+import React, {createContext, useContext, useEffect, useState} from "react";
+import {Alert, Button, Card, Flex, Form, Input} from "antd";
+import {login} from "../utils/api";
+import {useNavigate} from "react-router-dom";
+
+type FieldType = {
+    username: string;
+    password: string;
+};
+
+export const AuthenticatedContext = createContext<any>(null)
 
 export default function Page() {
-    return <p>
-        Login Page
-    </p>
+
+    const [error, setError] = useState()
+    const navigate = useNavigate()
+    const {isAuthenticated, setIsAuthenticated} = useContext(AuthenticatedContext)
+
+    const onFinish = (data: FieldType) => {
+        login(data.username, data.password).then(() => {
+            setIsAuthenticated(true)
+            navigate('/search/domain')
+        }).catch((e) => {
+            setIsAuthenticated(false)
+            setError(e.response.data.message)
+        })
+    }
+
+    return <Flex gap="middle" align="center" justify="center" vertical><Card
+        title="Log in"
+        style={{width: 500}}
+    >
+        {error &&
+            <Alert
+                type='error'
+                message='Error'
+                banner={true}
+                role='role'
+                description={error}
+                style={{marginBottom: '1em'}}
+            />}
+        <Form
+            name="basic"
+            labelCol={{span: 8}}
+            wrapperCol={{span: 16}}
+            style={{maxWidth: 600}}
+            onFinish={onFinish}
+            autoComplete="off"
+        >
+            <Form.Item
+                label="Username"
+                name="username"
+                rules={[{required: true, message: 'Required'}]}
+            >
+                <Input/>
+            </Form.Item>
+
+            <Form.Item<FieldType>
+                label="Password"
+                name="password"
+                rules={[{required: true, message: 'Required'}]}
+            >
+                <Input.Password/>
+            </Form.Item>
+
+            <Form.Item wrapperCol={{offset: 8, span: 16}}>
+                <Button type="primary" htmlType="submit">
+                    Submit
+                </Button>
+            </Form.Item>
+        </Form>
+    </Card>
+    </Flex>
 }

assets/pages/NotFoundPage.tsx

@@ -1,4 +1,4 @@
-import {Button, Result} from "antd";
+import {Result} from "antd";
 import React from "react";
 
 
@@ -7,6 +7,5 @@ export default function NotFoundPage() {
         status="404"
         title="404"
         subTitle="Sorry, the page you visited does not exist."
-        extra={<Button type="primary">Back Home</Button>}
     />
 }

assets/pages/info/StatisticsPage.tsx

@@ -2,6 +2,6 @@ import React from "react";
 
 export default function StatisticsPage() {
     return <p>
-        Tld
+        Statistics Page
     </p>
 }

assets/pages/info/TldPage.tsx

@@ -2,6 +2,6 @@ import React from "react";
 
 export default function TldPage() {
     return <p>
-        Tld
+        Tld Page
     </p>
 }

assets/pages/search/DomainSearchPage.tsx

@@ -2,6 +2,6 @@ import React from "react";
 
 export default function DomainSearchPage() {
     return <p>
-
+        Domain Search Page
     </p>
 }

assets/pages/search/EntitySearchPage.tsx

@@ -2,6 +2,6 @@ import React from "react";
 
 export default function EntitySearchPage() {
     return <p>
-
+        Entity Search Page
     </p>
 }

assets/pages/search/NameserverSearchPage.tsx

@@ -2,6 +2,6 @@ import React from "react";
 
 export default function NameserverSearchPage() {
     return <p>
-        NS Finder
+        NS Search Page
     </p>
 }

assets/pages/tracking/ConnectorsPage.tsx

@@ -2,6 +2,6 @@ import React from "react";
 
 export default function ConnectorsPage() {
     return <p>
-
+        Connectors Page
     </p>
 }

assets/pages/tracking/WatchlistsPage.tsx

@@ -2,6 +2,6 @@ import React from "react";
 
 export default function WatchlistsPage() {
     return <p>
-
+        Watchlists Page
     </p>
 }