fix: ui error when no auth providers configured

umputun · Sep 16, 2023 · 74fd5a8 · 74fd5a8
1 parent 40a0d7c
commit 74fd5a8
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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 ? (
               <>