From f9dadd31e5518c427a7f0257311685a35346b390 Mon Sep 17 00:00:00 2001
From: Koen Kanters <koenkanters94@gmail.com>
Date: Thu, 3 Apr 2025 20:35:24 +0200
Subject: [PATCH] Revert "feat: Use modal for authentication (#2443)"

This reverts commit 627da6ccf9755f944e93eabe5eff5a96a13c95d6.
---
 src/Main.tsx                                  |  3 -
 src/components/modal/components/AuthModal.tsx | 55 -------------------
 src/ws-client.ts                              | 37 +++++--------
 3 files changed, 15 insertions(+), 80 deletions(-)
 delete mode 100644 src/components/modal/components/AuthModal.tsx

diff --git a/src/Main.tsx b/src/Main.tsx
index 6311d03a4..f750b1855 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -52,8 +52,6 @@ const ConnectedDashboardPage = lazy(() =>
     import('./components/dashboard-page/Dashboard').then((module) => ({ default: module.ConnectedDashboardPage })),
 );
 
-import { AuthForm } from './components/modal/components/AuthModal';
-
 export function Main() {
     const { theme } = store.getState();
     return (
@@ -61,7 +59,6 @@ export function Main() {
             <ReactNotifications />
             <I18nextProvider i18n={i18n}>
                 <NiceModal.Provider>
-                    <AuthForm id="auth-form" onAuth={() => null} />
                     <Provider store={store}>
                         <ThemeSwitcherProvider
                             themeMap={{
diff --git a/src/components/modal/components/AuthModal.tsx b/src/components/modal/components/AuthModal.tsx
deleted file mode 100644
index 529e2ba12..000000000
--- a/src/components/modal/components/AuthModal.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-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>
-    );
-});
diff --git a/src/ws-client.ts b/src/ws-client.ts
index b56b791be..302ff125a 100644
--- a/src/ws-client.ts
+++ b/src/ws-client.ts
@@ -9,7 +9,6 @@ import {
     stringifyWithPreservingUndefinedAsNull,
 } from './utils';
 
-import NiceModal from '@ebay/nice-modal-react';
 import { Store } from 'react-notifications-component';
 import keyBy from 'lodash/keyBy';
 
@@ -114,27 +113,21 @@ class Api {
         }
     }
 
-    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;
+    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);
                 }
-                url.searchParams.append("token", token);
             }
-            resolve(url.toString());
-        });
-
-        return promise;
+            url.searchParams.append("token", token);
+        }
+        return url.toString();
     }
 
     connect(): void {
@@ -284,7 +277,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);
-            showNotify('error', "Unauthorized", false);
+            NotificationManager.error("Unauthorized");
             setTimeout(() => {
                 window.location.reload();
             }, 1000);
@@ -303,7 +296,7 @@ class Api {
                 this.processDeviceStateMessage(data);
             }
         } catch (e) {
-            showNotify('error', e.message, false);
+            NotificationManager.error(e.message);
             console.error(event.data);
         }