registration added new fields, started implementing routes

client/src/adapters/auth.ts

@@ -46,7 +46,7 @@ async function extendAccessToken() {
     }
 }
 
-export async function register(username: string, password: string): Promise<boolean> {
+export async function register(username: string, password: string, realname: string | null, email: string | null): Promise<boolean> {
     try {
         const response = await fetch(`${apiRoot}/auth/register`, {
             method: 'POST',
@@ -54,8 +54,10 @@ export async function register(username: string, password: string): Promise<bool
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify({
-                username: username,
-                password: password,
+                username,
+                password,
+                realname,
+                email,
             }),
         });
         if (response.ok) {

client/src/components/forms/RegisterForm/index.tsx

@@ -33,20 +33,25 @@ function validateRepeatPassword(password: string, password2: string) {
     }
 }
 interface Props {
-    onSubmit?: (username: string, password: string) => void
+    onSubmit?: (username: string, password: string, realname?: string, email?: string) => void;
+    setError?: Function;
 }
 
-export default function RegisterForm({ onSubmit }: Props) {
+export default function RegisterForm({ onSubmit, setError }: Props) {
     const [username, setUsername] = useState<string>('');
     const [password, setPassword] = useState<string>('');
     const [repeatedPassword, setRepeatedPassword] = useState<string>('');
+    const [realName, setRealName] = useState<string | undefined>();
+    const [email, setEmail] = useState<string | undefined>();
 
     const handleSubmit = useCallback(async (e: FormEvent) => {
         e.preventDefault();
         if (await validateUsername(username) === null && validatePassword(password) === null && validateRepeatPassword(repeatedPassword, password) === null) {
-            onSubmit?.(username, password);
+            onSubmit?.(username, password, realName, email);
+        } else if(setError) {
+            setError('Please fill out the mandatory fields.');
         }
-    }, [onSubmit, password, username, repeatedPassword]);
+    }, [onSubmit, password, username, repeatedPassword, setError, realName, email]);
 
     return (
         <form className="register-form" onSubmit={handleSubmit}>
@@ -56,6 +61,16 @@ export default function RegisterForm({ onSubmit }: Props) {
                 onChange={setUsername}
                 validation={validateUsername}
             />
+            <TextInput
+                label="First- and Lastname"
+                name="realname"
+                onChange={setRealName}
+            />
+            <TextInput
+                label="Email"
+                name="email"
+                onChange={setEmail}
+            />
             <TextInput
                 label="Password"
                 name="password"

client/src/components/navigation/Sidebar/index.tsx

@@ -4,6 +4,8 @@ import LineGraph from 'components/graphs/LineGraph';
 import { NavLink, useHistory } from 'react-router-dom';
 import { clearToken } from 'adapters/auth';
 import './sidebar.scss';
+import { useEffect, useState } from 'react';
+import { getCurrentUser, getUserImageUri, User } from 'adapters/user';
 
 interface Props {
     mobileShown: boolean;
@@ -11,6 +13,13 @@ interface Props {
 }
 
 export default function Sidebar({ mobileShown, setMobileShown }: Props) {
+    const [user, setUser] = useState<User>();
+
+    useEffect(() => {
+        getCurrentUser().then((user) => {
+            setUser(user);
+        }).catch(() => { });
+    }, [])
 
     const history = useHistory();
 
@@ -24,10 +33,10 @@ export default function Sidebar({ mobileShown, setMobileShown }: Props) {
             <div className="top">
                 <div className="profile">
                     <div className="avatar">
-                        <img src={avatar} alt="Profile" />
+                        <img src={user && getUserImageUri(user.id)} alt="Profile" />
                     </div>
-                    <span className="name">Daniel Planötscher</span>
-                    <span className="team">ryoko</span>
+                    <span className="name">{user?.realname ?? user?.username}</span>
+                    {user?.realname && <span className="username">{user?.username}</span>}
                 </div>
                 <Navigation />
                 <nav className="secondary-nav">

client/src/components/navigation/Sidebar/sidebar.scss

@@ -57,7 +57,7 @@
             display: block;
         }
 
-        .team {
+        .username {
             font-size: fn.toRem(14);
         }
     }

client/src/components/ui/TextInput/index.tsx

@@ -26,7 +26,7 @@ export default function TextInput({ label, name, type, onChange, validation, com
 
     return (
         <div className={'input-element' + (type === 'textarea' ? ' textarea' : '')}>
-            <div className="input-field">
+            <div className={'input-field' + (validation ? ' mandatory' : '')}>
                 <label htmlFor={name}>{label}</label>
                 {
                     type === 'textarea' ?

client/src/components/ui/TextInput/text-input.scss

@@ -15,6 +15,14 @@
         position: relative;
         padding: 0 5px;
         width: 100%;
+        &.mandatory {
+            label {
+                &:after {
+                    content: ' *';
+                    color: s.$primary;
+                }
+            }
+        }
 
         label {
             font-size: 16px;

client/src/pages/Register/index.tsx

 
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 
 import Page from 'components/layout/Page';
 import RegisterForm from 'components/forms/RegisterForm';
 import { register } from 'adapters/auth';
+import Callout from 'components/ui/Callout';
 
 import './register.scss';
 
 export default function Register() {
     const history = useHistory();
+    const [error, setError] = useState('');
 
-    const handleSubmit = useCallback(async (username: string, password: string) => {
+    const handleSubmit = useCallback(async (username: string, password: string, realname?: string, email?: string) => {
         try {
-            if (await register(username, password)) {
+            if (await register(username, password, realname ?? null, email ?? null)) {
                 history.push('/tasks');
+            } else {
+                setError('There was an error with your registration. Please try again!');
             }
         } catch (e) { }
     }, [history]);
@@ -24,7 +28,8 @@ export default function Register() {
             <Page className="register-page">
                 <div className="content-container">
                     <h1 className="underlined">Register</h1>
-                    <RegisterForm onSubmit={handleSubmit} />
+                    {error && <Callout message={error} />}
+                    <RegisterForm onSubmit={handleSubmit} setError={setError} />
                     <Link className="link" to="/login">You already have an account?</Link>
                 </div>
             </Page>