From eb7663e2e97e93bd3365040e199aace22183a08e Mon Sep 17 00:00:00 2001
From: Paul Bienkowski <pb@opatut.de>
Date: Thu, 18 Feb 2021 09:25:10 +0100
Subject: [PATCH] frontend: Add frame of registration page

---
 frontend/package-lock.json                    |  5 +++
 frontend/package.json                         |  1 +
 frontend/src/App.js                           | 14 ++++++-
 frontend/src/components/Page/Page.module.scss |  7 ++++
 frontend/src/components/Page/index.js         |  6 ++-
 frontend/src/components/RegistrationForm.tsx  | 37 +++++++++++++++++++
 frontend/src/components/index.js              |  1 +
 frontend/src/pages/LoginPage.js               |  5 +--
 frontend/src/pages/LoginPage.module.scss      |  4 --
 frontend/src/pages/RegistrationPage.tsx       | 18 +++++++++
 frontend/src/pages/index.js                   |  1 +
 11 files changed, 89 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/components/RegistrationForm.tsx
 delete mode 100644 frontend/src/pages/LoginPage.module.scss
 create mode 100644 frontend/src/pages/RegistrationPage.tsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d6937e1..fa823d8 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -3886,6 +3886,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 2e60073..214a250 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,7 @@
     "@types/node": "^14.14.25",
     "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.0",
+    "classnames": "^2.2.6",
     "luxon": "^1.25.0",
     "node-sass": "^4.14.1",
     "ol": "^6.5.0",
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 8ca263d..7b03ada 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -6,7 +6,16 @@ import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom'
 import styles from './App.module.scss'
 import api from './api'
 
