Fix error message on token tab on login

frontend/app/components/auth/auth.spec.tsx

@@ -148,6 +148,7 @@ describe('<Auth/>', () => {
 
     expect(container.querySelector('.spinner')).toBeInTheDocument();
     await waitFor(() => expect(api.emailSignin).toBeCalled());
+    expect(api.emailSignin).toBeCalledWith('email@email.com', 'username');
 
     expect(container.querySelector('.auth-back-button')).toBeInTheDocument();
     expect(container.querySelector('.auth-close-button')).toBeInTheDocument();
@@ -166,7 +167,7 @@ describe('<Auth/>', () => {
     StaticStore.config.auth_providers = ['email'];
     jest.spyOn(api, 'emailSignin').mockImplementationOnce(async () => null);
 
-    const { container } = render(<Auth />);
+    const { container, getByText } = render(<Auth />);
 
     fireEvent.click(container.querySelector('.auth-button')!);
 
@@ -188,6 +189,9 @@ describe('<Auth/>', () => {
     await waitFor(() => expect(utils.getTokenInvalidReason).toBeCalled());
 
     expect(utils.getTokenInvalidReason).toBeCalledWith('token');
+
+    await waitFor(() => expect(getByText('Token is invalid')).toBeInTheDocument());
+    expect(getByText('Token is invalid').getAttribute('class')).toContain('auth-error');
   });
 
   it('should send anonym form', async () => {

frontend/app/components/auth/auth.tsx

@@ -103,20 +103,22 @@ const Auth: FunctionComponent = () => {
   const errorMessage =
     invalidReason !== null && invalidReason in messages ? intl.formatMessage(messages[invalidReason]) : invalidReason;
   const isTokenView = view === 'token';
-  const submitButton = (
-    <Button className="auth-submit" type="submit" disabled={isLoading}>
-      {isLoading ? (
-        <div
-          className={cn('spinner', styles.spinner)}
-          role="presentation"
-          aria-label={intl.formatMessage(messages.loading)}
-        />
-      ) : (
-        intl.formatMessage(isTokenView ? messages.signin : messages.submit)
-      )}
-    </Button>
+  const formFooterJSX = (
+    <>
+      errorMessage && <div className={cn('auth-error', styles.error)}>{errorMessage}</div>
+      <Button className="auth-submit" type="submit" disabled={isLoading}>
+        {isLoading ? (
+          <div
+            className={cn('spinner', styles.spinner)}
+            role="presentation"
+            aria-label={intl.formatMessage(messages.loading)}
+          />
+        ) : (
+          intl.formatMessage(isTokenView ? messages.signin : messages.submit)
+        )}
+      </Button>
+    </>
   );
-
   return (
     <div className={cn('auth', styles.root)}>
       <Button
@@ -188,17 +190,7 @@ const Auth: FunctionComponent = () => {
                     disabled={isLoading}
                   />
                 </div>
-                <Button className="auth-submit" type="submit" disabled={isLoading}>
-                  {isLoading ? (
-                    <div
-                      className={cn('spinner', styles.spinner)}
-                      role="presentation"
-                      aria-label={intl.formatMessage(messages.loading)}
-                    />
-                  ) : (
-                    intl.formatMessage(messages.submit)
-                  )}
-                </Button>
+                {formFooterJSX}
               </>
             ) : (
               <>
@@ -235,7 +227,6 @@ const Auth: FunctionComponent = () => {
                         ))}
                       </div>
                     )}
-
                     <div className={cn('auth-row', styles.row)}>
                       <Input
                         className="auth-input-username"
@@ -261,8 +252,7 @@ const Auth: FunctionComponent = () => {
                       </div>
                     )}
                     <input className={styles.honeypot} type="checkbox" tabIndex={-1} autoComplete="off" />
-                    {errorMessage && <div className={cn('auth-error', styles.error)}>{errorMessage}</div>}
-                    {submitButton}
+                    {formFooterJSX}
                   </>
                 )}
               </>