Fix login and email retreival forms

src/components/Asks/AskDiscord.tsx

@@ -53,7 +53,7 @@ export function AskDiscord(asks: JSX.Element[], id: number): void {
                 équipes s'organisent !
             </p>
             <p>
-                Pour s'y retrouver tellement on est nombreux (plus de 120), il est nécessaire
+                Pour s'y retrouver tellement on est nombreux (plus de 200), il est nécessaire
                 d'avoir son prénom comme alias. Voir même d'avoir ensuite la première lettre de ton
                 nom de famille si un autre bénévole présent sur le serveur a le même prénom. Pour
                 changer ton alias uniquement sur le serveur PeL, il faut faire un clique droit sur

src/components/ForgotForm/ForgotForm.tsx

@@ -13,7 +13,7 @@ interface Props {
 
 const ForgotForm = ({ dispatch, error, message }: Props): JSX.Element => {
     const onSubmit = useCallback(
-        (event: React.SyntheticEvent): void => {
+        (event: React.SyntheticEvent): boolean => {
             event.preventDefault()
             const target = event.target as typeof event.target & {
                 email: { value: string }
@@ -21,6 +21,7 @@ const ForgotForm = ({ dispatch, error, message }: Props): JSX.Element => {
             const email = target.email.value
 
             dispatch(fetchVolunteerForgot({ email }))
+            return false
         },
         [dispatch]
     )
@@ -35,7 +36,7 @@ const ForgotForm = ({ dispatch, error, message }: Props): JSX.Element => {
                 <input type="email" id="email" name="utilisateur" />
             </div>
             <div className={styles.formButtons}>
-                <FormSubmit>Envoyer</FormSubmit>
+                <FormSubmit onClick={onSubmit}>Envoyer</FormSubmit>
             </div>
             <div className={styles.error}>{error}</div>
             <div className={styles.message}>{message}</div>

src/components/Form/FormSubmit/FormSubmit.tsx

@@ -1,14 +1,20 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import { FC, ReactNode } from "react"
 import styles from "./styles.module.scss"
 
 type Props = {
     children: ReactNode
+    onClick?: (event: React.SyntheticEvent) => void
 }
 
-const FormSubmit: FC<Props> = ({ children }): JSX.Element => (
-    <button type="submit" className={styles.button}>
+const FormSubmit: FC<Props> = ({ children, onClick }): JSX.Element => (
+    <button type="button" className={styles.button} onClick={onClick} onTouchStart={onClick}>
         {children}
     </button>
 )
 
+FormSubmit.defaultProps = {
+    onClick: undefined,
+}
+
 export default FormSubmit

src/components/Loan/LoaningIntro.tsx

@@ -7,7 +7,7 @@ const LoaningIntro: React.FC = (): JSX.Element => (
         <h1>Emprunt et tri des jeux</h1>
         <p>
             Lors du brunch des bénévoles ayant contribué au dernier festival, des boîtes de jeux en
-            trop dans la ludothèque seront données, et des boîtes qui passe l'année dans la cave
+            trop dans la ludothèque seront données, et des boîtes qui passent l'année dans la cave
             entre deux éditions seront prêtées pour 4 mois.
         </p>
         <p>

src/components/LoginForm/index.tsx

@@ -1,4 +1,5 @@
-import React, { memo, useCallback } from "react"
+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"
@@ -9,36 +10,37 @@ const LoginForm = (): JSX.Element => {
     const dispatch = useDispatch()
     const loginError = useSelector((state: AppState) => state.volunteerLogin.error, shallowEqual)
 
+    const emailRef = useRef<HTMLInputElement | null>(null)
+    const passwordRef = useRef<HTMLInputElement | null>(null)
+
     const onSubmit = useCallback(
-        (event: React.SyntheticEvent): void => {
+        (event: React.SyntheticEvent): boolean => {
             event.preventDefault()
-            const target = event.target as typeof event.target & {
-                email: { value: string }
-                password: { value: string }
-            }
-            const email = target.email.value
-            const password = target.password.value
+            event.stopPropagation()
+            const email = get(emailRef, "current.value", "")
+            const password = get(passwordRef, "current.value", "")
 
             dispatch(fetchVolunteerLogin({ email, password }))
+            return false
         },
         [dispatch]
     )
 
     return (
-        <form onSubmit={onSubmit}>
+        <form>
             <div className={styles.loginIntro} key="login-intro">
                 Si tu es bénévole, 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" />
+                <input type="email" id="email" name="utilisateur" ref={emailRef} />
             </div>
             <div className={styles.formLine} key="line-password">
                 <label htmlFor="password">Mot de passe</label>
-                <input type="password" id="password" name="motdepasse" />
+                <input type="password" id="password" name="motdepasse" ref={passwordRef} />
             </div>
             <div className={styles.formButtons}>
-                <FormSubmit>Connexion</FormSubmit>
+                <FormSubmit onClick={onSubmit}>Connexion</FormSubmit>
             </div>
             {loginError && <div className={styles.error}>{loginError}</div>}
             <div className={styles.link}>

src/components/LogoutButton/LogoutButton.tsx

@@ -7,11 +7,12 @@ import styles from "./styles.module.scss"
 const LogoutButton: FC = (): JSX.Element | null => {
     const connected = useSelector(isUserConnected)
 
-    const onClick = useCallback((event: React.SyntheticEvent): void => {
+    const onClick = useCallback((event: React.SyntheticEvent): boolean => {
         event.preventDefault()
         unsetJWT()
         // eslint-disable-next-line no-restricted-globals
         location?.reload()
+        return false
     }, [])
 
     if (!connected) return null

src/server/gsheets/volunteers.ts

@@ -152,6 +152,7 @@ async function sendSignUpEmail(email: string, password: string): Promise<void> {
 export const volunteerLogin = expressAccessor.get<VolunteerLogin>(async (list, bodyArray) => {
     const [body] = bodyArray
     const volunteer = getByEmail(list, body.email)
+
     if (!volunteer) {
         throw Error("Il n'y a aucun bénévole avec cet email")
     }
@@ -173,8 +174,6 @@ export const volunteerLogin = expressAccessor.get<VolunteerLogin>(async (list, b
         map(toTry, async ([p, save]) => bcrypt.compare(p, save.replace(/^\$2y/, "$2a")))
     )
 
-    console.log("tries", JSON.stringify(tries))
-
     if (!some(tries)) {
         throw Error("Mauvais mot de passe pour cet email")
     }

src/store/utils.ts

@@ -158,7 +158,7 @@ export function gameTitleOrder(boxOrGame: { title: string }): string {
 export function gameTitleCategory(boxOrGame: { title: string }, length = 3): string {
     return gameTitleOrder(boxOrGame)
         .substring(0, length)
-        .replace(/(?<=[0-9]).+/, "")
+        .replace(/([0-9]).+/, "$1")
         .toUpperCase()
 }
 

src/theme/mixins.scss

@@ -103,6 +103,7 @@
     color: $color-white;
     border-radius: 16px;
     font-weight: bold;
+    cursor: "pointer";
 }
 
 @mixin form-grey-button {

src/utils/standardization.ts

@@ -48,7 +48,7 @@ export function trim(src: string): string {
 export function canonicalFirstname(firstname: string): string {
     return trim(firstname)
         .toLowerCase()
-        .replace(/(?<=^|[\s'-])([a-zA-Z]|[à-ú]|[À-Ú])/gi, (s) => s.toUpperCase())
+        .replace(/(^|[\s'-])([a-zA-Z]|[à-ú]|[À-Ú])/gi, (s, before) => before + s.toUpperCase())
         .replace(/\b(de|d'|du|le|la)\b/gi, (s) => s.toLowerCase())
         .replace(/\b(d'|l')/gi, (s) => s.toLowerCase())
 }
@@ -56,7 +56,7 @@ export function canonicalFirstname(firstname: string): string {
 export function canonicalLastname(lastname: string): string {
     return trim(lastname)
         .toLowerCase()
-        .replace(/(?<=^|[\s'-])([a-zA-Z]|[à-ú]|[À-Ú])/gi, (s) => s.toUpperCase())
+        .replace(/(^|[\s'-])([a-zA-Z]|[à-ú]|[À-Ú])/gi, (s, before) => before + s.toUpperCase())
         .replace(/\b(de|d'|du|le|la)\b/gi, (s) => s.toLowerCase())
         .replace(/\b(d'|l')/gi, (s) => s.toLowerCase())
 }