Add login form on pages where login is needed

src/components/Asks/AskMeals.tsx

@@ -4,6 +4,7 @@ import { fetchVolunteerAsksSet } from "../../store/volunteerAsksSet"
 import { useAskTools, addAsk, answerLaterOnProfileBefore } from "./utils"
 import MealsForm, { fetchFor as fetchForMealsForm } from "../VolunteerBoard/MealsForm/MealsForm"
 import { useUserMeals } from "../VolunteerBoard/meals.utils"
+import { useUserDayWishes } from "../VolunteerBoard/daysWishes.utils"
 
 export function AskMeals(asks: JSX.Element[], id: number): void {
     const { dispatch, jwtToken, volunteerAsks } = useAskTools()
@@ -17,8 +18,11 @@ export function AskMeals(asks: JSX.Element[], id: number): void {
     }, [dispatch, id, jwtToken, volunteerAsks?.hiddenAsks])
 
     const [userMeals] = useUserMeals()
+    const [userWishes] = useUserDayWishes()
+    const participation = get(userWishes, "active", "inconnu") as string
     const meals = get(userMeals, "meals", [])
-    const needToShow = meals.length === 0
+    const needToShow =
+        (participation === "oui" || participation === "peut-etre") && meals.length === 0
 
     addAsk(
         asks,

src/components/Asks/AskParticipationDetails.tsx

@@ -6,6 +6,7 @@ import ParticipationDetailsForm, {
     fetchFor as fetchForParticipationDetailsForm,
 } from "../VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsForm"
 import { useUserParticipationDetails } from "../VolunteerBoard/participationDetails.utils"
+import { useUserDayWishes } from "../VolunteerBoard/daysWishes.utils"
 
 export function AskParticipationDetails(asks: JSX.Element[], id: number): void {
     const { dispatch, jwtToken, volunteerAsks } = useAskTools()
@@ -19,9 +20,12 @@ export function AskParticipationDetails(asks: JSX.Element[], id: number): void {
     }, [dispatch, id, jwtToken, volunteerAsks?.hiddenAsks])
 
     const [participationDetails] = useUserParticipationDetails()
+    const [userWishes] = useUserDayWishes()
+    const participation = get(userWishes, "active", "inconnu") as string
     const tshirtSize = get(participationDetails, "tshirtSize", "")
     const food = get(participationDetails, "food", "")
-    const needToShow = !tshirtSize || !food
+    const needToShow =
+        (participation === "oui" || participation === "peut-etre") && (!tshirtSize || !food)
 
     addAsk(
         asks,

src/components/Asks/index.tsx

@@ -46,7 +46,7 @@ const Asks = (): JSX.Element | null => {
                                 dans <a href="/profil">Mon profil</a> :)
                                 <br />
                                 Tu as fait le tour des dernières infos ou questions importantes,
-                                merci ! :)
+                                merci !
                                 <br />
                                 Nous te préviendrons quand il y en aura de nouvelles.
                                 <br />

src/components/LoginForm/index.tsx

@@ -2,11 +2,16 @@ import { memo, useCallback, useRef } from "react"
 import { get } from "lodash"
 import { shallowEqual, useDispatch, useSelector } from "react-redux"
 import { AppState } from "../../store"
-import { fetchVolunteerLogin } from "../../store/volunteerLogin"
+import { fetchVolunteerLogin, fetchVolunteerLoginToRoot } from "../../store/volunteerLogin"
 import styles from "./styles.module.scss"
 import FormSubmit from "../Form/FormSubmit/FormSubmit"
 
-const LoginForm = (): JSX.Element => {
+interface Props {
+    redirectToRoot?: boolean
+    loginNeeded?: boolean
+}
+
+const LoginForm = ({ redirectToRoot, loginNeeded }: Props): JSX.Element => {
     const dispatch = useDispatch()
     const loginError = useSelector((state: AppState) => state.volunteerLogin.error, shallowEqual)
 
@@ -20,17 +25,19 @@ const LoginForm = (): JSX.Element => {
             const email = get(emailRef, "current.value", "")
             const password = get(passwordRef, "current.value", "")
 
-            dispatch(fetchVolunteerLogin({ email, password }))
+            dispatch(
+                (redirectToRoot ? fetchVolunteerLoginToRoot : fetchVolunteerLogin)({
+                    email,
+                    password,
+                })
+            )
             return false
         },
-        [dispatch]
+        [dispatch, redirectToRoot]
     )
 
-    return (
+    const loginForm = (
         <form>
-            <div className={styles.loginIntro} key="login-intro">
-                Si tu es bénévole ou que tu l'as déjà été, connecte-toi pour accéder à ton espace.
-            </div>
             <div className={styles.formLine} key="line-email">
                 <label htmlFor="email">Email</label>
                 <input type="email" id="email" name="utilisateur" ref={emailRef} />
@@ -48,6 +55,38 @@ const LoginForm = (): JSX.Element => {
             </div>
         </form>
     )
+
+    return (
+        <>
+            {loginNeeded && (
+                <div className={styles.loginPage}>
+                    <div className={styles.loginContent}>
+                        <div className={styles.loginIntro}>
+                            Tu dois t'identifier pour accéder à cette page !
+                        </div>
+                        {loginForm}
+                    </div>
+                </div>
+            )}
+
+            {redirectToRoot && loginForm}
+
+            {!loginNeeded && !redirectToRoot && (
+                <>
+                    <div className={styles.loginIntro} key="login-intro">
+                        Si tu es bénévole ou que tu l'as déjà été, connecte-toi pour accéder à ton
+                        espace.
+                    </div>
+                    {loginForm}
+                </>
+            )}
+        </>
+    )
+}
+// Set default props
+LoginForm.defaultProps = {
+    redirectToRoot: undefined,
+    loginNeeded: undefined,
 }
 
 export default memo(LoginForm)

src/components/LoginForm/styles.module.scss

@@ -1,6 +1,14 @@
 @import "../../theme/variables";
 @import "../../theme/mixins";
 
+.loginPage {
+    @include page-wrapper-center;
+}
+
+.loginContent {
+    @include page-content-wrapper;
+}
+
 .loginIntro {
     margin-bottom: 10px;
 }

src/components/RegisterForm/index.tsx

@@ -256,7 +256,7 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
         </dl>
     )
 
-    const cameAsVisitor = (
+    const alreadySignupForm = (
         <>
             <div className={styles.inputWrapper}>
                 <div className={styles.leftCol}>
@@ -294,11 +294,15 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
                             Viens simplement t'identifier sur <a href="/">fo.parisestludique.fr</a>{" "}
                             ou en dessous ^^
                         </p>
-                        <LoginForm />
+                        <LoginForm redirectToRoot />
                     </dd>
                 </dl>
             )}
+        </>
+    )
 
+    const cameAsVisitor = (
+        <>
             <div className={styles.inputWrapper}>
                 <div className={styles.leftCol}>
                     <div className={styles.multipleChoiceTitle}>
@@ -668,16 +672,21 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
     )
 
     return (
-        <form>
+        <>
             {intro}
             {enableRegistering && commentQuestion}
-            {cameAsVisitor}
-            {meeting}
-            {pelMember}
-            {nameMobileEmail}
-            {!enableRegistering && commentQuestion}
-            {howToContact !== "Aucun" && submitButton}
-        </form>
+            {alreadySignupForm}
+            {!alreadySignup && (
+                <form>
+                    {cameAsVisitor}
+                    {meeting}
+                    {pelMember}
+                    {nameMobileEmail}
+                    {!enableRegistering && commentQuestion}
+                    {howToContact !== "Aucun" && submitButton}
+                </form>
+            )}
+        </>
     )
 }
 

