feat: add api key validity checker call

source/Background/index.ts

@@ -18,6 +18,11 @@ export enum StoreLinks {
   firefox = 'https://addons.mozilla.org/en-US/firefox/addon/kutt/reviews/',
 }
 
+export type ErrorStateProperties = {
+  error: boolean | null;
+  message: string;
+};
+
 type ShortenUrlBodyProperties = {
   target: string;
   password?: string;

source/Options/Form.tsx

@@ -1,11 +1,19 @@
 import {useFormState} from 'react-use-form-state';
 import React, {useState, useEffect} from 'react';
-import tw, {css} from 'twin.macro';
+import tw, {styled} from 'twin.macro';
 
 import {useExtensionSettings} from '../contexts/extension-settings-context';
 import {updateExtensionSettings} from '../util/settings';
+import {CHECK_API_KEY} from '../Background/constants';
+import messageUtil from '../util/mesageUtil';
 import {isValidUrl} from '../util/tabs';
-import {Kutt} from '../Background';
+import {
+  SuccessfulApiKeyCheckProperties,
+  GetUserSettingsBodyProperties,
+  ApiErroredProperties,
+  ErrorStateProperties,
+  Kutt,
+} from '../Background';
 
 import Icon from '../components/Icon';
 
@@ -16,6 +24,23 @@ type OptionsFormValuesProperties = {
   host: string;
 };
 
+const StyledValidateButton = styled.button`
+  ${tw`focus:outline-none hover:text-gray-200 inline-flex items-center px-3 py-1 mt-3 mb-1 text-xs font-semibold text-center text-white duration-300 ease-in-out rounded shadow-lg`}
+
+  background: linear-gradient(to right,rgb(126, 87, 194),rgb(98, 0, 234));
+
+  .validate__icon {
+    ${tw`inline-flex px-0 bg-transparent`}
+
+    svg {
+      ${tw`transition-transform duration-300 ease-in-out`}
+
+      stroke: currentColor;
+      stroke-width: 2.5;
+    }
+  }
+`;
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const onSave = (values: OptionsFormValuesProperties): Promise<any> => {
   // should always return a Promise
@@ -24,7 +49,12 @@ const onSave = (values: OptionsFormValuesProperties): Promise<any> => {
 
 const Form: React.FC = () => {
   const extensionSettingsState = useExtensionSettings()[0];
+  const [submitting, setSubmitting] = useState<boolean>(false);
   const [showApiKey, setShowApiKey] = useState<boolean>(false);
+  const [errored, setErrored] = useState<ErrorStateProperties>({
+    error: null,
+    message: '',
+  });
   const [
     formState,
     {
@@ -102,6 +132,48 @@ const Form: React.FC = () => {
     }
   }
 
+  async function handleApiKeyVerification(): Promise<void> {
+    setSubmitting(true);
+    // request API validation request
+    const apiKeyValidationBody: GetUserSettingsBodyProperties = {
+      apikey: formStateValues.apikey.trim(),
+      hostUrl:
+        (formStateValues.advanced &&
+          formStateValues.host.trim().length > 0 &&
+          formStateValues.host.trim()) ||
+        Kutt.hostUrl,
+    };
+    const response:
+      | SuccessfulApiKeyCheckProperties
+      | ApiErroredProperties = await messageUtil.send(
+      CHECK_API_KEY,
+      apiKeyValidationBody
+    );
+
+    if (!response.error) {
+      // set top-level status
+      setErrored({error: false, message: 'Valid API Key'});
+
+      // Store user account information
+      const {domains, email} = response.data;
+      await updateExtensionSettings({user: {domains, email}});
+    } else {
+      // ---- errored ---- //
+      setErrored({error: true, message: response.message});
+
+      // Delete `user` field from settings
+      await updateExtensionSettings({user: null});
+    }
+
+    // enable validate button
+    setSubmitting(false);
+
+    setTimeout(() => {
+      // Reset status
+      setErrored({error: null, message: ''});
+    }, 1000);
+  }
+
   return (
     <>
       <div tw="mt-4">
@@ -159,26 +231,24 @@ const Form: React.FC = () => {
       </div>
 
       <div>
-        <button
+        <StyledValidateButton
           type="submit"
-          disabled={!true}
-          onClick={(): void => {
-            //
-          }}
-          css={[
-            tw`hover:bg-blue-700 focus:outline-none block px-4 py-2 mt-3 mb-1 text-xs font-semibold text-center text-white bg-purple-700 rounded shadow-lg`,
-
-            css`
-              background: linear-gradient(
-                to right,
-                rgb(126, 87, 194),
-                rgb(98, 0, 234)
-              );
-            `,
-          ]}
+          disabled={submitting}
+          onClick={handleApiKeyVerification}
         >
-          Validate
-        </button>
+          <span tw="ml-2">Validate</span>
+
+          <Icon
+            name={
+              submitting
+                ? 'spinner'
+                : (errored.error !== null &&
+                    ((!errored.error && 'tick') || 'cross')) ||
+                  'zap'
+            }
+            className="icon validate__icon"
+          />
+        </StyledValidateButton>
       </div>
 
       <div tw="flex flex-col mt-6">

source/Popup/Header.tsx

@@ -4,29 +4,26 @@ import tw, {styled} from 'twin.macro';
 import {updateExtensionSettings} from '../util/settings';
 import {CHECK_API_KEY} from '../Background/constants';
 import {
-  useExtensionSettings,
   ExtensionSettingsActionTypes,
+  useExtensionSettings,
 } from '../contexts/extension-settings-context';
 import {openExtOptionsPage} from '../util/tabs';
 import messageUtil from '../util/mesageUtil';
 import {
   SuccessfulApiKeyCheckProperties,
-  ApiErroredProperties,
   GetUserSettingsBodyProperties,
+  ApiErroredProperties,
+  ErrorStateProperties,
 } from '../Background';
 
 import Icon from '../components/Icon';
 
-type ErrorProperties = {
-  error: boolean | null;
-  message: string;
-};
-
 const StyledIconsHolder = styled.div`
   ${tw`flex`}
 
   .icon {
     ${tw`hover:opacity-75 bg-transparent shadow-none`}
+
     height: 34px;
     width: 34px;
   }
@@ -52,7 +49,7 @@ const Header: React.FC = () => {
     extensionSettingsDispatch,
   ] = useExtensionSettings();
   const [loading, setLoading] = useState<boolean>(false);
-  const [errored, setErrored] = useState<ErrorProperties>({
+  const [errored, setErrored] = useState<ErrorStateProperties>({
     error: null,
     message: '',
   });
@@ -121,12 +118,11 @@ const Header: React.FC = () => {
             className="icon refresh__icon"
             title="Refresh"
             name={
-              // eslint-disable-next-line no-nested-ternary
               loading
                 ? 'spinner'
-                : errored && errored.error !== null
-                ? (errored && !errored.error && 'tick') || 'cross'
-                : 'refresh'
+                : (errored.error !== null &&
+                    ((!errored.error && 'tick') || 'cross')) ||
+                  'refresh'
             }
             onClick={fetchUserDomains}
           />

source/components/Icon/Cross.tsx

@@ -7,10 +7,10 @@ const Cross: React.FC = () => {
       width="48"
       height="48"
       fill="none"
-      stroke="#000"
+      stroke="currentColor"
+      strokeWidth={2}
       strokeLinecap="round"
       strokeLinejoin="round"
-      strokeWidth="2"
       viewBox="0 0 24 24"
     >
       <path d="M18 6L6 18" />

source/components/Icon/Icon.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import StarYellow from './StarYellow';
-import ArrowLeft from './ArrowLeft';
 import EyeClosed from './EyeClosed';
 import StarWhite from './StarWhite';
 import Settings from './Settings';
@@ -15,7 +14,6 @@ import Zap from './Zap';
 import Eye from './Eye';
 
 const icons = {
-  arrowleft: ArrowLeft,
   copy: Copy,
   cross: Cross,
   eye: Eye,

source/components/Icon/Settings.tsx

@@ -6,7 +6,7 @@ const Settings: React.FC = () => {
       viewBox="-2 -2 24 24"
       width={24}
       height={24}
-      fill="#b8b8b8"
+      fill="currentColor"
       preserveAspectRatio="xMinYMin"
       className="cog_svg__jam cog_svg__jam-cog"
     >