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

Commit de89525

Browse files
GimleuxGimleux
committed
Connected registration logic with ui
1 parent a429bc3 commit de89525

File tree

3 files changed

+90
-58
lines changed

3 files changed

+90
-58
lines changed

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

Lines changed: 1 addition & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ import store from "../redux/store";
88
import {addAccessToken, addRefreshToken} from "../redux/actions/tokens";
99
import {addUser} from "../redux/actions/user";
1010
import {AccessToken, AddAccessToken, AddRefreshToken, TokensState} from "../redux/actions/tokenTypes";
11-
import {Simulate} from "react-dom/test-utils";
12-
import error = Simulate.error;
1311

1412

1513
// reference: https://daveceddia.com/access-redux-store-outside-react/
@@ -20,10 +18,6 @@ export interface BackendLoginData {
2018

2119
}
2220

23-
export interface BackendRegistrationData {
24-
25-
}
26-
2721
export const loginWithUsernameAndPassword = (userName: string, password: string): Promise<BackendLoginData> => {
2822

2923
return new Promise<BackendLoginData>((resolve, reject) => {
@@ -49,37 +43,6 @@ export const loginWithUsernameAndPassword = (userName: string, password: string)
4943
})
5044
}
5145

52-
export const registerNewUser = (username: string, password: string, passwordConfirmation: string): Promise<BackendRegistrationData> => {
53-
54-
let accessToken: AccessToken|null = (store.getState().tokens as TokensState).accessToken;
55-
56-
return new Promise<BackendRegistrationData>((resolve, reject) => {
57-
let config = {
58-
headers: {
59-
Authorization: `Bearer ${accessToken}`,
60-
},
61-
payload: {
62-
username: username,
63-
password: password,
64-
confirmationPassword: passwordConfirmation
65-
}
66-
};
67-
68-
return Axios.get(hostname + username + "/register", config)
69-
.then((data:AxiosResponse<object>) => {
70-
console.log(data.status + ": " + data.statusText);
71-
alert(data.status + ": " + data.statusText);
72-
})
73-
.catch((error:AxiosError) => {
74-
//if(error.response!.status === 409){
75-
console.log("Error " + error.response!.status + ": " + error.response!.statusText);
76-
//}
77-
reject(error);
78-
})
79-
})
80-
}
81-
82-
8346
export const getAccessTokenWithRefreshToken = () => {
8447
console.log("getAccessTokenWithRefreshToken")
8548

@@ -107,6 +70,4 @@ export const getAccessTokenWithRefreshToken = () => {
10770
function setAuthHeaderToAxios(accessToken: string) {
10871
Axios.defaults.headers.common['Authorization'] =
10972
`Bearer ${accessToken}`;
110-
}
111-
112-
73+
}

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

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

2-
3-
function test(){
4-
return null
7+
export interface BackendRegistrationData {
8+
user:UserState
59
}
610

7-
export default test;
11+
export const registerNewUser = (username: string, password: string, passwordConfirmation: string): Promise<BackendRegistrationData> => {
12+
13+
let accessToken: AccessToken|null = (store.getState().tokens as TokensState).accessToken;
14+
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 + username + "/register", config)
28+
.then((data:AxiosResponse<object>) => {
29+
console.log(data.status + ": " + data.statusText);
30+
alert(data.status + ": " + data.statusText);
31+
})
32+
.catch((error:AxiosError) => {
33+
//if(error.response!.status === 409){
34+
console.log("Error " + error.response!.status + ": " + error.response!.statusText);
35+
//}
36+
reject(error);
37+
})
38+
})
39+
}

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

Lines changed: 53 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React, {ChangeEvent, FormEvent, ReactElement, useState} from "react";
2-
import {Container, Row, Col, Form, FormGroup, Button} from "react-bootstrap";
2+
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";
55
import info_svg from "../../assets/images/icons/material.io/info-24px.svg";
66
import check_svg from "../../assets/images/icons/material.io/check_circle-24px.svg";
77
import error_svg from "../../assets/images/icons/material.io/error-24px.svg";
8+
import {registerNewUser} from "../../background/api/registration";
89

