/integrations facelift (#858)

2021-10-12 11:35:44 +02:00
parent 7dc4a55319
commit c3dc18643e
32 changed files with 1259 additions and 716 deletions
@@ -1,4 +1,17 @@
-import React from "react";
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+
+import {
+  DialogHeader,
+  DialogProps,
+  Dialog,
+  DialogContent,
+  DialogClose,
+  DialogFooter,
+} from "@components/Dialog";
+import { Form, TextField } from "@components/form/fields";
+import { Alert } from "@components/ui/Alert";
+import Button from "@components/ui/Button";

 type Props = {
  onSubmit: () => void;
@@ -6,6 +19,95 @@ type Props = {

 export const ADD_APPLE_INTEGRATION_FORM_TITLE = "addAppleIntegration";

+export function AddAppleIntegrationModal(props: DialogProps) {
+  const form = useForm({
+    defaultValues: {
+      username: "",
+      password: "",
+    },
+  });
+  const [errorMessage, setErrorMessage] = useState("");
+  return (
+    <Dialog {...props}>
+      <DialogContent>
+        <DialogHeader
+          title="Connect to Apple Server"
+          subtitle={
+            <>
+              Generate an app specific password to use with Cal.com at{" "}
+              <a
+                className="text-indigo-400"
+                href="https://appleid.apple.com/account/manage"
+                target="_blank"
+                rel="noopener noreferrer">
+                https://appleid.apple.com/account/manage
+              </a>
+              . Your credentials will be stored and encrypted.
+            </>
+          }
+        />
+
+        <Form
+          form={form}
+          onSubmit={form.handleSubmit(async (values) => {
+            setErrorMessage("");
+            const res = await fetch("/api/integrations/apple/add", {
+              method: "POST",
+              body: JSON.stringify(values),
+              headers: {
+                "Content-Type": "application/json",
+              },
+            });
+            const json = await res.json();
+            if (!res.ok) {
+              setErrorMessage(json?.message || "Something went wrong");
+            } else {
+              props.onOpenChange?.(false);
+            }
+          })}>
+          <fieldset className="space-y-2" disabled={form.formState.isSubmitting}>
+            <TextField
+              required
+              type="text"
+              {...form.register("username")}
+              label="Username"
+              placeholder="rickroll"
+            />
+            <TextField
+              required
+              type="password"
+              {...form.register("password")}
+              label="Password"
+              placeholder="•••••••••••••"
+              autoComplete="password"
+            />
+          </fieldset>
+
+          {errorMessage && <Alert severity="error" title={errorMessage} className="my-4" />}
+          <DialogFooter>
+            <DialogClose
+              onClick={() => {
+                props.onOpenChange?.(false);
+              }}
+              asChild>
+              <Button type="button" color="secondary" tabIndex={-1}>
+                Cancel
+              </Button>
+            </DialogClose>
+
+            <Button type="submit" loading={form.formState.isSubmitting}>
+              Save
+            </Button>
+          </DialogFooter>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/**
+ * @deprecated
+ */
 const AddAppleIntegration = React.forwardRef<HTMLFormElement, Props>((props, ref) => {
  const onSubmit = (event) => {
    event.preventDefault();