LoginModal

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"
   }
 }

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';

src/semantic-ui/LoginModal.css

@@ -0,0 +1,7 @@
+.row {
+  margin: 15px 150px 0px 150px;
+}
+
+.ui.input.form-field {
+  display: block;
+}

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);

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)}
+  />
+);