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>
+            )}
+        </>
     )
 }