import * as React from "react" ; import styled from "styled-components" ; import { withRouter , RouteComponentProps } from "react-router-dom" ; import { OBSectionTitle , OBSectionDescription } from "@joincivil/components" ; import { isLoggedIn } from "@joincivil/utils" ; export interface AuthWrapperState { loading : boolean ; loggedIn : boolean ; magicEmailSent ? : string ; showTokenVerified ? : boolean ; } export interface AuthParams { action ? : "login" | "signup" ; } const Wrapper = styled . div `
  margin: 70px auto 0 auto;
  max-width: 700px;
` ; const SignupLoginInnerWrap = styled . div `
  margin: 0 auto;
  max-width: 520px;
` ; class AuthWrapperComponent extends React . Component < RouteComponentProps < AuthParams > , AuthWrapperState > { constructor ( props ) { super ( props ) ; this . state = { loading : true , loggedIn : false , } ; } public async componentDidMount ( ) { this . setState ( { loggedIn : await isLoggedIn ( ) , } , ( ) => { this . setState ( { loading : false , } ) ; } ) ; } public render ( ) { if ( this . state . loggedIn ) { return < > { this . props . children } < />; } if ( this . state . loading ) { return < > Loading ... < />; } return this . renderSignupLogin ( ) ; } private renderSignupLogin ( ) { return ( < Wrapper > < SignupLoginInnerWrap > < OBSectionTitle > Add your Newsroom to Civil < /OBSectionTitle> < OBSectionDescription > Sign Up or Log In to add your Newsroom to Civil . < /OBSectionDescription> < /SignupLoginInnerWrap> < /Wrapper>); } } export const AuthWrapper = withRouter ( AuthWrapperComponent ) ;