From ec69333eb3fd5b82b51631564c26161ef77aa658 Mon Sep 17 00:00:00 2001
From: ilyaszm <zmr.ilyas@gmail.com>
Date: Tue, 23 Jul 2019 23:31:27 +0100
Subject: [PATCH] Creating a Sign in Form in the Login Page

---
 src/App.css                          | 121 ++++++++++++++++++++++++++-
 src/assets/css/landing-page.css      |  54 ------------
 src/components/pages/LandingPage.js  |   6 +-
 src/components/pages/LoginPage.js    |  30 ++++++-
 src/components/pages/RegisterPage.js |  61 +++++++++++++-
 5 files changed, 208 insertions(+), 64 deletions(-)
 delete mode 100644 src/assets/css/landing-page.css

diff --git a/src/App.css b/src/App.css
index 3533108..b906463 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,6 @@
+
+
+/***    General     ***/
 * {
     box-sizing: border-box;
     margin: 0;
@@ -9,7 +12,117 @@ body {
     margin: 0 auto
 }
 
-a {
-    text-decoration: none !important;
-    color: inherit
-}
\ No newline at end of file
+/***    Landing Page     ***/
+.main-title,
+.main-para {
+    color: #f1f1f1
+}
+
+.main-title {
+    padding-top: 10rem;
+    font-size: 5rem;
+    font-family: 'Fascinate', cursive;
+    text-transform: uppercase
+}
+
+.main-para {
+    font-size: 2.5rem;
+    text-Transform: capitalize
+}
+
+#log_btn,
+#reg_btn {
+    margin-top: 5rem;
+    margin-right: 1rem;
+    padding: .6rem;
+    width: 10rem;
+    background: #222;
+    border: none;
+    color: #fff;
+    font-size: 1.2rem;
+    transition: all .5s;
+    cursor: pointer;
+    text-transform: capitalize
+}
+
+#reg_btn span {
+    display: inline-block;
+    position: relative;
+    transition: 0.5s;
+}
+
+#reg_btn span:after {
+    content: '\00bb';
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    right: -20px;
+    transition: 0.5s;
+}
+
+#reg_btn:hover span {
+  padding-right: 25px;
+}
+
+#reg_btn:hover span:after {
+  opacity: 1;
+  right: 0;
+}
+
+/***    Login Page     ***/
+.login-page {
+    margin: 5rem auto
+}
+
+h2 {
+    font-weight: 300
+}
+
+form {
+    display: inline-block;
+    background: #f3f3f3;
+    border: 1px solid #ddd;
+    border-radius: 2px;
+    padding: 2rem;
+    margin: 2rem 0 1rem 0
+}
+
+form label {
+    float: left;
+    font-size: .9rem
+}
+
+.right-label {
+    float: right;
+    cursor: pointer
+}
+
+input {
+    width: 15rem;
+    padding: .3rem;
+    border-radius: 5px;
+    outline: none;
+    border: none
+}
+
+#sub_btn {
+    display: block;
+    width: 100%;
+    padding: .3rem;
+    border: none;
+    background: #222;
+    color: #fff;
+    border-radius: 3px;
+}
+
+#sub_btn:hover {
+    background: #333;
+    transition: all .5s
+}
+
+footer p {
+    margin: 0;
+    font-size: .9rem
+}
+
+/***    Register Page     ***/
diff --git a/src/assets/css/landing-page.css b/src/assets/css/landing-page.css
deleted file mode 100644
index 0c485d8..0000000
--- a/src/assets/css/landing-page.css
+++ /dev/null
@@ -1,54 +0,0 @@
-h1, p {
-    color: #f1f1f1
-}
-
-h1 {
-    padding-top: 10rem;
-    font-size: 5rem;
-    font-family: 'Fascinate', cursive;
-    text-transform: uppercase
-}
-
-p {
-    font-size: 2.5rem;
-    text-Transform: capitalize
-}
-
-#log_btn,
-#reg_btn {
-    margin-top: 5rem;
-    margin-right: 1rem;
-    padding: .6rem;
-    width: 10rem;
-    background: #222;
-    border: none;
-    color: #fff;
-    font-size: 1.2rem;
-    transition: all .5s;
-    cursor: pointer;
-    text-transform: capitalize
-}
-
-#reg_btn span {
-    display: inline-block;
-    position: relative;
-    transition: 0.5s;
-}
-
-#reg_btn span:after {
-    content: '\00bb';
-    position: absolute;
-    opacity: 0;
-    top: 0;
-    right: -20px;
-    transition: 0.5s;
-}
-
-#reg_btn:hover span {
-  padding-right: 25px;
-}
-
-#reg_btn:hover span:after {
-  opacity: 1;
-  right: 0;
-}
\ No newline at end of file
diff --git a/src/components/pages/LandingPage.js b/src/components/pages/LandingPage.js
index 70a3784..9b97bf2 100644
--- a/src/components/pages/LandingPage.js
+++ b/src/components/pages/LandingPage.js
@@ -1,14 +1,14 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 
-import '../../assets/css/landing-page.css'
+import '../../App.css'
 import BackgroundImage from '../../assets/images/bg.png'
 
 export default function LandingPage() {
     return (
         <header style={ HeaderStyle }>
-            <h1 className="text-center">login / register page</h1>
-            <p className="text-center">join us now and don't waste time</p>
+            <h1 className="main-title text-center">login / register page</h1>
+            <p className="main-para text-center">join us now and don't waste time</p>
             <div className="buttons text-center">
                 <Link to="/login">
                     <button href="https://google.com" id="log_btn">
diff --git a/src/components/pages/LoginPage.js b/src/components/pages/LoginPage.js
index 82e0471..74cad6d 100644
--- a/src/components/pages/LoginPage.js
+++ b/src/components/pages/LoginPage.js
@@ -1,9 +1,35 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
+
+import '../../App.css'
+
+const handleClick = () => {
+    alert('Login Successfully')
+}
 
 export default function SignInPage() {
     return (
-        <div>
-            <h1>Login Page</h1>
+        <div className="text-center login-page">
+            <h2>Sign in to us</h2>
+            <form action="/home">
+                <p>
+                    <label>Username or email address</label><br/>
+                    <input type="text" name="first_name"/>
+                </p>
+                <p>
+                    <label>Password</label>
+                    <Link to="/forget-password"><label className="right-label">Forget password?</label></Link>
+                    <br/>
+                    <input type="password" name="password"/>
+                </p>
+                <p>
+                    <button id="sub_btn" onClick={handleClick} type="submit">Login</button>
+                </p>
+            </form>
+            <footer>
+                <p>First time? <Link to="/register">Create an account</Link>.</p>
+                <p><Link to="/">Back to Homepage</Link>.</p>
+            </footer>
         </div>
     )
 }
diff --git a/src/components/pages/RegisterPage.js b/src/components/pages/RegisterPage.js
index 7dc2562..30aa629 100644
--- a/src/components/pages/RegisterPage.js
+++ b/src/components/pages/RegisterPage.js
@@ -1,9 +1,68 @@
 import React from 'react'
 
+import '../../App.css'
+
 export default function SignUpPage() {
     return (
         <div>
-            <h1>Register Page</h1>
+            <h1>join us</h1>
+            <form action="/signup" method="post">
+                <p>
+                    <label>Title</label><br/>
+                    <label>
+                    <input type="radio" name="title" value="mr"/>
+                    Mr
+                    </label>
+                    <label>
+                    <input type="radio" name="title" value="mrs"/>
+                    Mrs
+                    </label>
+                    <label>
+                    <input type="radio" name="title" value="miss"/>
+                    Miss
+                    </label>
+                </p>
+                <p>
+                    <label>First name</label><br/>
+                    <input type="text" name="first_name"/>
+                </p>
+                <p>
+                    <label>Last name</label><br/>
+                    <input type="text" name="last_name"/>
+                </p>
+                <p>
+                    <label>Email</label><br/>
+                    <input type="email" name="email" required/>
+                </p>
+                <p>
+                    <label>Phone number</label><br/>
+                    <input type="tel" name="phone"/>
+                </p>
+                <p>
+                    <label>Password</label><br/>
+                    <input type="password" name="password"/>
+                </p>
+                <p>
+                    <label>Country</label><br/>
+                    <select>
+                    <option>China</option>
+                    <option>India</option>
+                    <option>United States</option>
+                    <option>Indonesia</option>
+                    <option>Brazil</option>
+                    </select>
+                </p>
+                <p>
+                    <label>
+                    <input type="checkbox" value="terms"/>
+                    I agree to the <a href="/terms">terms and conditions</a>
+                    </label>
+                </p>
+                <p>
+                    <button>Sign up</button>
+                    <button type="reset">Reset form</button>
+                </p>
+                </form>
         </div>
     )
 }