fix: ui error when no auth providers configured

Author: Jaskon

frontend/apps/remark42/app/components/auth/auth.messsages.ts

@@ -93,4 +93,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?',
+  },
 });

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'];

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 ? (
               <>