Check connection

src/editor/CreateConnection.tsx

@@ -1,13 +1,17 @@
-import React from "react";
+import React, { FC } from "react";
 import InputField from "./InputField";
 import { useForm } from "react-hook-form";
-import { Connection, useSetConnection } from "./connection";
+import { Connection } from "./useConnection";
 import "twin.macro";
 import Button from "./Button";
 
+type Props = {
+  setConnection: (connection: Connection) => void;
+  error?: Error;
+  isLoading: boolean;
+};
 
-const CreateConnection = () => {
-  const { setConnection, isLoading, error } = useSetConnection();
+const CreateConnection: FC<Props> = ({ setConnection, error, isLoading }) => {
   const {
     register,
     handleSubmit,
@@ -17,18 +21,18 @@ const CreateConnection = () => {
   return (
     <div tw="p-8 max-w-md">
       <h2 tw="text-2xl font-bold">Create Redmine Connection</h2>
+      {error ? (
+        <p tw="text-red-700">
+          <strong>Error</strong> {error.message}
+        </p>
+      ) : null}
       <form onSubmit={handleSubmit(setConnection)}>
         <div tw="mt-8 grid grid-cols-1 gap-6">
           <InputField
             label="URL"
             {...register("url", { required: true })}
             error={errors.url && "Url is required"}
           />
-          <InputField
-            label="Username"
-            {...register("username", { required: true })}
-            error={errors.username && "Username is required"}
-          />
           <InputField
             label="API Key"
             {...register("apiKey", { required: true })}

src/editor/IssueEditor.tsx

@@ -1,16 +1,16 @@
 import React from "react";
-import { useConnection } from "./connection";
+import useConnection from "./useConnection";
 import CreateConnection from "./CreateConnection";
 
 const IssueEditor = () => {
-  const { connection, isLoading } = useConnection();
+  const { connection, isLoading, update } = useConnection();
 
   if (isLoading) {
     return <p>Loading ...</p>;
   }
 
   if (!connection) {
-    return <CreateConnection />;
+    return <CreateConnection {...update} />;
   }
 
   return (

src/editor/useConnection.ts

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+
+export type Connection = {
+  url: string;
+  apiKey: string;
+};
+
+const useConnection = () => {
+  const [connection, setConnection] = useState<Connection>();
+  const [isLoading, setIsLoading] = useState(true);
+  const [updateIsLoading, setUpdateIsLoading] = useState(false);
+  const [errorOnUpdate, setErrorOnUpdate] = useState<Error>();
+
+  useEffect(() => {
+    chrome.storage.sync.get("connection", (result) => {
+      if (result.connection) {
+        setConnection(JSON.parse(result.connection));
+      }
+      setIsLoading(false);
+    });
+  }, []);
+
+  const updateConnection = (connection: Connection) => {
+    setUpdateIsLoading(true);
+
+    let meUrl = connection.url;
+    if (!meUrl.endsWith("/")) {
+      meUrl += "/";
+    }
+    meUrl += "my/account.json";
+
+    fetch(meUrl, {
+      headers: {
+        "X-Redmine-API-Key": connection.apiKey,
+      },
+      // do not prompt for basic auth if key authentication failed
+      credentials: "omit"
+    })
+      .then((resp) => {
+        if (!resp.ok) {
+          throw new Error("request failed");
+        }
+      })
+      .then(() => {
+        chrome.storage.sync.set(
+          { connection: JSON.stringify(connection) },
+          () => setConnection(connection)
+        );
+      })
+      .catch(setErrorOnUpdate)
+      .finally(() => setUpdateIsLoading(false));
+  };
+
+  return {
+    connection,
+    isLoading,
+    update: {
+      setConnection: updateConnection,
+      isLoading: updateIsLoading,
+      error: errorOnUpdate,
+    },
+  };
+};
+
+export default useConnection;

static/manifest.json

@@ -20,7 +20,9 @@
     },
     "permissions": [
         "activeTab",
-        "storage"
+        "storage",
+        "http://*/",
+        "https://*/"
     ],
     "manifest_version": 2
 }