[add] Jhipster base

front-end/src/main/webapp/app/modules/login/login-modal.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Label, Alert, Row, Col } from 'reactstrap';
+import { AvForm, AvField, AvGroup, AvInput } from 'availity-reactstrap-validation';
+import { Link } from 'react-router-dom';
+
+export interface ILoginModalProps {
+  showModal: boolean;
+  loginError: boolean;
+  handleLogin: Function;
+  handleClose: Function;
+}
+
+class LoginModal extends React.Component<ILoginModalProps> {
+  handleSubmit = (event, errors, { username, password, rememberMe }) => {
+    const { handleLogin } = this.props;
+    handleLogin(username, password, rememberMe);
+  };
+
+  render() {
+    const { loginError, handleClose } = this.props;
+
+    return (
+      <Modal isOpen={this.props.showModal} toggle={handleClose} backdrop="static" id="login-page" autoFocus={false}>
+        <AvForm onSubmit={this.handleSubmit}>
+          <ModalHeader id="login-title" toggle={handleClose}>
+            Sign in
+          </ModalHeader>
+          <ModalBody>
+            <Row>
+              <Col md="12">
+                {loginError ? (
+                  <Alert color="danger">
+                    <strong>Failed to sign in!</strong> Please check your credentials and try again.
+                  </Alert>
+                ) : null}
+              </Col>
+              <Col md="12">
+                <AvField
+                  name="username"
+                  label="Username"
+                  placeholder="Your username"
+                  required
+                  errorMessage="Username cannot be empty!"
+                  autoFocus
+                />
+                <AvField
+                  name="password"
+                  type="password"
+                  label="Password"
+                  placeholder="Your password"
+                  required
+                  errorMessage="Password cannot be empty!"
+                />
+                <AvGroup check inline>
+                  <Label className="form-check-label">
+                    <AvInput type="checkbox" name="rememberMe" /> Remember me
+                  </Label>
+                </AvGroup>
+              </Col>
+            </Row>
+            <div className="mt-1">&nbsp;</div>
+            <Alert color="warning">
+              <Link to="/reset/request">Did you forget your password?</Link>
+            </Alert>
+            <Alert color="warning">
+              <span>You don't have an account yet?</span> <Link to="/register">Register a new account</Link>
+            </Alert>
+          </ModalBody>
+          <ModalFooter>
+            <Button color="secondary" onClick={handleClose} tabIndex="1">
+              Cancel
+            </Button>{' '}
+            <Button color="primary" type="submit">
+              Sign in
+            </Button>
+          </ModalFooter>
+        </AvForm>
+      </Modal>
+    );
+  }
+}
+
+export default LoginModal;