248 lines
9.5 KiB
JavaScript
248 lines
9.5 KiB
JavaScript
import React, {useEffect, useState, useCallback} from 'react';
|
|
import { Router, Switch, Route, Redirect } from 'react-router-dom';
|
|
import * as BS from 'react-bootstrap'
|
|
import { useForm } from "react-hook-form";
|
|
import * as fetch from 'node-fetch';
|
|
import Toggle from 'react-toggle'
|
|
import useDarkMode from 'use-dark-mode';
|
|
|
|
import './App.scss';
|
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
import "react-toggle/style.css"
|
|
import { FaLock, FaCog, FaSun, FaMoon } from "react-icons/fa";
|
|
|
|
import Dash from './Components/Dash.js'
|
|
import history from "./History.js";
|
|
import Loading from "./Components/Loading.js";
|
|
import Footer from './Components/Footer.js'
|
|
import Public from './Components/Public.js'
|
|
|
|
import API_URL from "./Constants/constants.js";
|
|
|
|
export default function App() {
|
|
|
|
const [isLoading, setIsLoading ] = useState(false);
|
|
const [isSubmit, setIsSubmit ] = useState(false);
|
|
const [isInvalid, setIsInvalid] = useState(false);
|
|
const [, updateState] = useState();
|
|
const forceUpdate = useCallback(() => updateState({}), []);
|
|
const darkMode = useDarkMode(false);
|
|
|
|
const { register, handleSubmit } = useForm();
|
|
|
|
useEffect(() => {
|
|
if (localStorage.getItem('token')) {
|
|
checkLogIn();
|
|
}
|
|
}, [])
|
|
|
|
const onSubmit = data => {
|
|
localStorage.setItem('token', data.pkToken);
|
|
logIn();
|
|
};
|
|
|
|
function logOut() {
|
|
setIsSubmit(false);
|
|
localStorage.removeItem("token");
|
|
localStorage.removeItem("user");
|
|
history.push('/pk-webs');
|
|
forceUpdate();
|
|
}
|
|
|
|
function logIn() {
|
|
setIsInvalid(false);
|
|
setIsLoading(true);
|
|
|
|
fetch(`${API_URL}s/`,{
|
|
method: 'GET',
|
|
headers: {
|
|
'Authorization': JSON.stringify(localStorage.getItem("token")).slice(1, -1)
|
|
}}).then ( res => res.json()
|
|
).then (data => {
|
|
localStorage.setItem('user', JSON.stringify(data));
|
|
setIsSubmit(true);
|
|
setIsLoading(false);
|
|
history.push("/pk-webs/dash");
|
|
})
|
|
.catch (error => {
|
|
console.log(error);
|
|
setIsInvalid(true);
|
|
localStorage.removeItem('token');
|
|
localStorage.removeItem('user');
|
|
setIsLoading(false);
|
|
})
|
|
};
|
|
|
|
function checkLogIn() {
|
|
setIsInvalid(false);
|
|
setIsLoading(true);
|
|
|
|
fetch(`${API_URL}s/`,{
|
|
method: 'GET',
|
|
headers: {
|
|
'Authorization': JSON.stringify(localStorage.getItem("token")).slice(1, -1)
|
|
}}).then ( res => res.json()
|
|
).then (data => {
|
|
localStorage.setItem('user', JSON.stringify(data));
|
|
setIsSubmit(true);
|
|
setIsLoading(false);
|
|
})
|
|
.catch (error => {
|
|
console.log(error);
|
|
setIsInvalid(true);
|
|
localStorage.removeItem('token');
|
|
localStorage.removeItem('user');
|
|
setIsLoading(false);
|
|
})
|
|
};
|
|
|
|
|
|
return (
|
|
<div className={ `contents ${localStorage.getItem('opendyslexic') ? "opendyslexic" : ""}`}>
|
|
<Router history={history} basename="/pk-webs">
|
|
<BS.Navbar className="mb-5 align-items-center">
|
|
<BS.Navbar.Brand href="/pk-webs">
|
|
pk-webs
|
|
</BS.Navbar.Brand>
|
|
<BS.NavDropdown id="menu" className="mr-auto" title="Menu">
|
|
<BS.NavDropdown.Item onClick={() => history.push('/pk-webs/dash/reload')} >Dash</BS.NavDropdown.Item>
|
|
<BS.NavDropdown.Item onClick={() => history.push('/pk-webs/settings')} >Settings</BS.NavDropdown.Item>
|
|
<BS.NavDropdown.Item onClick={() => history.push('/pk-webs/profile')}>Public profile</BS.NavDropdown.Item>
|
|
{ localStorage.getItem('token') ? <><hr className="my-1"/><BS.NavDropdown.Item onClick={() => logOut()}>Log out</BS.NavDropdown.Item></> : "" }
|
|
|
|
</BS.NavDropdown>
|
|
<BS.Nav className="mr-2 d-flex align-items-center row">
|
|
<Toggle
|
|
defaultChecked={true}
|
|
icons={false}
|
|
onChange={darkMode.toggle} />
|
|
{darkMode.value ? <FaMoon className="m-1"/> : <FaSun className="m-1"/>}
|
|
</BS.Nav>
|
|
</BS.Navbar>
|
|
<div className="content">
|
|
<BS.Container>
|
|
<Switch>
|
|
<Redirect exact from="/pk-webs/dash/reload" to="/pk-webs/dash" />
|
|
<Route path="/pk-webs/dash">
|
|
{ !localStorage.getItem('token') || isInvalid ? <Redirect to="/pk-webs"/> : <Dash />
|
|
}
|
|
</Route>
|
|
<Route exact path="/pk-webs">
|
|
{ isLoading ? <Loading /> :
|
|
<BS.Card className="mb-3 mt-3">
|
|
<BS.Card.Header className="d-flex align-items-center justify-content-between">
|
|
<BS.Card.Title><FaLock className="mr-3" />Login</BS.Card.Title>
|
|
</BS.Card.Header>
|
|
<BS.Card.Body>
|
|
{ isSubmit && !localStorage.getItem('user') ? <BS.Alert variant="danger">Something went wrong, please try again.</BS.Alert> : ""}
|
|
{ isInvalid ? <BS.Alert variant="danger">Invalid token.</BS.Alert> : "" }
|
|
{ localStorage.getItem('user') && localStorage.getItem('token') ? <><p>You are logged in already, click here to continue to the dash.</p>
|
|
<BS.Button type="primary" onClick={() => history.push('/pk-webs/dash')}>Continue to dash</BS.Button></> :
|
|
<BS.Form onSubmit={handleSubmit(onSubmit)}>
|
|
<BS.Form.Row>
|
|
<BS.Col className="mb-1" xs={12} lg={10}>
|
|
<BS.Form.Label>Enter your token here. You can get your token by using <b>"pk;token"</b>.</BS.Form.Label>
|
|
</BS.Col>
|
|
</BS.Form.Row>
|
|
<BS.Form.Row>
|
|
<BS.Col xs={12} lg={10}>
|
|
<BS.Form.Control required name="pkToken" type="text" ref={register} placeholder="token" />
|
|
</BS.Col>
|
|
<BS.Col>
|
|
<BS.Button variant="primary" type="submit" block >Submit</BS.Button>
|
|
</BS.Col>
|
|
</BS.Form.Row>
|
|
</BS.Form> }
|
|
</BS.Card.Body>
|
|
</BS.Card>
|
|
}
|
|
</Route>
|
|
<Route path="/pk-webs/profile">
|
|
<Public />
|
|
</Route>
|
|
<Route path="/pk-webs/settings">
|
|
<BS.Card>
|
|
<BS.Card.Header className="d-flex align-items-center justify-content-between">
|
|
<BS.Card.Title><FaCog className="mr-3" />Settings</BS.Card.Title>
|
|
</BS.Card.Header>
|
|
<BS.Card.Body>
|
|
<p>Change how you view and use pk-webs here, changes will be saved after refreshing. You will have to apply them again in different browsers and on different devices.</p>
|
|
<hr/>
|
|
<BS.Row>
|
|
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row">
|
|
{ localStorage.getItem('opendyslexic') ?
|
|
<Toggle className="mr-2"
|
|
defaultChecked={true}
|
|
icons={false}
|
|
onChange={() => {
|
|
localStorage.removeItem('opendyslexic');
|
|
forceUpdate()}} /> :
|
|
<Toggle className="mr-2"
|
|
defaultChecked={false}
|
|
icons={false}
|
|
onChange={() => {
|
|
localStorage.setItem('opendyslexic', 'true')
|
|
forceUpdate()}} /> }
|
|
Use opendyslexic?
|
|
</BS.Col>
|
|
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row">
|
|
{ localStorage.getItem('twemoji') ?
|
|
<Toggle className="mr-2"
|
|
defaultChecked={true}
|
|
icons={false}
|
|
onChange={() => {
|
|
localStorage.removeItem('twemoji');
|
|
forceUpdate()}} /> :
|
|
<Toggle className="mr-2"
|
|
defaultChecked={false}
|
|
icons={false}
|
|
onChange={() => {
|
|
localStorage.setItem('twemoji', 'true')
|
|
forceUpdate()}} /> }
|
|
Use twemoji?
|
|
</BS.Col>
|
|
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row">
|
|
{ localStorage.getItem('pagesonly') ?
|
|
<Toggle className="mr-2"
|
|
defaultChecked={true}
|
|
icons={false}
|
|
onChange={() => {
|
|
localStorage.removeItem('pagesonly');
|
|
forceUpdate()}} /> :
|
|
<Toggle className="mr-2"
|
|
defaultChecked={false}
|
|
icons={false}
|
|
onChange={() => {
|
|
localStorage.setItem('pagesonly', 'true')
|
|
forceUpdate()}} /> }
|
|
Use only member pages?
|
|
</BS.Col>
|
|
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row">
|
|
{ localStorage.getItem('colorbg') ?
|
|
<Toggle className="mr-2"
|
|
defaultChecked={true}
|
|
icons={false}
|
|
onChange={() => {
|
|
localStorage.removeItem('colorbg');
|
|
forceUpdate()}} /> :
|
|
<Toggle className="mr-2"
|
|
defaultChecked={false}
|
|
icons={false}
|
|
onChange={() => {
|
|
localStorage.setItem('colorbg', 'false')
|
|
forceUpdate()}} /> }
|
|
Hide colored backgrounds?
|
|
</BS.Col>
|
|
</BS.Row>
|
|
</BS.Card.Body>
|
|
</BS.Card>
|
|
</Route>
|
|
</Switch>
|
|
</BS.Container>
|
|
</div>
|
|
<Footer />
|
|
</Router>
|
|
</div>
|
|
);
|
|
}
|