improve authentication

scm-ui/src/components/ErrorNotification.js

@@ -0,0 +1,23 @@
+//@flow
+import React from "react";
+import Notification from "./Notification";
+
+type Props = {
+  error: Error
+};
+
+class ErrorNotification extends React.Component<Props> {
+  render() {
+    const { error } = this.props;
+    if (error) {
+      return (
+        <Notification type="danger">
+          <strong>Error:</strong> {error.message}
+        </Notification>
+      );
+    }
+    return "";
+  }
+}
+
+export default ErrorNotification;

scm-ui/src/components/Footer.js

@@ -0,0 +1,20 @@
+//@flow
+import React from "react";
+
+type Props = {
+  me: any
+};
+
+class Footer extends React.Component<Props> {
+  render() {
+    return (
+      <footer class="footer">
+        <div class="container is-centered">
+          <p class="has-text-centered">{this.props.me.username}</p>
+        </div>
+      </footer>
+    );
+  }
+}
+
+export default Footer;

scm-ui/src/components/Header.js

@@ -1,5 +1,5 @@
 //@flow
-import React from "react";
+import * as React from "react";
 import Logo from "./Logo";
 
 type Props = {

scm-ui/src/components/InputField.js

@@ -6,6 +6,7 @@ type Props = {
   label?: string,
   placeholder?: string,
   type?: string,
+  autofocus?: boolean,
   onChange: string => void
 };
 
@@ -15,6 +16,14 @@ class InputField extends React.Component<Props> {
     placeholder: ""
   };
 
+  field: ?HTMLInputElement;
+
+  componentDidMount() {
+    if (this.props.autofocus && this.field) {
+      this.field.focus();
+    }
+  }
+
   handleInput = (event: SyntheticInputEvent<HTMLInputElement>) => {
     this.props.onChange(event.target.value);
   };
@@ -35,6 +44,9 @@ class InputField extends React.Component<Props> {
         {this.renderLabel()}
         <div className="control">
           <input
+            ref={input => {
+              this.field = input;
+            }}
             className="input"
             type={type}
             placeholder={placeholder}

scm-ui/src/components/Loading.js

@@ -0,0 +1,43 @@
+//@flow
+import React from "react";
+import injectSheet from "react-jss";
+import Image from "../images/loading.svg";
+
+const styles = {
+  wrapper: {
+    position: "relative"
+  },
+  loading: {
+    width: "128px",
+    height: "128px",
+
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+
+    margin: "64px 0 0 -64px"
+  },
+  image: {
+    width: "128px",
+    height: "128px"
+  }
+};
+
+type Props = {
+  classes: any
+};
+
+class Loading extends React.Component<Props> {
+  render() {
+    const { classes } = this.props;
+    return (
+      <div className={classes.wrapper}>
+        <div className={classes.loading}>
+          <img className={classes.image} src={Image} alt="Loading ..." />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default injectSheet(styles)(Loading);

scm-ui/src/components/Logo.js

@@ -2,7 +2,9 @@
 import React from "react";
 import Image from "../images/logo.png";
 
-class Logo extends React.PureComponent {
+type Props = {};
+
+class Logo extends React.Component<Props> {
   render() {
     return <img src={Image} alt="SCM-Manager logo" />;
   }

scm-ui/src/components/Notification.js

@@ -0,0 +1,37 @@
+//@flow
+import * as React from "react";
+import classNames from "classnames";
+
+type NotificationType = "primary" | "info" | "success" | "warning" | "danger";
+
+type Props = {
+  type: NotificationType,
+  onClose?: () => void,
+  children?: React.Node
+};
+
+class Notification extends React.Component<Props> {
+  static defaultProps = {
+    type: "info"
+  };
+
+  renderCloseButton() {
+    const { onClose } = this.props;
+    if (onClose) {
+      return <button className="delete" onClick={onClose} />;
+    }
+    return "";
+  }
+
+  render() {
+    const { type, children, onClose } = this.props;
+    return (
+      <div className={classNames("notification", "is-" + type)}>
+        {this.renderCloseButton()}
+        {children}
+      </div>
+    );
+  }
+}
+
+export default Notification;

scm-ui/src/components/PrimaryNavigation.js

@@ -2,6 +2,8 @@
 import React from "react";
 import PrimaryNavigationLink from "./PrimaryNavigationLink";
 
+type Props = {};
+
 class PrimaryNavigation extends React.Component<Props> {
   render() {
     return (

scm-ui/src/components/PrimaryNavigationLink.js

@@ -1,5 +1,5 @@
 //@flow
-import React from "react";
+import * as React from "react";
 import { Route, Link } from "react-router-dom";
 
 type Props = {

scm-ui/src/components/SubmitButton.js

@@ -5,30 +5,36 @@ import classNames from "classnames";
 
 type Props = {
   value: string,
+  disabled: boolean,
+  isLoading: boolean,
   large?: boolean,
   fullWidth?: boolean
 };
 
 class SubmitButton extends React.Component<Props> {
   render() {
-    const { value, large, fullWidth } = this.props;
+    const { value, large, fullWidth, isLoading, disabled } = this.props;
 
     const largeClass = large ? "is-large" : "";
     const fullWidthClass = fullWidth ? "is-fullwidth" : "";
+    const loadingClass = isLoading ? "is-loading" : "";
 
     return (
       <div className="field">
         <div className="control">
-          <input
+          <button
             type="submit"
+            disabled={disabled}
             className={classNames(
               "button",
               "is-link",
               largeClass,
-              fullWidthClass
+              fullWidthClass,
+              loadingClass
             )}
-            value={value}
-          />
+          >
+            {value}
+          </button>
         </div>
       </div>
     );