Sign out link in header and authenticated routes (#159)

* remove unused router stuff

* clean up header and add logout page

* lint

* functional log out route

* better

* add protection for file manager page

* show dashboard link instead of log out if logged in and on landing page

* redo agreement page

* remove header from screen container

* lint

* fix

* fix again

Author: EdmundMai

d.ts

@@ -1 +1,2 @@
 declare module "*.json";
+declare module "*.md";

src/components/agreement/index.js renamed to src/components/agreement/contents.tsx

@@ -1,13 +1,16 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
 import styled, { ThemeProvider } from "styled-components";
 import Markdown from "react-markdown";
 
 import ScreenContainer from "../shared/screen-container";
+import Header from "../shared/header";
 
-import { AGREEMENT_TYPES, theme } from "../../config";
+import { HEADER_TYPES, AGREEMENT_TYPES, theme } from "../../config";
 import TOS_MARKDOWN from "./terms-of-service.md";
 import PRIVACY_POLICY from "./privacy-policy.md";
 
+const Container = styled.div``;
+
 const AgreementMarkdownComponent = props => (
   <div>
     <Markdown {...props} />
@@ -23,33 +26,37 @@ const AgreementMarkdown = styled(AgreementMarkdownComponent)`
   }
 `;
 
-class Agreement extends Component {
-  state = { text: "" };
+const Contents = ({ type, title, isLoggedIn }) => {
+  const [text, setText] = useState("");
 
-  componentDidMount () {
+  useEffect(() => {
     const file = (type => {
       switch (type) {
-        case AGREEMENT_TYPES.TERMS_OF_SERVICE:
-          return TOS_MARKDOWN;
         case AGREEMENT_TYPES.PRIVACY_POLICY:
           return PRIVACY_POLICY;
+        default:
+          return TOS_MARKDOWN;
       }
-    })(this.props.type);
+    })(type);
 
     fetch(file)
       .then(resp => resp.text())
-      .then(text => this.setState({ text }));
-  }
-
-  render () {
-    const { title } = this.props;
-    return (
-      <ThemeProvider theme={theme}>
+      .then(text => setText(text))
+      .catch(() =>
+        setText("There was a problem with the file. Please try again later!")
+      );
+  }, []);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Container>
+        <Header type={HEADER_TYPES.SCREEN_CONTAINER} />
         <ScreenContainer title={title}>
-          <AgreementMarkdown source={this.state.text} />
+          <AgreementMarkdown source={text} />
         </ScreenContainer>
-      </ThemeProvider>
-    );
-  }
-}
-export default Agreement;
+      </Container>
+    </ThemeProvider>
+  );
+};
+
+export default Contents;

src/components/agreement/index.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import Contents from "./contents";
+
+import { AUTHENTICATION_STATUSES } from "../../config";
+
+const mapStateToProps = state => ({
+  authenticationStatus: state.authentication.status
+});
+
+const mapDispatchToProps = dispatch => ({});
+
+const Agreement = ({ authenticationStatus, type, title }) => (
+  <Contents
+    type={type}
+    title={title}
+    isLoggedIn={authenticationStatus === AUTHENTICATION_STATUSES.LOGGED_IN}
+  />
+);
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Agreement);

src/components/brokers-down/brokers-down-slide.tsx

@@ -3,8 +3,13 @@ import styled, { ThemeProvider } from "styled-components";
 
 import ScreenContainer from "../shared/screen-container";
 import ScreenDescription from "../shared/screen-description";
+import Header from "../shared/header";
 
-import { theme } from "../../config";
+import { HEADER_TYPES, theme } from "../../config";
+
+const Container = styled.div`
+  width: 100%;
+`;
 
 const Link = styled.a`
   color: ${props => props.theme.title.color};
@@ -13,14 +18,17 @@ const Link = styled.a`
 
 const BrokersDownSlide = () => (
   <ThemeProvider theme={theme}>
-    <ScreenContainer title={"Broker Nodes Offline"}>
-      <ScreenDescription>
-        Opacity Storage’s broker nodes are currently offline. Uploads are
-        unavailable at this time. Please visit our{" "}
-        <Link href="https://t.me/OpacityStorage">Telegram Channel</Link> for
-        more information. We apologize for the inconvenience.
-      </ScreenDescription>
-    </ScreenContainer>
+    <Container>
+      <Header type={HEADER_TYPES.SCREEN_CONTAINER} />
+      <ScreenContainer title={"Broker Nodes Offline"}>
+        <ScreenDescription>
+          Opacity Storage’s broker nodes are currently offline. Uploads are
+          unavailable at this time. Please visit our{" "}
+          <Link href="https://t.me/OpacityStorage">Telegram Channel</Link> for
+          more information. We apologize for the inconvenience.
+        </ScreenDescription>
+      </ScreenContainer>
+    </Container>
   </ThemeProvider>
 );
 

src/components/file-manager/file-manager-slide.tsx

@@ -5,12 +5,7 @@ import backend from "../../services/backend";
 import { NativeTypes } from "react-dnd-html5-backend";
 import { DropTarget } from "react-dnd";
 
-import {
-  HEADER_FILE_MANAGER,
-  DESKTOP_WIDTH,
-  MOBILE_WIDTH,
-  theme
-} from "../../config";
+import { HEADER_TYPES, DESKTOP_WIDTH, MOBILE_WIDTH, theme } from "../../config";
 
 import Header from "../shared/header";
 import UploadButton from "./upload-button";
