feat(login-view): implement login-page-view

- add login component
- add login styles

[Finishes #162380276]

jest.config.json

@@ -8,5 +8,8 @@
   ],
   "transform": {
     ".*": "./node_modules/babel-jest"
+  },
+  "moduleNameMapper": {
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy"
   }
 }

package.json

@@ -26,7 +26,17 @@
   },
   "homepage": "https://github.com/andela/valinor-ah-frontend#readme",
   "devDependencies": {
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-decorators": "^7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.0.0",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
     "coveralls": "^3.0.2",
     "eslint": "^5.9.0",
     "eslint-config-airbnb": "^17.1.0",
@@ -36,6 +46,8 @@
     "jest": "^23.6.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
+    "identity-obj-proxy": "^3.0.0",
+
     "node-sass": "^4.10.0",
     "postcss-loader": "^3.0.0",
     "prop-types": "^15.6.2",
@@ -44,6 +56,8 @@
     "webpack": "^4.26.1",
     "react-test-renderer": "^16.6.3",
     "regenerator-runtime": "^0.13.1",
+    "webpack-babel-jest": "^1.0.4",
+    "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.10"
   },
   "dependencies": {

public/assets/styles/login.scss

@@ -0,0 +1,116 @@
+@import url('https://fonts.googleapis.com/css?family=Zilla+Slab');
+@import url('https://fonts.googleapis.com/css?family=Open Sans');
+
+$facebook-color: #3B5998;
+$twitter-color: #00ACED;
+$google-color: #F44D4D;
+$white: #ffffff;
+$site-color: #007FFF;
+$line-color: #ced4da;
+%style-button {
+  border: none;
+  height: 50px;
+  font-size: 14px;
+}
+%input-style {
+  border: none;
+  border-radius: 0px;
+  border-bottom: 1px solid $line-color;
+}
+
+.login-form{
+  background-color: #F9F4F4;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  padding:80px 40px;
+  h4{
+    color: $site-color;
+    font-size: 24px;
+  }
+  h5{
+    color:#007FFF;
+    font-size: 18px;
+    margin-top: 90px;
+  }
+}
+
+.signup{
+  background-color: $site-color;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  color: $white;
+  padding:80px 40px;
+}
+
+.google-btn{
+  background-color: $google-color;
+ @extend %style-button;
+}
+
+.facebook-btn{
+  background-color: $facebook-color;
+ @extend %style-button;
+}
+
+.twitter-btn{
+  background-color: $twitter-color;
+ @extend %style-button;
+}
+
+.twitter-btn:hover{
+  background-color: $twitter-color;
+}
+
+.facebook-btn:hover{
+  background-color: $facebook-color;
+}
+
+.google-btn:hover{
+  background-color: $google-color;
+}
+
+.email-input{
+  background-color: transparent;
+ @extend %input-style;
+}
+
+.email-input:focus { 
+  background-color: transparent;
+  box-shadow:none;
+ @extend %input-style;
+}
+
+.email-addon{
+  @extend %input-style;
+}
+
+.transparent{
+  background-color: transparent;
+}
+
+.login-btn{
+  border-radius:25px;
+}
+
+.signup-btn{
+  color: $white;
+  border-radius:25px;
+  border: 1px solid $white;
+}
+
+.login-banner{
+  margin-top: 35%;
+}
+
+.welcome-text {
+  font-weight: bold;
+  font-size: 36px;
+}
+
+h2, h5, h4{
+  font-family: 'Zilla Slab';
+}
+
+p{
+  font-family: 'Open Sans';
+}

src/components/login/Button.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Button = ({ link, className, buttonDisplay }) => (
+  <a href={link} className={className}>{buttonDisplay}</a>
+);
+
+Button.propTypes = {
+  link: PropTypes.string.isRequired,
+  className: PropTypes.string.isRequired,
+  buttonDisplay: PropTypes.string.isRequired
+};
+
+
+export default Button;

src/components/login/LoginForm.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const LoginForm = () => (
+  <form>
+    <div className="row mt-5 text-center">
+      <div className="col-md-8 offset-md-2">
+        <div className="input-group mb-3">
+          <div className="input-group-prepend">
+            <span className="input-group-text transparent email-addon" id="basic-addon1"><i className="far fa-envelope" /></span>
+          </div>
+          <input type="text" className="form-control email-input" placeholder="EMAIL ADDRESS" aria-label="Username" aria-describedby="basic-addon1" />
+        </div>
+        <button type="submit" className="btn btn-outline-primary login-btn px-5 mt-5">LOGIN</button>
+      </div>
+    </div>
+  </form>
+);
+
+export default LoginForm;

src/components/login/LoginPage.js

@@ -1,11 +1,19 @@
 import React from 'react';
 
 import Header from '../common/Header';
+import LoginSection from './LoginSection';
+import WelcomeSection from './WelcomeSection';
+import '../../../public/assets/styles/login.scss';
 
 const LoginPage = () => (
   <div>
     <Header />
-    <h1>Log in page here....</h1>
+    <div className="container">
+      <div className="row mt-5 row ">
+        <WelcomeSection />
+        <LoginSection />
+      </div>
+    </div>
   </div>
 );
 

src/components/login/LoginSection.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import SocialButton from './SocialButton';
+import LoginForm from './LoginForm';
+
+const LoginSection = () => (
+
+  <div className="col-md-8 login-form text-center order-md-1">
+    <h4>Sign in with your social media account</h4>
+    {/* Button Div */}
+    <div className="row mt-5">
+
+      <SocialButton
+    className="btn btn-primary w-100 google-btn"
+    socialButtonDisplay="Login with Google"
+    socialIcon="fab fa-google mr-2"
+    />
+      <SocialButton
+    className="btn btn-primary w-100  facebook-btn"
+    socialButtonDisplay="Login with Facebook"
+    socialIcon="fab fa-facebook-f mr-2"
+    />
+      <SocialButton
+    className="btn btn-primary  w-100 twitter-btn"
+    socialButtonDisplay="Login with Twitter"
+    socialIcon="fab fa-twitter mr-2"
+    />
+
+    </div>
+    {/* End of button div */}
+
+    {/* Email input div */}
+    <h5>Sign in with your email</h5>
+    <LoginForm />
+    {/* End of Email input */}
+
+  </div>
+);
+
+export default LoginSection;

src/components/login/SocialButton.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SocialButton = ({ className, socialButtonDisplay, socialIcon }) => (
+  <div className="col-lg-4 mt-3">
+    <button type="button" className={className}>
+      <i className={socialIcon} />
+      {socialButtonDisplay}
+    </button>
+  </div>
+);
+SocialButton.propTypes = {
+  className: PropTypes.string.isRequired,
+  socialButtonDisplay: PropTypes.string.isRequired,
+  socialIcon: PropTypes.string.isRequired
+};
+
+export default SocialButton;

src/components/login/WelcomeSection.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Button from './Button';
+
+const WelcomeSection = () => (
+  <div className="col-md-4 signup text-center order-md-2">
+    <div className="row welcome-banner align-items-center">
+      <div className="col-md-12 mt-5">
+        <h2 className="welcome-text">Welcome back!</h2>
+        <p className="text-center mt-5">To keep sharing your exciting Ideas please log in into your account</p>
+      </div>
+    </div>
+
+    <div className="row login-banner">
+      <div className="col-md-12">
+        <p className="mt-5">dont have an account yet?</p>
+
+        <Button
+       link="/signup"
+       className="btn btn-outline-primary signup-btn px-5"
+       buttonDisplay="SIGNUP"
+       />
+
+      </div>
+    </div>
+  </div>
+);
+
+export default WelcomeSection;

src/index.html

@@ -4,6 +4,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
+  <link href='https://fonts.googleapis.com/css?family=Zilla Slab' rel='stylesheet'>
   <title>Author's Haven</title>
 </head>
 <body>

tests/src/components/login/Button.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Button from '../../../../src/components/login/Button';
+
+test('Login button snapshot test', () => {
+  const component = shallow(<Button link="/login" className="some-style" buttonDisplay="login" />);
+  expect(component).toMatchSnapshot();
+});

tests/src/components/login/LoginForm.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import LoginForm from '../../../../src/components/login/LoginForm';
+
+test('Login formn snapshot test', () => {
+  const component = shallow(<LoginForm />);
+  expect(component).toMatchSnapshot();
+});

tests/src/components/login/LoginSection.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import LoginSection from '../../../../src/components/login/LoginSection';
+
+test('Login section snapshot test', () => {
+  const component = shallow(<LoginSection />);
+  expect(component).toMatchSnapshot();
+});

tests/src/components/login/SocialButton.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import SocialButton from '../../../../src/components/login/SocialButton';
+
+test('Login SocialButton snapshot test', () => {
+  const component = shallow(
+    <SocialButton
+    className="some-styles"
+    socialButtonDisplay="login with twitter"
+    socialIcon="flying-bed" />
+  );
+  expect(component).toMatchSnapshot();
+});

tests/src/components/login/WelcomeSection.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import WelcomeSection from '../../../../src/components/login/WelcomeSection';
+
+test('Login Welcome-back section snapshot test', () => {
+  const component = shallow(<WelcomeSection />);
+  expect(component).toMatchSnapshot();
+});