From ae63930764807a5ef399646ba119454d3880980a Mon Sep 17 00:00:00 2001
From: Derek Leadbetter <dleadbetter55@gmail.com>
Date: Mon, 11 May 2020 14:38:58 -0400
Subject: [PATCH 1/2] Adding the LoginModal component

---
 src/i18n/en.json                              |  9 ++
 src/semantic-ui/LoginModal.css                |  7 ++
 src/semantic-ui/LoginModal.js                 | 99 +++++++++++++++++++
 .../semantic-ui/LoginModal.stories.js         | 22 +++++
 4 files changed, 137 insertions(+)
 create mode 100644 src/semantic-ui/LoginModal.css
 create mode 100644 src/semantic-ui/LoginModal.js
 create mode 100644 stories/components/semantic-ui/LoginModal.stories.js

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 398f9bd8..bb61c5d5 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -34,5 +34,14 @@
       "hideKeyboard": "Hide Keyboard",
       "showKeyboard": "Show Keyboard"
     }
+  },
+  "LoginModal": {
+    "buttonCancel": "Cancel",
+    "buttonLogin": "Login",
+    "email": "Email",
+    "header": "Login",
+    "loginErrorContent": "The username and/or password you entered is invalid. Please double check and try again.",
+    "loginErrorHeader": "Invalid Credentials",
+    "password": "Password"
   }
 }
\ No newline at end of file
diff --git a/src/semantic-ui/LoginModal.css b/src/semantic-ui/LoginModal.css
new file mode 100644
index 00000000..b69ae103
--- /dev/null
+++ b/src/semantic-ui/LoginModal.css
@@ -0,0 +1,7 @@
+.row {
+  margin: 15px 150px 0px 150px;
+}
+
+.ui.input.form-field {
+  display: block;
+}
\ No newline at end of file
diff --git a/src/semantic-ui/LoginModal.js b/src/semantic-ui/LoginModal.js
new file mode 100644
index 00000000..9f6dfbe3
--- /dev/null
+++ b/src/semantic-ui/LoginModal.js
@@ -0,0 +1,99 @@
+// @flow
+
+import React, { Component } from 'react';
+import {
+  Button,
+  Form,
+  Grid,
+  Header,
+  Icon,
+  Input,
+  Message,
+  Modal
+} from 'semantic-ui-react';
+import { withTranslation } from 'react-i18next';
+import './LoginModal.css';
+
+type Props = {
+  disabled: boolean,
+  loginFailed: boolean,
+  onClose: () => void,
+  onLogin: () => void,
+  onPasswordChange: () => void,
+  onUsernameChange: () => void,
+  open: boolean,
+  t: () => string,
+  trigger: () => Component
+};
+
+const LoginModal = (props: Props) => (
+  <Modal
+    as={Form}
+    error={props.loginFailed}
+    open={props.open}
+    size='small'
+    trigger={props.trigger}
+  >
+    <Header
+      icon='user circle'
+      content={props.t('LoginModal.header')}
+    />
+    <Message
+      error
+      header={props.t('LoginModal.loginErrorHeader')}
+      content={props.t('LoginModal.loginErrorContent')}
+    />
+    <Grid
+      padded='vertically'
+      textAlign='center'
+    >
+      <Grid.Column>
+        <Grid.Row
+          className='row'
+        >
+          <Input
+            autoFocus
+            className='form-field'
+            icon={<Icon name='at' />}
+            onChange={props.onUsernameChange.bind(this)}
+            placeholder={props.t('LoginModal.email')}
+            size='huge'
+          />
+        </Grid.Row>
+        <Grid.Row
+          className='row'
+        >
+          <Input
+            className='form-field'
+            icon={<Icon name='lock' />}
+            onChange={props.onPasswordChange.bind(this)}
+            placeholder={props.t('LoginModal.password')}
+            size='huge'
+            type='password'
+          />
+        </Grid.Row>
+      </Grid.Column>
+    </Grid>
+    <Modal.Actions>
+      <Button
+        disabled={props.disabled}
+        onClick={props.onLogin.bind(this)}
+        primary
+        size='large'
+        type='submit'
+      >
+        { props.t('LoginModal.buttonLogin') }
+      </Button>
+      <Button
+        inverted
+        onClick={props.onClose.bind(this)}
+        primary
+        size='large'
+      >
+        { props.t('LoginModal.buttonCancel') }
+      </Button>
+    </Modal.Actions>
+  </Modal>
+);
+
+export default withTranslation()(LoginModal);
diff --git a/stories/components/semantic-ui/LoginModal.stories.js b/stories/components/semantic-ui/LoginModal.stories.js
new file mode 100644
index 00000000..7a02f2ab
--- /dev/null
+++ b/stories/components/semantic-ui/LoginModal.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { withA11y } from '@storybook/addon-a11y';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import LoginModal from '../../../src/semantic-ui/LoginModal';
+
+export default {
+  title: 'Components/Semantic UI/LoginModal',
+  decorators: [withA11y, withKnobs]
+};
+
+export const Default = () => (
+  <LoginModal
+    disabled={boolean('Disabled', false)}
+    loginFailed={boolean('Login failed', false)}
+    onClose={action('close')}
+    onLogin={action('login')}
+    onPasswordChange={action('password-change')}
+    onUsernameChange={action('username-change')}
+    open={boolean('Open', true)}
+  />
+);
\ No newline at end of file

From 734450636fb530bd9bb7f09a96fc5414ca1b374f Mon Sep 17 00:00:00 2001
From: Derek Leadbetter <dleadbetter55@gmail.com>
Date: Mon, 11 May 2020 16:16:36 -0400
Subject: [PATCH 2/2] Adding LoginModal export to index.js

---
 src/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.js b/src/index.js
index e986c9db..93cad7d8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -20,5 +20,6 @@ export { default as KeyboardField } from './semantic-ui/KeyboardField';
 export { default as LinkButton } from './semantic-ui/LinkButton';
 export { default as LinkLabel } from './semantic-ui/LinkLabel';
 export { default as ListTable } from './semantic-ui/ListTable';
+export { default as LoginModal } from './semantic-ui/LoginModal';
 export { default as PhotoViewer } from './semantic-ui/PhotoViewer';
 export { default as Selectize } from './semantic-ui/Selectize';
\ No newline at end of file