Skip to content
This repository was archived by the owner on Apr 5, 2024. It is now read-only.

Commit 2c478b5

Browse files
GimleuxGimleux
committed
Fixed API registration problems
1 parent d29502f commit 2c478b5

File tree

6 files changed

+79
-53
lines changed

6 files changed

+79
-53
lines changed

‎webapp_frontend/src/background/api/auth.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ export interface BackendLoginData {
2626
export const checkForCookie=()=>{
2727
let refreshTokenCookieValue=getCookie(cookieName)
2828
if (refreshTokenCookieValue){
29-
store.dispatch(addRefreshToken(refreshTokenCookieValue) as AddRefreshToken)
29+
store.dispatch(addRefreshToken(refreshTokenCookieValue))
3030
getAccessTokenWithRefreshToken();
3131
}
32-
store.dispatch(checkedCookies(true) as CheckedCookies)
32+
store.dispatch(checkedCookies(true))
3333

3434

3535
}
@@ -48,8 +48,8 @@ console.log("[Auth] loginWithUsernameAndPassword")
4848
return Axios.get(hostname + userPath + '/login', config)
4949
.then((data) => {
5050
console.log(data.data)
51-
store.dispatch(addRefreshToken(data.data.tokenValue) as AddRefreshToken)
52-
store.dispatch(addUser(data.data.user as UserState) as AddUser)
51+
store.dispatch(addRefreshToken(data.data.tokenValue))
52+
store.dispatch(addUser(data.data.user as UserState))
5353

5454
if (stayLoggedIn){
5555
setCookie(cookieName,data.data.tokenValue,60)
@@ -82,7 +82,7 @@ export const getAccessTokenWithRefreshToken = () => {
8282
.then((data) => {
8383
setAuthHeaderToAxios(data.data.tokenValue)
8484

85-
store.dispatch(addAccessToken({token: data.data.tokenValue, timestamp: data.data.validUntil}as AccessToken) as AddAccessToken);
85+
store.dispatch(addAccessToken({token: data.data.tokenValue, timestamp: data.data.validUntil}as AccessToken));
8686

8787
})
8888
.catch(((error) => {
@@ -95,7 +95,7 @@ export const getAccessTokenWithRefreshToken = () => {
9595
}
9696

9797
export const logout=()=>{
98-
store.dispatch(removeTokens()as RemoveTokens);
98+
store.dispatch(removeTokens());
9999
deleteCookie(cookieName);
100100
}
101101

‎webapp_frontend/src/background/api/registration.ts‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,41 @@
1-
import {AccessToken, TokensState} from "../redux/actions/tokenTypes";
2-
import store from "../redux/store";
31
import Axios, {AxiosError, AxiosResponse} from "axios";
4-
import {hostname} from "./api";
5-
import {UserState} from "../redux/actions/userTypes";
2+
import {hostname, userPath} from "./api";
63

7-
export interface BackendRegistrationData {
8-
user:UserState
4+
export interface IRegisterServerResponse {
5+
httpStatus: number,
6+
httpMessage: string
7+
outputMessage?: string
98
}
109

11-
export const registerNewUser = (username: string, password: string, passwordConfirmation: string): Promise<BackendRegistrationData> => {
10+
export const registerNewUser = (username: string, password: string, passwordConfirmation: string): Promise<IRegisterServerResponse> => {
1211

13-
let accessToken: AccessToken|null = (store.getState().tokens as TokensState).accessToken;
12+
return new Promise((resolve, reject) => {
13+
const newUser = {
14+
username: username,
15+
password: password,
16+
confirmationPassword: passwordConfirmation
17+
}
1418

15-
return new Promise<BackendRegistrationData>((resolve, reject) => {
16-
let config = {
17-
headers: {
18-
Authorization: `Bearer ${accessToken}`,
19-
},
20-
payload: {
21-
username: username,
22-
password: password,
23-
confirmationPassword: passwordConfirmation
24-
}
25-
};
26-
27-
return Axios.get(hostname +'/users/register', config)
28-
.then((data:AxiosResponse<object>) => {
29-
console.log(data.status + ": " + data.statusText);
30-
alert(data.status + ": " + data.statusText);
19+
return Axios.post(hostname + userPath + '/register', newUser)
20+
.then((data: AxiosResponse<object>) => {
21+
const response: IRegisterServerResponse = {
22+
httpStatus: data.status,
23+
httpMessage: data.statusText
24+
}
25+
if (data.status === 201) {
26+
response.outputMessage = "User was successfully created."
27+
}
28+
resolve(response);
3129
})
32-
.catch((error:AxiosError) => {
33-
//if(error.response!.status === 409){
34-
console.log("Error " + error.response!.status + ": " + error.response!.statusText);
35-
//}
36-
reject(error);
30+
.catch((error: AxiosError) => {
31+
const response: IRegisterServerResponse = {
32+
httpStatus: error.response!.status,
33+
httpMessage: error.response!.statusText
34+
}
35+
if (error.response!.status === 409) {
36+
response.outputMessage = "Username is already taken."
37+
}
38+
reject(response);
3739
})
3840
})
3941
}

‎webapp_frontend/src/background/redux/actions/tokens.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,28 @@
1-
import {ADD_REFRESH_TOKEN, ADD_ACCESS_TOKEN, AccessToken, CHECKED_COOKIES, REMOVE_TOKENS} from "./tokenTypes";
1+
import {
2+
ADD_REFRESH_TOKEN,
3+
ADD_ACCESS_TOKEN,
4+
AccessToken,
5+
CHECKED_COOKIES,
6+
REMOVE_TOKENS,
7+
AddRefreshToken, AddAccessToken, RemoveTokens, CheckedCookies
8+
} from "./tokenTypes";
29

310

4-
export const addRefreshToken = (content: string) => ({
11+
export const addRefreshToken = (content: string):AddRefreshToken => ({
512
type: ADD_REFRESH_TOKEN,
613
payload: content
714
});
815

9-
export const addAccessToken = (content: AccessToken) => ({
16+
export const addAccessToken = (content: AccessToken):AddAccessToken => ({
1017
type: ADD_ACCESS_TOKEN,
1118
payload: content
1219
});
1320

14-
export const removeTokens = ()=>({
21+
export const removeTokens = ():RemoveTokens=>({
1522
type: REMOVE_TOKENS
1623
})
1724

18-
export const checkedCookies = (content: boolean) => ({
25+
export const checkedCookies = (content: boolean):CheckedCookies => ({
1926
type: CHECKED_COOKIES,
2027
payload: content
2128
});

‎webapp_frontend/src/background/redux/actions/user.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import {ADD_USER, UserState} from "./userTypes";
1+
import {ADD_USER, AddUser, UserState} from "./userTypes";
22

3-
export const addUser = (content: UserState) => ({
3+
export const addUser = (content: UserState):AddUser => ({
44
type: ADD_USER,
55
payload: content
66
});

‎webapp_frontend/src/components/basicElements/Footer.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import React, {ReactElement} from 'react';
22

3-
export default function Footer():ReactElement {
4-
return(
3+
export default function Footer(): ReactElement {
4+
return (
55
<div>
66
<table>
7+
<tbody>
78
<tr>
89
<td>Footer</td>
910
<td>Footer</td>
1011
</tr>
12+
</tbody>
1113
</table>
1214
</div>
1315
);

‎webapp_frontend/src/components/pages/Registration.tsx‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {ChangeEvent, FormEvent, ReactElement, useState} from "react";
1+
import React, {ChangeEvent, FormEvent, ReactElement, useEffect, useState} from "react";
22
import {Container, Row, Col, Form, FormGroup, Button, Alert} from "react-bootstrap";
33
import {deleteSpaces} from "../../background/methods/strings";
44
import {notMinStrLength} from "../../background/methods/checkInput";
@@ -17,30 +17,42 @@ export default function Registration(): ReactElement {
1717
const [passwordInformationLowercase, setPasswordInformationLowercase] = useState<boolean>(false);
1818
const [passwordInformationUppercase, setPasswordInformationUppercase] = useState<boolean>(false);
1919
const [passwordInformationNumber, setPasswordInformationNumber] = useState<boolean>(false);
20-
const [passwordsMatch, setPasswordsMatch] = useState<boolean>(false);
20+
const [passwordsMatch, setPasswordsMatch] = useState<boolean>(true);
2121
const [alertMessage, setAlertMessage] = useState<string>("Error 404: No Message found.");
2222
const [alertVariant, setAlertColor] = useState<"primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark">("success");
2323
const [alertVisibility, setAlertVisibility] = useState<boolean>(false);
2424

25+
useEffect(() => {
26+
reviewPasswordMatch()
27+
},[passwordConfirmation, password])
28+
2529
const handleSubmit = async (event: FormEvent) => {
2630
console.log("[REGISTRATION] handleSubmit")
2731
event.preventDefault();
28-
if (password !== passwordConfirmation) {
32+
reviewPasswordMatch();
33+
if (!username){
34+
setAlertColor("danger");
35+
setAlertMessage("Error: Please choose an username.")
36+
handleAlertVisibility(3500)
37+
} else if (!passwordsMatch) {
2938
setAlertColor("danger");
3039
setAlertMessage("Error: Password and password confirmation must match.")
3140
handleAlertVisibility(3500)
41+
} else if (!passwordInformationNumber || !passwordInformationLowercase || !passwordInformationUppercase || !passwordInformationLength){
42+
setAlertColor("danger");
43+
setAlertMessage("Error: Please pay attention to the notes below the input field.");
44+
handleAlertVisibility(3500)
3245
} else {
3346
await registerNewUser(username, password, passwordConfirmation)
3447
.then(res => {
35-
setAlertMessage("Worked: " + res.user.username);
48+
setAlertMessage("Worked: " + (res.outputMessage ? res.outputMessage : (res.httpStatus + " " + res.httpMessage)));
3649
setAlertColor("success");
3750
console.table(res);
38-
console.log(res.user)
3951
})
4052
.catch(err => {
4153
setAlertColor("danger");
42-
setAlertMessage("Some error occurred: " + err)
43-
console.log(err)
54+
setAlertMessage("Error: " + (err.outputMessage ? err.outputMessage : (err.httpStatus + " " + err.httpMessage)))
55+
console.table(err)
4456
})
4557
.finally(() => handleAlertVisibility(3500))
4658
}
@@ -66,14 +78,17 @@ export default function Registration(): ReactElement {
6678
setPassword(value)
6779
}
6880

69-
const handlePasswordConfirmationChange = (event: ChangeEvent<HTMLInputElement>) => {
81+
const handlePasswordConfirmationChange = async (event: ChangeEvent<HTMLInputElement>) => {
7082
event.preventDefault();
7183
let value = event.target.value;
7284
value = deleteSpaces(value);
73-
setPasswordsMatch(password === value);
7485
setPasswordConfirmation(value);
7586
}
7687

88+
const reviewPasswordMatch = ():void => {
89+
setPasswordsMatch(password === passwordConfirmation);
90+
}
91+
7792
return (
7893
<Container>
7994
<Row>

0 commit comments

Comments
 (0)