src/pages/Admin/DbEdit/DbEdit.tsx

@@ -4,7 +4,7 @@ import { useSelector } from "react-redux"
 
 import { AppThunk } from "../../../store"
 import { selectUserJwtToken } from "../../../store/auth"
-import { DbEdit, fetchForDbEdit } from "../../../components"
+import { DbEdit, fetchForDbEdit, LoginForm } from "../../../components"
 
 export type Props = RouteComponentProps
 
@@ -19,7 +19,7 @@ const DbEditPage: FC<Props> = (): JSX.Element => {
             </>
         )
     }
-    return <div>Besoin d'être identifié</div>
+    return <LoginForm loginNeeded />
 }
 
 // Fetch server-side data here

src/pages/Admin/GameDetailsUpdate/GameDetailsUpdate.tsx

@@ -4,7 +4,7 @@ import { useSelector } from "react-redux"
 
 import { AppThunk } from "../../../store"
 import { selectUserJwtToken } from "../../../store/auth"
-import { GameDetailsUpdate } from "../../../components"
+import { GameDetailsUpdate, LoginForm } from "../../../components"
 import { fetchGameDetailsUpdateIfNeed } from "../../../store/gameDetailsUpdate"
 
 export type Props = RouteComponentProps
@@ -20,7 +20,7 @@ const GameDetailsUpdatePage: FC<Props> = (): JSX.Element => {
             </>
         )
     }
