From f0a31b994609d5c39adda1603b996d448a5fd330 Mon Sep 17 00:00:00 2001
From: FilipHalon <halon.filip@gmail.com>
Date: Thu, 16 Jan 2020 22:14:53 +0100
Subject: [PATCH] Login form developed, styled and linked.

---
 pages/components/Header.js                    |  4 ++--
 .../{RegisterForm.js => UserAuthForm.js}      | 21 +++++++++++++++----
 pages/login.js                                |  7 +++++++
 pages/register.js                             |  5 ++---
 style.css                                     | 18 +++++++++++++++-
 5 files changed, 45 insertions(+), 10 deletions(-)
 rename pages/components/{RegisterForm.js => UserAuthForm.js} (69%)
 create mode 100644 pages/login.js

diff --git a/pages/components/Header.js b/pages/components/Header.js
index 683dce3..6d4651a 100644
--- a/pages/components/Header.js
+++ b/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>
diff --git a/pages/components/RegisterForm.js b/pages/components/UserAuthForm.js
similarity index 69%
rename from pages/components/RegisterForm.js
rename to pages/components/UserAuthForm.js
index 6eb09a3..904c474 100644
--- a/pages/components/RegisterForm.js
+++ b/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>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;
diff --git a/pages/login.js b/pages/login.js
new file mode 100644
index 0000000..04efc41
--- /dev/null
+++ b/pages/login.js
@@ -0,0 +1,7 @@
+import UserAuthForm from './components/UserAuthForm';
+
+const Login = () => {
+    return <UserAuthForm formType="login"/>
+}
+
+export default Login;
diff --git a/pages/register.js b/pages/register.js
index df31805..0431829 100644
--- a/pages/register.js
+++ b/pages/register.js
@@ -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;
diff --git a/style.css b/style.css
index 6024629..49c3faf 100644
--- a/style.css
+++ b/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 {