From c355e9faa2c12c767167622b1f07d917072d7735 Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Sun, 16 May 2021 22:44:44 +0200
Subject: [PATCH] registration added new fields, started implementing routes
---
client/src/adapters/auth.ts | 8 ++++---
.../components/forms/RegisterForm/index.tsx | 23 +++++++++++++++----
.../components/navigation/Sidebar/index.tsx | 15 +++++++++---
.../navigation/Sidebar/sidebar.scss | 2 +-
client/src/components/ui/TextInput/index.tsx | 2 +-
.../components/ui/TextInput/text-input.scss | 8 +++++++
client/src/pages/Register/index.tsx | 13 +++++++----
7 files changed, 55 insertions(+), 16 deletions(-)
diff --git a/client/src/adapters/auth.ts b/client/src/adapters/auth.ts
index 406ef5d..5dbde55 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 ab359bc..b110f7c 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 3123b9f..50f3bd4 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 b8691ae..a3a0a8c 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 3ce9659..6d7c971 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 59496e2..84b175c 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 25d46c1..2b63440 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>
--
GitLab