-    return <div>Besoin d'être identifié</div>
+    return <LoginForm loginNeeded />
 }
 
 // Fetch server-side data here

src/pages/Board/Board.tsx

@@ -5,7 +5,7 @@ import { useSelector } from "react-redux"
 import { AppThunk } from "../../store"
 import { selectUserJwtToken } from "../../store/auth"
 import Page from "../../components/ui/Page/Page"
-import { Board, fetchForBoard } from "../../components"
+import { Board, fetchForBoard, LoginForm } from "../../components"
 
 export type Props = RouteComponentProps
 
@@ -20,7 +20,7 @@ const BoardPage: FC<Props> = (): JSX.Element => {
             </Page>
         )
     }
-    return <div>Besoin d'être identifié</div>
+    return <LoginForm loginNeeded />
 }
 
 // Fetch server-side data here

src/pages/Knowledge/KnowledgesPage.tsx

@@ -5,7 +5,7 @@ import { Helmet } from "react-helmet"
 
 import { AppThunk } from "../../store"
 import styles from "./styles.module.scss"
-import { KnowledgeBoxList, KnowledgeIntro, fetchForKnowledge } from "../../components"
+import { KnowledgeBoxList, KnowledgeIntro, LoginForm, fetchForKnowledge } from "../../components"
 import { selectUserJwtToken } from "../../store/auth"
 
 export type Props = RouteComponentProps
