add signin page

cypress/integration/router.spec.js

@@ -5,6 +5,7 @@ describe('App Router', () => {
     cy.visit(ROUTES.LANDING);
     cy.get('section');
   });
+
   it('contains SignUp page', () => {
     cy.visit(ROUTES.SIGN_UP);
     cy.get('section');

src/constants/routes.ts

@@ -4,3 +4,4 @@
  */
 export const LANDING: string = '/';
 export const SIGN_UP: string = '/signup';
+export const SIGN_IN: string = '/signin';

src/pages/SignIn.tsx

@@ -0,0 +1,26 @@
+import React, {FC} from 'react';
+
+const SignUp: FC = () => (
+  <section className="container">
+    <div className="alert alert-danger">Invalid credentials</div>
+    <h1 className="large text-primary">Sign In</h1>
+    <p className="lead">
+      <i className="fa fa-user"></i> Sign into your account
+    </p>
+    <form action="dashboard.html" className="form">
+      <div className="form-group">
+        <input type="email" placeholder="Email Address" />
+      </div>
+      <div className="form-group">
+        <input type="password" placeholder="Password" minLength={6} />
+      </div>
+
+      <input type="submit" value="Login" className="btn btn-primary" />
+    </form>
+    <p className="my-1">
+      Don't have an account? <a href="register.html">Sign in</a>
+    </p>
+  </section>
+);
+
+export default SignUp;

src/pages/SignUp.tsx

@@ -1,10 +1,12 @@
 import React, {FC} from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faUser} from '@fortawesome/free-solid-svg-icons';
 
 const SignUp: FC = () => (
   <section className="container">
     <h1 className="large text-primary">Sign Up</h1>
     <p className="lead">
-      <i className="fa fa-user"></i> Create your account
+      <FontAwesomeIcon icon={faUser} /> Create your account
     </p>
     <form action="dashboard.html" className="form">
       <div className="form-group">

src/router/Router.tsx

@@ -2,11 +2,14 @@ import React, {FC} from 'react';
 import {Switch, Route} from 'react-router-dom';
 import Landing from '../pages/Landing';
 import SignUp from '../pages/SignUp';
+import SignIn from '../pages/SignIn';
+import * as ROUTES from '../constants/routes';
 
 const Router: FC = () => (
   <Switch>
-    <Route exact path={'/'} component={Landing} />
+    <Route exact path={ROUTES.LANDING} component={Landing} />
-    <Route exact path={'/signup'} component={SignUp} />
+    <Route exact path={ROUTES.SIGN_UP} component={SignUp} />
+    <Route exact path={ROUTES.SIGN_IN} component={SignIn} />
   </Switch>
 );