-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #249 from ai-cfia/226-as-a-user-i-want-to-be-direc…
…ted-to-the-main-page-after-logging-in Add redirection and logout button to the login functionality
- Loading branch information
Showing
10 changed files
with
339 additions
and
166 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,121 +1,167 @@ | ||
| import { useState } from "react"; | ||
| import axios from "axios"; | ||
| import { useEffect, useState } from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { useNavigate } from "react-router-dom"; | ||
| import LanguageButton from "../../Components/LanguageButton/LanguageButton"; | ||
| import { useAlert } from "../../Utils/AlertContext.tsx"; | ||
| import { useAlert } from "../../Utils/AlertContext"; | ||
| import { | ||
| login as authLogin, | ||
| isAuthenticated, | ||
| logout, | ||
| } from "../../Utils/Auth/AuthUtil"; | ||
| import "./SettingPage.css"; | ||
|
|
||
| function SettingPage() { | ||
| const SettingsPage = () => { | ||
| const navigate = useNavigate(); | ||
| const { t } = useTranslation(); | ||
| const { showAlert } = useAlert(); | ||
| const [uname_validated, setUnameValidated] = useState(false); | ||
| const [uname, setUname] = useState(""); | ||
| const [password, setPassword] = useState(""); | ||
| const login = () => { | ||
| const form = new FormData(); | ||
| form.append("username", uname); | ||
| form.append("password", password); | ||
| if (process.env.VITE_APP_ACTIVATE_USING_JSON == "true") { | ||
| document.cookie = `auth=${btoa(uname + ":" + password)}`; | ||
| showAlert(t("loggedIn"), "confirm"); | ||
| const [auth, setAuth] = useState(false); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| setAuth(isAuthenticated()); | ||
| }, []); | ||
|
|
||
| const finalizeAuth = (messageKey: string) => { | ||
| authLogin(uname, password); | ||
| showAlert(t(messageKey), "confirm"); | ||
| setAuth(true); | ||
| navigate("/"); | ||
| }; | ||
|
|
||
| const login = async () => { | ||
| setIsLoading(true); | ||
|
|
||
| if (process.env.VITE_APP_ACTIVATE_USING_JSON === "true") { | ||
| finalizeAuth("loggedIn"); | ||
| setIsLoading(false); | ||
| return; | ||
| } | ||
| fetch(process.env.VITE_API_URL + "/login", { | ||
| method: "POST", | ||
| body: form, | ||
| headers: { | ||
| Authorization: "Basic " + btoa(uname + ":" + password), | ||
| }, | ||
| }) | ||
| .then((r) => { | ||
| if (r.status !== 200) { | ||
| fetch(process.env.VITE_API_URL + "/signup", { | ||
| method: "POST", | ||
| body: form, | ||
| headers: { | ||
| Authorization: "Basic " + btoa(uname + ":" + password), | ||
| }, | ||
| }) | ||
| .then((r) => { | ||
| if (r.status !== 201) { | ||
| r.json().then((data) => { | ||
| showAlert(data.error, "error"); | ||
| }); | ||
| } else { | ||
| document.cookie = `auth=${btoa(uname + ":" + password)}`; | ||
| showAlert(t("loggedIn"), "confirm"); | ||
| } | ||
|
|
||
| console.info("logging in"); | ||
| axios | ||
| .post( | ||
| process.env.VITE_API_URL + "/login", | ||
| new URLSearchParams({ uname, password }), | ||
| { | ||
| headers: { | ||
| Authorization: "Basic " + btoa(uname + ":" + password), | ||
| }, | ||
| timeout: 5000, | ||
| }, | ||
| ) | ||
| .then((response) => { | ||
| console.log(response); | ||
| finalizeAuth("loggedIn"); | ||
| }) | ||
| .catch((error) => { | ||
| if (error.response) { | ||
| console.error("login failed:", error.response); | ||
| console.info("signing up"); | ||
| axios | ||
| .post( | ||
| `${process.env.VITE_API_URL}/signup`, | ||
| new URLSearchParams({ | ||
| username: uname, | ||
| password: password, | ||
| }), | ||
| { | ||
| headers: { | ||
| Authorization: "Basic " + btoa(uname + ":" + password), | ||
| }, | ||
| timeout: 5000, | ||
| }, | ||
| ) | ||
| .then((response) => { | ||
| console.log(response); | ||
| finalizeAuth("registered"); | ||
| }) | ||
| .catch((e) => { | ||
| showAlert(e, "error"); | ||
| .catch((error) => { | ||
| console.error("unexpected error during signup", error.message); | ||
| showAlert(String(error), "error"); | ||
| }); | ||
| } else { | ||
| document.cookie = `auth=${btoa(uname + ":" + password)}`; | ||
| showAlert(t("registered"), "confirm"); | ||
| } | ||
| console.error("unexpected error during login:", error.message); | ||
| showAlert(String(error), "error"); | ||
| }) | ||
| .catch((e) => { | ||
| showAlert(e, "error"); | ||
| .finally(() => { | ||
| setIsLoading(false); | ||
| }); | ||
| }; | ||
|
|
||
| const handleLogout = () => { | ||
| logout(); | ||
| setAuth(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="${theme}"> | ||
| <div> | ||
| <h1>{t("settingH1")}</h1> | ||
|
|
||
| <div className="settings"> | ||
| <div id="language"> | ||
| <label>{t("languageLabel")} : </label> | ||
| <LanguageButton /> | ||
| </div> | ||
| <hr /> | ||
| <div id={"login"}> | ||
| <div id={"inputs"}> | ||
| <div id={"uname"}> | ||
| <label>{t("askForUName")} : </label> | ||
| <input | ||
| type={"text"} | ||
| value={uname} | ||
| onChange={(e) => setUname(e.target.value)} | ||
| ></input> | ||
| </div> | ||
| <div id={"password"}> | ||
| <label>{t("askForPassword")} : </label> | ||
| <input | ||
| type={"password"} | ||
| value={password} | ||
| onChange={(e) => setPassword(e.target.value)} | ||
| ></input> | ||
| <div id="login"> | ||
| {auth ? ( | ||
| <div> | ||
| <button onClick={handleLogout}>{t("logout")}</button> | ||
| </div> | ||
| </div> | ||
| <div id={"validate-uname"}> | ||
| <div | ||
| className={"checkbox-container"} | ||
| onClick={() => setUnameValidated(!uname_validated)} | ||
| > | ||
| <input | ||
| type="checkbox" | ||
| value={"accepted-uname"} | ||
| checked={uname_validated} | ||
| onChange={() => setUnameValidated(!uname_validated)} | ||
| /> | ||
| ) : ( | ||
| <div> | ||
| <div id="inputs"> | ||
| <div id="uname"> | ||
| <label>{t("askForUName")} : </label> | ||
| <input | ||
| type="text" | ||
| value={uname} | ||
| onChange={(e) => setUname(e.target.value)} | ||
| /> | ||
| </div> | ||
| <div id="password"> | ||
| <label>{t("askForPassword")} : </label> | ||
| <input | ||
| type="password" | ||
| value={password} | ||
| onChange={(e) => setPassword(e.target.value)} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div id="validate-uname"> | ||
| <div | ||
| className="checkbox-container" | ||
| onClick={() => setUnameValidated(!uname_validated)} | ||
| > | ||
| <input | ||
| type="checkbox" | ||
| value="accepted-uname" | ||
| checked={uname_validated} | ||
| onChange={() => setUnameValidated(!uname_validated)} | ||
| /> | ||
| </div> | ||
| <p id="accept-uname"> | ||
| {t("acceptUName")} | ||
| <br /> | ||
| {t("reminderSensitive")} | ||
| </p> | ||
| </div> | ||
| <button | ||
| className="language-button en send-uname" | ||
| onClick={login} | ||
| disabled={!uname_validated || uname === "" || isLoading} | ||
| > | ||
| {isLoading ? t("loading...") : t("login")} | ||
| </button> | ||
| </div> | ||
| <p id={"accept-uname"}> | ||
| {t("acceptUName")} | ||
| <br /> | ||
| {t("reminderSensitive")} | ||
| </p> | ||
| </div> | ||
| <button | ||
| className={"language-button en send-uname"} | ||
| onClick={login} | ||
| disabled={!uname_validated || uname === ""} | ||
| > | ||
| {t("login")} | ||
| </button> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| export default SettingPage; | ||
| export default SettingsPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| const isAuthenticated = () => { | ||
| // Look for the `auth` cookie | ||
| const authCookie = document.cookie | ||
| .split("; ") | ||
| .find((row) => row.startsWith("auth=")); | ||
|
|
||
| // Check that the cookie is present and not empty | ||
| if (authCookie) { | ||
| const authValue = authCookie.split("=")[1]; | ||
| return authValue !== undefined && authValue !== ""; | ||
| } | ||
|
|
||
| return false; | ||
| }; | ||
|
|
||
| const login = (username: string, password: string) => { | ||
| document.cookie = `auth=${btoa(username + ":" + password)}`; | ||
| }; | ||
|
|
||
| const logout = () => { | ||
| // Set the cookie's expiry date to a past date to effectively remove it | ||
| document.cookie = "auth=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; | ||
| }; | ||
|
|
||
| export { isAuthenticated, login, logout }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.