From 2764564c4cc9d6a6ad6782c29a872ab60ac0e7cc Mon Sep 17 00:00:00 2001
From: MedzikUser <nivua1fn@duck.com>
Date: Sun, 22 May 2022 12:11:06 +0200
Subject: [PATCH] feat(website): add `/register` page

---
 website/api/index.ts                |  4 --
 website/{api => api_utils}/axios.ts |  0
 website/api_utils/index.ts          |  7 +++
 website/{api => api_utils}/list.ts  |  0
 website/{api => api_utils}/login.ts |  0
 website/api_utils/register.ts       | 32 ++++++++++
 website/components/auth/button.tsx  |  9 +++
 website/components/auth/error.tsx   |  7 +++
 website/components/auth/title.tsx   | 35 +++++++++++
 website/pages/404.tsx               |  2 +-
 website/pages/500.tsx               |  4 +-
 website/pages/login.tsx             | 53 +++-------------
 website/pages/register.tsx          | 97 +++++++++++++++++++++++++++++
 website/pages/user/files.tsx        |  6 +-
 14 files changed, 200 insertions(+), 56 deletions(-)
 delete mode 100644 website/api/index.ts
 rename website/{api => api_utils}/axios.ts (100%)
 create mode 100644 website/api_utils/index.ts
 rename website/{api => api_utils}/list.ts (100%)
 rename website/{api => api_utils}/login.ts (100%)
 create mode 100644 website/api_utils/register.ts
 create mode 100644 website/components/auth/button.tsx
 create mode 100644 website/components/auth/error.tsx
 create mode 100644 website/components/auth/title.tsx
 create mode 100644 website/pages/register.tsx

