Merge pull request #1855 from mertbagt/login-page

Login page

Author: mertbagt

components/EditProfilePage/EditProfilePage.tsx

@@ -25,6 +25,7 @@ import {
 } from "./StyledEditProfileComponents"
 import { TestimoniesTab } from "./TestimoniesTab"
 import { useFlags } from "components/featureFlags"
+import LoginPage from "components/Login/login"
 import { PendingUpgradeBanner } from "components/PendingUpgradeBanner"
 
 const tabTitle = ["about-you", "testimonies", "following"] as const
@@ -39,14 +40,18 @@ export default function EditProfile({
   const uid = user?.uid
   const result = useProfile()
 
-  if (result.loading) {
+  if (result.loading && uid) {
     return (
       <Row>
         <Spinner animation="border" className="mx-auto" />
       </Row>
     )
   }
 
+  if (result.loading) {
+    return <LoginPage />
+  }
+
   if (result?.profile && uid) {
     return (
       <EditProfileForm
@@ -57,8 +62,6 @@ export default function EditProfile({
       />
     )
   }
-
-  // Todo add error handling/404 page?
 }
 
 export function EditProfileForm({

components/Login/login.tsx

@@ -0,0 +1,36 @@
+import { useTranslation } from "next-i18next"
+import styled from "styled-components"
+import { Container } from "../bootstrap"
+import { SignInWithButton } from "components/auth"
+
+export default function LoginPage() {
+  const { t } = useTranslation("auth")
+
+  const StyledContainer = styled(Container)`
+    @media (min-width: 768px) {
+    }
+  `
+
+  return (
+    <StyledContainer>
+      <div className={`bg-white my-3 overflow-hidden rounded-3`}>
+        <div className={`align-items-center d-flex px-2 pt-2 pb-0`}>
+          <div className={`px-3 py-0`}>
+            <div className={`align-items-start fs-5 lh-sm mb-1 text-secondary`}>
+              {t("probablySignedOut")}
+            </div>
+            <br />
+            <div className={`align-items-start fs-5 lh-sm mb-1 text-secondary`}>
+              {t("pleaseConsider")}
+            </div>
+            <br />
+            <div className={`justify-content-center d-flex w-100`}>
+              <SignInWithButton />
+            </div>
+            <br />
+          </div>
+        </div>
+      </div>
+    </StyledContainer>
+  )
+}

components/Newsfeed/Newsfeed.tsx

@@ -1,7 +1,7 @@
 import ErrorPage from "next/error"
 import { Timestamp } from "firebase/firestore"
 import { useTranslation } from "next-i18next"
-import { useContext, useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import { useAuth } from "../auth"
 import { Col, Row, Spinner } from "../bootstrap"
 import { Profile, useProfile, usePublicProfile } from "../db"
@@ -14,6 +14,7 @@ import {
   StyledContainer
 } from "./StyledNewsfeedComponents"
 import ProfileSettingsModal from "components/EditProfilePage/ProfileSettingsModal"
+import LoginPage from "components/Login/login"
 import { NewsfeedCard } from "components/NewsfeedCard/NewsfeedCard"
 import { ProfileButtons } from "components/ProfilePage/ProfileButtons"
 
@@ -22,7 +23,7 @@ export default function Newsfeed() {
 
   const { user } = useAuth()
   const uid = user?.uid
-  const { result: profile, loading } = usePublicProfile(uid)
+  const result = useProfile()
   const isUser = user?.uid !== undefined
 
   const [isShowingOrgs, setIsShowingOrgs] = useState<boolean>(true)
@@ -191,20 +192,20 @@ export default function Newsfeed() {
 
   return (
     <>
-      {loading ? (
+      {result.loading && uid ? (
         <Row>
           <Spinner animation="border" className="mx-auto" />
         </Row>
       ) : (
         <>
-          {profile ? (
+          {result.profile ? (
             <div className={`d-flex align-self-center`}>
               <StyledContainer>
                 <Header>
                   <HeaderTitle className={`mb-4`}>
                     {t("navigation.newsfeed")}
                   </HeaderTitle>
-                  <Filters profile={profile} />
+                  <Filters profile={result.profile} />
                 </Header>
                 {filteredResults.length > 0 ? (
                   <>
@@ -237,9 +238,9 @@ export default function Newsfeed() {
                   <>
                     <div className="pb-4">
                       <NewsfeedCard
-                        header={`No Results`}
+                        header={t("noResults")}
                         timestamp={Timestamp.now()}
-                        bodyText={`There are no news updates for your current followed topics`}
+                        bodyText={t("noNewsUpdates")}
                         type={``}
                       />
                     </div>
@@ -251,7 +252,8 @@ export default function Newsfeed() {
               </StyledContainer>
             </div>
           ) : (
-            <ErrorPage statusCode={404} withDarkMode={false} />
+            // <ErrorPage statusCode={404} withDarkMode={false} />
+            <LoginPage />
           )}
         </>
       )}

components/auth/SignInModal.tsx

@@ -1,5 +1,4 @@
 import { useEffect } from "react"
-import type { ModalProps } from "react-bootstrap"
 import { useForm } from "react-hook-form"
 import { Alert, Button, Col, Form, Modal, Stack } from "../bootstrap"
 import { LoadingButton } from "../buttons"

pages/edit-profile/[[...docName]].tsx

@@ -14,10 +14,11 @@ const Query = z.object({
 
 export default createPage({
   title: "Edit Profile",
-  Page: requireAuth(({ user }) => {
+  Page: () => {
+    // Page: requireAuth(({ user }) => {
     const tabTitle = Query.parse(useRouter().query).docName?.[0] || "about-you"
     return <EditProfile tabTitle={tabTitle as TabTitles} />
-  })
+  }
 })
 
 export const getStaticPaths: GetStaticPaths = async ctx => {

public/locales/en/auth.json

@@ -54,7 +54,7 @@
   "subscribeNewsletter": "Click here to subscribe to our newsletter",
   "verifyEmail": "Verify your email address",
   "verifyLinkSent": "Please verify your email for your account by clicking the verification link we sent to your email. You will be required to verify your email before submitting testimony.",
-  "setUpProfile": "Set Up Your Profile"
-  
-
+  "setUpProfile": "Set Up Your Profile",
+  "probablySignedOut": "You were possibly signed out while trying to go to a page that needs to be signed in to function",
+  "pleaseConsider": "Please consider logging in first:"
 }

public/locales/en/common.json

@@ -97,6 +97,7 @@
   },
   "notInCommittee": "Bill not currently in committee",
   "noResults": "No Results",
+  "noNewsUpdates": "There are no news updates for your current followed topics",
   "orgs": "Organizations",
   "partners": {
     "header": "Our Partners",