changement page connexion et inscription
continuous-integration/drone/push Build encountered an error Details

master
Darius BERTRAND 2 years ago
parent 3c58b3efe3
commit 581f39f72e

@ -40,27 +40,28 @@ const Connexion = (props) => {
<form className='cadre' action='' onSubmit={handleLogin} id="sign-up-form"> <form className='cadre' action='' onSubmit={handleLogin} id="sign-up-form">
<h1>Connexion</h1> <h1>Connexion</h1>
<div className='inputbox'> <div className='inputbox'>
<span>email</span>
<input <input
type="text" type="text"
name="email" name="email"
id="email" id="email"
onChange={(e) => setEmail (e.target.value)} onChange={(e) => setEmail (e.target.value)}
value={email}/> value={email}/>
<span>email</span> <div className="email error"></div>
</div> </div>
<div className="email error"></div>
<br /> <br />
<div className="inputbox"> <div className="inputbox">
<span>mot de passe</span>
<input <input
type="password" type="password"
name="password" name="password"
id="password" id="password"
onChange={(e) => setPassword (e.target.value)} onChange={(e) => setPassword (e.target.value)}
value={password}/> value={password}/>
<span>mot de passe</span> <div className="password error"></div>
</div> </div>
<div className="password error"></div>
<br /> <br />
<input type="submit" value="connexion" id='connexion' /> <input type="submit" value="connexion" id='connexion' />

@ -64,57 +64,52 @@ const Inscription = () => {
<form className="cadre" action='' onSubmit={handleRegister} > <form className="cadre" action='' onSubmit={handleRegister} >
<h1>Inscription</h1> <h1>Inscription</h1>
<div className="inputbox"> <div className="inputbox">
<span>pseudo</span>
<input type="text" <input type="text"
name="pseudo" name="pseudo"
id="pseudo" id="pseudo"
onChange={(e) => setPseudo(e.target.value)} onChange={(e) => setPseudo(e.target.value)}
value={pseudo}/> value={pseudo}/>
<span>pseudo</span> <div className='pseudo error'></div>
</div> </div>
<div className='pseudo error'></div>
<br /> <br />
<div className="inputbox"> <div className="inputbox">
<span>email</span>
<input type="text" <input type="text"
name="email" name="email"
id="email" id="email"
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
value={email}/> value={email}/>
<span>email</span> <div className='password error'></div>
</div> </div>
<div className='email error'></div>
<br /> <br />
<div className="inputbox"> <div className="inputbox">
<span>mot de passe</span>
<input type="password" <input type="password"
name="password" name="password"
id="password" id="password"
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
value={password}/> value={password}/>
<span>mot de passe</span> <div className='password error'></div>
</div> </div>
<div className='password error'></div>
<br /> <br />
<div className="inputbox"> <div className="inputbox">
<span>comfirmation mot de passe</span>
<input type="password" <input type="password"
name="password" name="password"
id="password-conf" id="password-conf"
onChange={(e) => setControlPassword(e.target.value)} onChange={(e) => setControlPassword(e.target.value)}
value={controlPassword}/> value={controlPassword}/>
<span>comfirmation mot de passe</span> <div className='password-confirm error'></div>
</div> </div>
<div className='password-confirm error'></div>
<br /> <br />
<div className="chexkboxConditionGenerale"> <div className="chexkboxConditionGenerale">
<input type="checkbox" <input type="checkbox"
name="terms" name="terms"
id="terms"/> id="terms"/>
<span>J'accepte les <a href="/" target="_blank" rel='noopener noreferrer'>conditions générales</a></span> <span>J'accepte les <a href="/" target="_blank" rel='noopener noreferrer'>conditions générales</a></span>
<div className="terms error"></div>
</div> </div>
<div className="terms error"></div>
<br /> <br />
<input type="submit" value="inscription" id="inscription"/> <input type="submit" value="inscription" id="inscription"/>

@ -216,9 +216,9 @@ input{
margin-top: 2%; margin-top: 2%;
border-radius: 20px; border-radius: 20px;
min-width: 80px; min-width: 80px;
background-color: $color-7;
color: white; color: white;
transition: all 1s; transition: all 1s;
background-color: $color-7;
} }

@ -1,44 +1,47 @@
.ul-profil{
list-style-type: none;
display: flex;
flex-direction: column;
align-items: center;
.button-form{
cursor: pointer;
border: 3px solid black;
border-radius: 20px;
padding: 10px 5%;
transition: 0.2s;
width: 96%;
text-align: center;
margin-top: 6%;
}
.active-btn {
background: $color-3;
&:hover {
background: $color-5;
}
}
.button-form:not(.active-btn) {
&:hover {
transform: translateX(3px);
}
}
}
.info-form-container{ .info-form-container{
width: 20%; width: 20%;
border: 2px solid black; background: $color-8;
border: 0.3px solid $color-5;
border-radius: 0px 15px 15px 0px; border-radius: 0px 15px 15px 0px;
background-color: $color-3;
p{ p{
line-height: 15px; line-height: 15px;
letter-spacing: 1.01px; letter-spacing: 1.01px;
} }
.ul-profil{
list-style-type: none;
display: flex;
flex-direction: column;
align-items: center;
.button-form{
cursor: pointer;
background: $color-8;
border: 0.3px solid $color-5;
border-radius: 15px;
padding:3% 4%;
width: 96%;
text-align: center;
margin-top: 6%;
transition: all 1s;
}
.active-btn{
background: $color-8;
&:hover {
background: $color-5;
}
}
.button-form:not(.active-btn) {
&:hover {
transform: translateX(3px);
}
}
}
} }
.profile-page{ .profile-page{
@ -61,52 +64,50 @@
.cadre { .cadre {
padding: 5% 10%; padding: 5% 10%;
border: 2px solid black; border: 0.3px solid $color-5;
border-right: 0px solid black; border-right: 0px;
border-radius: 15px 0px 0px 15px; border-radius: 15px 0px 0px 15px;
background-color: $color-1; background-color: $color-1;
h1 { h1 {
letter-spacing: 5px; letter-spacing: 5px;
margin-bottom: 30%; margin-bottom: 15%;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
.inputbox { .inputbox {
position: relative; position: relative;
width: 100%; width: 100%;
margin-top: 4%; margin-top: 8%;
input { input {
width: 100%; width: 100%;
border: 2px solid #000; border: 0.3px solid $color-5;
outline: none; outline: none;
background-color: $color-3; background-color: $color-8;
padding: 4%; padding: 4%;
border-radius: 10px; border-radius: 10px;
font-size: 1.1em; font-size: 1.1em;
} }
span { span {
position: absolute; position: absolute;
top: 12px; top:-40%;
left: 6%; left: 4%;
font-size: 1em;
transition: 0.3s; transition: 0.3s;
font-family: sans-serif; font-family: sans-serif;
} }
.error{
font-size: small;
font-weight: 600;
color: red;
position: absolute;
left: 6%;
}
} }
.chexkboxConditionGenerale{ .chexkboxConditionGenerale{
margin-top: 3px; margin-top: 3px;
padding: 5px; padding: 5px;
} }
.error{
padding-left: 5px;
font-size: small;
font-weight: 600;
color: red;
position: absolute;
}
#connexion,#inscription{
margin-top: 5px;
}
} }
@ -123,12 +124,12 @@
} }
input[type="submit"], .buttonTEL{ input[type="submit"], .buttonTEL{
border: none; border-radius: 10px;
border-radius: 8px; background: $color-8;
border: 2px solid #000; border: 0.3px solid $color-5;
background-color: $color-3;
width: 100%; width: 100%;
height: 50px; height: 50px;
transition: background-color 1s;
} }
.buttonTEL{ .buttonTEL{
@ -136,6 +137,7 @@ input[type="submit"], .buttonTEL{
margin-bottom: 15px; margin-bottom: 15px;
} }
input[type="submit"]:hover, .buttonTEL:hover{ input[type="submit"]:hover, .buttonTEL:hover{
background-color: $color-5; background-color: $color-5;
} }

Loading…
Cancel
Save