scm-ui: new repository layout

scm-ui/ui-webapp/src/components/InfoBox.js

@@ -0,0 +1,84 @@
+//@flow
+import * as React from "react";
+import injectSheet from "react-jss";
+import classNames from "classnames";
+import { translate } from "react-i18next";
+import type { InfoItem } from "./InfoItem";
+
+const styles = {
+  image: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    width: 160,
+    height: 160
+  },
+  icon: {
+    color: "#bff1e6"
+  },
+  label: {
+    marginTop: "0.5em"
+  },
+  content: {
+    marginLeft: "1.5em",
+    minHeight: "10.5rem"
+  },
+  link: {
+    display: "block",
+    marginBottom: "1.5rem"
+  }
+};
+
+type Props = {
+  type: "plugin" | "feature",
+  item: InfoItem,
+
+  // context props
+  classes: any,
+  t: string => string
+};
+
+class InfoBox extends React.Component<Props> {
+
+  renderBody = () => {
+    const { item, t } = this.props;
+
+    const bodyClasses = classNames("media-content", "content", this.props.classes.content);
+    const title = item ? item.title : t("login.loading");
+    const summary = item ? item.summary : t("login.loading");
+
+    return (
+      <div className={bodyClasses}>
+        <h4 className="has-text-link">{title}</h4>
+        <p>{summary}</p>
+      </div>
+    );
+
+  };
+
+  render() {
+    const { item, type, classes, t } = this.props;
+    const icon = type === "plugin" ? "puzzle-piece" : "star";
+    return (
+      <a href={item._links.self.href} className={classes.link}>
+        <div className="box media">
+          <figure className="media-left">
+            <div
+              className={classNames("image", "box", "has-background-info", "has-text-white", "has-text-weight-bold", classes.image)}>
+              <i className={classNames("fas", "fa-" + icon, "fa-2x", classes.icon)}/>
+              <div className={classNames("is-size-4", classes.label)}>{t("login." + type)}</div>
+              <div className={classNames("is-size-4")}>{t("login.tip")}</div>
+            </div>
+          </figure>
+          {this.renderBody()}
+        </div>
+      </a>
+    );
+  }
+
+}
+
+export default injectSheet(styles)(translate("commons")(InfoBox));
+
+

scm-ui/ui-webapp/src/components/InfoItem.js

@@ -0,0 +1,8 @@
+// @flow
+import type { Link } from "@scm-manager/ui-types";
+
+export type InfoItem = {
+  title: string,
+  summary: string,
+  _links: {[string]: Link}
+};

scm-ui/ui-webapp/src/components/LoginForm.js

