✨ Ajoute le routeur et la page d'instanciation de la phrase de passe
This commit is contained in:
@@ -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);
|
||||
|
||||
17
resources/js/components/pages/AppWrapper.tsx
Normal file
17
resources/js/components/pages/AppWrapper.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>) => {
|
||||
|
||||
Reference in New Issue
Block a user