put the homepage in it's own file
This commit is contained in:
Spectralitree
parent
d245564e2e
commit
9323985c8d
104
src/App.js
104
src/App.js
@ -1,102 +1,37 @@
|
||||
import React, {useEffect, useState, useCallback} from 'react';
|
||||
import React, { 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 { 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";
|
||||
import Home from './Pages/Home.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');
|
||||
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">
|
||||
@ -127,34 +62,7 @@ export default function App() {
|
||||
}
|
||||
</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" {...register("pkToken")} 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>
|
||||
}
|
||||
<Home isLoading={isLoading} setIsLoading={setIsLoading} isSubmit={isSubmit} setIsSubmit={setIsSubmit} isInvalid={isInvalid} setIsInvalid={setIsInvalid}/>
|
||||
</Route>
|
||||
<Route path="/pk-webs/profile">
|
||||
<Public />
|
||||
|
||||
150
src/Pages/Home.js
Normal file
150
src/Pages/Home.js
Normal file
@ -0,0 +1,150 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import * as fetch from 'node-fetch';
|
||||
|
||||
import Loading from "../Components/Loading";
|
||||
import * as BS from "react-bootstrap";
|
||||
import history from "../History.js";
|
||||
import { FaLock } from "react-icons/fa";
|
||||
|
||||
import API_URL from "../Constants/constants.js";
|
||||
|
||||
const Home = ({isInvalid, setIsInvalid, isLoading, setIsLoading, isSubmit, setIsSubmit, }) => {
|
||||
const { register, handleSubmit } = useForm();
|
||||
|
||||
const onSubmit = (data) => {
|
||||
localStorage.setItem("token", data.pkToken);
|
||||
logIn();
|
||||
};
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (localStorage.getItem('token')) {
|
||||
checkLogIn();
|
||||
}
|
||||
}, []);
|
||||
|
||||
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 (
|
||||
<>
|
||||
{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"
|
||||
{...register("pkToken")}
|
||||
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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
Loading…
Reference in New Issue
Block a user