From 5236efcd62c621454ddda3622e92ad9ce5d59845 Mon Sep 17 00:00:00 2001
From: FilipHalon <halon.filip@gmail.com>
Date: Sun, 19 Jan 2020 23:26:57 +0100
Subject: [PATCH] Enter code page prepared.

---
 pages/components/UserAuthForm.js | 80 +++++++++++++++++++-------------
 pages/enter-code.js              |  7 +++
 style.css                        | 12 +++++
 3 files changed, 67 insertions(+), 32 deletions(-)
 create mode 100644 pages/enter-code.js

diff --git a/pages/components/UserAuthForm.js b/pages/components/UserAuthForm.js
index 904c474..33e2276 100644
--- a/pages/components/UserAuthForm.js
+++ b/pages/components/UserAuthForm.js
@@ -4,6 +4,7 @@ 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>
@@ -11,40 +12,55 @@ const UserAuthForm = props => {
 
     return (
         <div className="page-content-center">
-            <h1>Rejestracja konta {isDeveloperAccount ? 'programisty' : 'firmy'} do systemu Task-O!</h1>
+            {isRegisterForm ? 
+            <h1>Rejestracja konta {isDeveloperAccount ? 'programisty' : 'firmy'} do systemu Task-O!</h1> : 
+            <h1>Logowanie do systemu Task-O!</h1>}
             <form>
-                <ul>
-                    {
-                    isRegisterForm && 
-                    <li>
-                        {isDeveloperIcon}
-                        <input type="text" placeholder={isDeveloperAccount ? "Podaj imię" : "Podaj nazwę firmy"} />
-                    </li>
+                {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>
                     }
-                    {
-                    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>
-                <button className={isRegisterForm ? "register-button" : "login-button"}>Zarejestruj się</button>
+                {isEnterCodeStage ?
+                <button className="enter-code-stage-button">Zatwierdź</button> : 
+                <button 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>
diff --git a/pages/enter-code.js b/pages/enter-code.js
new file mode 100644
index 0000000..466bf0e
--- /dev/null
+++ b/pages/enter-code.js
@@ -0,0 +1,7 @@
+import UserAuthForm from './components/UserAuthForm';
+
+const EnterCode = () => {
+    return <UserAuthForm authStage="enterCode" formType="register"/>
+}
+
+export default EnterCode;
diff --git a/style.css b/style.css
index 0a34508..dd0cd07 100644
--- a/style.css
+++ b/style.css
@@ -224,6 +224,14 @@ form button:first-of-type {
     background-color: #39C379;
 }
 
+.enter-code-stage-button {
+    background-color: #9536d9;
+}
+
+.enter-code-stage-button:hover {
+    background-color: #712aa3;
+}
+
 form button:last-of-type {
     margin-top: 5%;
     background-color: #FFF;
@@ -231,6 +239,10 @@ form button:last-of-type {
     text-align: end;
 }
 
+button:hover {
+    cursor: pointer;
+}
+
 /* tasks */
 
 main {