diff --git a/website/api/index.ts b/website/api/index.ts
deleted file mode 100644
index c31f03e..0000000
--- a/website/api/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import list from "./list"
-import login from "./login"
-
-export default { list, login }
diff --git a/website/api/axios.ts b/website/api_utils/axios.ts
similarity index 100%
rename from website/api/axios.ts
rename to website/api_utils/axios.ts
diff --git a/website/api_utils/index.ts b/website/api_utils/index.ts
new file mode 100644
index 0000000..b36f792
--- /dev/null
+++ b/website/api_utils/index.ts
@@ -0,0 +1,7 @@
+import list from "./list"
+import login from "./login"
+import register from "./register"
+
+const api = { list, login, register }
+
+export default api
diff --git a/website/api/list.ts b/website/api_utils/list.ts
similarity index 100%
rename from website/api/list.ts
rename to website/api_utils/list.ts
diff --git a/website/api/login.ts b/website/api_utils/login.ts
similarity index 100%
rename from website/api/login.ts
rename to website/api_utils/login.ts
diff --git a/website/api_utils/register.ts b/website/api_utils/register.ts
new file mode 100644
index 0000000..59fdb92
--- /dev/null
+++ b/website/api_utils/register.ts
@@ -0,0 +1,32 @@
+import axios from './axios'
+
+export default async function register(username: string, password: string): Promise<string> {
+  const request = axios.post("/auth/register", {
+    username,
+    password,
+  })
+
+  const response = request
+    .then(response => {
+      const { data } = response
+
+      return data.LoggedIn.access_token
+    })
+    .catch(err => {
+      if (err.response?.data?.error_message) {
+        const error = err.response.data.error_message
+
+        if (error.toString() == "[object Object]") {
+          Object.keys(error).forEach(key => {
+            throw new Error(key)
+          })
+        }
+
+        throw new Error(error)
+      }
+
+      throw new Error(err)
+    })
+
+    return response
+}
diff --git a/website/components/auth/button.tsx b/website/components/auth/button.tsx
new file mode 100644
index 0000000..0b1bfe8
--- /dev/null
+++ b/website/components/auth/button.tsx
@@ -0,0 +1,9 @@
+import { Button } from "@mui/material"
+import styled from "styled-components"
+
+const SubmitButton = styled(Button)`
+  margin-top: 1rem;
+  align-content: "center";
+`
+
+export default SubmitButton
diff --git a/website/components/auth/error.tsx b/website/components/auth/error.tsx
new file mode 100644
index 0000000..278cfa9
--- /dev/null
+++ b/website/components/auth/error.tsx
@@ -0,0 +1,7 @@
+import styled from "styled-components"
+
+const ErrorComponent = styled.div`
+  color: ${({ theme }) => theme.colors.error};
+`
+
+export default ErrorComponent
diff --git a/website/components/auth/title.tsx b/website/components/auth/title.tsx
new file mode 100644
index 0000000..1a58120
--- /dev/null
+++ b/website/components/auth/title.tsx
@@ -0,0 +1,35 @@
+import styled from "styled-components"
+
+const Title = styled.h1`
+  margin: 0;
+  line-height: 1.15;
+  font-size: 2rem;
+  text-align: center;
+  margin-bottom: 1rem;
+
+  a {
+    color: ${({ theme }) => theme.pages.index.title.a};
+    text-decoration: none;
+    animation: animate 1.5s linear infinite;
+  }
+
+  @keyframes animate {
+     0% {
+       opacity: 0;
+     }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  a:hover,
+  a:focus,
+  a:active {
+    text-decoration: underline;
+  }
+`
+
+export default Title
diff --git a/website/pages/404.tsx b/website/pages/404.tsx
index 4890134..a5ef996 100644
--- a/website/pages/404.tsx
+++ b/website/pages/404.tsx
@@ -45,7 +45,7 @@ export default function NotFound() {
       </Head>
 
       <Title>
-        404 | Server-side error occurred
+        404 | This page could not be found
       </Title>
 
       <StyledButton href="/">
diff --git a/website/pages/500.tsx b/website/pages/500.tsx
index a5ef996..fdc419f 100644
--- a/website/pages/500.tsx
+++ b/website/pages/500.tsx
@@ -41,11 +41,11 @@ export default function NotFound() {
   return (
     <>
       <Head>
-        <title>404 - HomeDisk</title>
+        <title>500 - HomeDisk</title>
       </Head>
 
       <Title>
-        404 | This page could not be found
+        500 | Server-side error occurred
       </Title>
 
       <StyledButton href="/">
diff --git a/website/pages/login.tsx b/website/pages/login.tsx
index e32166b..9061de2 100644
--- a/website/pages/login.tsx
+++ b/website/pages/login.tsx
@@ -1,52 +1,13 @@
 import React from 'react'
-import { Button, TextField } from '@mui/material'
+import { TextField } from '@mui/material'
 import Head from 'next/head'
 import Router from 'next/router'
 import { useEffect, useState } from 'react'
 import { useCookies } from 'react-cookie'
-import styled from 'styled-components'
-import api from '../api'
-
-const Title = styled.h1`
-  margin: 0;
-  line-height: 1.15;
-  font-size: 2rem;
-  text-align: center;
-  margin-bottom: 1rem;
-
-  a {
-    color: ${({ theme }) => theme.pages.index.title.a};
-    text-decoration: none;
-    animation: animate 1.5s linear infinite;
-  }
-
-  @keyframes animate {
-     0% {
-       opacity: 0;
-     }
-    50% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-
-  a:hover,
-  a:focus,
-  a:active {
-    text-decoration: underline;
-  }
-`
-
-const LoginButton = styled(Button)`
-  margin-top: 1rem;
-  align-content: "center";
-`
-
-const ErrorComponent = styled.div`
-  color: ${({ theme }) => theme.colors.error};
-`
+import api from '../api_utils'
+import Title from '../components/auth/title'
+import ErrorComponent from '../components/auth/error'
+import SubmitButton from '../components/auth/button'
 
 export default function Login() {
   const [cookie, setCookie] = useCookies(["token"])
@@ -122,7 +83,7 @@ export default function Login() {
         onKeyPress={handleKeyPress}
       />
 
-      <LoginButton
+      <SubmitButton
         variant="contained"
         size="large"
         color="secondary"
@@ -130,7 +91,7 @@ export default function Login() {
         disabled={username == "" || password == ""}
       >
         Login
-      </LoginButton>
+      </SubmitButton>
     </>
   )
 }
diff --git a/website/pages/register.tsx b/website/pages/register.tsx
new file mode 100644
index 0000000..9c1e5a8
--- /dev/null
+++ b/website/pages/register.tsx
@@ -0,0 +1,97 @@
+import React from 'react'
+import { TextField } from '@mui/material'
+import Head from 'next/head'
+import Router from 'next/router'
+import { useEffect, useState } from 'react'
+import { useCookies } from 'react-cookie'
+import api from '../api_utils'
+import ErrorComponent from '../components/auth/error'
+import Title from '../components/auth/title'
+import SubmitButton from '../components/auth/button'
+
+export default function Login() {
+  const [cookie, setCookie] = useCookies(["token"])
+
+  useEffect(() => {
+    if (cookie.token) {
+      Router.push('/user/files')
+    }
+  })
+
+  const [error, setError] = useState("")
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+
+  const handleUsernameChange: React.ChangeEventHandler<HTMLInputElement> = event => {
+    const value = event.target.value
+    setUsername(value)
+  }
+
+  const handlePasswordChange: React.ChangeEventHandler<HTMLInputElement> = event => {
+    const value = event.target.value
+    setPassword(value)
+  }
+
+  // handle click "Enter (Return)"
+  const handleKeyPress = (event: React.KeyboardEvent) => {
+    if (event.keyCode === 13 || event.which === 13 || event.charCode === 13) {
+      handleLogin()
+    }
+  }
+
+  const handleLogin = () => {
+    const request = api.register(username, password)
+
+    request
+      .then(token => {
+        setCookie("token", token)
+        setError("")
+      })
+      .catch(err => setError(err.toString()))
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Register - HomeDisk</title>
+      </Head>
+
+      <Title>
+        Register
+      </Title>
+
+      {error != "" && (
+        <ErrorComponent>{error}</ErrorComponent>
+      )}
+
+      <TextField
+        label="Username"
+        placeholder="Username"
+        margin="normal"
+        value={username}
+        onChange={handleUsernameChange}
+        onKeyPress={handleKeyPress}
+      />
+
+      <TextField
+        label="Password"
+        placeholder="Password"
+        type="password"
+        margin="normal"
+        value={password}
+        onChange={handlePasswordChange}
+        onKeyPress={handleKeyPress}
+      />
+
+      <SubmitButton
+        variant="contained"
+        size="large"
+        color="secondary"
+        onClick={handleLogin}
+        disabled={username == "" || password == ""}
+      >
+        Register
+      </SubmitButton>
+    </>
+  )
+}
diff --git a/website/pages/user/files.tsx b/website/pages/user/files.tsx
index 0700005..1dadaf1 100644
--- a/website/pages/user/files.tsx
+++ b/website/pages/user/files.tsx
@@ -6,7 +6,7 @@ import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { useCookies } from 'react-cookie'
 import styled from 'styled-components'
-import api from '../../api'
+import api from '../../api_utils'
 
 const Table = styled.table`
   border: 1px solid;
@@ -99,7 +99,7 @@ function FolderComponent({ name, path, size, modified, refresh }: Props) {
         <Link href={`?dir=${path}`}>
           <MuiLink onClick={() => refresh(path)}>
             <Icon icon={faFolder} />
-            {name}
+            {name.replace("/", "")}
           </MuiLink>
         </Link>
       </td>
@@ -116,7 +116,7 @@ function FileComponent({ name, path, size, modified, refresh }: Props) {
         <Link href={`?dir=${path}`}>
           <MuiLink onClick={() => refresh(path)}>
             <Icon icon={faFile} />
-            {name}
+            {name.replace("/", "")}
           </MuiLink>
         </Link>
       </td>