Skip to content
This repository has been archived by the owner on Feb 3, 2023. It is now read-only.

Commit

Permalink
fix(login): form fields appears when needed
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wamibee
Wamibee committed Mar 10, 2022
1 parent ba3d0dc commit 1351931
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 51 deletions.
4 changes: 4 additions & 0 deletions src/assets/styles/scss/_login.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,8 @@

@apply text-dark-brown
}
}

.account-sign-container{
max-width: 1000px;
}
9 changes: 7 additions & 2 deletions src/assets/styles/scss/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ p {
display: flex;
margin: 25px 0;
position: relative;
align-items: center;

@apply text-brown;

Expand All @@ -62,7 +63,6 @@ p {
left: 0;
width: 100px;
height: 1.5px;
top: 16px;

@media (max-width: 600px) {
width: 40px;
Expand Down Expand Up @@ -150,7 +150,7 @@ p {
left: 0;
width: 5vw;
height: 1.5px;
top: 25px;
top: 26px;

@media (max-width: 600px) {
width: 20px;
Expand Down Expand Up @@ -358,4 +358,9 @@ form {
margin: 35px auto 25px;

@apply bg-brown;
}

input:read-only{
pointer-events: none;
opacity: .4;
}
105 changes: 56 additions & 49 deletions src/pages/auth/Login.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,60 +48,56 @@ const Login = () => {

return (
<div className={"bg-beige"}>
<div id="bloc-mail" className="py-5">
<div id="bloc-mail" className="pt-5 pb-3">
<div className="title-container">
<h1 className='h1'>Bienvenue à bord</h1>
</div>
<div className="mx-auto my-10 container">
<form onSubmit={(e) => handleMailValidation(e)}>
<div className={"mb-4 grid grid-cols-9 gap-4"}>
<div className={"form-field col-span-7 col-start-2"}>
<label id={"email"}>Adresse mail</label>
<input
type={"email"}
name={"email"}
value={email}
required
className={"focus:border-dark-brown focus:ring-dark-brown"}
onChange={e => setEmail(e.target.value)}
/>
</div>
</div>
<div className={"btn-loading mx-auto"}>
<button className={"btn btn-dark mx-auto my-5"} type={"submit"}>
<span className={"btn-text"}>S'identifier avec un mail</span>
</button>
{emailLoading &&
<div className={"btn-overlay"}>
<VscRefresh className={"animate-spin"} />
</div>
}
</div>
</form>
</div>
</div>
<main className="w-full bg-beige">


{emailIsKnown === null &&
<h1>empty</h1>
<main className="w-full bg-beige account-sign-container mx-auto">
{!emailIsKnown && emailIsKnown !== false &&
<div className="mb-10 mx-auto container">
<form onSubmit={(e) => handleMailValidation(e)}>
<div className={"mb-4 grid grid-cols-9 gap-4"}>
<div className={"form-field col-span-7 col-start-2"}>
<label id={"email"}>Adresse mail</label>
<input
type={"email"}
name={"email"}
value={email}
required
className={"focus:border-dark-brown focus:ring-dark-brown"}
onChange={e => setEmail(e.target.value)}
/>
</div>
</div>
<div className={"btn-loading mx-auto"}>
<button className={"btn btn-dark mx-auto my-5"} type={"submit"}>
<span className={"btn-text"}>S'identifier avec un mail</span>
</button>
{emailLoading &&
<div className={"btn-overlay"}>
<VscRefresh className={"animate-spin"} />
</div>
}
</div>
</form>
</div>
}

{emailIsKnown === true &&
<div id="bloc-login" className="my-10 py-10">
<div className="title-container">
<h2>Connectez-vous</h2>
</div>
<div id="bloc-login" className="mb-10">
<form onSubmit={(e) => handleLogin(e)}>
<div className={"mb-4 grid grid-cols-9 gap-4"}>
<div className={"form-field col-span-7 col-start-2"}>
<label>Pseudonyme</label>
<label>Adresse mail</label>
<input
type={"text"}
name={"username"}
value={username}
type={"email"}
name={"email"}
value={email}
required
className={"focus:border-dark-brown focus:ring-dark-brown"}
onChange={e => setUsername(e.target.value)}
readOnly="readonly"
onChange={e => setEmail(e.target.value)}
/>
</div>
</div>
Expand All @@ -116,10 +112,10 @@ const Login = () => {
onChange={e => setPassword(e.target.value)}
/>
</div>
<Link to={"/"} className="text-right nav-link col-span-7 col-start-2">
<p className={"forgot-password-link"}>J'ai oublié mon mot de passe</p>
</Link>
</div>
<Link to={"/"}>
<p className={"forgot-password-link"}>Mot de passe oublié</p>
</Link>
<button type={"submit"} className="btn btn-dark mx-auto my-5">
<span className="btn-text">Se connecter</span>
</button>
Expand All @@ -128,11 +124,22 @@ const Login = () => {
}

{emailIsKnown === false &&
<div id="bloc-registration" className="my-10 py-10">
<div className="title-container">
<h2>Inscrivez-vous</h2>
</div>
<div id="bloc-registration" className="mb-10">
<form onSubmit={(e) => handleRegistration(e)}>
<div className={"mb-4 grid grid-cols-9 gap-4"}>
<div className={"form-field col-span-7 col-start-2"}>
<label>Adresse mail</label>
<input
type={"email"}
name={"email"}
value={email}
required
className={"focus:border-dark-brown focus:ring-dark-brown"}
readOnly="readonly"
onChange={e => setEmail(e.target.value)}
/>
</div>
</div>
<div className={"mb-4 grid grid-cols-9 gap-4"}>
<div className={"form-field col-span-7 col-start-2"}>
<label>Pseudonyme</label>
Expand Down

0 comments on commit 1351931

Please sign in to comment.