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

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";

interface List {
    id: string;
    date: string;
}

const app = document.getElementById('app');
const word = "shikiryu"; // FIXME should be in db and ≠ between users

const sessionPassphrase = sessionStorage.getItem("key");
let pages: List[] = [];
let getPageContentUrl,
    postUrl,
    removeUrl,
    checkword,
    csrf = "";

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');
}

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);

    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}/>
            </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>
    );
}

export default withRouter(App);