ppm-jew9207 · Oskaras-23 · May 31, 2020 · May 31, 2020
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,18 +1,18 @@
 {
-  "name": "testreact",
+  "name": "bandau",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "re nmpact-scripts build",
+    "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

diff --git a/public/index.html b/public/index.html
@@ -2,19 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>Mentorystės portalas</title>
+    <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+
   </body>
 </html>
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,6 @@
-import React from 'react'
-import LoginPage from './pages/LoginPage'
+import React from 'react';
+import LoginPage from './page/LoginPage';
 
-export default function App() {
+export default function app() {
   return <LoginPage />
-}
+}
diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import {UserIcon, LockIcon} from "../icons/FontIcons";
+
+const LoginForm = () => {
+    return (
+        <div className='form-container'>
+            <h2>Login</h2>
+            <form id="login">
+                <div className="input-container">
+                <UserIcon />
+                <input type="text" name="username" placeholder="username" />
+                </div>
+                <div className="input-container">
+                <LockIcon />
+                <input type="password" name="username" placeholder="password" />
+                </div>
+                <div>
+                <input type="checkbox" name="remember" id="remember" />
+                <label htmlFor="remember" className="remember-me">Remember me</label>
+                </div>
+                <div>
+                    <input className="button" type="submit" value="login"/>
+                    <a href="#" className="lost">Lost your password?</a>
+                </div>
+
+            </form> 
+        </div>
+    );
+};
+
+export default LoginForm;
diff --git a/src/components/RegisterForm.js b/src/components/RegisterForm.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {UserIcon, LockIcon} from "../icons/FontIcons";
+
+const RegisterForm = () => {
+return(
+    <div className='form-container'>
+    <h2>Register</h2>
+    <form id="register">
+        <div className="input-container">
+        <UserIcon />
+        <input type="text" name="username" placeholder="username" />
+        </div>
+        <div className="input-container">
+        <LockIcon />
+        <input type="email" name="email" placeholder="E-mail address" />
+        </div>
+        <div>
+            <input className="button" type="submit" value="Register"/>
+        </div>
+
+    </form> 
+</div>
+);
+}
+
+export default RegisterForm;
diff --git a/src/icons/FontIcons.js b/src/icons/FontIcons.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+export const UserIcon = () => {
+    return(
+        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user" class="svg-inline--fa fa-user fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg>
+    )
+}
+export const LockIcon = () => {
+    return(
+        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lock" class="svg-inline--fa fa-lock fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path></svg>    )
+}
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,74 @@
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap');
+
+*{
+  font-family: 'Merriweather', serif;
+}
+
+.input-container{
+  width: 100%;
+  display: flex;
+  margin-bottom: 15px;
+  align-items: stretch;
+  max-width: 300px;
+}
+.form-container{
+flex-grow: 9;
+padding: 80px 20px;
+padding-left: 300px;
+}
+
+.input-container svg{
+  padding: 10px;
+  background: rgb(103, 107, 110);
+  color: white;
+  min-width: 14px;
+  text-align: center;
+  border-top-left-radius:8px ;
+  border-bottom-left-radius:8px ;
+  border: 1px solid grey;
+}
+.input-container input{
+  width: 100%;
+  padding: 10px;
+  outline: none;
+  border-top-right-radius:8px ;
+  border-bottom-right-radius:8px ;
+  border: 1px solid grey;
+}
+
+.flex-container{
+  display: flex;
+  align-items: stretch;
+}
+
+.button{
+  color: white;
+  background: rgb(12, 77, 255);
+  border: none;
+  padding: 8px 15px;
+  font-size: 18px;
+  border-radius: 8px;
+}
+.button:hover{
+  cursor: pointer;
+  background-color: rgb(12, 152, 207);
+  transition: .3s;
+  overflow: hidden;
+}
+.separator{
+  background: grey;
+  max-width: 1px;
+}
+.separator label{
+  position: relative;
+  background: white;
+  top: 48%;
+  font-size: 15px;
+  left: -8px;
+}
+.lost{
+  padding: 0 10px;
+}
+.remember-me{
+  padding-bottom: 20px;
+}
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './styles/index.css';
+import './index.css';
 import App from './App';
 
 ReactDOM.render(

diff --git a/src/page/LoginPage.js b/src/page/LoginPage.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import LoginForm from '../components/LoginForm';
+import RegisterForm from '../components/RegisterForm';
+
+const LoginPage = () => {
+    return <div class="flex-container">
+        <LoginForm />
+        <div className="separator">
+            <label>OR</label>
+        </div>
+        <RegisterForm />
+    </div> 
+}
+
+export default LoginPage
diff --git a/src/pages/LoginPage.js b/src/pages/LoginPage.js
@@ -5,6 +5,7 @@ import RegisterComponent from '../components/RegisterComponent'
 const LoginPage = () => {
   return (
     <div className="flex-container">
+      I'm good! ;) 
       <LoginComponent />
       <div className="separator">
         <label>OR</label>