✨ Ajoute le routeur et la page d'instanciation de la phrase de passe

resources/js/app.ts

@@ -12,5 +12,5 @@ require('./bootstrap');
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
-require('./components/pages/App');
+require('./components/pages/AppWrapper');
 require('./components/user/First');

resources/js/components/pages/App.tsx

@@ -1,11 +1,17 @@
-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 {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;
@@ -13,9 +19,9 @@ interface List {
 }
 
 const app = document.getElementById('app');
-const word = "shikiryu";
+const word = "shikiryu"; // FIXME should be in db and ≠ between users
 
-let sessionPassphrase = sessionStorage.getItem("key");
+const sessionPassphrase = sessionStorage.getItem("key");
 let pages: List[] = [];
 let getPageContentUrl,
     postUrl,
@@ -30,70 +36,153 @@ if (app) {
     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);
+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 updatePassphrase = function(newPassphrase) {
-        setPassphrase(newPassphrase);
-        return result(checkPassphrase());
+    const signin = cb => {
+        const isAuthenticated = checkPassphrase();
+        setUser(isAuthenticated);
+        if (isAuthenticated) {
+            isError(false);
+            cb();
+        } else {
+            isError(true);
+        }
     };
 
-    const checkPassphrase = function() {
+    const signout = cb => {
+        setUser(false);
+        cb();
+    };
+
+    function checkPassphrase() {
         if (checkword === "" || checkword === null || checkword === "null") {
             console.error("checkword is empty !");
-            // return (<Redirect to="/first" />);
-            return false; // TODO redirect to first
+            return false;
         }
         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 ?
+            return false;
         }
-        let encryptStorage = new EncryptStorage(key);
+        const 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;
+    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 (
-            <div>
-                <div className="container">
-                    <div className="row justify-content-center">
-                        { content }
-                    </div>
-                </div>
+            <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 result(checkPassphrase());
+    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);

resources/js/components/pages/AppWrapper.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter as Router} from "react-router-dom";
+import App from "./App";
+
+const app = document.getElementById('app');
+if (app) {
+    ReactDOM.render(<AppWrapper/>, app);
+}
+
+export default function AppWrapper() {
+    return (
+        <Router>
+            <App />
+        </Router>
+    )
+}

resources/js/components/user/First.tsx

@@ -24,15 +24,19 @@ export default function FirstPage() {
         encryptStorage = new EncryptStorage(passphrase);
         encryptStorage.encrypt("checkword", word);
         let encryptedFormData = new FormData();
-        encryptedFormData.append("checkword", ""+localStorage.getItem("key"));
+        encryptedFormData.append("checkword", ""+localStorage.getItem("checkword"));
         encryptedFormData.append('_token', csrf);
 
-        let response = await fetch(url, {
+        const response = await fetch(url, {
             method: 'POST',
             body: encryptedFormData
         });
 
         const json = await response.json(); // TODO redirect if success
+
+        if (json.success) {
+            location.href = "/diary/public/pages"
+        }
     };
 
     const updatePassphrase = (e: React.ChangeEvent<HTMLInputElement>) => {