Login form developed, styled and linked.

pages/components/Header.js

@@ -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>

pages/components/UserAuthForm.js

@@ -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 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>
         </div>
     )
 }
 
-export default RegisterForm;
+export default UserAuthForm;

pages/login.js

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

pages/register.js

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

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 {