diff --git a/client/src/adapters/auth.ts b/client/src/adapters/auth.ts
index 406ef5de9b294531e16b728cda12143bbef1130d..5dbde550cd0b01b26df3a6c66138459de4641edc 100644
--- a/client/src/adapters/auth.ts
+++ b/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) {
diff --git a/client/src/components/forms/RegisterForm/index.tsx b/client/src/components/forms/RegisterForm/index.tsx
index ab359bc6ccb8d7a75123088afae1f5c02ad9a5ed..b110f7c346042114512d4adab7780d0a69694058 100644
--- a/client/src/components/forms/RegisterForm/index.tsx
+++ b/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"
diff --git a/client/src/components/navigation/Sidebar/index.tsx b/client/src/components/navigation/Sidebar/index.tsx
index 3123b9fe6d7d2674b43cc9e9f05f4957dcf2f67b..50f3bd47c9ee0e84607aa6433db448ad09c7009e 100644
--- a/client/src/components/navigation/Sidebar/index.tsx
+++ b/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">
diff --git a/client/src/components/navigation/Sidebar/sidebar.scss b/client/src/components/navigation/Sidebar/sidebar.scss
index b8691aea971025cc5dcf4de02a938e44d47c064b..a3a0a8ce09f3d0b5f07558ec761494f575c654d7 100644
--- a/client/src/components/navigation/Sidebar/sidebar.scss
+++ b/client/src/components/navigation/Sidebar/sidebar.scss
@@ -57,7 +57,7 @@
display: block;
}
- .team {
+ .username {
font-size: fn.toRem(14);
}
}
diff --git a/client/src/components/ui/TextInput/index.tsx b/client/src/components/ui/TextInput/index.tsx
index 3ce9659477417af4757f1c15fd708e2a6736b7b2..6d7c971f87cbd6bd10bc257de3741566e43cf690 100644
--- a/client/src/components/ui/TextInput/index.tsx
+++ b/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' ?
diff --git a/client/src/components/ui/TextInput/text-input.scss b/client/src/components/ui/TextInput/text-input.scss
index 59496e27c7766dad7e0033fdd6c42b29006b734f..84b175c7684c6e1c54d4fa43d23cca5442d78e19 100644
--- a/client/src/components/ui/TextInput/text-input.scss
+++ b/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;
diff --git a/client/src/pages/Register/index.tsx b/client/src/pages/Register/index.tsx
index 25d46c16809548a21c3619770c8f625a3c420be2..2b63440a5c9972657c1cff29ecdd095298d85531 100644
--- a/client/src/pages/Register/index.tsx
+++ b/client/src/pages/Register/index.tsx
@@ -1,20 +1,24 @@
-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>