diaREact/resources/js/components/pages/App.tsx

189 lines
5.1 KiB
TypeScript
Raw Normal View History

2022-02-11 17:26:15 +01:00
import PageForm from "./Form";
import Pages from "./List";
import Prompt from "./Prompt";
import * as React from 'react';
import {Alert, AlertTitle, Divider} from "@mui/material";
import {EncryptStorage} from "storage-encryption";
import {
Switch,
Route,
Link,
Redirect,
withRouter,
useHistory
} from "react-router-dom";
2022-02-11 17:26:15 +01:00
interface List {
id: string;
date: string;
}
const app = document.getElementById('app');
const word = "shikiryu"; // FIXME should be in db and ≠ between users
2022-02-11 17:26:15 +01:00
const sessionPassphrase = sessionStorage.getItem("key");
2022-02-11 17:26:15 +01:00
let pages: List[] = [];
let getPageContentUrl,
postUrl,
removeUrl,
checkword,
csrf = "";
2022-02-11 17:26:15 +01:00
if (app) {
getPageContentUrl = "" + app.getAttribute('data-url');
pages = JSON.parse("" + app.getAttribute('data-list'));
postUrl = "" + app.getAttribute('data-post');
removeUrl = "" + app.getAttribute('data-remove');
csrf = "" + app.getAttribute('data-csrf');
checkword = "" + app.getAttribute('data-checkword');
2022-02-11 17:26:15 +01:00
}
function App() {
const [listPages, setListPages] = React.useState(pages);
const [passphrase, setPassphrase] = React.useState(sessionPassphrase);
const history = useHistory();
const [user, setUser] = React.useState(false);
const [error, isError] = React.useState(false);
2022-02-11 17:26:15 +01:00
const signin = cb => {
const isAuthenticated = checkPassphrase();
setUser(isAuthenticated);
if (isAuthenticated) {
isError(false);
cb();
} else {
isError(true);
}
};
const signout = cb => {
setUser(false);
cb();
};
function checkPassphrase() {
if (checkword === "" || checkword === null || checkword === "null") {
console.error("checkword is empty !");
return false;
}
localStorage.setItem("checkword", checkword);
const key = ""+sessionStorage.getItem("key");
if (key === "" || key === null || key === "null") {
console.error("key is empty 🤔 !");
return false;
}
const encryptStorage = new EncryptStorage(key);
const decrypted_word = encryptStorage.decrypt("checkword");
return decrypted_word === word;
}
const Error = function() {
if (error) {
return (
<Alert severity="error">
<AlertTitle>Erreur</AlertTitle>
La phrase de passe ne correspond pas.
</Alert>
);
}
return (<div></div>);
}
const AuthButton = function() {
const history = useHistory();
return user ? (
<p>
Welcome!{" "}
<button
onClick={() => {
signout(() => history.push("/"));
}}
>
Sign out
</button>
</p>
) : (
<p>You are not logged in.</p>
);
}
function updatePassphrase(newPassphrase) {
setPassphrase(newPassphrase);
if (checkPassphrase()) {
isError(false);
setUser(true);
signin(() => {
history.push({ pathname: "/diary/public/pages" });
})
} else {
isError(true);
}
}
function PrivateRoute({ children, ...rest }) {
return (
<Route
{...rest}
render={({ location }) =>
user ? (
children
) : (
<Redirect
to={{
pathname: "/diary/public/pass",
state: { from: location }
}}
/>
)
}
/>
);
}
function PromptPage() {
return (<Prompt open={true} setOpen={updatePassphrase}/>);
}
function ListPage() {
return (
<div className="col-md-8">
<Pages
pages={listPages}
url={getPageContentUrl}
passphrase={passphrase}
setPassphrase={setPassphrase}
csrf={csrf}
removeUrl={removeUrl}/>
<Divider/>
<PageForm setListPages={setListPages} csrf={csrf} url={postUrl} passphrase={passphrase}/>
2022-02-11 17:26:15 +01:00
</div>
);
}
return (
<div>
<AuthButton />
<Error/>
<ul>
<li>
<Link to="/diary/public/pages">Voir vos pages</Link>
</li>
</ul>
<Switch>
<Route path="/diary/public/pass">
<PromptPage />
</Route>
<PrivateRoute path="/diary/public/pages">
<ListPage />
</PrivateRoute>
</Switch>
</div>
);
2022-02-11 17:26:15 +01:00
}
export default withRouter(App);