add no browser support section in login component

Kyubinhan · Sep 10, 2018 · 97474ad · 97474ad
1 parent 90075b7
commit 97474ad
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 147 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -34,6 +34,7 @@
     "react/jsx-wrap-multilines": "off",
     "react/button-has-type": "off",
     "react/prefer-stateless-function": "off",
+    "react/jsx-one-expression-per-line": "off",
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/href-no-hash": "off",
     "object-curly-newline": "off",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,7 +47,6 @@
     "dotenv-expand": "4.2.0",
     "eslint": "^5.5.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-react-app": "^2.1.0",
     "eslint-loader": "1.9.0",
     "eslint-plugin-flowtype": "2.39.1",
     "eslint-plugin-import": "^2.14.0",

diff --git a/src/components/Login.js b/src/components/Login.js
@@ -1,13 +1,15 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Button } from 'semantic-ui-react';
-
+import { Button, Segment } from 'semantic-ui-react';
+import { Loading } from './common';
 import { SSO_LOGIN_ENDPOINT, SSO_IDIR_LOGIN_ENDPOINT, SSO_BCEID_LOGIN_ENDPOINT } from '../constants/API';
 import { ELEMENT_ID, IMAGE_SRC } from '../constants/variables';
 import { storeAuthData } from '../actions';
 import { fetchUser } from '../actionCreators';
 import { getIsFetchingUser } from '../reducers/rootReducer';