@@ -0,0 +1,120 @@
+//@flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Image, ErrorNotification, InputField, SubmitButton, UnauthorizedError } from "@scm-manager/ui-components";
+import classNames from "classnames";
+import injectSheet from "react-jss";
+
+const styles = {
+  avatar: {
+    marginTop: "-70px",
+    paddingBottom: "20px"
+  },
+  avatarImage: {
+    border: "1px solid lightgray",
+    padding: "5px",
+    background: "#fff",
+    borderRadius: "50%",
+    width: "128px",
+    height: "128px"
+  },
+  avatarSpacing: {
+    marginTop: "5rem"
+  }
+};
+
+type Props = {
+  error?: Error,
+  loading: boolean,
+  loginHandler: (username: string, password: string) => void,
+
+  // context props
+  t: string => string,
+  classes: any
+};
+
+type State = {
+  username: string,
+  password: string
+};
+
+class LoginForm extends React.Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = { username: "", password: "" };
+  }
+
+  handleSubmit = (event: Event) => {
+    event.preventDefault();
+    if (this.isValid()) {
+      this.props.loginHandler(
+        this.state.username,
+        this.state.password
+      );
+    }
+  };
+
+  handleUsernameChange = (value: string) => {
+    this.setState({ username: value });
+  };
+
+  handlePasswordChange = (value: string) => {
+    this.setState({ password: value });
+  };
+
+  isValid() {
+    return this.state.username && this.state.password;
+  }
+
+  areCredentialsInvalid() {
+    const { t, error } = this.props;
+    if (error instanceof UnauthorizedError) {
+      return new Error(t("errorNotification.wrongLoginCredentials"));
+    } else {
+      return error;
+    }
+  }
+
+  render() {
+    const { loading, classes, t } = this.props;
+    return (
+      <div className="column is-4 box has-text-centered has-background-white-ter">
+        <h3 className="title">{t("login.title")}</h3>
+        <p className="subtitle">{t("login.subtitle")}</p>
+        <div className={classNames("box", classes.avatarSpacing)}>
+          <figure className={classes.avatar}>
+            <Image
+              className={classes.avatarImage}
+              src="/images/blib.jpg"
+              alt={t("login.logo-alt")}
+            />
+          </figure>
+          <ErrorNotification error={this.areCredentialsInvalid()}/>
+          <form onSubmit={this.handleSubmit}>
+            <InputField
+              placeholder={t("login.username-placeholder")}
+              autofocus={true}
+              onChange={this.handleUsernameChange}
+            />
+            <InputField
+              placeholder={t("login.password-placeholder")}
+              type="password"
+              onChange={this.handlePasswordChange}
+            />
+            <SubmitButton
+              label={t("login.submit")}
+              fullWidth={true}
+              loading={loading}
+            />
+          </form>
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default injectSheet(styles)(translate("commons")(LoginForm));
+
+

scm-ui/ui-webapp/src/components/LoginInfo.js

@@ -0,0 +1,97 @@
+//@flow
+import React from "react";
+import InfoBox from "./InfoBox";
+import type { InfoItem } from "./InfoItem";
+import LoginForm from "./LoginForm";
+import { Loading } from "@scm-manager/ui-components";
+
+type Props = {
+  loginInfoLink?: string,
+  loading?: boolean,
+  error?: Error,
+  loginHandler: (username: string, password: string) => void,
+};
+
+type LoginInfoResponse = {
+  plugin?: InfoItem,
+  feature?: InfoItem
+};
+
+type State = {
+  info?: LoginInfoResponse,
+  loading?: boolean,
+};
+
+class LoginInfo extends React.Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      loading: !!props.loginInfoLink
+    };
+  }
+
+  fetchLoginInfo = (url: string) => {
+    return fetch(url)
+      .then(response => response.json())
+      .then(info => {
+        this.setState({
+          info,
+          loading: false
+        });
+      });
+  };
+
+  timeout = (ms: number, promise: Promise<any>) => {
+    return new Promise<LoginInfoResponse>((resolve, reject) => {
+      setTimeout(() => {
+        reject(new Error("timeout during fetch of login info"));
+      }, ms);
+      promise.then(resolve, reject);
+    });
+  };
+
+  componentDidMount() {
+    const { loginInfoLink } = this.props;
+    if (!loginInfoLink) {
+      return;
+    }
+    this.timeout(1000, this.fetchLoginInfo(loginInfoLink))
+      .catch(() => {
+        this.setState({
+          loading: false
+        });
+      });
+  }
+
+  createInfoPanel = (info: LoginInfoResponse) => (
+    <div className="column is-7 is-offset-1 is-paddingless">
+      <InfoBox item={info.feature} type="feature" />
+      <InfoBox item={info.plugin} type="plugin" />
+    </div>
+  );
+
+  render() {
+    const { info, loading } = this.state;
+    if (loading) {
+      return <Loading/>;
+    }
+
+    let infoPanel;
+    if (info) {
+      infoPanel = this.createInfoPanel(info);
+    }
+
+    return (
+      <>
+        <LoginForm {...this.props} />
+        {infoPanel}
+      </>
+    );
+  }
+
+}
+
+export default LoginInfo;
+
+