✨ Ajoute la vérification de la passphrase avant affichage

resources/js/app.ts

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

resources/js/components/pages/App.tsx

@@ -5,6 +5,7 @@ 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;
@@ -12,19 +13,23 @@ interface List {
 }
 
 const app = document.getElementById('app');
+const word = "shikiryu";
 
 let sessionPassphrase = sessionStorage.getItem("key");
 let pages: List[] = [];
-let getPageContentUrl = "";
-let postUrl = "";
-let removeUrl = "";
-let csrf = "";
+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);
 }
 
@@ -32,28 +37,63 @@ export default function App() {
     const [listPages, setListPages]     = useState(pages);
     const [passphrase, setPassphrase]   = useState(sessionPassphrase);
 
-    return (
-        <div>
-            <div className="container">
-                <div className="row justify-content-center">
-                    <div className="col-md-8">
-                        {/*<div className="card">*/}
-                            {/*<Paper elevation={3}>*/}
-                                <Prompt open={passphrase === null} setOpen={setPassphrase}/>
-                                <Pages
-                                    pages={listPages}
-                                    url={getPageContentUrl}
-                                    passphrase={passphrase}
-                                    setPassphrase={setPassphrase}
-                                    csrf={csrf}
-                                    removeUrl={removeUrl}/>
-                                <Divider/>
-                                <PageForm setListPages={setListPages} csrf={csrf} url={postUrl} passphrase={passphrase}/>
-                            {/*</Paper>*/}
-                        {/*</div>*/}
+    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>
-        </div>
-    );
+        );
+    }
+
+    return result(checkPassphrase());
 }

resources/js/components/pages/List.tsx

@@ -11,7 +11,7 @@ export default function Pages({pages, url, removeUrl, csrf, passphrase, setPassp
     const isPassphraseSet = passphrase !== null;
 
     let listPages = pages.map(page =>
-        <Page page={page} url={url} setPassphrase={setPassphrase} passphrase={passphrase} csrf={csrf} removeUrl={removeUrl} />
+        <Page page={page} url={url} setPassphrase={setPassphrase} passphrase={passphrase} csrf={csrf} removeUrl={removeUrl} key={page.id}/>
     )
 
     if (isPassphraseSet) {

resources/js/components/pages/Page.tsx

@@ -88,16 +88,16 @@ export default function Page({page, url, removeUrl, csrf, passphrase, setPassphr
                 <Card>
                     <CardHeader
                         action={
-                            <IconButton aria-label="settings">
-                                <MoreVertIcon onClick={handleMoreClick} />
+                            <IconButton aria-label="settings" onClick={handleMoreClick}>
+                                <MoreVertIcon />
                             </IconButton>
                         }
                         title={title}
                         subheader={page.date}
                     />
                     <Collapse in={more} timeout="auto" unmountOnExit>
-                        <IconButton aria-label="remove">
-                            <Delete onClick={remove} />
+                        <IconButton aria-label="remove" onClick={remove} >
+                            <Delete />
                         </IconButton>
                     </Collapse>
                     <CardActions disableSpacing>

resources/js/components/user/First.tsx

@@ -0,0 +1,55 @@
+import ReactDOM from 'react-dom';
+import * as React from "react";
+import {TextField} from "@mui/material";
+import {EncryptStorage} from "storage-encryption";
+import {useState} from "react";
+let encryptStorage = new EncryptStorage('test'); // TODO la clef doit venir de l'utilisateur
+
+const app = document.getElementById('first');
+const word = "shikiryu";
+let csrf,
+    url = "";
+
+if (app) {
+    url   = "" + app.getAttribute('data-url');
+    csrf  = "" + app.getAttribute('data-csrf');
+    ReactDOM.render(<FirstPage/>, app);
+}
+
+export default function FirstPage() {
+    const [passphrase, setPassphrase] = useState("");
+    const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        sessionStorage.setItem("key", passphrase);
+        encryptStorage = new EncryptStorage(passphrase);
+        encryptStorage.encrypt("checkword", word);
+        let encryptedFormData = new FormData();
+        encryptedFormData.append("checkword", ""+localStorage.getItem("key"));
+        encryptedFormData.append('_token', csrf);
+
+        let response = await fetch(url, {
+            method: 'POST',
+            body: encryptedFormData
+        });
+
+        const json = await response.json(); // TODO redirect if success
+    };
+
+    const updatePassphrase = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPassphrase(e.target.value);
+    };
+
+    return (
+        <div>
+            <div className="container">
+                <div className="row justify-content-center">
+                    <div className="col-md-8">
+                        <form action={url} id="postPage" method="post" onSubmit={onSubmit}>
+                            <TextField id="filled-basic" label="Passphrase" variant="filled" onInput={updatePassphrase}/>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

resources/views/pages/index.blade.php

@@ -14,7 +14,9 @@
                          data-url="{{ route('pages.show', ['page' => 'replace_me']) }}"
                          data-post="{{ route('pages.store') }}"
                          data-remove="{{ route('pages.destroy', ['page' => 'replace_me']) }}"
-                         data-csrf="{{ csrf_token() }}">
+                         data-csrf="{{ csrf_token() }}"
+                        data-checkword="{{ $checkword }}"
+                    >
                     </div>
                 </div>
             </div>

resources/views/user/first.blade.php

@@ -0,0 +1,21 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+            {{ __('Première connexion') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="p-6 bg-white border-b border-gray-200">
+                    <div id="first"
+                         data-url="{{ route('user.storeFirst') }}"
+                         data-csrf="{{ csrf_token() }}">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</x-app-layout>