+import { APP_NAME } from '../constants/strings';
+import { detectIE } from '../utils';
 
 const propTypes = {
   storeAuthData: PropTypes.func.isRequired,
@@ -44,58 +46,78 @@ export class Login extends Component {
 
   render() {
     const { isFetchingUser } = this.props;
+    const isIE = detectIE();
 
     return (
       <section className="login">
+        {isIE &&
+          <article className="login__no-support-browser">
+            <div className="login__no-support-browser__title">
+              Your internet browser is not supported.
+            </div>
+            <div>
+              <div>
+                Please visit {APP_NAME} using a supported browser:
+                <a href="https://www.google.com/chrome" target="_blank" rel="noopener noreferrer"> Google Chrome,</a>
+                <a href="https://www.mozilla.org/en-US/firefox/new" target="_blank" rel="noopener noreferrer"> Firefox,</a>
+                <a href="https://support.apple.com/en-ca/safari" target="_blank" rel="noopener noreferrer"> Safari </a>
+                (Mac only).
+              </div>
+              If you choose to continue with this browser the application may not work as intended.
+            </div>
+          </article>
+        }
         <article className="login__header">
           <img className="login__header__logo" src={IMAGE_SRC.LOGIN_LOGO} alt="Logo" />
-          <div className="login__header__title">MyRangeBC</div>
+          <div className="login__header__title">{APP_NAME}</div>
         </article>
         <article className="login__paragraph1">
-          <div className="login__signin__container">
-            <div className="login__signin__title">Sign In</div>
-            <div className="login__signin__text1">to continue to MyRangeBC</div>
-            <div className="login__signin__text2">We use the BCeID for authentication.</div>
-            <a
-              className="login__signin__text3"
-              href="https://portal.nrs.gov.bc.ca/web/client/bceid"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Learn more about BCeID here.
-            </a>
-            <Button
-              id={ELEMENT_ID.LOGIN_BCEID_BUTTON}
-              className="login__signin__button"
-              primary
-              fluid
-              loading={isFetchingUser}
-              style={{ height: '50px' }}
-              onClick={this.onBceidLoginBtnClick}
-            >
-              Login as Agreement Holder
-            </Button>
-            <div className="login__signin__link-container">
-              <div
-                role="button"
-                tabIndex="0"
-                onClick={this.onIdirLoginBtnClick}
+          <Segment basic>
+            <Loading active={isFetchingUser} />
+            <div className="login__signin__container">
+              <div className="login__signin__title">Sign In</div>
+              <div className="login__signin__text1">to continue to {APP_NAME}</div>
+              <div className="login__signin__text2">We use the BCeID for authentication.</div>
+              <a
+                className="login__signin__text3"
+                href="https://portal.nrs.gov.bc.ca/web/client/bceid"
+                target="_blank"
+                rel="noopener noreferrer"
               >
-                Range Staff Login
-              </div>
-              <div className="login__line" />
-              <div
-                role="button"
-                tabIndex="0"
-                onClick={this.onLoginBtnClick}
+                Learn more about BCeID here.
+              </a>
+              <Button
+                id={ELEMENT_ID.LOGIN_BCEID_BUTTON}
+                className="login__signin__button"
+                primary
+                fluid
+                style={{ height: '50px' }}
+                onClick={this.onBceidLoginBtnClick}
               >
-                Admin Login
+                Login as Agreement Holder
+              </Button>
+              <div className="login__signin__link-container">
+                <div
+                  role="button"
+                  tabIndex="0"
+                  onClick={this.onIdirLoginBtnClick}
+                >
+                  Range Staff Login
+                </div>
+                <div className="login__line" />
+                <div
+                  role="button"
+                  tabIndex="0"
+                  onClick={this.onLoginBtnClick}
+                >
+                  Admin Login
+                </div>
               </div>
             </div>
-          </div>
+          </Segment>
         </article>
         <article className="login__paragraph2">
-          <div className="login__paragraph2__title">What is MyRangeBC?</div>
+          <div className="login__paragraph2__title">What is {APP_NAME}?</div>
           <div className="login__paragraph2__text">
             We are making it easier for you to submit and amend Range Use Plans. This new service will enable you to submit your plan electronically, save drafts and print versions.
             Your Range Officer is also getting new tools to allow so that together we can manage the land with greater accuracy.
@@ -181,57 +203,6 @@ export class Login extends Component {
             </div>
           </div>
         </article>
-        {/* <img
-          className="login__image"
-          src={IMAGE_SRC.LOGIN_LOGO}
-          alt="login-img"
-        />
-
-        <div className="login__title">
-          My Range Application
-        </div>
-
-        <div className="login__button">
-          <Button
-            id={ELEMENT_ID.LOGIN_BUTTON}
-            primary
-            fluid
-            loading={isFetchingUser}
-            onClick={this.onLoginBtnClick}
-          >
-            Login
-          </Button>
-
-          <Button
-            id={ELEMENT_ID.LOGIN_IDIR_BUTTON}
-            style={{ marginTop: '15px' }}
-            primary
-            fluid
-            loading={isFetchingUser}
-            onClick={this.onIdirLoginBtnClick}
-          >
-            Login as Range Staff
-          </Button>
-
-          <Button
-            id={ELEMENT_ID.LOGIN_BCEID_BUTTON}
-            style={{ marginTop: '15px' }}
-            primary
-            fluid
-            loading={isFetchingUser}
-            onClick={this.onBceidLoginBtnClick}
-          >
-            Login as Agreement Holder
-          </Button>
-        </div>
-        <a
-          className="login__change-link"
-          href="https://summer.gov.bc.ca"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Is your password expired?
-        </a> */}
       </section>
     );
   }

diff --git a/src/constants/strings.js b/src/constants/strings.js
@@ -1,3 +1,5 @@
+export const APP_NAME = 'MyRange BC';
+
 // tenure agreement table header labels
 export const RANGE_NUMBER = 'RAN Number';
 export const RANGE_NAME = 'Range Name';

diff --git a/src/styles/Login.scss b/src/styles/Login.scss
@@ -1,22 +1,37 @@
-// $form-min-width: 250px;
 .login {
+  font-family: Lato;
+
+  &__no-support-browser {
+    background: $accent-color;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 15px 0;
+
+    &__title {
+      font-size: 1.5rem;
+      font-weight: 500;
+      margin-bottom: 5px;
+    }
+  }
   &__header {
     display: flex;
     justify-content: center;
     align-items: center;
     background: $primary-color;
     height: 60px;
-    font-family: Lato;
 
     &__logo {
       height: 40px;
     }
     &__title {
+      display: flex;
+      align-items: center;
       border-left: 1px solid $accent-color;
-      padding-left: 15px;
-      margin-left: 10px;
-      height: 27px;
-      width: 136px;
+      padding-left: 10px;
+      margin-left: 7px;
+      height: 35px;
       color: #FFFFFF;
       font-family: "Adobe Garamond Pro";
       font-size: 25px;
@@ -52,6 +67,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    padding: 50px 0;
   }
   &__paragraph2 {
     display: flex;
@@ -114,7 +130,6 @@
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      margin: 100px 0;
       padding: 30px;
       min-width: 400px;
       background: white;
@@ -154,49 +169,3 @@
     }
   }
 }
-// .login {
-//   display: flex;
-//   flex-direction: column;
-//   justify-content: center;
-//   align-items: center;
-//   min-height: 100vh;
-
-//   &__image {
-//     width: 200px;
-//   }
-
-//   &__title {
-//     opacity: 0.9;	
-//     color: $primary-color;	
-//     font-family: "Open Sans",open-sans,sans-serif;
-//     font-size: 60px;	
-//     font-weight: 300;	
-//     line-height: 60px;
-//     margin: 50px 0;
-//     text-align: center;
-//   }
-
-//   &__header {
-//     color: #000000;
-//     font-family: "Open Sans",open-sans,sans-serif;
-//     font-size: 30px;
-//     font-weight: bold;
-//     line-height: 40px;
-//     margin-bottom: 30px;
-//   }
-
-//   &__form {
-//     min-width: $form-min-width;        
-//     margin-bottom: 15px;
-//   }
-
-//   &__button {
-//     min-width: $form-min-width;    
-//   }
-
-//   &__change-link {
-//     display: block;
-//     margin-top: 10px;
-//     font-size: 1.1rem;
-//   }
-// }