From 339e8e0b530da9bd888ebc4faff0e1bb5baaef0f Mon Sep 17 00:00:00 2001 From: horek Date: Wed, 17 Jan 2024 18:53:53 +0100 Subject: [PATCH] fix: add content of cgu to modal in login form --- webapp-next/components/login/FormLogin.tsx | 197 ++++-------- webapp-next/pages/legals/cgu.tsx | 347 ++++++++++----------- 2 files changed, 239 insertions(+), 305 deletions(-) diff --git a/webapp-next/components/login/FormLogin.tsx b/webapp-next/components/login/FormLogin.tsx index 8ed2319..20c5145 100644 --- a/webapp-next/components/login/FormLogin.tsx +++ b/webapp-next/components/login/FormLogin.tsx @@ -23,19 +23,20 @@ import { ModalOverlay, Spinner, Text, - useDisclosure -} from '@chakra-ui/react'; -import cookie from 'js-cookie'; -import { useRouter } from 'next/router'; -import { useEffect, useRef, useState } from 'react'; -import useSWRMutation from 'swr/mutation'; -import { ELASTIC_API_KEY_NAME } from '@/utils/tools'; + useDisclosure, +} from "@chakra-ui/react"; +import cookie from "js-cookie"; +import { useRouter } from "next/router"; +import { useEffect, useRef, useState } from "react"; +import useSWRMutation from "swr/mutation"; +import { ELASTIC_API_KEY_NAME } from "@/utils/tools"; +import { ContentCGU } from "@/pages/legals/cgu"; async function auth(url: string, { arg }: { arg: T }) { return fetch(url, { - method: 'POST', + method: "POST", body: JSON.stringify(arg), - headers: { 'Content-Type': 'application/json' } + headers: { "Content-Type": "application/json" }, }); } @@ -45,12 +46,12 @@ export const FormLogin = () => { const { isOpen: isOpenTerms, onOpen: onOpenTerms, - onClose: onCloseTerms + onClose: onCloseTerms, } = useDisclosure(); const modalBodyRef = useRef(null); - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); const [cm2dApiKeyEncoded, setCm2dApiKeyEncoded] = useState(null); const [code, setCode] = useState(); const [isLoading, setIsLoading] = useState(false); @@ -65,15 +66,15 @@ export const FormLogin = () => { const [formError, setFormError] = useState(false); const { trigger: triggerLogin } = useSWRMutation( - '/api/auth', + "/api/auth", auth<{ username: string; password: string }> ); const { trigger: triggerVerify } = useSWRMutation( - '/api/auth/verify-code', + "/api/auth/verify-code", auth<{ username: string; code: string }> ); const { trigger: triggerCreateUser } = useSWRMutation( - '/api/auth/create-user', + "/api/auth/create-user", auth<{ username: string; versionCGU: string }> ); @@ -81,7 +82,7 @@ export const FormLogin = () => { if (intervalRef.current) clearInterval(intervalRef.current); setTimer(30); intervalRef.current = setInterval(() => { - setTimer(prevTimer => { + setTimer((prevTimer) => { if (prevTimer > 0) { return prevTimer - 1; } else { @@ -106,15 +107,15 @@ export const FormLogin = () => { const handleModalTermsAccept = async () => { if (code) { - await triggerCreateUser({ username, versionCGU: '1' }); + await triggerCreateUser({ username, versionCGU: "1" }); const res = (await triggerVerify({ username: username, - code: code.toString() + code: code.toString(), })) as any; const result = await res.json(); cookie.set(ELASTIC_API_KEY_NAME, result.apiKey.encoded); onCloseTerms(); - router.push('/bo'); + router.push("/bo"); } }; @@ -125,7 +126,7 @@ export const FormLogin = () => { const res = (await triggerVerify({ username: username, - code: code.toString() + code: code.toString(), })) as any; if (res.ok) { @@ -134,7 +135,7 @@ export const FormLogin = () => { onOpenTerms(); } else { cookie.set(ELASTIC_API_KEY_NAME, result.apiKey.encoded); - router.push('/bo'); + router.push("/bo"); } } else { setFormError(true); @@ -147,14 +148,14 @@ export const FormLogin = () => { const handleSubmit = async (e: any) => { e.preventDefault(); setFormError(false); - if (username !== '' && password !== '') { + if (username !== "" && password !== "") { setIsLoading(true); const res = (await triggerLogin({ username, password })) as any; if (res.ok) { const result = await res.json(); - if (process.env.NODE_ENV === 'development') { + if (process.env.NODE_ENV === "development") { cookie.set(ELASTIC_API_KEY_NAME, result.encoded); - router.push('/bo'); + router.push("/bo"); } startTimer(); setShowCodeForm(true); @@ -162,7 +163,7 @@ export const FormLogin = () => { } else { setTimeout(() => { setRemaningRequests( - parseInt(res.headers.get('X-RateLimit-Remaining') as string) || 0 + parseInt(res.headers.get("X-RateLimit-Remaining") as string) || 0 ); setFormError(true); setIsLoading(false); @@ -173,26 +174,26 @@ export const FormLogin = () => { const CodeForm = (
handleCodeSubmit(e)} + onSubmit={(e) => handleCodeSubmit(e)} onChange={() => { setFormError(false); }} > - + Code - Code Icon + Code Icon { href="#" display="block" textAlign="right" - cursor={timer === 0 ? 'pointer' : 'not-allowed'} - color={timer === 0 ? 'inherit' : 'gray'} - onClick={e => { + cursor={timer === 0 ? "pointer" : "not-allowed"} + color={timer === 0 ? "inherit" : "gray"} + onClick={(e) => { if (timer === 0) handleSubmit(e); }} > @@ -226,9 +227,9 @@ export const FormLogin = () => { bg="primary.500" _hover={{}} loadingText="Connexion en cours..." - color={'white'} - w={'full'} - fontSize={['14px', '16px', '18px']} + color={"white"} + w={"full"} + fontSize={["14px", "16px", "18px"]} fontWeight={600} > {isLoading ? : <>Je valide ->} @@ -238,7 +239,7 @@ export const FormLogin = () => { const EmailPasswordForm = ( handleSubmit(e)} + onSubmit={(e) => handleSubmit(e)} onChange={() => { setFormError(false); }} @@ -246,22 +247,22 @@ export const FormLogin = () => { Identifiant - User Icon + User Icon { Mot de passe - Lock Icon + Lock Icon { { {remaningRequests === 0 - ? 'Taux de limite atteint' - : 'Erreurs dans les identifiants !'} + ? "Taux de limite atteint" + : "Erreurs dans les identifiants !"} {remaningRequests === 0 ? ( @@ -329,7 +330,7 @@ export const FormLogin = () => { ) : ( Il vous reste {remaningRequests} essai - {remaningRequests > 1 && 's'} ! + {remaningRequests > 1 && "s"} ! )} @@ -342,9 +343,9 @@ export const FormLogin = () => { bg="primary.500" _hover={{}} loadingText="Connexion en cours..." - color={'white'} - w={'full'} - fontSize={['14px', '16px', '18px']} + color={"white"} + w={"full"} + fontSize={["14px", "16px", "18px"]} fontWeight={600} > {isLoading ? ( @@ -362,7 +363,7 @@ export const FormLogin = () => { display="flex" justifyContent="center" alignItems="center" - mx={'auto'} + mx={"auto"} mt={[8, 0]} > @@ -370,20 +371,20 @@ export const FormLogin = () => { as="h1" size="lg" mb={6} - fontSize={['32px', '48px']} + fontSize={["32px", "48px"]} fontWeight={700} > Connexion 👋 {showCodeForm - ? 'Vous avez reçu un code par email, merci de le saisir ci-dessous.' - : 'Veuillez vous connecter pour accéder à votre compte.'} + ? "Vous avez reçu un code par email, merci de le saisir ci-dessous." + : "Veuillez vous connecter pour accéder à votre compte."} {showCodeForm ? CodeForm : EmailPasswordForm} @@ -398,7 +399,7 @@ export const FormLogin = () => { router.push('/')} + onClose={() => router.push("/")} onAccept={() => handleModalTermsAccept()} /> @@ -409,7 +410,7 @@ export const FormLogin = () => { function ModalTermsContent({ modalBodyRef, onClose, - onAccept + onAccept, }: { modalBodyRef: any; onClose: () => void; @@ -430,10 +431,10 @@ function ModalTermsContent({ checkScrolledToBottom(); - modalBody.addEventListener('scroll', checkScrolledToBottom); + modalBody.addEventListener("scroll", checkScrolledToBottom); return () => { - modalBody.removeEventListener('scroll', checkScrolledToBottom); + modalBody.removeEventListener("scroll", checkScrolledToBottom); }; } }, [modalBodyRef]); @@ -442,74 +443,8 @@ function ModalTermsContent({ Conditions générales d'utilisation -

- Donec quis mauris id mauris ultricies pulvinar. Phasellus ex libero, - tristique eu odio eu, imperdiet rutrum tortor. Pellentesque pulvinar - nulla dolor, ut ultrices nulla pretium sed. Ut nec molestie dolor. - Donec et molestie lectus. Vestibulum posuere iaculis justo sit amet - tristique. Integer a ullamcorper elit. Mauris rhoncus sed metus quis - fringilla. Nam egestas elementum justo in fermentum. -

-
-

- Integer augue odio, tincidunt ac magna eget, consequat auctor ante. - Proin pretium urna sem, a volutpat libero malesuada quis. Nam a - fermentum urna, quis ultrices justo. Donec eu volutpat enim. Nulla - facilisi. Pellentesque tincidunt ex in dui lacinia placerat. Morbi - luctus iaculis ante, sit amet porttitor lacus convallis sed. Etiam - mollis semper massa ac posuere. Proin mi magna, bibendum vel mattis - non, iaculis faucibus ex. In tristique lacinia nisi, ut laoreet augue - venenatis egestas. -

-
-

- In iaculis, est at imperdiet vehicula, quam ipsum dapibus augue, non - mattis tortor nisi ac nunc. Curabitur in elementum augue. Nulla - consectetur quis leo quis faucibus. Integer et dolor vitae mi - efficitur cursus. Curabitur massa neque, pretium id porta eget, - pretium non odio. Suspendisse potenti. Integer malesuada eros eu augue - accumsan, fermentum auctor eros condimentum. Phasellus ut massa diam. - Vestibulum sed porttitor leo. Nulla a pharetra lectus. Vestibulum ut - mauris blandit, ultrices libero ornare, molestie nulla. Aenean - tincidunt libero vitae tellus sagittis, eu porta massa venenatis. - Aliquam sit amet neque eu felis sodales rhoncus non mollis neque. -

-
-

- Fusce tempor metus non nibh lobortis sagittis. Donec viverra - vestibulum convallis. Nulla non augue in libero commodo dapibus. Duis - in malesuada ipsum, et efficitur nulla. Donec scelerisque vestibulum - lacus, eget mollis massa ultricies quis. Aliquam eu massa turpis. - Pellentesque egestas risus in aliquet facilisis. Nam eu odio sit amet - massa suscipit sagittis sit amet non neque. Etiam dolor est, interdum - congue risus vel, commodo interdum risus. -

-
-

- Suspendisse non risus odio. Etiam aliquet bibendum mi, eu dapibus - velit dapibus sit amet. Etiam a tincidunt elit. Donec sit amet lectus - tellus. Praesent pulvinar porta vestibulum. In tristique, justo eget - porta aliquam, odio massa tempus nisi, sed imperdiet diam dolor ut - libero. -

-
-

- Morbi tincidunt elit consectetur diam ultricies, et maximus tellus - condimentum. Sed sit amet lorem libero. Aliquam rhoncus venenatis - velit, quis faucibus lorem porttitor non. Mauris ac tortor et ante - facilisis laoreet ac a ante. Nullam consequat sem nisl, a cursus arcu - euismod quis. -

-
-

- Praesent fringilla massa velit, id efficitur lacus pulvinar eget. - Donec sit amet vehicula ex. Etiam a est sit amet metus porttitor - molestie non luctus arcu. Duis pulvinar malesuada dui, ac euismod est - lobortis vel. Pellentesque porttitor magna ut nisi eleifend - pellentesque. -

+ -