Diana/email authentication (#103)

* quick save

* quick save

* merge

* add Authentication page

* authenticated

* remove warnings

Co-authored-by: Tristan816la <[email protected]>

Author: DianaDai426

apicall.rest

@@ -121,13 +121,14 @@ Content-Type: application/json
 
 ###
 POST http://localhost:9000/posts/comments
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYwZTkxOGI5OTAwNWZkMDAyNDkyNjVhMiIsIm5hbWUiOiJlbWJhcmsiLCJlbWFpbCI6ImVtYmFya3Rlc3RlcjEyMzRAZ21haWwuY29tIiwidXNlclR5cGUiOiJzdHVkZW50IiwiaWF0IjoxNjI3Njg4NjA4LCJleHAiOjE2MzYzMjg2MDh9.74rnAYLyQfaOIxazPHceDFseLbQFd4CrfDnx3SdDUaI
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYwZTkxOGI5OTAwNWZkMDAyNDkyNjVhMiIsIm5hbWUiOiJlbWJhcmsiLCJlbWFpbCI6ImVtYmFya3Rlc3RlcjEyMzRAZ21haWwuY29tIiwiaWF0IjoxNjQyMjc0OTAxLCJleHAiOjE2NTA5MTQ5MDF9.CdkPEhx1JHr7lDL5U4W-LCzTVBDisOGTAFQa-rLTTSU
 Content-Type: application/json
 
 {
     "authorID": "60e918b99005fd00249265a2",
-    "post_id": "606e86b1791b49003a04c1e1",
-    "commentBody": "nothing"
+    "post_id": "5fbb8518a42d3a00dca56efb",
+    "commentBody": "nothing",
+    "authorName": "embark tester"
 }
 
 ###

src/App.js

@@ -28,8 +28,10 @@ import { LinkedInPopUp } from "react-linkedin-login-oauth2";
 import ViewClubProfile from "./pages/Profile/viewClubProfile";
 import ViewStudentProfile from "./pages/Profile/viewStudentProfile";
 import Moderation from "./pages/Moderation";
+import Authenticated from "./pages/Authenticated";
 
 axios.defaults.baseURL =
+  //"https:localhost:9000/";
   process.env.REACT_APP_BACKEND || "https://embark-backend-dev.herokuapp.com/";
 
 const token = localStorage.getItem("AuthToken");
@@ -85,6 +87,11 @@ function App() {
                 component={ViewStudentProfile}
               ></Route>
               <Route path="/moderation" exact component={Moderation}></Route>
+              <Route
+                path="/auth/verifyAccount/:token"
+                exact
+                component={Authenticated}
+              ></Route>
               <Route path="/" component={ErrorPage}></Route>
             </Switch>
           </Router>

src/pages/Authenticated.js

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import { ActionButton } from "../shared/Buttons";
+import { BoldTypography } from "../shared/Typography";
+import { useHistory } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import axios from "axios";
+const HomeBtn = styled(ActionButton)`
+  width: 148px;
+  height: 47px;
+`;
+
+const TextFieldWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-width: 450px;
+  min-height: 300px;
+  margin-top: 20px;
+  padding: 10px;
+`;
+
+const TextBox = styled.div`
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Authenticated = () => {
+  const [verified] = useState(false);
+  const history = useHistory();
+  const { token } = useParams();
+  useEffect(() => {
+    const verify = async () => {
+      const res = await axios.get(`/auth/verifyAccount/${token}`);
+      console.log(res);
+    };
+    verify();
+  }, [token]);
+  return verified ? (
+    <div>
+      <TextFieldWrapper>
+        <TextBox>
+          <BoldTypography sz={"24px"}>Welcome to Embark!</BoldTypography>
+        </TextBox>
+        <TextBox>
+          <BoldTypography sz={"18px"}>
+            Your email address has been verified.
+          </BoldTypography>
+        </TextBox>
+        <HomeBtn onClick={() => history.push("/home")}>Home</HomeBtn>
+      </TextFieldWrapper>
+    </div>
+  ) : (
+    <div>
+      <TextFieldWrapper>
+        <TextBox>
+          <BoldTypography sz={"24px"}>Verifying...</BoldTypography>
+        </TextBox>
+      </TextFieldWrapper>
+    </div>
+  );
+};
+
+export default Authenticated;