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

import ReactDOM from 'react-dom';
import PageForm from "./Form";
import Pages from "./List";
import Prompt from "./Prompt";
import {useState} from "react";
import * as React from 'react';
import {Divider, Paper} from "@mui/material";
import {EncryptStorage} from "storage-encryption";

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

const app = document.getElementById('app');
const word = "shikiryu";

let 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');
    ReactDOM.render(<App/>, app);
}

export default function App() {
    const [listPages, setListPages]     = useState(pages);
    const [passphrase, setPassphrase]   = useState(sessionPassphrase);

    const updatePassphrase = function(newPassphrase) {
        setPassphrase(newPassphrase);
        return result(checkPassphrase());
    };

    const checkPassphrase = function() {
        if (checkword === "" || checkword === null || checkword === "null") {
            console.error("checkword is empty !");
            // return (<Redirect to="/first" />);
            return false; // TODO redirect to first
        }
        localStorage.setItem("checkword", checkword);

        const key = ""+sessionStorage.getItem("key");
        if (key === "" || key === null || key === "null") {
            console.error("key is empty 🤔 !");
            // return (<Redirect to="/first" />);
            return false; // TODO redirect to first ?
        }
        let encryptStorage = new EncryptStorage(key);
        const decrypted_word = encryptStorage.decrypt("checkword");

        return decrypted_word === word;
    };

    const result = function(correct) {
        let content;
        if (correct === true) {
            content = <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>
        } else if (correct === false) {
            content =  <div className="col-md-8">
                <Prompt open={true} setOpen={updatePassphrase}/>
            </div>;
        } else {
            return correct;
        }

        return (
            <div>
                <div className="container">
                    <div className="row justify-content-center">
                        { content }
                    </div>
                </div>
            </div>
        );
    }

    return result(checkPassphrase());
}