Login form developed, styled and linked.

This commit is contained in:
FilipHalon 2020-01-16 22:14:53 +01:00
parent 8584eb738c
commit f0a31b9946
5 changed files with 45 additions and 10 deletions

View File

@ -36,12 +36,12 @@ const Header = () => {
</div> </div>
<div className="navbar-auth"> <div className="navbar-auth">
<li> <li>
<Link href="/"> <Link href="/login">
<a><FontAwesomeIcon icon={faUser} /> Zaloguj się</a> <a><FontAwesomeIcon icon={faUser} /> Zaloguj się</a>
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/"> <Link href="/register">
<a><FontAwesomeIcon icon={faUserPlus} /> Zarejestruj się</a> <a><FontAwesomeIcon icon={faUserPlus} /> Zarejestruj się</a>
</Link> </Link>
</li> </li>

View File

@ -1,8 +1,10 @@
import Link from 'next/link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser, faBuilding, faLock } from '@fortawesome/free-solid-svg-icons'; 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 isDeveloperAccount = props.accountType === "developer";
const isDeveloperIcon = <span>{isDeveloperAccount ? <FontAwesomeIcon icon={faUser} /> : <FontAwesomeIcon icon={faBuilding} /> }</span> const isDeveloperIcon = <span>{isDeveloperAccount ? <FontAwesomeIcon icon={faUser} /> : <FontAwesomeIcon icon={faBuilding} /> }</span>
const lockIcon = <span><FontAwesomeIcon icon={faLock} /></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> <h1>Rejestracja konta {isDeveloperAccount ? 'programisty' : 'firmy'} do systemu Task-O!</h1>
<form> <form>
<ul> <ul>
{
isRegisterForm &&
<li> <li>
{isDeveloperIcon} {isDeveloperIcon}
<input type="text" placeholder={isDeveloperAccount ? "Podaj imię" : "Podaj nazwę firmy"} /> <input type="text" placeholder={isDeveloperAccount ? "Podaj imię" : "Podaj nazwę firmy"} />
</li> </li>
}
{
isRegisterForm &&
<li> <li>
{isDeveloperIcon} {isDeveloperIcon}
<input type="text" placeholder={isDeveloperAccount ? "Podaj nazwisko" : "Podaj numer NIP"}/> <input type="text" placeholder={isDeveloperAccount ? "Podaj nazwisko" : "Podaj numer NIP"}/>
</li> </li>
}
<li> <li>
{isDeveloperIcon} {isDeveloperIcon}
<input type="email" placeholder="Podaj adres e-mail" /> <input type="email" placeholder="Podaj adres e-mail" />
@ -28,16 +36,21 @@ const RegisterForm = props => {
{lockIcon} {lockIcon}
<input type="password" placeholder="Podaj hasło" /> <input type="password" placeholder="Podaj hasło" />
</li> </li>
{
isRegisterForm &&
<li> <li>
{lockIcon} {lockIcon}
<input type="password" placeholder="Powtórz hasło" /> <input type="password" placeholder="Powtórz hasło" />
</li> </li>
}
</ul> </ul>
<button>Zarejestruj się</button> <button className={isRegisterForm ? "register-button" : "login-button"}>Zarejestruj się</button>
<button>Zaloguj się</button> <Link href={isRegisterForm ? "/login" : "/register"}>
<button>{isRegisterForm ? "Zaloguj się" : "Zarejestruj się"}</button>
</Link>
</form> </form>
</div> </div>
) )
} }
export default RegisterForm; export default UserAuthForm;

7
pages/login.js Normal file
View File

@ -0,0 +1,7 @@
import UserAuthForm from './components/UserAuthForm';
const Login = () => {
return <UserAuthForm formType="login"/>
}
export default Login;

View File

@ -1,8 +1,7 @@
import "../style.css"; import UserAuthForm from './components/UserAuthForm';
import RegisterForm from './components/RegisterForm';
const Register = () => { const Register = () => {
return <RegisterForm /> return <UserAuthForm formType="register"/>
} }
export default Register; export default Register;

View File

@ -202,10 +202,26 @@ form button {
form button:first-of-type { form button:first-of-type {
height: 3.5rem; height: 3.5rem;
border-radius: 4px; border-radius: 4px;
background-color: #EB9771;
font-size: 110%; font-size: 110%;
color: #FFF; color: #FFF;
margin-top: 10%; 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 { form button:last-of-type {