fix: bring user to dash if authenticated

brave · Jul 21, 2023 · fadb9d6 · fadb9d6
1 parent c620a49
commit fadb9d6
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 117 deletions.
diff --git a/branding.svg b/branding.svg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,7 +31,6 @@
     "react-dom": "18.2.0",
     "react-router-dom": "5.3.4",
     "react-table": "7.8.0",
-    "react-topbar-progress-indicator": "4.1.1",
     "tweetnacl": "1.0.3",
     "yup": "1.2.0"
   },

diff --git a/src/auth/registration/Register.tsx b/src/auth/registration/Register.tsx
@@ -9,7 +9,7 @@ import { FormikSubmitButton } from "form/FormikHelpers";
 import { useRegister } from "auth/hooks/mutations/useRegister";
 import { AdvertiserRegistered } from "auth/registration/AdvertiserRegistered";
 import { NextAndBack } from "components/Steps/NextAndBack";
-import { Box, Card, CardContent, Typography } from "@mui/material";
+import { Box, Toolbar, Typography } from "@mui/material";
 import { Background } from "components/Background/Background";
 import { LandingPageAppBar } from "components/AppBar/LandingPageAppBar";
 import { PaddedCardContainer } from "components/Card/PaddedCardContainer";
@@ -33,39 +33,42 @@ export function Register() {
 
   return (
     <Background>
-      <LandingPageAppBar />
-      <Box display="flex" width="725px" flexDirection="column">
-        <Typography textAlign="center" variant="h4" sx={{ mb: 5 }}>
-          {steps[activeStep].label}
-        </Typography>
-        <Formik
-          initialValues={initialValues}
-          onSubmit={async (v: RegistrationForm, { setSubmitting }) => {
-            setSubmitting(true);
-            register(v);
-            setSubmitting(false);
-          }}
-          validationSchema={RegistrationSchema}
-        >
-          <Form>
-            <PaddedCardContainer>
-              {steps[activeStep].component}
-            </PaddedCardContainer>
+      <Box height="80vh">
+        <LandingPageAppBar />
+        <Toolbar sx={{ mb: 5 }} />
+        <Box display="flex" width="725px" flexDirection="column" mb={3}>
+          <Typography textAlign="center" variant="h4" sx={{ mb: 3 }}>
+            {steps[activeStep].label}
+          </Typography>
+          <Formik
+            initialValues={initialValues}
+            onSubmit={async (v: RegistrationForm, { setSubmitting }) => {
+              setSubmitting(true);
+              register(v);
+              setSubmitting(false);
+            }}
+            validationSchema={RegistrationSchema}
+          >
+            <Form>
+              <PaddedCardContainer>
+                {steps[activeStep].component}
+              </PaddedCardContainer>
 
-            <NextAndBack
-              activeStep={activeStep}
-              steps={steps.length - 1}
-              onNext={() => setActiveStep(activeStep + 1)}
-              onBack={() => setActiveStep(activeStep - 1)}
-              final={
-                <FormikSubmitButton
-                  isCreate={true}
-                  label="Submit for approval"
-                />
-              }
-            />
-          </Form>
-        </Formik>
+              <NextAndBack
+                activeStep={activeStep}
+                steps={steps.length - 1}
+                onNext={() => setActiveStep(activeStep + 1)}
+                onBack={() => setActiveStep(activeStep - 1)}
+                final={
+                  <FormikSubmitButton
+                    isCreate={true}
+                    label="Submit for approval"
+                  />
+                }
+              />
+            </Form>
+          </Formik>
+        </Box>
       </Box>
     </Background>
   );

diff --git a/src/auth/views/LandingPage.tsx b/src/auth/views/LandingPage.tsx
@@ -3,6 +3,7 @@ import { LandingPageAppBar } from "components/AppBar/LandingPageAppBar";
 import React from "react";
 import { Box, Button, Stack, Typography } from "@mui/material";
 import goals from "../../../images.svg";
+import { useIsAuthenticated } from "auth/hooks/queries/useIsAuthenticated";
 
 const GradientText = {
   backgroundImage:
@@ -12,6 +13,8 @@ const GradientText = {
 };
 
 export function LandingPage() {
+  const isAuthenticated = useIsAuthenticated();
+
   return (
     <Background>
       <LandingPageAppBar />
@@ -43,9 +46,9 @@ export function LandingPage() {
                 padding: "18px 24px 18px 24px",
               }}
               size="large"
-              href="/register"
+              href={isAuthenticated ? "/user/main" : "/register"}
             >
-              Get Started
+              {isAuthenticated ? "Dashboard" : "Get Started"}
             </Button>
           </Box>
         </Stack>

diff --git a/src/components/AppBar/LandingPageAppBar.tsx b/src/components/AppBar/LandingPageAppBar.tsx
@@ -1,10 +1,10 @@
 import * as React from "react";
 
-import TopBarProgress from "react-topbar-progress-indicator";
-
 import {
   AppBar,
+  Box,
   Button,
+  CssBaseline,
   Divider,
   Link,
   LinkProps,
@@ -13,22 +13,18 @@ import {
 } from "@mui/material";
 import ads from "../../../branding.svg";
 import { Link as RouterLink, useRouteMatch } from "react-router-dom";
-
-TopBarProgress.config({
-  barColors: {
-    "0": "#FB7959",
-  },
-  shadowBlur: 0,
-  shadowColor: undefined,
-  barThickness: 2,
-});
+import { useIsAuthenticated } from "auth/hooks/queries/useIsAuthenticated";
+import { useSignOut } from "auth/hooks/mutations/useSignOut";
 
 export function LandingPageAppBar() {
   const match = useRouteMatch();
+  const isAuthenticated = useIsAuthenticated();
 
   const links = [
     {
-      component: <HelpLink label="Get Started" props={{ href: "/register" }} />,
+      component: isAuthenticated ? null : (
+        <HelpLink label="Get Started" props={{ href: "/register" }} />
+      ),
     },
     {
       component: (
@@ -52,38 +48,32 @@ export function LandingPageAppBar() {
   ];
 
   return (
-    <AppBar
-      position="fixed"
-      sx={{
-        bgcolor: "rgba(252, 252, 253, 0.65)",
-        boxShadow: "none",
-        height: "74px",
-        justifyContent: "center",
-      }}
-    >
-      <Toolbar>
-        <Stack direction="row" alignItems="center" spacing={2}>
-          <RouterLink to="/" style={{ marginTop: 5 }}>
-            <img src={ads} alt="Ads" height="31px" width="180px" />
-          </RouterLink>
-          <Divider orientation="vertical" flexItem />
-          <Stack direction="row" spacing={5}>
+    <Box sx={{ display: "flex" }}>
+      <CssBaseline />
+      <AppBar
+        position="fixed"
+        sx={{
+          bgcolor: "rgba(252, 252, 253, 0.65)",
+          boxShadow: "none",
+          height: "74px",
+          justifyContent: "center",
+        }}
+      >
+        <Toolbar>
+          <Stack direction="row" alignItems="center" spacing={3}>
+            <RouterLink to="/" style={{ marginTop: 5 }}>
+              <img src={ads} alt="Ads" height="31px" width="180px" />
+            </RouterLink>
+            <Divider orientation="vertical" flexItem sx={{ marginRight: 3 }} />
             {links.map((l) => l.component)}
           </Stack>
-        </Stack>
-        <div style={{ flexGrow: 1 }} />
-        {!match.url.includes("auth") && (
-          <Button
-            variant="outlined"
-            size="large"
-            sx={{ textTransform: "none" }}
-            href="/auth/link"
-          >
-            Log in
-          </Button>
-        )}
-      </Toolbar>
-    </AppBar>
+          <div style={{ flexGrow: 1 }} />
+          {!match.url.includes("auth") && (
+            <AuthedButton isAuthenticated={isAuthenticated} />
+          )}
+        </Toolbar>
+      </AppBar>
+    </Box>
   );
 }
 
@@ -99,3 +89,19 @@ function HelpLink({ label, props }: HelpProps) {
     </Link>
   );
 }
+
+function AuthedButton(props: { isAuthenticated?: boolean }) {
+  const { signOut } = useSignOut();
+
+  return (
+    <Button
+      variant="outlined"
+      size="large"
+      sx={{ textTransform: "none" }}
+      href={!props.isAuthenticated ? "/auth/link" : undefined}
+      onClick={props.isAuthenticated ? () => signOut() : undefined}
+    >
+      {props.isAuthenticated ? "Sign out" : "Log in"}
+    </Button>
+  );
+}
diff --git a/src/components/Card/PaddedCardContainer.tsx b/src/components/Card/PaddedCardContainer.tsx
@@ -6,8 +6,8 @@ export function PaddedCardContainer({ children }: PropsWithChildren) {
     <Card
       sx={{
         width: "100%",
-        padding: "48px",
-        gap: "32px",
+        padding: "38px",
+        gap: "22px",
       }}
     >
       <CardContent

diff --git a/src/components/Navigation/Navbar.tsx b/src/components/Navigation/Navbar.tsx
@@ -2,8 +2,6 @@ import * as React from "react";
 
 import { useHistory, useRouteMatch } from "react-router-dom";
 
-import TopBarProgress from "react-topbar-progress-indicator";
-
 import {
   AppBar,
   Button,
@@ -19,15 +17,6 @@ import moment from "moment";
 import ads from "../../../branding.svg";
 import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
 
-TopBarProgress.config({
-  barColors: {
-    "0": "#FB7959",
-  },
-  shadowBlur: 0,
-  shadowColor: undefined,
-  barThickness: 2,
-});
-
 export function Navbar() {
   const { advertiser } = useAdvertiser();
   const history = useHistory();