frontend: Add frame of registration page

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",

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",

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>

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;
 }

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>
 }

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>
+  )
+}

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'

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>
   )
 })

frontend/src/pages/LoginPage.module.scss

@@ -1,4 +0,0 @@
-.loginForm.loginForm {
-  max-width: 400px;
-  margin: 0 auto;
-}

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

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'