1 files changed, 100 insertions, 0 deletions

diff --git a/src/features/basicAuth/Component.tsx b/src/features/basicAuth/Component.tsx
new file mode 100644
index 000000000..e20f7641b
--- /dev/null
+++ b/src/features/basicAuth/Component.tsx
@@ -0,0 +1,100 @@
+import { Component, FormEvent, ReactElement } from 'react';
+import injectSheet, { WithStylesProps } from 'react-jss';
+import { observer } from 'mobx-react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import classnames from 'classnames';
+import { noop } from 'lodash';
+import Modal from '../../components/ui/Modal';
+import Input from '../../components/ui/input/index';
+import Button from '../../components/ui/button';
+import { state, resetState, sendCredentials, cancelLogin } from './store';
+import Form from './Form';
+import styles from './styles';
+import globalMessages from '../../i18n/globalMessages';
+import { H1 } from '../../components/ui/headline';
+
+const messages = defineMessages({
+  signIn: {
+    id: 'feature.basicAuth.signIn',
+    defaultMessage: 'Sign In',
+  },
+});
+
+interface IProps
+  extends WithStylesProps<typeof styles>,
+    WrappedComponentProps {}
+
+@observer
+class BasicAuthModal extends Component<IProps> {
+  submit(e: FormEvent<HTMLFormElement>): void {
+    e.preventDefault();
+    const values = Form.values();
+    sendCredentials(values.user, values.password);
+    resetState();
+  }
+
+  cancel(): void {
+    cancelLogin();
+    this.close();
+  }
+
+  close(): void {
+    resetState();
+    state.isModalVisible = false;
+  }
+
+  render(): ReactElement | null {
+    const { classes } = this.props;
+    const { isModalVisible, authInfo } = state;
+
+    if (!authInfo) {
+      return null;
+    }
+
+    const { intl } = this.props;
+
+    return (
+      <Modal
+        isOpen={isModalVisible}
+        className={classes.modal}
+        close={this.cancel.bind(this)}
+        showClose={false}
+      >
+        <H1>{intl.formatMessage(messages.signIn)}</H1>
+        <p>
+          http
+          {authInfo.port === 443 && 's'}
+          ://
+          {authInfo.host}
+        </p>
+        <form
+          onSubmit={this.submit.bind(this)}
+          className={classnames('franz-form', classes.form)}
+        >
+          <Input {...Form.$('user').bind()} showLabel={false} />
+          <Input
+            {...Form.$('password').bind()}
+            showLabel={false}
+            showPasswordToggle
+          />
+          <div className={classes.buttons}>
+            <Button
+              type="button"
+              label={intl.formatMessage(globalMessages.cancel)}
+              buttonType="secondary"
+              onClick={this.cancel.bind(this)}
+            />
+            <Button
+              type="submit"
+              label={intl.formatMessage(messages.signIn)}
+              onClick={noop}
+            />
+          </div>
+        </form>
+      </Modal>
+    );
+  }
+}
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(BasicAuthModal),
+);