73 lines
3.1 KiB
JavaScript
73 lines
3.1 KiB
JavaScript
import Link from 'next/link';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
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>
|
|
const lockIcon = <span><FontAwesomeIcon icon={faLock} /></span>
|
|
|
|
return (
|
|
<div className="page-content-center">
|
|
{isRegisterForm ?
|
|
<h1>Rejestracja konta {isDeveloperAccount ? 'programisty' : 'firmy'} do systemu Task-O!</h1> :
|
|
<h1>Logowanie do systemu Task-O!</h1>}
|
|
<form>
|
|
{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>
|
|
}
|
|
{isEnterCodeStage ?
|
|
<button type="submit" className="enter-code-stage-button">Zatwierdź</button> :
|
|
<button type="submit" 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>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default UserAuthForm;
|