From 74fd5a8d3f3400efb7bd8c884763f78606367c40 Mon Sep 17 00:00:00 2001
From: Eugene Orlov <jaskon97@gmail.com>
Date: Fri, 9 Jun 2023 18:14:58 +0200
Subject: [PATCH] fix: ui error when no auth providers configured

---
 .../apps/remark42/app/components/auth/auth.messsages.ts  | 4 ++++
 frontend/apps/remark42/app/components/auth/auth.spec.tsx | 9 +++++++++
 frontend/apps/remark42/app/components/auth/auth.tsx      | 3 +++
 3 files changed, 16 insertions(+)

diff --git a/frontend/apps/remark42/app/components/auth/auth.messsages.ts b/frontend/apps/remark42/app/components/auth/auth.messsages.ts
index 744f9e46d7..08b922a830 100644
--- a/frontend/apps/remark42/app/components/auth/auth.messsages.ts
+++ b/frontend/apps/remark42/app/components/auth/auth.messsages.ts
@@ -65,4 +65,8 @@ export const messages = defineMessages<string>({
     id: 'auth.signout',
     defaultMessage: 'Sign Out',
   },
+  noProviders: {
+    id: 'auth.no-providers',
+    defaultMessage: 'No providers available. May be you forgot to enable them?',
+  },
 });
diff --git a/frontend/apps/remark42/app/components/auth/auth.spec.tsx b/frontend/apps/remark42/app/components/auth/auth.spec.tsx
index 9df6e60597..c6ee639baa 100644
--- a/frontend/apps/remark42/app/components/auth/auth.spec.tsx
+++ b/frontend/apps/remark42/app/components/auth/auth.spec.tsx
@@ -253,6 +253,15 @@ describe('<Auth/>', () => {
     expect(input).toHaveValue(expected);
   });
 
+  it('should show error when no auth providers are configured', () => {
+    StaticStore.config.auth_providers = [];
+
+    const { container } = render(<Auth />);
+
+    fireEvent.click(screen.getByText('Sign In'));
+    expect(container.querySelector('.auth-error')).toBeInTheDocument();
+  });
+
   describe('OAuth providers', () => {
     it('should not set user if unauthorized', async () => {
       StaticStore.config.auth_providers = ['google'];
diff --git a/frontend/apps/remark42/app/components/auth/auth.tsx b/frontend/apps/remark42/app/components/auth/auth.tsx
index 1de4b8a2bf..903e1e673b 100644
--- a/frontend/apps/remark42/app/components/auth/auth.tsx
+++ b/frontend/apps/remark42/app/components/auth/auth.tsx
@@ -201,6 +201,9 @@ export function Auth() {
       </Button>
       {isDropdownShown && (
         <div className={clsx('auth-dropdown', styles.dropdown)} ref={ref}>
+          {!hasOAuthProviders && !hasFormProviders && (
+            <div className={clsx('auth-error', styles.error)}>{intl.formatMessage(messages.noProviders)}</div>
+          )}
           <form className={clsx('auth-form', styles.form)} onSubmit={handleSubmit}>
             {view === 'telegram' && telegramParamsRef.current !== null ? (
               <>