@@ -14,7 +14,7 @@ const KnowledgesPage: FC<Props> = (): JSX.Element => {
     const jwtToken = useSelector(selectUserJwtToken)
     if (jwtToken === undefined) return <p>Loading...</p>
     if (!jwtToken) {
-        return <div>Besoin d'être identifié</div>
+        return <LoginForm loginNeeded />
     }
     return (
         <div className={styles.knowledgesPage}>

src/pages/KnowledgeCards/KnowledgeCardsPage.tsx

@@ -3,7 +3,7 @@ import { useSelector } from "react-redux"
 import { RouteComponentProps } from "react-router-dom"
 
 import { AppThunk } from "../../store"
-import { KnowledgeCard, fetchForKnowledgeCard } from "../../components"
+import { KnowledgeCard, fetchForKnowledgeCard, LoginForm } from "../../components"
 import { selectUserJwtToken } from "../../store/auth"
 
 export type Props = RouteComponentProps
@@ -12,7 +12,7 @@ const KnowledgeCardsPage: FC<Props> = (): JSX.Element => {
     const jwtToken = useSelector(selectUserJwtToken)
     if (jwtToken === undefined) return <p>Loading...</p>
     if (!jwtToken) {
-        return <div>Besoin d'être identifié</div>
+        return <LoginForm loginNeeded />
     }
     return <KnowledgeCard />
 }

src/pages/Loaning/LoaningPage.tsx

@@ -5,7 +5,7 @@ import { Helmet } from "react-helmet"
 
 import { AppThunk } from "../../store"
 import styles from "./styles.module.scss"
-import { LoaningIntro, Loaning, fetchForLoaning } from "../../components"
+import { LoaningIntro, Loaning, fetchForLoaning, LoginForm } from "../../components"
 import { selectUserJwtToken } from "../../store/auth"
 
 export type Props = RouteComponentProps
@@ -14,7 +14,7 @@ const LoaningPage: FC<Props> = (): JSX.Element => {
     const jwtToken = useSelector(selectUserJwtToken)
     if (jwtToken === undefined) return <p>Loading...</p>
     if (!jwtToken) {
-        return <div>Besoin d'être identifié</div>
+        return <LoginForm loginNeeded />
     }
     return (
         <div className={styles.loaningPage}>

src/pages/Loans/LoansPage.tsx

@@ -5,7 +5,7 @@ import { Helmet } from "react-helmet"
 
 import { AppThunk } from "../../store"
 import styles from "./styles.module.scss"
-import { LoansIntro, Loans, fetchForLoans } from "../../components"
+import { LoansIntro, Loans, fetchForLoans, LoginForm } from "../../components"
 import { selectUserJwtToken } from "../../store/auth"
 
 export type Props = RouteComponentProps
@@ -14,7 +14,7 @@ const LoansPage: FC<Props> = (): JSX.Element => {
     const jwtToken = useSelector(selectUserJwtToken)
     if (jwtToken === undefined) return <p>Loading...</p>
     if (!jwtToken) {
-        return <div>Besoin d'être identifié</div>
+        return <LoginForm loginNeeded />
     }
     return (
         <div className={styles.loaningPage}>

src/pages/TeamAssignment/TeamAssignmentPage.tsx

@@ -5,7 +5,7 @@ import { useSelector } from "react-redux"
 import { AppThunk } from "../../store"
 import { selectUserJwtToken } from "../../store/auth"
 import Page from "../../components/ui/Page/Page"
-import { TeamAssignment, fetchForTeamAssignment } from "../../components"
+import { TeamAssignment, fetchForTeamAssignment, LoginForm } from "../../components"
 import VolunteersWithTeamWishes from "../../components/TeamAssignment/VolunteersWithTeamWishes"
 
 export type Props = RouteComponentProps
@@ -26,7 +26,7 @@ const TeamAssignmentPage: FC<Props> = (): JSX.Element => {
             </>
         )
     }
-    return <div>Besoin d'être identifié</div>
+    return <LoginForm loginNeeded />
 }
 
 // Fetch server-side data here

src/pages/Volunteers/Volunteers.tsx

@@ -5,6 +5,7 @@ import { useSelector } from "react-redux"
 import { AppThunk } from "../../store"
 import { selectUserJwtToken } from "../../store/auth"
 import Page from "../../components/ui/Page/Page"
+import { LoginForm } from "../../components"
 import { fetchVolunteerListIfNeed } from "../../store/volunteerList"
 
 export type Props = RouteComponentProps
@@ -20,7 +21,7 @@ const BoardPage: FC<Props> = (): JSX.Element => {
             </Page>
         )
     }
-    return <div>Besoin d'être identifié</div>
+    return <LoginForm loginNeeded />
 }
 
 // Fetch server-side data here

src/store/volunteerLogin.ts

@@ -32,6 +32,18 @@ const volunteerLoginSlice = createSlice({
 export default volunteerLoginSlice.reducer
 export const { getRequesting, getSuccess, getFailure } = volunteerLoginSlice.actions
 
+export const fetchVolunteerLoginToRoot = elementFetch<
+    VolunteerLogin,
+    Parameters<typeof volunteerLogin>
+>(volunteerLogin, getRequesting, getSuccess, getFailure, undefined, (login: VolunteerLogin) => {
+    setJWT(login.jwt, login.id, login.roles)
+    // eslint-disable-next-line no-restricted-globals
+    if (location?.pathname) {
+        // eslint-disable-next-line no-restricted-globals
+        location.pathname = "/"
+    }
+})
+
 export const fetchVolunteerLogin = elementFetch<VolunteerLogin, Parameters<typeof volunteerLogin>>(
     volunteerLogin,
     getRequesting,