put the homepage in it's own file

2026-02-11 08:10:10 +00:00 · 2021-06-26 19:36:46 +02:00 · 2021-06-26 19:36:46 +02:00 · 9323985c8d
commit 9323985c8d
parent d245564e2e
2 changed files with 159 additions and 101 deletions
--- a/src/Pages/Home.js
+++ b/src/Pages/Home.js
@ -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;