From 21f6879429a62c9b28a9d4987c0cde9da5468a1d Mon Sep 17 00:00:00 2001
From: hi_go <me@clutte.red>
Date: Fri, 27 Jan 2023 00:45:28 +0900
Subject: [PATCH] Add `Form` tag into `AuthInput`

---
 src/Components/AuthInput.tsx | 96 +++++++++++++++++++++---------------
 src/main.tsx                 |  1 -
 2 files changed, 55 insertions(+), 42 deletions(-)

diff --git a/src/Components/AuthInput.tsx b/src/Components/AuthInput.tsx
index 74877a0..8f79dea 100644
--- a/src/Components/AuthInput.tsx
+++ b/src/Components/AuthInput.tsx
@@ -11,7 +11,8 @@ export class AuthInput extends React.Component<{
     dbId: string,
     isAuthButtonEnable: boolean,
     isAuthFailed: boolean,
-    isOpen: boolean
+    isOpen: boolean,
+    isLoading: boolean,
 }> {
 
     constructor(props: any) {
@@ -22,6 +23,7 @@ export class AuthInput extends React.Component<{
             isAuthButtonEnable: this.checkIsAuthButtonEnable(this.props.token, this.props.dbId),
             isAuthFailed: false,
             isOpen: true,
+            isLoading: false,
         };
     }
     render() {
@@ -38,52 +40,59 @@ export class AuthInput extends React.Component<{
                 title={'Authentication Required'}
                 icon={'info-sign'}
             >
-                <div className={Classes.DIALOG_BODY}>
-                    <p>
-                        <strong>To use this application, authentication on Notion is required first.</strong>
+                <form>
+                    <div className={Classes.DIALOG_BODY}>
+                        <p>
+                            <strong>To use this application, authentication on Notion is required first.</strong>
+                        </p>
                         <ol>
                             <li>Refer to <strong><a href="https://developers.notion.com/docs/create-a-notion-integration" target="_blank">this page</a></strong> and create an internal integration.</li>
                             <li>Enter the <strong>Integration Token</strong> and <strong>Database ID</strong> you obtained.</li>
                             <li>Press "Authenticate" button.</li>
                         </ol>
-                    </p>
-                    <FormGroup
-                        label="Integration Token"
-                        labelFor="text-input"
-                        labelInfo="(required)"
-                    >
-                        <InputGroup
-                            id="text-input"
-                            placeholder="Integration Token"
-                            value={this.state.token}
-                            onChange={this.handleChangeToken}
-                            intent={this.state.isAuthFailed ? Intent.DANGER : Intent.NONE}
-                        />
-                    </FormGroup>
+                        <FormGroup
+                            label="Integration Token"
+                            labelFor="token-input"
+                            labelInfo="(required)"
+                        >
+                            <InputGroup
+                                id="token-input"
+                                placeholder="Integration Token"
+                                value={this.state.token}
+                                disabled={this.state.isLoading}
+                                onChange={this.handleChangeToken}
+                                intent={this.state.isAuthFailed ? Intent.DANGER : Intent.NONE}
+                            />
+                        </FormGroup>
 
-                    <FormGroup
-                        label="Database ID"
-                        labelFor="text-input"
-                        labelInfo="(required)"
-                    >
-                        <InputGroup
-                            id="text-input"
-                            placeholder="Database ID"
-                            value={this.state.dbId}
-                            onChange={this.handleChangeDbId}
-                            intent={this.state.isAuthFailed ? Intent.DANGER : Intent.NONE}
-                        />
-                    </FormGroup>
-                </div>
-                <div className={Classes.DIALOG_FOOTER}>
-                    <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-                        <Button
-                            intent={'primary'}
-                            disabled={!this.state.isAuthButtonEnable}
-                            onClick={this.handleClickAuthButton}
-                        >Authenticate</Button>
+                        <FormGroup
+                            label="Database ID"
+                            labelFor="dbid-input"
+                            labelInfo="(required)"
+                        >
+                            <InputGroup
+                                id="dbid-input"
+                                placeholder="Database ID"
+                                value={this.state.dbId}
+                                disabled={this.state.isLoading}
+                                onChange={this.handleChangeDbId}
+                                intent={this.state.isAuthFailed ? Intent.DANGER : Intent.NONE}
+                            />
+                        </FormGroup>
                     </div>
-                </div>
+                    <div className={Classes.DIALOG_FOOTER}>
+                        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+                            <Button
+                                id="authenticate-button"
+                                intent={'primary'}
+                                loading={this.state.isLoading}
+                                disabled={!this.state.isAuthButtonEnable}
+                                onClick={this.handleClickAuthButton}
+                                type="submit"
+                            >Authenticate</Button>
+                        </div>
+                    </div>
+                </form>
             </Dialog>
         );
     }
@@ -104,7 +113,10 @@ export class AuthInput extends React.Component<{
         return token !== '' && dbId !== '';
     }
 
-    private handleClickAuthButton = () => {
+    private handleClickAuthButton = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        event.preventDefault();
+
+        this.setState({ isLoading: true });
         const notion = new NotionHandler(this.state.token, this.state.dbId);
         notion.verifyConnectivity().then((result) => {
             if (result.isOk) {
@@ -123,6 +135,8 @@ export class AuthInput extends React.Component<{
                 });
                 this.setState({ isAuthFailed: true });
             }
+        }).finally(()=>{
+            this.setState({ isLoading: false });
         });
     }
 
diff --git a/src/main.tsx b/src/main.tsx
index f7ea218..c38e49c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,6 @@
 import ReactDOM from "react-dom/client";
 import { App } from "./App";
 import "./style.css";
-//import { dbId, token } from "./TOKEN";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   //Commented out because `componentDidMount` is called twice if `React.StrictMode` is enabled.