Login form developed, styled and linked.
This commit is contained in:
parent
8584eb738c
commit
f0a31b9946
@ -36,12 +36,12 @@ const Header = () => {
|
||||
</div>
|
||||
<div className="navbar-auth">
|
||||
<li>
|
||||
<Link href="/">
|
||||
<Link href="/login">
|
||||
<a><FontAwesomeIcon icon={faUser} /> Zaloguj się</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/">
|
||||
<Link href="/register">
|
||||
<a><FontAwesomeIcon icon={faUserPlus} /> Zarejestruj się</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
@ -1,8 +1,10 @@
|
||||
import Link from 'next/link';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faUser, faBuilding, faLock } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
|
||||
const RegisterForm = props => {
|
||||
const UserAuthForm = props => {
|
||||
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>
|
||||
@ -12,14 +14,20 @@ const RegisterForm = props => {
|
||||
<h1>Rejestracja konta {isDeveloperAccount ? 'programisty' : 'firmy'} do systemu Task-O!</h1>
|
||||
<form>
|
||||
<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" />
|
||||
@ -28,16 +36,21 @@ const RegisterForm = props => {
|
||||
{lockIcon}
|
||||
<input type="password" placeholder="Podaj hasło" />
|
||||
</li>
|
||||
{
|
||||
isRegisterForm &&
|
||||
<li>
|
||||
{lockIcon}
|
||||
<input type="password" placeholder="Powtórz hasło" />
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
<button>Zarejestruj się</button>
|
||||
<button>Zaloguj się</button>
|
||||
<button className={isRegisterForm ? "register-button" : "login-button"}>Zarejestruj się</button>
|
||||
<Link href={isRegisterForm ? "/login" : "/register"}>
|
||||
<button>{isRegisterForm ? "Zaloguj się" : "Zarejestruj się"}</button>
|
||||
</Link>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RegisterForm;
|
||||
export default UserAuthForm;
|
7
pages/login.js
Normal file
7
pages/login.js
Normal file
@ -0,0 +1,7 @@
|
||||
import UserAuthForm from './components/UserAuthForm';
|
||||
|
||||
const Login = () => {
|
||||
return <UserAuthForm formType="login"/>
|
||||
}
|
||||
|
||||
export default Login;
|
@ -1,8 +1,7 @@
|
||||
import "../style.css";
|
||||
import RegisterForm from './components/RegisterForm';
|
||||
import UserAuthForm from './components/UserAuthForm';
|
||||
|
||||
const Register = () => {
|
||||
return <RegisterForm />
|
||||
return <UserAuthForm formType="register"/>
|
||||
}
|
||||
|
||||
export default Register;
|
||||
|
18
style.css
18
style.css
@ -202,10 +202,26 @@ form button {
|
||||
form button:first-of-type {
|
||||
height: 3.5rem;
|
||||
border-radius: 4px;
|
||||
background-color: #EB9771;
|
||||
font-size: 110%;
|
||||
color: #FFF;
|
||||
margin-top: 10%;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.register-button {
|
||||
background-color: #EB9771;
|
||||
}
|
||||
|
||||
.register-button:hover {
|
||||
background-color: #FF7325;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
background-color: #39C3797E;
|
||||
}
|
||||
|
||||
.login-button:hover {
|
||||
background-color: #39C379;
|
||||
}
|
||||
|
||||
form button:last-of-type {
|
||||
|
Loading…
Reference in New Issue
Block a user