feat(auth): Use modal for authentication (#2455)

* feat: Use modal for authentication
fix: Change broken `NotificationManager` calls to `showNotify()`

* fix: Ensure DOM is loaded before API connect

Author: sarthurdev

src/Main.tsx

@@ -1,4 +1,4 @@
-import React, { lazy, Suspense } from 'react';
+import React, { lazy, Suspense, useEffect } from 'react';
 import NiceModal from '@ebay/nice-modal-react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
 import { ReactNotifications } from 'react-notifications-component';
@@ -52,13 +52,23 @@ const ConnectedDashboardPage = lazy(() =>
     import('./components/dashboard-page/Dashboard').then((module) => ({ default: module.ConnectedDashboardPage })),
 );
 
+import { AuthForm } from './components/modal/components/AuthModal';
+
+import api from './ws-client';
+
 export function Main() {
     const { theme } = store.getState();
+
+    useEffect(() => {
+        api.connect();
+    }, []);
+
     return (
         <React.StrictMode>
             <ReactNotifications />
             <I18nextProvider i18n={i18n}>
                 <NiceModal.Provider>
+                    <AuthForm id="auth-form" onAuth={() => null} />
                     <Provider store={store}>
                         <ThemeSwitcherProvider
                             themeMap={{

src/components/modal/components/AuthModal.tsx

@@ -0,0 +1,55 @@
+import React, { ChangeEvent } from 'react';
+import { useInputChange } from '../../../hooks/useInputChange';
+
+import Modal, { ModalBody, ModalFooter, ModalHeader } from '../Modal';
+import NiceModal, { useModal } from '@ebay/nice-modal-react';
+
+type AuthFormProps = {
+    onAuth(token: string): void;
+};
+
+export const AuthForm = NiceModal.create((props: AuthFormProps): JSX.Element => {
+    const { onAuth } = props;
+
+    const modal = useModal();
+
+    const [authForm, handleInputChange] = useInputChange({ token: '' });
+
+    const onLoginClick = async (): Promise<void> => {
+        await onAuth(authForm['token']);
+        modal.remove();
+    };
+
+    const handleKeyDown = async (e): Promise<void> => {
+        if (e.key == 'Enter') {
+            onLoginClick();
+        }
+    };
+
+    return (
+        <Modal isOpen={modal.visible}>
+            <ModalHeader>
+                <h3>Enter Admin Token</h3>
+            </ModalHeader>
+            <ModalBody>
+                <div className="mb-3">
+                    <label className="form-label">Token</label>
+                    <input
+                        name="token"
+                        onChange={handleInputChange as (event: ChangeEvent<HTMLInputElement>) => void}
+                        onKeyDown={handleKeyDown}
+                        type="password"
+                        className="form-control"
+                        autoCapitalize="none"
+                        value={authForm['token']}
+                    />
+                </div>
+            </ModalBody>
+            <ModalFooter>
+                <button type="button" className="btn btn-primary" onClick={onLoginClick}>
+                    Login
+                </button>
+            </ModalFooter>
+        </Modal>
+    );
+});

src/index.tsx

@@ -6,12 +6,8 @@ import './styles/styles.global.scss';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import api from './ws-client';
-
 import { Main } from './Main';
 
-api.connect();
-
 const domNode = document.getElementById('root');
 if (domNode) {
     createRoot(domNode).render(<Main />);

src/ws-client.ts

@@ -9,6 +9,7 @@ import {
     stringifyWithPreservingUndefinedAsNull,
 } from './utils';
 
+import NiceModal from '@ebay/nice-modal-react';
 import { Store } from 'react-notifications-component';
 import keyBy from 'lodash/keyBy';
 
@@ -113,21 +114,27 @@ class Api {
         }
     }
 
-    urlProvider = async () => {
-        const url = new URL(this.url)
-        let token = new URLSearchParams(window.location.search).get("token")
-            ?? local.get<string>(TOKEN_LOCAL_STORAGE_ITEM_NAME);
-        const authRequired = !!local.get(AUTH_FLAG_LOCAL_STORAGE_ITEM_NAME);
-        if (authRequired) {
-            if (!token) {
-                token = prompt("Enter your z2m admin token") as string;
-                if (token) {
-                    local.set(TOKEN_LOCAL_STORAGE_ITEM_NAME, token);
+    urlProvider = async (): Promise<string> => {
+        const promise = new Promise<string>((resolve) => {
+            const url = new URL(this.url)
+            let token = new URLSearchParams(window.location.search).get("token")
+                ?? local.get<string>(TOKEN_LOCAL_STORAGE_ITEM_NAME);
+            const authRequired = !!local.get(AUTH_FLAG_LOCAL_STORAGE_ITEM_NAME);
+            if (authRequired) {
+                if (!token) {
+                    NiceModal.show('auth-form', { onAuth: (token: string) => {
+                        local.set(TOKEN_LOCAL_STORAGE_ITEM_NAME, token);
+                        url.searchParams.append("token", token);
+                        resolve(url.toString());
+                    }});
+                    return;
                 }
+                url.searchParams.append("token", token);
             }
-            url.searchParams.append("token", token);
-        }
-        return url.toString();
+            resolve(url.toString());
+        });
+
+        return promise;
     }
 
     connect(): void {
@@ -277,7 +284,7 @@ class Api {
         if (e.code === UNAUTHORIZED_ERROR_CODE) {
             local.set(AUTH_FLAG_LOCAL_STORAGE_ITEM_NAME, true);
             local.remove(TOKEN_LOCAL_STORAGE_ITEM_NAME);
-            NotificationManager.error("Unauthorized");
+            showNotify('error', "Unauthorized", false);
             setTimeout(() => {
                 window.location.reload();
             }, 1000);
@@ -296,7 +303,7 @@ class Api {
                 this.processDeviceStateMessage(data);
             }
         } catch (e) {
-            NotificationManager.error(e.message);
+            showNotify('error', e.message, false);
             console.error(event.data);
         }