-import {LoginPage, LogoutPage, NotFoundPage, TracksPage, TrackPage, HomePage, UploadPage} from './pages'
+import {
+  LoginPage,
+  LogoutPage,
+  NotFoundPage,
+  TracksPage,
+  TrackPage,
+  HomePage,
+  UploadPage,
+  RegistrationPage,
+} from './pages'
 
 const App = connect((state) => ({login: state.login}))(function App({login}) {
   // update the API header on each render, the App is rerendered when the login changes
@@ -83,6 +92,9 @@ const App = connect((state) => ({login: state.login}))(function App({login}) {
           <Route path={`/tracks/:slug`} exact>
             <TrackPage />
           </Route>
+          <Route path="/register" exact>
+            <RegistrationPage />
+          </Route>
           <Route path="/login" exact>
             <LoginPage />
           </Route>
diff --git a/frontend/src/components/Page/Page.module.scss b/frontend/src/components/Page/Page.module.scss
index ead0da0..2c519c6 100644
--- a/frontend/src/components/Page/Page.module.scss
+++ b/frontend/src/components/Page/Page.module.scss
@@ -3,4 +3,11 @@
 .page {
   @include container;
   margin-top: 32px;
+  margin-bottom: 32px;
+}
+
+.small {
+  max-width: 400px;
+  margin-left: auto;
+  margin-right: auto;
 }
diff --git a/frontend/src/components/Page/index.js b/frontend/src/components/Page/index.js
index 06a78b6..02112a6 100644
--- a/frontend/src/components/Page/index.js
+++ b/frontend/src/components/Page/index.js
@@ -1,6 +1,8 @@
 import React from 'react'
+import classnames from 'classnames'
+
 import styles from './Page.module.scss'
 
-export default function Page({children}) {
-  return <main className={styles.page}>{children}</main>
+export default function Page({small, children}) {
+  return <main className={classnames(styles.page, small && styles.small)}>{children}</main>
 }
diff --git a/frontend/src/components/RegistrationForm.tsx b/frontend/src/components/RegistrationForm.tsx
new file mode 100644
index 0000000..6bd54d6
--- /dev/null
+++ b/frontend/src/components/RegistrationForm.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import {Form, Button} from 'semantic-ui-react'
+
+export default function RegistrationForm({onSubmit: onSubmitOuter}) {
+  const [username, setUsername] = React.useState(null)
+  const [email, setEmail] = React.useState(null)
+  const [password, setPassword] = React.useState(null)
+  const [password2, setPassword2] = React.useState(null)
+
+  const onChangeUsername = React.useCallback((e) => setUsername(e.target.value), [])
+  const onChangeEmail = React.useCallback((e) => setEmail(e.target.value), [])
+  const onChangePassword = React.useCallback((e) => setPassword(e.target.value), [])
+  const onChangePassword2 = React.useCallback((e) => setPassword2(e.target.value), [])
+
+  const onSubmit = React.useCallback(() => {
+    if (username && email && password && password2 === password) {
+      onSubmitOuter({username, email, password})
+    }
+  }, [username, email, password, password2, onSubmitOuter])
+
+  return (
+    <Form onSubmit={onSubmit}>
+      <Form.Input label="Username" value={username} onChange={onChangeUsername} name="username" />
+      <Form.Input label="e-Mail" value={email} onChange={onChangeEmail} name="email" />
+      <Form.Input label="Password" type="password" value={password} onChange={onChangePassword} name="password" />
+      <Form.Input
+        label="Password (repeat)"
+        type="password"
+        value={password2}
+        onChange={onChangePassword2}
+        name="password2"
+        error={password2 != null && password !== password2 ? 'Your passwords do not match.' : null}
+      />
+      <Button type="submit">Submit</Button>
+    </Form>
+  )
+}
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
index 1f66023..b06eb9f 100644
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -3,4 +3,5 @@ export {default as FormattedDate} from './FormattedDate'
 export {default as LoginForm} from './LoginForm'
 export {default as Map} from './Map'
 export {default as Page} from './Page'
+export {default as RegistrationForm} from './RegistrationForm'
 export {default as StripMarkdown} from './StripMarkdown'
diff --git a/frontend/src/pages/LoginPage.js b/frontend/src/pages/LoginPage.js
index be4e577..39bae4b 100644
--- a/frontend/src/pages/LoginPage.js
+++ b/frontend/src/pages/LoginPage.js
@@ -2,16 +2,15 @@ import React from 'react'
 import {connect} from 'react-redux'
 import {Redirect} from 'react-router-dom'
 
-import styles from './LoginPage.module.scss'
 import {Page, LoginForm} from '../components'
 
 const LoginPage = connect((state) => ({loggedIn: Boolean(state.login)}))(function LoginPage({loggedIn}) {
   return loggedIn ? (
     <Redirect to="/" />
   ) : (
-    <Page>
+    <Page small>
       <h2>Login</h2>
-      <LoginForm className={styles.loginForm} />
+      <LoginForm  />
     </Page>
   )
 })
diff --git a/frontend/src/pages/LoginPage.module.scss b/frontend/src/pages/LoginPage.module.scss
deleted file mode 100644
index e1ab8be..0000000
--- a/frontend/src/pages/LoginPage.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.loginForm.loginForm {
-  max-width: 400px;
-  margin: 0 auto;
-}
diff --git a/frontend/src/pages/RegistrationPage.tsx b/frontend/src/pages/RegistrationPage.tsx
new file mode 100644
index 0000000..171bd2c
--- /dev/null
+++ b/frontend/src/pages/RegistrationPage.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import {connect} from 'react-redux'
+import {Redirect} from 'react-router-dom'
+
+import {Page, RegistrationForm} from '../components'
+
+const RegistrationPage = connect((state) => ({loggedIn: Boolean(state.login)}))(function RegistrationPage({loggedIn}) {
+  return loggedIn ? (
+    <Redirect to="/" />
+  ) : (
+    <Page small>
+      <h2>Register</h2>
+      <RegistrationForm />
+    </Page>
+  )
+})
+
+export default RegistrationPage
diff --git a/frontend/src/pages/index.js b/frontend/src/pages/index.js
index 02a8abe..50f90b9 100644
--- a/frontend/src/pages/index.js
+++ b/frontend/src/pages/index.js
@@ -2,6 +2,7 @@ export {default as HomePage} from './HomePage'
 export {default as LoginPage} from './LoginPage'
 export {default as LogoutPage} from './LogoutPage'
 export {default as NotFoundPage} from './NotFoundPage'
+export {default as RegistrationPage} from './RegistrationPage'
 export {default as TrackPage} from './TrackPage'
 export {default as TracksPage} from './TracksPage'
 export {default as UploadPage} from './UploadPage'