Skip to content

Commit

Permalink
Merge branch 'dev' into 10-21-23-pau/display-create-ads
Browse files Browse the repository at this point in the history
  • Loading branch information
@Paul-Lac
Paul-Lac committed Jan 10, 2025
2 parents 68608df + 7cfdab6 commit fe35ed1
Show file tree
Hide file tree
Showing 15 changed files with 647 additions and 273 deletions.
Binary file added frontend/public/images/landing_mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/public/images/logo_main_go.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions frontend/public/images/right.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 0 additions & 12 deletions frontend/src/components/AuthModal/AuthModal.css
View file

This file was deleted.

60 changes: 42 additions & 18 deletions frontend/src/components/AuthModal/AuthModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,54 @@ import { useState } from "react";
import Login from "./components/Login";
import Register from "./components/Register";

import "./AuthModal.css";

function AuthModal() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const [alreadyHasAnAccount, setAlreadyHasAnAccount] = useState<boolean>(true);
const [alreadyHasAnAccount, setAlreadyHasAnAccount] =
useState<boolean>(true);
const [justRegistered, setJustRegistered] = useState<boolean>(false);
let modalStyles = {};
let image = "";
let imgStyles = {};

if (isMobile) {
modalStyles = {
height: "calc(100vh - 32px)",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
};
image = "coup_de_main_go";
imgStyles = {
width: "128px",
borderRadius: "20px",
};
} else {
modalStyles = {
height: "600px",
display: "flex",
flexDirection: "row",
justifyContent: "center",
};
image = "auth-modal-img";
imgStyles = {
width: "40%",
minHeight: "100%",
objectFit: "cover",
objectPosition: "40%",
borderRadius: "20px",
};
}

