Fix labels on auth forms

packages/app/components/auth/acceptRules/AcceptRules.tsx

@@ -1,10 +1,11 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './AcceptRulesBody';
 
 const messages = defineMessages({
     title: 'User Agreement',
-    accept: 'Accept',
     declineAndLogout: 'Decline and logout',
 });
 
@@ -14,7 +15,7 @@ export default factory({
     footer: {
         color: 'darkBlue',
         autoFocus: true,
-        label: messages.accept,
+        children: <Message key="accept" defaultMessage="Accept" />,
     },
     links: {
         label: messages.declineAndLogout,

packages/app/components/auth/activation/Activation.tsx

@@ -1,10 +1,11 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './ActivationBody';
 
 const messages = defineMessages({
     accountActivationTitle: 'Account activation',
-    confirmEmail: 'Confirm E‑mail',
     didNotReceivedEmail: 'Did not received E‑mail?',
 });
 
@@ -13,7 +14,7 @@ export default factory({
     body: Body,
     footer: {
         color: 'blue',
-        label: messages.confirmEmail,
+        children: <Message key="confirmEmail" defaultMessage="Confirm E‑mail" />,
     },
     links: {
         label: messages.didNotReceivedEmail,

packages/app/components/auth/chooseAccount/ChooseAccount.tsx

@@ -1,10 +1,10 @@
-import { defineMessages } from 'react-intl';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './ChooseAccountBody';
 
 const messages = defineMessages({
     chooseAccountTitle: 'Choose an account',
-    addAccount: 'Log into another account',
     logoutAll: 'Log out from all accounts',
 });
 
@@ -12,7 +12,7 @@ export default factory({
     title: messages.chooseAccountTitle,
     body: Body,
     footer: {
-        label: messages.addAccount,
+        children: <Message key="addAccount" defaultMessage="Log into another account" />,
     },
     links: [
         {

packages/app/components/auth/factory.tsx

@@ -1,9 +1,10 @@
 import React, { ComponentProps, ComponentType } from 'react';
+import { MessageDescriptor } from 'react-intl';
+
 import { Button } from 'app/components/ui/form';
 import RejectionLink from 'app/components/auth/RejectionLink';
 import AuthTitle from 'app/components/auth/AuthTitle';
-import { MessageDescriptor } from 'react-intl';
-import { Color } from 'app/components/ui';
+
 import BaseAuthBody from './BaseAuthBody';
 
 export type Factory = () => {
@@ -17,11 +18,7 @@ type RejectionLinkProps = ComponentProps<typeof RejectionLink>;
 interface FactoryParams {
     title: MessageDescriptor;
     body: typeof BaseAuthBody;
-    footer: {
-        color?: Color;
-        label: string | MessageDescriptor;
-        autoFocus?: boolean;
-    };
+    footer: Omit<ComponentProps<typeof Button>, 'type'>;
     links?: RejectionLinkProps | Array<RejectionLinkProps>;
 }
 

packages/app/components/auth/forgotPassword/ForgotPassword.tsx

@@ -1,10 +1,11 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './ForgotPasswordBody';
 
 const messages = defineMessages({
     title: 'Forgot password',
-    sendMail: 'Send mail',
     alreadyHaveCode: 'Already have a code',
 });
 
@@ -14,7 +15,7 @@ export default factory({
     footer: {
         color: 'lightViolet',
         autoFocus: true,
-        label: messages.sendMail,
+        children: <Message key="sendMail" defaultMessage="Send mail" />,
     },
     links: {
         label: messages.alreadyHaveCode,

packages/app/components/auth/login/Login.tsx

@@ -1,11 +1,12 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './LoginBody';
 
 const messages = defineMessages({
     createNewAccount: 'Create new account',
     loginTitle: 'Sign in',
-    next: 'Next',
 });
 
 export default factory({
@@ -13,7 +14,7 @@ export default factory({
     body: Body,
     footer: {
         color: 'green',
-        label: messages.next,
+        children: <Message key="next" defaultMessage="Next" />,
     },
     links: {
         isAvailable: (context) => !context.user.isGuest,

packages/app/components/auth/mfa/Mfa.tsx

@@ -1,10 +1,11 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './MfaBody';
 
 const messages = defineMessages({
     enterTotp: 'Enter code',
-    signInButton: 'Sign in',
 });
 
 export default factory({
@@ -12,6 +13,6 @@ export default factory({
     body: Body,
     footer: {
         color: 'green',
-        label: messages.signInButton,
+        children: <Message key="signInButton" defaultMessage="Sign in" />,
     },
 });

packages/app/components/auth/password/Password.tsx

@@ -1,10 +1,11 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './PasswordBody';
 
 const messages = defineMessages({
     passwordTitle: 'Enter password',
-    signInButton: 'Sign in',
     forgotPassword: 'Forgot password',
 });
 
@@ -13,7 +14,7 @@ export default factory({
     body: Body,
     footer: {
         color: 'green',
-        label: messages.signInButton,
+        children: <Message key="signInButton" defaultMessage="Sign in" />,
     },
     links: {
         label: messages.forgotPassword,

packages/app/components/auth/permissions/Permissions.tsx

@@ -1,11 +1,12 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './PermissionsBody';
 
 const messages = defineMessages({
     permissionsTitle: 'Application permissions',
     decline: 'Decline',
-    approve: 'Approve',
 });
 
 export default factory({
@@ -14,7 +15,7 @@ export default factory({
     footer: {
         color: 'orange',
         autoFocus: true,
-        label: messages.approve,
+        children: <Message key="approve" defaultMessage="Approve" />,
     },
     links: {
         label: messages.decline,

packages/app/components/auth/recoverPassword/RecoverPassword.tsx

@@ -1,11 +1,12 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './RecoverPasswordBody';
 
 const messages = defineMessages({
     title: 'Restore password',
     contactSupport: 'Contact support',
-    change: 'Change password',
 });
 
 export default factory({
@@ -13,7 +14,7 @@ export default factory({
     body: Body,
     footer: {
         color: 'lightViolet',
-        label: messages.change,
+        children: <Message key="change" defaultMessage="Change password" />,
     },
     links: {
         label: messages.contactSupport,

packages/app/components/auth/register/Register.tsx

@@ -1,10 +1,11 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './RegisterBody';
 
 const messages = defineMessages({
     registerTitle: 'Sign Up',
-    signUpButton: 'Register',
     didNotReceivedEmail: 'Did not received E‑mail?',
     alreadyHaveCode: 'Already have a code',
 });
@@ -14,7 +15,7 @@ export default factory({
     body: Body,
     footer: {
         color: 'blue',
-        label: messages.signUpButton,
+        children: <Message key="signUpButton" defaultMessage="Register" />,
     },
     links: [
         {

packages/app/components/auth/resendActivation/ResendActivation.tsx

@@ -1,10 +1,11 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './ResendActivationBody';
 
 const messages = defineMessages({
     title: 'Did not received an E‑mail',
-    sendNewEmail: 'Send new E‑mail',
     alreadyHaveCode: 'Already have a code',
 });
 
@@ -13,7 +14,7 @@ export default factory({
     body: Body,
     footer: {
         color: 'blue',
-        label: messages.sendNewEmail,
+        children: <Message key="sendNewEmail" defaultMessage="Send new E‑mail" />,
     },
     links: {
         label: messages.alreadyHaveCode,