@@ -317,7 +312,7 @@ const FileManagerSlide = ({
     <DroppableZone innerRef={instance => connectDropTarget(instance)}>
       <ThemeProvider theme={theme}>
         <Container>
-          <Header type={HEADER_FILE_MANAGER} />
+          <Header type={HEADER_TYPES.FILE_MANAGER} />
           <Contents>
             <LeftSideNav>
               <StorageInfo>

src/components/landing-page/index.tsx

@@ -3,11 +3,19 @@ import { connect } from "react-redux";
 
 import LandingPageSlide from "./landing-page-slide";
 
-const mapStateToProps = state => ({});
+import { AUTHENTICATION_STATUSES } from "../../config";
+
+const mapStateToProps = state => ({
+  authenticationStatus: state.authentication.status
+});
 
 const mapDispatchToProps = dispatch => ({});
 
-const LandingPage = ({}) => <LandingPageSlide />;
+const LandingPage = ({ authenticationStatus }) => (
+  <LandingPageSlide
+    isLoggedIn={authenticationStatus === AUTHENTICATION_STATUSES.LOGGED_IN}
+  />
+);
 
 export default connect(
   mapStateToProps,

src/components/landing-page/landing-page-slide.tsx

@@ -3,7 +3,7 @@ import styled, { ThemeProvider } from "styled-components";
 import { withRouter } from "react-router";
 
 import {
-  HEADER_TEAM_PAGE,
+  HEADER_TYPES,
   MOBILE_WIDTH,
   LANDING_PAGE_MOBILE_WIDTH,
   LANDING_PAGE_VIDEO,
@@ -313,10 +313,10 @@ const ContentPurchase = styled.a`
   display: block;
 `;
 
-const LandingPageSlide = ({ history }) => (
+const LandingPageSlide = ({ history, isLoggedIn }) => (
   <ThemeProvider theme={theme}>
     <ContainerWrapper>
-      <Header type={HEADER_TEAM_PAGE} />
+      <Header type={HEADER_TYPES.TEAM_PAGE} isLoggedIn={isLoggedIn} />
       <HeaderContainer>
         <Title>Secure. Anonymous. Opaque.</Title>
         <ContentWrapper>

src/components/login/login-slide.tsx

@@ -3,7 +3,7 @@ import styled, { ThemeProvider } from "styled-components";
 
 import {
   AUTHENTICATION_STATUSES,
-  HEADER_SCREEEN_CONTAINER,
+  HEADER_TYPES,
   DESKTOP_WIDTH,
   MOBILE_WIDTH,
   theme
@@ -13,7 +13,9 @@ import Header from "../shared/header";
 
 const ICON_LOGO = require("../../assets/images/logo-login.svg");
 
-const LoginContainer = styled.div``;
+const Container = styled.div`
+  width: 100%;
+`;
 
 const ErrorMessage = styled.p`
   color: ${props => props.theme.error.color};
@@ -66,7 +68,7 @@ const Input = styled.input<InputProps>`
       props.hasError ? props.theme.error.color : props.theme.input.content};
 `;
 
-const Container = styled.div`
+const Column = styled.div`
   flex: 1;
   @media only screen and (max-width: ${MOBILE_WIDTH}px) {
     text-align: center;
@@ -191,14 +193,14 @@ class LoginOrRegisterSlide extends Component<
 
     return (
       <ThemeProvider theme={theme}>
-        <LoginContainer>
-          <Header type={HEADER_SCREEEN_CONTAINER} />
+        <Container>
+          <Header type={HEADER_TYPES.SCREEN_CONTAINER} />
           <StorageContainer>
             <Storage>
-              <Container>
+              <Column>
                 <Icon src={ICON_LOGO} />
-              </Container>
-              <Container>
+              </Column>
+              <Column>
                 <Title>Sign in Opacity</Title>
                 <Underline />
                 <Label>Account Handle</Label>
@@ -233,10 +235,10 @@ class LoginOrRegisterSlide extends Component<
                 <ForgotStorage href="/forgot-page">
                   Forgot Account Handle?
                 </ForgotStorage>
-              </Container>
+              </Column>
             </Storage>
           </StorageContainer>
-        </LoginContainer>
+        </Container>
       </ThemeProvider>
     );
   }

src/components/logout/index.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import { connect } from "react-redux";
+import { withRouter } from "react-router";
+
+import authenticationActions from "../../redux/actions/authentication-actions";
+
+const mapStateToProps = state => ({});
+
+const mapDispatchToProps = dispatch => ({
+  logout: () => dispatch(authenticationActions.logout())
+});
+
+const Logout = ({ history, logout }) => {
+  useEffect(() => {
+    logout();
+    history.push("/");
+  }, []);
+
+  return null;
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withRouter(Logout));

src/components/routes/authenticated-route.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Route, Redirect } from "react-router";
+import { connect } from "react-redux";
+
+import { AUTHENTICATION_STATUSES } from "../../config";
+
+const mapStateToProps = state => ({
+  authenticationStatus: state.authentication.status
+});
+
+const mapDispatchToProps = dispatch => ({});
+
+const AuthenticatedRoute = ({
+  path,
+  component: ProtectedComponent,
+  authenticationStatus
+}) => {
+  const isLoggedIn = authenticationStatus === AUTHENTICATION_STATUSES.LOGGED_IN;
+
+  return (
+    <Route
+      path={path}
+      render={() =>
+        isLoggedIn ? (
+          <ProtectedComponent />
+        ) : (
+          <Redirect to={{ pathname: "/login" }} />
+        )
+      }
+    />
+  );
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(AuthenticatedRoute);