feat: use new design and add user flows as dummy pages WD-8469

Signed-off-by: David Edler <[email protected]>
canonical · Jan 29, 2024 · f8f98c1 · f8f98c1
1 parent 18e2ab8
commit f8f98c1
Show file tree

Hide file tree

Showing 37 changed files with 2,416 additions and 1,190 deletions.
diff --git a/rockcraft.yaml b/rockcraft.yaml
@@ -1,7 +1,7 @@
 name: identity-platform-login-ui
 
 base: bare
-build-base: ubuntu:22.04
+build-base: ubuntu@22.04
 version: '0.11.3' # x-release-please-version
 summary: Canonical Identity platform login UI
 description: |

diff --git a/ui/components/Flow.tsx b/ui/components/Flow.tsx
@@ -162,7 +162,7 @@ export class Flow<T extends Values> extends Component<Props<T>, State<T>> {
                         [getNodeId(node)]: value,
                       },
                     }),
-                    resolve
+                    resolve,
                   );
                 })
               }

diff --git a/ui/components/Logo.tsx b/ui/components/Logo.tsx
diff --git a/ui/components/NodeInputSubmit.tsx b/ui/components/NodeInputSubmit.tsx
@@ -9,15 +9,59 @@ export const NodeInputSubmit: FC<NodeInputProps> = ({
   setValue,
   disabled,
   dispatchSubmit,
-}) => (
-  <Button
-    onClick={async (e) => {
-      // On click, we set this value, and once set, dispatch the submission!
-      await setValue(attributes.value as string).then(() => dispatchSubmit(e));
-    }}
-    disabled={attributes.disabled || disabled}
-    className="login-button"
-  >
-    {getNodeLabel(node)}
-  </Button>
-);
+}) => {
+  const getProviderImage = (value: string) => {
+    if (value.toLowerCase().startsWith("auth0")) {
+      return "logos/Auth0.svg";
+    }
+    if (value.toLowerCase().startsWith("github")) {
+      return "logos/Github.svg";
+    }
+    if (value.toLowerCase().startsWith("google")) {
+      return "logos/Google.svg";
+    }
+    if (value.toLowerCase().startsWith("microsoft")) {
+      return "logos/Microsoft.svg";
+    }
+    if (value.toLowerCase().startsWith("okta")) {
+      return "logos/Okta.svg";
+    }
+    if (value.toLowerCase().startsWith("ping")) {
+      return "logos/Ping.svg";
+    }
+    return "";
+  };
+
+  const label = getNodeLabel(node);
+  const isProvider = attributes.name === "provider";
+  const provider = attributes.value as string;
+  const image = getProviderImage(provider);
+
+  return (
+    <Button
+      onClick={async (e) => {
+        // On click, we set this value, and once set, dispatch the submission!
+        await setValue(attributes.value as string).then(() =>
+          dispatchSubmit(e),
+        );
+      }}
+      disabled={attributes.disabled || disabled}
+      className="login-button"
+    >
+      {isProvider ? (
+        <>
+          {image && (
+            <img
+              src={image}
+              alt={`${provider} logo`}
+              style={{ marginRight: "0.5rem" }}
+            />
+          )}
+          <span>Sign in with {label}</span>
+        </>
+      ) : (
+        label
+      )}
+    </Button>
+  );
+};
diff --git a/ui/components/NodeText.tsx b/ui/components/NodeText.tsx
@@ -27,7 +27,7 @@ const Content: FC<Props> = ({ attributes }) => {
             {/* Used lookup_secret has ID 1050014 */}
             <code>{text.id === 1050014 ? "Used" : text.text}</code>
           </div>
-        )
+        ),
       );
       return (
         <div

diff --git a/ui/components/PageLayout.tsx b/ui/components/PageLayout.tsx
@@ -0,0 +1,42 @@
+import { Card, Col, Navigation, Row, Theme } from "@canonical/react-components";
+import React, { FC, ReactNode, useLayoutEffect } from "react";
+import Head from "next/head";
+
+interface Props {
+  children?: ReactNode;
+  title: string;
+}
+
+const PageLayout: FC<Props> = ({ children, title }) => {
+  useLayoutEffect(() => {
+    document.querySelector("body")?.classList.add("is-paper");
+  });
+
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+      </Head>
+      <Row className="p-strip page-row">
+        <Col emptyLarge={4} size={6}>
+          <Card className="u-no-padding page-card">
+            <Navigation
+              logo={{
+                src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+                title: "Canonical",
+                url: `/`,
+              }}
+              theme={Theme.DARK}
+            />
+            <div className="p-card__inner page-inner">
+              <h1 className="p-heading--4">{title}</h1>
+              <div>{children}</div>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+export default PageLayout;
diff --git a/ui/components/Password.tsx b/ui/components/Password.tsx
@@ -0,0 +1,91 @@
+import React, { FC } from "react";
+import { Input } from "@canonical/react-components";
+import PasswordCheck from "./PasswordCheck";
+
+export type PasswordCheckType = "lowercase" | "uppercase" | "number" | "length";
+
+type Props = {
+  checks: PasswordCheckType[];
+  password: string;
+  setPassword: (password: string) => void;
+  isValid: boolean;
+  setValid: (isValid: boolean) => void;
+  label?: string;
+};
+
+const Password: FC<Props> = ({
+  checks,
+  password,
+  setPassword,
+  isValid,
+  setValid,
+  label = "Password",
+}) => {
+  const [confirmation, setConfirmation] = React.useState("");
+  const [hasPassBlur, setPasswordBlurred] = React.useState(false);
+  const [hasConfirmBlur, setConfirmationBlurred] = React.useState(false);
+
+  const getStatus = (check: PasswordCheckType) => {
+    if (!hasPassBlur) {
+      return "neutral";
+    }
+
+    switch (check) {
+      case "lowercase":
+        return /[a-z]/.test(password) ? "success" : "error";
+      case "uppercase":
+        return /[A-Z]/.test(password) ? "success" : "error";
+      case "number":
+        return /[0-9]/.test(password) ? "success" : "error";
+      case "length":
+        return password.length >= 8 ? "success" : "error";
+    }
+  };
+
+  const isCheckFailed = checks.some((check) => getStatus(check) === "error");
+  const isMismatch = hasConfirmBlur && password !== confirmation;
+
+  const localValid = hasPassBlur && !isCheckFailed && password === confirmation;
+  if (isValid !== localValid) {
+    setValid(localValid);
+  }
+
+  return (
+    <>
+      <Input
+        id="password"
+        name="password"
+        type="password"
+        label={label}
+        placeholder="Your password"
+        onBlur={() => setPasswordBlurred(true)}
+        onChange={(e) => setPassword(e.target.value)}
+        value={password}
+        help={checks.length > 0 && "Password must contain"}
+      />
+      {checks.map((check) => {
+        return (
+          <PasswordCheck key={check} check={check} status={getStatus(check)} />
+        );
+      })}
+      <Input
+        id="passwordConfirm"
+        name="passwordConfirm"
+        type="password"
+        label={`Confirm ${label}`}
+        placeholder="Your password"
+        onBlur={() => setConfirmationBlurred(true)}
+        onChange={(e) => setConfirmation(e.target.value)}
+        error={
+          isCheckFailed
+            ? "Password does not match requirements"
+            : isMismatch
+              ? "Passwords do not match"
+              : undefined
+        }
+      />
+    </>
+  );
+};
+
+export default Password;
diff --git a/ui/components/PasswordCheck.tsx b/ui/components/PasswordCheck.tsx
@@ -0,0 +1,47 @@
+import React, { FC } from "react";
+import { Icon } from "@canonical/react-components";
+import { PasswordCheckType } from "./Password";
+
+type Props = {
+  check: PasswordCheckType;
+  status: "success" | "error" | "neutral";
+};
+
+const PasswordCheck: FC<Props> = ({ check, status }) => {
+  const getMessage = () => {
+    switch (check) {
+      case "lowercase":
+        return "Lowercase letters (a-z)";
+      case "uppercase":
+        return "Uppercase letters (A-Z)";
+      case "number":
+        return "Number (0-9)";
+      case "length":
+        return "Minimum 8 characters";
+    }
+  };
+
+  switch (status) {
+    case "success":
+      return (
+        <div className="p-form-validation is-success">
+          <p className="p-form-validation__message">{getMessage()}</p>
+        </div>
+      );
+    case "error":
+      return (
+        <div className="p-form-validation is-error">
+          <p className="p-form-validation__message">{getMessage()}</p>
+        </div>
+      );
+    case "neutral":
+      return (
+        <p className="p-text--small u-text--muted">
+          <Icon name="information" />
+          &nbsp;&nbsp;{getMessage()}
+        </p>
+      );
+  }
+};
+
+export default PasswordCheck;
diff --git a/ui/components/helpers.d.ts b/ui/components/helpers.d.ts
@@ -2,15 +2,15 @@ import { UiNode, UiNodeInputAttributes } from "@ory/client";
 import { FormEvent } from "react";
 
 export type ValueSetter = (
-  value: string | number | boolean | undefined
+  value: string | number | boolean | undefined,
 ) => Promise<void>;
 
 export type FormDispatcher = (e: MouseEvent | FormEvent) => Promise<void>;
 
 export interface NodeInputProps {
   node: UiNode;
   attributes: UiNodeInputAttributes;
-  value: any;
+  value: unknown;
   disabled: boolean;
   dispatchSubmit: FormDispatcher;
   setValue: ValueSetter;