[next] Install (#1957)

* Wip

* Adding Wizard and initial step <3

* Wip

* Adding more steps to the Install Wizard

* Mantaining state across steps

* Adding Steps

* Step Component

* wip

* feat: improved logging

* feat: added tenant install route

* Progress

* Refactor

* Adding rest install mutation

* Wip

* Done

* Addding snapshots

* URL validators

* Adding validation for url, and final step

* Header component and main variants

* fix: resolved router

* fix: corrected spec for prop

* fix: updated test snapshot

* Translations

* Translations

* Adding extra validation

* prefixing events with On - onSaveData

* prefixing events with On - onSaveData

* Adding translations, and colors from the palette

* Centering steps

* Ready

* feat: added production redirects

* fix: fixes during production

* fix: removed dead code

* Placeholder translations

* removing submit from cancel

* Adding a description for the URL field

* typo

* Refactor and renaming

* Using white as var

* Refactor and renaming

* feat: use new palette colors

* fix: extracted styles

* Adding await to avoid race condition with setState :)

* lint

* feat: added urls

* fix: wizard leaking styles

* fix: simplify icon style

* fix: adjust global body css to remove padding to allow seamless integration

* fix: types and small refactors

* fix: correctly filter wizard children

* refactor: simplify step containers

* fix: better typecheck

* test: remove obsolete snapshots

* fix: don't export FormProps

src/core/client/framework/helpers/index.ts

@@ -1,2 +1,3 @@
 export { default as getMe } from "./getMe";
 export { default as getURLWithCommentID } from "./getURLWithCommentID";
+export { default as urls } from "./urls";

src/core/client/framework/helpers/urls.tsx

@@ -0,0 +1,15 @@
+export default (process.env.NODE_ENV !== "development"
+  ? {
+      admin: "/admin",
+      embed: {
+        stream: "/embed/stream",
+        auth: "/embed/auth",
+      },
+    }
+  : {
+      admin: "/admin.html",
+      embed: {
+        stream: "/stream.html",
+        auth: "/auth.html",
+      },
+    });

src/core/client/framework/lib/messages.tsx

@@ -53,3 +53,9 @@ export const PASSWORDS_DO_NOT_MATCH = () => (
     <span>Passwords do not match. Try again.</span>
   </Localized>
 );
+
+export const INVALID_URL = () => (
+  <Localized id="framework-validation-invalidURL">
+    <span>Invalid URL</span>
+  </Localized>
+);

src/core/client/framework/lib/validation.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from "react";
 import {
   INVALID_CHARACTERS,
   INVALID_EMAIL,
+  INVALID_URL,
   PASSWORD_TOO_SHORT,
   PASSWORDS_DO_NOT_MATCH,
   USERNAME_TOO_LONG,
@@ -56,6 +57,17 @@ export const validateUsernameCharacters = createValidator(
   INVALID_CHARACTERS()
 );
 
+/**
+ * validateURL is a Validator that checks that the URL only contains valid characters.
+ */
+export const validateURL = createValidator(
+  v =>
+    /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/.test(
+      v
+    ),
+  INVALID_URL()
+);
+
 /**
  * validateUsernameMinLength is a Validator that checks that the username has a min length of characters
  */

src/core/client/framework/rest/index.ts

@@ -1,3 +1,4 @@
 export { default as signIn, SignInInput } from "./signIn";
 export { default as signUp, SignUpInput } from "./signUp";
 export { default as signOut } from "./signOut";
+export { default as install, InstallInput } from "./install";

src/core/client/framework/rest/install.ts

@@ -0,0 +1,22 @@
+import { RestClient } from "../lib/rest";
+
+export interface InstallInput {
+  tenant: {
+    organizationName: string;
+    organizationContactEmail: string;
+    organizationURL: string;
+    domains: string[];
+  };
+  user: {
+    username: string;
+    password: string;
+    email: string;
+  };
+}
+
+export default function install(rest: RestClient, input: InstallInput) {
+  return rest.fetch("/tenant/install", {
+    method: "POST",
+    body: input,
+  });
+}