910
export default function Registration(): ReactElement {
1011
const MIN_PASSWORD_LENGTH = 8;
@@ -17,12 +18,39 @@ export default function Registration(): ReactElement {
1718
const [passwordInformationUppercase, setPasswordInformationUppercase] = useState<boolean>(false);
1819
const [passwordInformationNumber, setPasswordInformationNumber] = useState<boolean>(false);
1920
const [passwordsMatch, setPasswordsMatch] = useState<boolean>(false);
20-
const [errorMessage, setErrorMessage] = useState<string>("");
21+
const [alertMessage, setAlertMessage] = useState<string>("Error 404: No Message found.");
22+
const [alertVariant, setAlertColor] = useState<"primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark">("success");
23+
const [alertVisibility, setAlertVisibility] = useState<boolean>(false);
2124

22-
const handleSubmit = (event: FormEvent) => {
25+
const handleSubmit = async (event: FormEvent) => {
26+
console.log("[REGISTRATION] handleSubmit")
2327
event.preventDefault();
28+
if (password !== passwordConfirmation) {
29+
setAlertColor("danger");
30+
setAlertMessage("Error: Password and password confirmation must match.")
31+
handleAlertVisibility(3500)
32+
} else {
33+
await registerNewUser(username, password, passwordConfirmation)
34+
.then(res => {
35+
setAlertMessage("Worked: " + res.user.username);
36+
setAlertColor("success");
37+
console.table(res);
38+
console.log(res.user)
39+
})
40+
.catch(err => {
41+
setAlertColor("danger");
42+
setAlertMessage("Some error occurred: " + err)
43+
console.log(err)
44+
})
45+
.finally(() => handleAlertVisibility(3500))
46+
}
47+
}
2448

25-
setErrorMessage("test");
49+
const handleAlertVisibility = (duration: number) => {
50+
setAlertVisibility(true);
51+
setTimeout(() => {
52+
setAlertVisibility(false)
53+
}, duration)
2654
}
2755

2856
const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -49,7 +77,7 @@ export default function Registration(): ReactElement {
4977
<Row>
5078
<Col md={{span: 6, offset: 3}}>
5179
<h1>Create new account</h1>
52-
<Form onSubmit={handleSubmit}>
80+
<Form onSubmit={() => handleSubmit}>
5381
<FormGroup controlId="formBasicUsername">
5482
<Form.Label>Username</Form.Label>
5583
<Form.Control type={"name"} value={username}
@@ -62,22 +90,28 @@ export default function Registration(): ReactElement {
6290
value={password}
6391
onChange={(event: ChangeEvent<HTMLInputElement>) => handlePasswordChange(event)}/>
6492
<div>
65-
<img alt={"status icon password length"} src={passwordInformationLength ? check_svg : info_svg}/>
93+
<img alt={"status icon password length"}
94+
src={passwordInformationLength ? check_svg : info_svg}/>
6695
<span className={"sr-only"}>{passwordInformationLength ? "Done: " : "Missing: "}</span>
6796
<span className={passwordInformationLength ? "text-success" : "text-muted"}>Passwords must be at least 8 characters.</span>
6897
</div>
6998
<div>
70-
<img alt={"status icon password contains uppercase character"} src={passwordInformationUppercase ? check_svg : info_svg}/>
71-
<span className={"sr-only"}>{passwordInformationUppercase ? "Done: " : "Missing: "}</span>
99+
<img alt={"status icon password contains uppercase character"}
100+
src={passwordInformationUppercase ? check_svg : info_svg}/>
101+
<span
102+
className={"sr-only"}>{passwordInformationUppercase ? "Done: " : "Missing: "}</span>
72103
<span className={passwordInformationUppercase ? "text-success" : "text-muted"}>Passwords must be at least contain 1 uppercase character.</span>
73104
</div>
74105
<div>
75-
<img alt={"status icon password contains lowercase character"} src={passwordInformationLowercase ? check_svg : info_svg}/>
76-
<span className={"sr-only"}>{passwordInformationLowercase ? "Done: " : "Missing: "}</span>
106+
<img alt={"status icon password contains lowercase character"}
107+
src={passwordInformationLowercase ? check_svg : info_svg}/>
108+
<span
109+
className={"sr-only"}>{passwordInformationLowercase ? "Done: " : "Missing: "}</span>
77110
<span className={passwordInformationLowercase ? "text-success" : "text-muted"}>Passwords must be at least contain 1 lowercase character.</span>
78111
</div>
79112
<div>
80-
<img alt={"status icon password contains number"} src={passwordInformationNumber ? check_svg : info_svg}/>
113+
<img alt={"status icon password contains number"}
114+
src={passwordInformationNumber ? check_svg : info_svg}/>
81115
<span className={"sr-only"}>{passwordInformationNumber ? "Done: " : "Missing: "}</span>
82116
<span className={passwordInformationNumber ? "text-success" : "text-muted"}>Passwords must be at least contain 1 number.</span>
83117
</div>
@@ -88,15 +122,20 @@ export default function Registration(): ReactElement {
88122
value={passwordConfirmation}
89123
onChange={(event: ChangeEvent<HTMLInputElement>) => handlePasswordConfirmationChange(event)}/>
90124
<div>
91-
<img alt={"status icon passwords match"} src={!passwordConfirmation ? info_svg : passwordsMatch ? check_svg : error_svg}/>
125+
<img alt={"status icon passwords match"}
126+
src={!passwordConfirmation ? info_svg : passwordsMatch ? check_svg : error_svg}/>
92127
<span className={"sr-only"}>{passwordsMatch ? "Done: " : "Missing: "}</span>
93-
<span className={!passwordConfirmation ? "text-muted" : passwordsMatch ? "text-success" : "text-danger"}>Passwords must match.</span>
128+
<span
129+
className={!passwordConfirmation ? "text-muted" : passwordsMatch ? "text-success" : "text-danger"}>Passwords must match.</span>
94130
</div>
95131
</Form.Group>
96132
<Button variant="primary" type="submit">
97133
Submit
98134
</Button>
99-
<p className="text-danger">{errorMessage}</p>
135+
<Alert variant={alertVariant} onClose={() => setAlertVisibility(false)} show={alertVisibility}
136+
dismissible>
137+
<p>{alertMessage}</p>
138+
</Alert>
100139
</Form>
101140
</Col>
102141
</Row>

0 commit comments

Comments
 (0)