return (
<Stack direction={"row"} height={"600px"}>
{!isMobile && (
<Box
component="img"
id="auth-modal-img"
src="/images/auth-modal-img.png"
sx={{
width: "40%",
minHeight: "100%",
objectFit: "cover",
objectPosition: "40%",
borderRadius: "20px",
}}
/>
)}
<Stack sx={modalStyles}>
<Box
component="img"
id="auth-modal-img"
src={`/images/${image}.png`}
sx={imgStyles}
/>
{alreadyHasAnAccount ? (
<Login
justRegistered={justRegistered}
Expand Down
101 changes: 78 additions & 23 deletions frontend/src/components/AuthModal/components/Login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import {
Stack,
TextField,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { useForm } from "react-hook-form";

Expand Down Expand Up @@ -33,6 +35,19 @@ function Login({
goToRegister,
}: LoginProps) {
const { login } = useAuth();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
let sharedFormStyles: React.CSSProperties = {
boxSizing: "border-box",
display: "flex",
flexDirection: "column",
gap: "20px",
padding: "20px",
overflow: "auto",
};
let formStyles = {};
let titleAlign = {};
let buttonStyles = {};

const [sendLoginQuery, { loading, error }] = useLoginUserLazyQuery({
onCompleted: (data: LoginUserQuery) => {
Expand All @@ -50,9 +65,37 @@ function Login({
});
};

if (isMobile) {
formStyles = {
width: "100%",
};
titleAlign = { textAlign: "center" };
buttonStyles = {
width: "100%",
textAlign: "center",
borderRadius: "10px",
};
} else {
formStyles = {
height: "100%",
margin: "auto",
width: "100%",
};
buttonStyles = {
display: "flex",
flexDirection: "row",
justifyContent: "flex-end",
};
}

return (
<form id="login" onSubmit={handleSubmit(onLoginFormSubmitted)}>
<Typography variant="h3">CONNEXION</Typography>
<form
style={{ ...sharedFormStyles, ...formStyles }}
onSubmit={handleSubmit(onLoginFormSubmitted)}
>
<Typography variant="h3" sx={titleAlign}>
CONNEXION
</Typography>
<TextField
type="email"
placeholder="E-mail"
Expand All @@ -67,27 +110,39 @@ function Login({
{...register("password", { required: true })}
required
/>
<Typography>
Envie de nous rejoindre ?{" "}
<Box
component="span"
onClick={() => goToRegister()}
sx={{
cursor: "pointer",
fontWeight: "bold",
textDecoration: "underline",
}}
>
Créer un compte
</Box>
</Typography>
<Stack
direction={"row"}
sx={{
justifyContent: "flex-end",
}}
>
<Button type="submit">Se connecter</Button>
{!isMobile && (
<Typography>
Envie de nous rejoindre ?{" "}
<Box
component="span"
onClick={() => goToRegister()}
sx={{
cursor: "pointer",
fontWeight: "bold",
textDecoration: "underline",
}}
>
Créer un compte
</Box>
</Typography>
)}
<Stack sx={buttonStyles}>
<Button type="submit" sx={buttonStyles}>
Se connecter
</Button>
{isMobile && (
<>
<Typography>Je n'ai pas de compte</Typography>
<Button
type="submit"
onClick={() => goToRegister()}
sx={[buttonStyles, { color: "black" }]}
variant="outlined"
>
S'inscrire
</Button>
</>
)}
</Stack>
{error && <Alert severity="error">{error.message}</Alert>}
{loading && <CircularProgress />}
Expand Down
35 changes: 33 additions & 2 deletions frontend/src/components/AuthModal/components/Register.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import { Alert, CircularProgress } from "@mui/material";
import {
Alert,
CircularProgress,
useMediaQuery,
useTheme,
} from "@mui/material";
import { useState } from "react";
import { useForm } from "react-hook-form";

Expand Down Expand Up @@ -41,6 +46,17 @@ function Register({ setJustRegistered, goToLogin }: RegisterProps) {
} = useForm<RegisterFormData>();
// Trois étapes pour s'inscrire
const [step, setStep] = useState<number>(1);
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
let sharedFormStyles: React.CSSProperties = {
boxSizing: "border-box",
display: "flex",
flexDirection: "column",
gap: "20px",
padding: "20px",
overflow: "auto",
};
let formStyles = {};

// Requête Apollo : Enregistrement de l'utilisateur
const [
Expand Down Expand Up @@ -96,8 +112,23 @@ function Register({ setJustRegistered, goToLogin }: RegisterProps) {
}
};

if (isMobile) {
formStyles = {
width: "100%",
};
} else {
formStyles = {
height: "100%",
margin: "auto",
width: "100%",
};
}

return (
<form id="register" onSubmit={handleSubmit(onRegisterFormSubmitted)}>
<form
style={{ ...sharedFormStyles, ...formStyles }}
onSubmit={handleSubmit(onRegisterFormSubmitted)}
>
{step === 1 && <Step1 goToLogin={goToLogin} register={register} />}
{step === 2 && (
<Step2
Expand Down
83 changes: 65 additions & 18 deletions frontend/src/components/AuthModal/components/Register/Step1.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
import { Box, Button, Stack, TextField, Typography } from "@mui/material";
import {
Box,
Button,
Stack,
TextField,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { UseFormRegister } from "react-hook-form";

import { RegisterFormData } from "../Register";
Expand All @@ -9,9 +17,31 @@ interface Step1Props {
}

function Step1({ goToLogin, register }: Step1Props) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
let titleAlign = {};
let buttonStyles = {};

if (isMobile) {
titleAlign = { textAlign: "center" };
buttonStyles = {
width: "100%",
textAlign: "center",
borderRadius: "10px",
};
} else {
buttonStyles = {
display: "flex",
flexDirection: "row",
justifyContent: "flex-end",
};
}

return (
<>
<Typography variant="h3">S’INSCRIRE</Typography>
<Typography variant="h3" sx={titleAlign}>
S’INSCRIRE
</Typography>
<TextField
type="email"
placeholder="E-mail"
Expand All @@ -35,22 +65,39 @@ function Step1({ goToLogin, register }: Step1Props) {
label="Confirmer le mot de passe"
required
/>
<Typography>
Vous avez déjà un compte ?{" "}
<Box
component="span"
onClick={() => goToLogin()}
sx={{
cursor: "pointer",
fontWeight: "bold",
textDecoration: "underline",
}}
>
Me connecter
</Box>
</Typography>
<Stack direction={"row"} justifyContent={"flex-end"}>
<Button type="submit">Continuer</Button>
{!isMobile && (
<Typography>
Vous avez déjà un compte ?{" "}
<Box
component="span"
onClick={() => goToLogin()}
sx={{
cursor: "pointer",
fontWeight: "bold",
textDecoration: "underline",
}}
>
Me connecter
</Box>
</Typography>
)}
<Stack sx={buttonStyles}>
<Button type="submit" sx={buttonStyles}>
Continuer
</Button>
{isMobile && (
<>
<Typography>J'ai déjà un compte</Typography>
<Button
type="submit"
onClick={() => goToLogin()}
sx={[buttonStyles, { color: "black" }]}
variant="outlined"
>
Se connecter
</Button>
</>
)}
</Stack>
</>
);
Expand Down
Loading

0 comments on commit fe35ed1

Please sign in to comment.