Enter code page prepared.
This commit is contained in:
parent
2563edef07
commit
5236efcd62
@ -4,6 +4,7 @@ import { faUser, faBuilding, faLock } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
|
||||
const UserAuthForm = props => {
|
||||
const isEnterCodeStage = props.authStage === "enterCode";
|
||||
const isRegisterForm = props.formType === "register";
|
||||
const isDeveloperAccount = props.accountType === "developer";
|
||||
const isDeveloperIcon = <span>{isDeveloperAccount ? <FontAwesomeIcon icon={faUser} /> : <FontAwesomeIcon icon={faBuilding} /> }</span>
|
||||
@ -11,40 +12,55 @@ const UserAuthForm = props => {
|
||||
|
||||
return (
|
||||
<div className="page-content-center">
|
||||
<h1>Rejestracja konta {isDeveloperAccount ? 'programisty' : 'firmy'} do systemu Task-O!</h1>
|
||||
{isRegisterForm ?
|
||||
<h1>Rejestracja konta {isDeveloperAccount ? 'programisty' : 'firmy'} do systemu Task-O!</h1> :
|
||||
<h1>Logowanie do systemu Task-O!</h1>}
|
||||
<form>
|
||||
<ul>
|
||||
{
|
||||
isRegisterForm &&
|
||||
<li>
|
||||
{isDeveloperIcon}
|
||||
<input type="text" placeholder={isDeveloperAccount ? "Podaj imię" : "Podaj nazwę firmy"} />
|
||||
</li>
|
||||
{isEnterCodeStage &&
|
||||
<ul>
|
||||
<li>
|
||||
<span><FontAwesomeIcon icon={faLock} /></span>
|
||||
<input type="text" placeholder="Wprowadź kod autoryzacyjny" />
|
||||
</li>
|
||||
</ul>
|
||||
}
|
||||
{!isEnterCodeStage &&
|
||||
<ul>
|
||||
{
|
||||
isRegisterForm &&
|
||||
<li>
|
||||
{isDeveloperIcon}
|
||||
<input type="text" placeholder={isDeveloperAccount ? "Podaj imię" : "Podaj nazwę firmy"} />
|
||||
</li>
|
||||
}
|
||||
{
|
||||
isRegisterForm &&
|
||||
<li>
|
||||
{isDeveloperIcon}
|
||||
<input type="text" placeholder={isDeveloperAccount ? "Podaj nazwisko" : "Podaj numer NIP"}/>
|
||||
</li>
|
||||
}
|
||||
<li>
|
||||
{isDeveloperIcon}
|
||||
<input type="email" placeholder="Podaj adres e-mail" />
|
||||
</li>
|
||||
<li>
|
||||
{lockIcon}
|
||||
<input type="password" placeholder="Podaj hasło" />
|
||||
</li>
|
||||
{
|
||||
isRegisterForm &&
|
||||
<li>
|
||||
{lockIcon}
|
||||
<input type="password" placeholder="Powtórz hasło" />
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
{
|
||||
isRegisterForm &&
|
||||
<li>
|
||||
{isDeveloperIcon}
|
||||
<input type="text" placeholder={isDeveloperAccount ? "Podaj nazwisko" : "Podaj numer NIP"}/>
|
||||
</li>
|
||||
}
|
||||
<li>
|
||||
{isDeveloperIcon}
|
||||
<input type="email" placeholder="Podaj adres e-mail" />
|
||||
</li>
|
||||
<li>
|
||||
{lockIcon}
|
||||
<input type="password" placeholder="Podaj hasło" />
|
||||
</li>
|
||||
{
|
||||
isRegisterForm &&
|
||||
<li>
|
||||
{lockIcon}
|
||||
<input type="password" placeholder="Powtórz hasło" />
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
<button className={isRegisterForm ? "register-button" : "login-button"}>Zarejestruj się</button>
|
||||
{isEnterCodeStage ?
|
||||
<button className="enter-code-stage-button">Zatwierdź</button> :
|
||||
<button className={isRegisterForm ? "register-button" : "login-button"}>{isRegisterForm ? "Zarejestruj się" : "Zaloguj się"}</button>
|
||||
}
|
||||
<Link href={isRegisterForm ? "/login" : "/register"}>
|
||||
<button>{isRegisterForm ? "Zaloguj się" : "Zarejestruj się"}</button>
|
||||
</Link>
|
||||
|
7
pages/enter-code.js
Normal file
7
pages/enter-code.js
Normal file
@ -0,0 +1,7 @@
|
||||
import UserAuthForm from './components/UserAuthForm';
|
||||
|
||||
const EnterCode = () => {
|
||||
return <UserAuthForm authStage="enterCode" formType="register"/>
|
||||
}
|
||||
|
||||
export default EnterCode;
|
12
style.css
12
style.css
@ -224,6 +224,14 @@ form button:first-of-type {
|
||||
background-color: #39C379;
|
||||
}
|
||||
|
||||
.enter-code-stage-button {
|
||||
background-color: #9536d9;
|
||||
}
|
||||
|
||||
.enter-code-stage-button:hover {
|
||||
background-color: #712aa3;
|
||||
}
|
||||
|
||||
form button:last-of-type {
|
||||
margin-top: 5%;
|
||||
background-color: #FFF;
|
||||
@ -231,6 +239,10 @@ form button:last-of-type {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* tasks */
|
||||
|
||||
main {
|
||||
|
Loading…
Reference in New Issue
Block a user