ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2025-05-31 14:11:58 +05:30
Code Issues Packages Projects Releases Wiki Activity

Remove all *.intl.json files. Move strings to the corresponding views. Implement custom command to build i18n/en.json file

Browse Source
This commit is contained in:
ErickSkrauch
2020-06-04 19:41:27 +03:00
parent 57cf6b3776
commit bf6a76d006
107 changed files with 1122 additions and 972 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/app/components/auth/acceptRules/AcceptRules.intl.json
View File

@@ -1,8 +0,0 @@
{
"title": "User Agreement",
"accept": "Accept",
"declineAndLogout": "Decline and logout",
"description1": "We have updated our {link}.",
"termsOfService": "terms of service",
"description2": "In order to continue using {name} service, you need to accept them."
}

8
packages/app/components/auth/acceptRules/AcceptRules.ts
View File

@@ -1,6 +1,12 @@
import { defineMessages } from 'react-intl';
import factory from '../factory';
import Body from './AcceptRulesBody';
import messages from './AcceptRules.intl.json';
const messages = defineMessages({
title: 'User Agreement',
accept: 'Accept',
declineAndLogout: 'Decline and logout',
});
export default factory({
title: messages.title,

13
packages/app/components/auth/acceptRules/AcceptRulesBody.tsx
View File

@@ -5,10 +5,9 @@ import { Link } from 'react-router-dom';
import icons from 'app/components/ui/icons.scss';
import BaseAuthBody from 'app/components/auth/BaseAuthBody';
import appInfo from 'app/components/auth/appInfo/AppInfo.intl.json';
import appName from 'app/components/auth/appInfo/appName.intl';
import styles from './acceptRules.scss';
import messages from './AcceptRules.intl.json';
export default class AcceptRulesBody extends BaseAuthBody {
static displayName = 'AcceptRulesBody';
@@ -25,20 +24,22 @@ export default class AcceptRulesBody extends BaseAuthBody {
<p className={styles.descriptionText}>
<Message
{...messages.description1}
key="description1"
defaultMessage="We have updated our {link}."
values={{
link: (
<Link to="/rules" target="_blank">
<Message {...messages.termsOfService} />
<Message key="termsOfService" defaultMessage="terms of service" />
</Link>
),
}}
/>
<br />
<Message
{...messages.description2}
key="description2"
defaultMessage="In order to continue using {name} service, you need to accept them."
values={{
name: <Message {...appInfo.appName} />,
name: <Message {...appName} />,
}}
/>
</p>

8
packages/app/components/auth/activation/Activation.intl.json
View File

@@ -1,8 +0,0 @@
{
"accountActivationTitle": "Account activation",
"activationMailWasSent": "Please check {email} for the message with further instructions",
"activationMailWasSentNoEmail": "Please check your E‑mail for the message with further instructions",
"confirmEmail": "Confirm E‑mail",
"didNotReceivedEmail": "Did not received E‑mail?",
"enterTheCode": "Enter the code from E‑mail here"
}

8
packages/app/components/auth/activation/Activation.ts
View File

@@ -1,7 +1,13 @@
import { defineMessages } from 'react-intl';
import factory from '../factory';
import messages from './Activation.intl.json';
import Body from './ActivationBody';
const messages = defineMessages({
accountActivationTitle: 'Account activation',
confirmEmail: 'Confirm E‑mail',
didNotReceivedEmail: 'Did not received E‑mail?',
});
export default factory({
title: messages.accountActivationTitle,
body: Body,

15
packages/app/components/auth/activation/ActivationBody.tsx
View File

@@ -1,12 +1,15 @@
import React from 'react';
import { FormattedMessage as Message } from 'react-intl';
import { defineMessages, FormattedMessage as Message } from 'react-intl';
import { Input } from 'app/components/ui/form';
import BaseAuthBody from 'app/components/auth/BaseAuthBody';
import styles from './activation.scss';
import messages from './Activation.intl.json';
const messages = defineMessages({
enterTheCode: 'Enter the code from E‑mail here',
});
export default class ActivationBody extends BaseAuthBody {
static displayName = 'ActivationBody';
@@ -28,13 +31,17 @@ export default class ActivationBody extends BaseAuthBody {
<div className={styles.descriptionText}>
{email ? (
<Message
{...messages.activationMailWasSent}
key="activationMailWasSent"
defaultMessage="Please check {email} for the message with further instructions"
values={{
email: <b>{email}</b>,
}}
/>
) : (
<Message {...messages.activationMailWasSentNoEmail} />
<Message
key="activationMailWasSentNoEmail"
defaultMessage="Please check your E‑mail for the message with further instructions"
/>
)}
</div>
</div>

7
packages/app/components/auth/appInfo/AppInfo.intl.json
View File

@@ -1,7 +0,0 @@
{
"appName": "Ely Accounts",
"goToAuth": "Go to auth",
"appDescription": "You are on the Ely.by authorization service, that allows you to safely perform any operations on your account. This single entry point for websites and desktop software, including game launchers.",
"useItYourself": "Visit our {link}, to learn how to use this service in you projects.",
"documentation": "documentation"
}

20
packages/app/components/auth/appInfo/AppInfo.tsx
View File

@@ -1,10 +1,14 @@
import React from 'react';
import { FormattedMessage as Message } from 'react-intl';
import { defineMessages, FormattedMessage as Message } from 'react-intl';
import { Button } from 'app/components/ui/form';
import { FooterMenu } from 'app/components/footerMenu';
import appName from './appName.intl';
import styles from './appInfo.scss';
import messages from './AppInfo.intl.json';
const messages = defineMessages({
goToAuth: 'Go to auth',
});
export default class AppInfo extends React.Component<{
name?: string;
@@ -17,7 +21,7 @@ export default class AppInfo extends React.Component<{
return (
<div className={styles.appInfo}>
<div className={styles.logoContainer}>
<h2 className={styles.logo}>{name ? name : <Message {...messages.appName} />}</h2>
<h2 className={styles.logo}>{name ? name : <Message {...appName} />}</h2>
</div>
<div className={styles.descriptionContainer}>
{description ? (
@@ -25,15 +29,19 @@ export default class AppInfo extends React.Component<{
) : (
<div>
<p className={styles.description}>
<Message {...messages.appDescription} />
<Message
key="appDescription"
defaultMessage="You are on the Ely.by authorization service, that allows you to safely perform any operations on your account. This single entry point for websites and desktop software, including game launchers."
/>
</p>
<p className={styles.description}>
<Message
{...messages.useItYourself}
key="useItYourself"
defaultMessage="Visit our {link}, to learn how to use this service in you projects."
values={{
link: (
<a href="http://docs.ely.by/oauth.html">
<Message {...messages.documentation} />
<Message key="documentation" defaultMessage="documentation" />
</a>
),
}}

7
packages/app/components/auth/appInfo/appName.intl.ts Normal file
View File

@@ -0,0 +1,7 @@
import { defineMessages } from 'react-intl';
const { appName } = defineMessages({
appName: 'Ely Accounts',
});
export default appName;

7
packages/app/components/auth/chooseAccount/ChooseAccount.intl.json
View File

@@ -1,7 +0,0 @@
{
"chooseAccountTitle": "Choose an account",
"addAccount": "Log into another account",
"logoutAll": "Log out from all accounts",
"pleaseChooseAccount": "Please select an account you're willing to use",
"pleaseChooseAccountForApp": "Please select an account that you want to use to authorize {appName}"
}

8
packages/app/components/auth/chooseAccount/ChooseAccount.ts
View File

@@ -1,7 +1,13 @@
import { defineMessages } from 'react-intl';
import factory from '../factory';
import messages from './ChooseAccount.intl.json';
import Body from './ChooseAccountBody';
const messages = defineMessages({
chooseAccountTitle: 'Choose an account',
addAccount: 'Log into another account',
logoutAll: 'Log out from all accounts',
});
export default factory({
title: messages.chooseAccountTitle,
body: Body,

9
packages/app/components/auth/chooseAccount/ChooseAccountBody.tsx
View File

@@ -7,7 +7,6 @@ import { AccountSwitcher } from 'app/components/accounts';
import { Account } from 'app/components/accounts/reducer';
import styles from './chooseAccount.scss';
import messages from './ChooseAccount.intl.json';
export default class ChooseAccountBody extends BaseAuthBody {
static displayName = 'ChooseAccountBody';
@@ -23,14 +22,18 @@ export default class ChooseAccountBody extends BaseAuthBody {
<div className={styles.description}>
{client ? (
<Message
{...messages.pleaseChooseAccountForApp}
key="pleaseChooseAccountForApp"
defaultMessage="Please select an account that you want to use to authorize {appName}"
values={{
appName: <span className={styles.appName}>{client.name}</span>,
}}
/>
) : (
<div className={styles.description}>
<Message {...messages.pleaseChooseAccount} />
<Message
key="pleaseChooseAccount"
defaultMessage="Please select an account you're willing to use"
/>
</div>
)}
</div>

7
packages/app/components/auth/finish/Finish.intl.json
View File

@@ -1,7 +0,0 @@
{
"authForAppSuccessful": "Authorization for {appName} was successfully completed",
"authForAppFailed": "Authorization for {appName} was failed",
"waitAppReaction": "Please, wait till your application response",
"passCodeToApp": "To complete authorization process, please, provide the following code to {appName}",
"copy": "Copy"
}

29
packages/app/components/auth/finish/Finish.tsx
View File

@@ -1,14 +1,17 @@
import React, { MouseEventHandler } from 'react';
import { connect } from 'react-redux';
import { FormattedMessage as Message } from 'react-intl';
import { defineMessages, FormattedMessage as Message } from 'react-intl';
import { Helmet } from 'react-helmet-async';
import { Button } from 'app/components/ui/form';
import copy from 'app/services/copy';
import { RootState } from 'app/reducers';
import messages from './Finish.intl.json';
import styles from './finish.scss';
const messages = defineMessages({
copy: 'Copy',
});
interface Props {
appName: string;
code?: string;
@@ -36,7 +39,8 @@ class Finish extends React.Component<Props> {
<div className={styles.successBackground} />
<div className={styles.greenTitle}>
<Message
{...messages.authForAppSuccessful}
key="authForAppSuccessful"
defaultMessage="Authorization for {appName} was successfully completed"
values={{
appName: <span className={styles.appName}>{appName}</span>,
}}
@@ -45,7 +49,11 @@ class Finish extends React.Component<Props> {
{displayCode ? (
<div data-testid="oauth-code-container">
<div className={styles.description}>
<Message {...messages.passCodeToApp} values={{ appName }} />
<Message
key="passCodeToApp"
defaultMessage="To complete authorization process, please, provide the following code to {appName}"
values={{ appName }}
/>
</div>
<div className={styles.codeContainer}>
<div className={styles.code}>{code}</div>
@@ -54,7 +62,10 @@ class Finish extends React.Component<Props> {
</div>
) : (
<div className={styles.description}>
<Message {...messages.waitAppReaction} />
<Message
key="waitAppReaction"
defaultMessage="Please, wait till your application response"
/>
</div>
)}
</div>
@@ -63,14 +74,18 @@ class Finish extends React.Component<Props> {
<div className={styles.failBackground} />
<div className={styles.redTitle}>
<Message
{...messages.authForAppFailed}
key="authForAppFailed"
defaultMessage="Authorization for {appName} was failed"
values={{
appName: <span className={styles.appName}>{appName}</span>,
}}
/>
</div>
<div className={styles.description}>
<Message {...messages.waitAppReaction} />
<Message
key="waitAppReaction"
defaultMessage="Please, wait till your application response"
/>
</div>
</div>
)}

7
packages/app/components/auth/forgotPassword/ForgotPassword.intl.json
View File

@@ -1,7 +0,0 @@
{
"title": "Forgot password",
"sendMail": "Send mail",
"specifyEmail": "Specify the registration E‑mail address or last used username for your account and we will send an E‑mail with instructions for further password recovery.",
"pleasePressButton": "Please press the button bellow to get an E‑mail with password recovery code.",
"alreadyHaveCode": "Already have a code"
}

8
packages/app/components/auth/forgotPassword/ForgotPassword.ts
View File

@@ -1,7 +1,13 @@
import { defineMessages } from 'react-intl';
import factory from '../factory';
import messages from './ForgotPassword.intl.json';
import Body from './ForgotPasswordBody';
const messages = defineMessages({
title: 'Forgot password',
sendMail: 'Send mail',
alreadyHaveCode: 'Already have a code',
});
export default factory({
title: messages.title,
body: Body,

19
packages/app/components/auth/forgotPassword/ForgotPasswordBody.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { FormattedMessage as Message } from 'react-intl';
import { defineMessages, FormattedMessage as Message } from 'react-intl';
import { Input, Captcha } from 'app/components/ui/form';
import { getLogin } from 'app/components/auth/reducer';
@@ -8,7 +8,10 @@ import { PanelIcon } from 'app/components/ui/Panel';
import BaseAuthBody from 'app/components/auth/BaseAuthBody';
import styles from './forgotPassword.scss';
import messages from './ForgotPassword.intl.json';
const messages = defineMessages({
emailOrUsername: 'E‑mail or username',
});
export default class ForgotPasswordBody extends BaseAuthBody {
static displayName = 'ForgotPasswordBody';
@@ -36,14 +39,17 @@ export default class ForgotPasswordBody extends BaseAuthBody {
{isLoginEditShown ? (
<div>
<p className={styles.descriptionText}>
<Message {...messages.specifyEmail} />
<Message
key="specifyEmail"
defaultMessage="Specify the registration E‑mail address or last used username for your account and we will send an E‑mail with instructions for further password recovery."
/>
</p>
<Input
{...this.bindField('login')}
icon="envelope"
color="lightViolet"
required
placeholder={messages.accountEmail}
placeholder={messages.emailOrUsername}
defaultValue={login}
/>
</div>
@@ -54,7 +60,10 @@ export default class ForgotPasswordBody extends BaseAuthBody {
<span className={styles.editLogin} onClick={this.onClickEdit} data-testid="edit-login" />
</div>
<p className={styles.descriptionText}>
<Message {...messages.pleasePressButton} />
<Message
key="pleasePressButton"
defaultMessage="Please press the button bellow to get an E‑mail with password recovery code."
/>
</p>
</div>
)}

6
packages/app/components/auth/login/Login.intl.json
View File

@@ -1,6 +0,0 @@
{
"createNewAccount": "Create new account",
"loginTitle": "Sign in",
"emailOrUsername": "E‑mail or username",
"next": "Next"
}

8
packages/app/components/auth/login/Login.ts
View File

@@ -1,6 +1,12 @@
import { defineMessages } from 'react-intl';
import factory from '../factory';
import Body from './LoginBody';
import messages from './Login.intl.json';
const messages = defineMessages({
createNewAccount: 'Create new account',
loginTitle: 'Sign in',
next: 'Next',
});
export default factory({
title: messages.loginTitle,

5
packages/app/components/auth/login/LoginBody.tsx
View File

@@ -1,10 +1,13 @@
import React from 'react';
import { defineMessages } from 'react-intl';
import { Input } from 'app/components/ui/form';
import BaseAuthBody from 'app/components/auth/BaseAuthBody';
import { User } from 'app/components/user/reducer';
import messages from './Login.intl.json';
const messages = defineMessages({
emailOrUsername: 'E‑mail or username',
});
export default class LoginBody extends BaseAuthBody {
static displayName = 'LoginBody';

4
packages/app/components/auth/mfa/Mfa.intl.json
View File

@@ -1,4 +0,0 @@
{
"enterTotp": "Enter code",
"description": "In order to sign in this account, you need to enter a one-time password from mobile application"
}

10
packages/app/components/auth/mfa/Mfa.tsx
View File

@@ -1,13 +1,17 @@
import { defineMessages } from 'react-intl';
import factory from '../factory';
import Body from './MfaBody';
import messages from './Mfa.intl.json';
import passwordMessages from '../password/Password.intl.json';
const messages = defineMessages({
enterTotp: 'Enter code',
signInButton: 'Sign in',
});
export default factory({
title: messages.enterTotp,
body: Body,
footer: {
color: 'green',
label: passwordMessages.signInButton,
label: messages.signInButton,
},
});

12
packages/app/components/auth/mfa/MfaBody.tsx
View File

@@ -1,11 +1,14 @@
import React from 'react';
import { FormattedMessage as Message } from 'react-intl';
import { defineMessages, FormattedMessage as Message } from 'react-intl';
import { PanelIcon } from 'app/components/ui/Panel';
import { Input } from 'app/components/ui/form';
import BaseAuthBody from 'app/components/auth/BaseAuthBody';
import styles from './mfa.scss';
import messages from './Mfa.intl.json';
const messages = defineMessages({
enterTotp: 'Enter code',
});
export default class MfaBody extends BaseAuthBody {
static panelId = 'mfa';
@@ -21,7 +24,10 @@ export default class MfaBody extends BaseAuthBody {
<PanelIcon icon="lock" />
<p className={styles.descriptionText}>
<Message {...messages.description} />
<Message
key="description"
defaultMessage="In order to sign in this account, you need to enter a one-time password from mobile application"
/>
</p>
<Input

7
packages/app/components/auth/password/Password.intl.json
View File

@@ -1,7 +0,0 @@
{
"passwordTitle": "Enter password",
"signInButton": "Sign in",
"forgotPassword": "Forgot password",
"accountPassword": "Account password",
"rememberMe": "Remember me on this device"
}

8
packages/app/components/auth/password/Password.ts
View File

@@ -1,6 +1,12 @@
import { defineMessages } from 'react-intl';
import factory from '../factory';
import Body from './PasswordBody';
import messages from './Password.intl.json';
const messages = defineMessages({
passwordTitle: 'Enter password',
signInButton: 'Sign in',
forgotPassword: 'Forgot password',
});
export default factory({
title: messages.passwordTitle,

7
packages/app/components/auth/password/PasswordBody.tsx
View File

@@ -3,9 +3,14 @@ import icons from 'app/components/ui/icons.scss';
import { Input, Checkbox } from 'app/components/ui/form';
import BaseAuthBody from 'app/components/auth/BaseAuthBody';
import authStyles from 'app/components/auth/auth.scss';
import { defineMessages } from 'react-intl';
import styles from './password.scss';
import messages from './Password.intl.json';
const messages = defineMessages({
accountPassword: 'Account password',
rememberMe: 'Remember me on this device',
});
export default class PasswordBody extends BaseAuthBody {
static displayName = 'PasswordBody';

12
packages/app/components/auth/permissions/Permissions.intl.json
View File

@@ -1,12 +0,0 @@
{
"permissionsTitle": "Application permissions",
"youAuthorizedAs": "You authorized as:",
"theAppNeedsAccess1": "This application needs access",
"theAppNeedsAccess2": "to your data",
"decline": "Decline",
"approve": "Approve",
"scope_minecraft_server_session": "Authorization data for minecraft server",
"scope_offline_access": "Access to your profile data, when you offline",
"scope_account_info": "Access to your profile data (except E‑mail)",
"scope_account_email": "Access to your E‑mail address"
}

8
packages/app/components/auth/permissions/Permissions.ts
View File

@@ -1,7 +1,13 @@
import { defineMessages } from 'react-intl';
import factory from '../factory';
import messages from './Permissions.intl.json';
import Body from './PermissionsBody';
const messages = defineMessages({
permissionsTitle: 'Application permissions',
decline: 'Decline',
approve: 'Approve',
});
export default factory({
title: messages.permissionsTitle,
body: Body,

19
packages/app/components/auth/permissions/PermissionsBody.tsx
View File

@@ -1,11 +1,17 @@
import React from 'react';
import { FormattedMessage as Message } from 'react-intl';
import { defineMessages, FormattedMessage as Message } from 'react-intl';
import icons from 'app/components/ui/icons.scss';
import { PanelBodyHeader } from 'app/components/ui/Panel';
import BaseAuthBody from 'app/components/auth/BaseAuthBody';
import styles from './permissions.scss';
import messages from './Permissions.intl.json';
const scopesMessages = defineMessages({
scope_minecraft_server_session: 'Authorization data for minecraft server',
scope_offline_access: 'Access to your profile data, when you offline',
scope_account_info: 'Access to your profile data (except E‑mail)',
scope_account_email: 'Access to your E‑mail address',
});
export default class PermissionsBody extends BaseAuthBody {
static displayName = 'PermissionsBody';
@@ -25,21 +31,22 @@ export default class PermissionsBody extends BaseAuthBody {
{user.avatar ? <img src={user.avatar} /> : <span className={icons.user} />}
</div>
<div className={styles.authInfoTitle}>
<Message {...messages.youAuthorizedAs} />
<Message key="youAuthorizedAs" defaultMessage="You authorized as:" />
</div>
<div className={styles.authInfoEmail}>{user.username}</div>
</div>
</PanelBodyHeader>
<div className={styles.permissionsContainer}>
<div className={styles.permissionsTitle}>
<Message {...messages.theAppNeedsAccess1} />
<Message key="theAppNeedsAccess1" defaultMessage="This application needs access" />
<br />
<Message {...messages.theAppNeedsAccess2} />
<Message key="theAppNeedsAccess2" defaultMessage="to your data" />
</div>
<ul className={styles.permissionsList}>
{scopes.map((scope) => {
const key = `scope_${scope}`;
const message = messages[key];
// @ts-ignore
const message = scopesMessages[key];
return (
<li key={key}>

12
packages/app/components/auth/recoverPassword/RecoverPassword.intl.json
View File

@@ -1,12 +0,0 @@
{
"title": "Restore password",
"contactSupport": "Contact support",
"messageWasSent": "The recovery code was sent to your account E‑mail.",
"messageWasSentTo": "The recovery code was sent to your E‑mail {email}.",
"enterCodeBelow": "Please enter the code received into the field below:",
"enterNewPasswordBelow": "Enter and repeat new password below:",
"change": "Change password",
"newPassword": "Enter new password",
"newRePassword": "Repeat new password",
"enterTheCode": "Enter confirmation code"
}

8
packages/app/components/auth/recoverPassword/RecoverPassword.ts
View File

@@ -1,7 +1,13 @@
import { defineMessages } from 'react-intl';
import factory from '../factory';
import messages from './RecoverPassword.intl.json';
import Body from './RecoverPasswordBody';
const messages = defineMessages({
title: 'Restore password',
contactSupport: 'Contact support',
change: 'Change password',
});
export default factory({
title: messages.title,
body: Body,

30
packages/app/components/auth/recoverPassword/RecoverPasswordBody.tsx
View File

@@ -1,15 +1,20 @@
import React from 'react';
import { FormattedMessage as Message } from 'react-intl';
import { defineMessages, FormattedMessage as Message } from 'react-intl';
import { Input } from 'app/components/ui/form';
import BaseAuthBody from 'app/components/auth/BaseAuthBody';
import styles from './recoverPassword.scss';
import messages from './RecoverPassword.intl.json';
// TODO: activation code field may be decoupled into common component and reused here and in activation panel
const placeholders = defineMessages({
newPassword: 'Enter new password',
newRePassword: 'Repeat new password',
enterTheCode: 'Enter confirmation code',
});
export default class RecoverPasswordBody extends BaseAuthBody {
static displayName = 'RecoverPasswordBody';
static panelId = 'recoverPassword';
@@ -28,15 +33,22 @@ export default class RecoverPasswordBody extends BaseAuthBody {
<p className={styles.descriptionText}>
{user.maskedEmail ? (
<Message
{...messages.messageWasSentTo}
key="messageWasSentTo"
defaultMessage="The recovery code was sent to your E‑mail {email}."
values={{
email: <b>{user.maskedEmail}</b>,
}}
/>
) : (
<Message {...messages.messageWasSent} />
<Message
key="messageWasSent"
defaultMessage="The recovery code was sent to your account E‑mail."
/>
)}{' '}
<Message {...messages.enterCodeBelow} />
<Message
key="enterCodeBelow"
defaultMessage="Please enter the code received into the field below:"
/>
</p>
<Input
@@ -47,11 +59,11 @@ export default class RecoverPasswordBody extends BaseAuthBody {
value={key}
readOnly={!!key}
autoComplete="off"
placeholder={messages.enterTheCode}
placeholder={placeholders.enterTheCode}
/>
<p className={styles.descriptionText}>
<Message {...messages.enterNewPasswordBelow} />
<Message key="enterNewPasswordBelow" defaultMessage="Enter and repeat new password below:" />
</p>
<Input
@@ -60,7 +72,7 @@ export default class RecoverPasswordBody extends BaseAuthBody {
color="lightViolet"
type="password"
required
placeholder={messages.newPassword}
placeholder={placeholders.newPassword}
/>
<Input
@@ -69,7 +81,7 @@ export default class RecoverPasswordBody extends BaseAuthBody {
color="lightViolet"
type="password"
required
placeholder={messages.newRePassword}
placeholder={placeholders.newRePassword}
/>
</div>
);

10
packages/app/components/auth/register/Register.intl.json
View File

@@ -1,10 +0,0 @@
{
"registerTitle": "Sign Up",
"yourNickname": "Your nickname",
"yourEmail": "Your E‑mail",
"accountPassword": "Account password",
"repeatPassword": "Repeat password",
"signUpButton": "Register",
"acceptRules": "I agree with {link}",
"termsOfService": "terms of service"
}

15
packages/app/components/auth/register/Register.ts
View File

@@ -1,9 +1,14 @@
import { defineMessages } from 'react-intl';
import factory from '../factory';
import activationMessages from '../activation/Activation.intl.json';
import forgotPasswordMessages from '../forgotPassword/ForgotPassword.intl.json';
import messages from './Register.intl.json';
import Body from './RegisterBody';
const messages = defineMessages({
registerTitle: 'Sign Up',
signUpButton: 'Register',
didNotReceivedEmail: 'Did not received E‑mail?',
alreadyHaveCode: 'Already have a code',
});
export default factory({
title: messages.registerTitle,
body: Body,
@@ -13,11 +18,11 @@ export default factory({
},
links: [
{
label: activationMessages.didNotReceivedEmail,
label: messages.didNotReceivedEmail,
payload: { requestEmail: true },
},
{
label: forgotPasswordMessages.alreadyHaveCode,
label: messages.alreadyHaveCode,
},
],
});

24
packages/app/components/auth/register/RegisterBody.tsx
View File

@@ -1,15 +1,20 @@
import React from 'react';
import { FormattedMessage as Message } from 'react-intl';
import { defineMessages, FormattedMessage as Message } from 'react-intl';
import { Link } from 'react-router-dom';
import { Input, Checkbox, Captcha } from 'app/components/ui/form';
import BaseAuthBody from 'app/components/auth/BaseAuthBody';
import passwordMessages from '../password/Password.intl.json';
import styles from '../auth.scss';
import messages from './Register.intl.json';
// TODO: password and username can be validate for length and sameness
const placeholders = defineMessages({
yourNickname: 'Your nickname',
yourEmail: 'Your E‑mail',
accountPassword: 'Account password',
repeatPassword: 'Repeat password',
});
export default class RegisterBody extends BaseAuthBody {
static panelId = 'register';
@@ -26,7 +31,7 @@ export default class RegisterBody extends BaseAuthBody {
color="blue"
type="text"
required
placeholder={messages.yourNickname}
placeholder={placeholders.yourNickname}
/>
<Input
@@ -35,7 +40,7 @@ export default class RegisterBody extends BaseAuthBody {
color="blue"
type="email"
required
placeholder={messages.yourEmail}
placeholder={placeholders.yourEmail}
/>
<Input
@@ -44,7 +49,7 @@ export default class RegisterBody extends BaseAuthBody {
color="blue"
type="password"
required
placeholder={passwordMessages.accountPassword}
placeholder={placeholders.accountPassword}
/>
<Input
@@ -53,7 +58,7 @@ export default class RegisterBody extends BaseAuthBody {
color="blue"
type="password"
required
placeholder={messages.repeatPassword}
placeholder={placeholders.repeatPassword}
/>
<Captcha {...this.bindField('captcha')} delay={600} />
@@ -65,11 +70,12 @@ export default class RegisterBody extends BaseAuthBody {
required
label={
<Message
{...messages.acceptRules}
key="acceptRules"
defaultMessage="I agree with {link}"
values={{
link: (
<Link to="/rules" target="_blank">
<Message {...messages.termsOfService} />
<Message key="termsOfService" defaultMessage="terms of service" />
</Link>
),
}}

5
packages/app/components/auth/resendActivation/ResendActivation.intl.json
View File

@@ -1,5 +0,0 @@
{
"title": "Did not received an E‑mail",
"specifyYourEmail": "Please, enter an E‑mail you've registered with and we will send you new activation code",
"sendNewEmail": "Send new E‑mail"
}

11
packages/app/components/auth/resendActivation/ResendActivation.ts
View File

@@ -1,8 +1,13 @@
import { defineMessages } from 'react-intl';
import factory from '../factory';
import forgotPasswordMessages from '../forgotPassword/ForgotPassword.intl.json';
import messages from './ResendActivation.intl.json';
import Body from './ResendActivationBody';
const messages = defineMessages({
title: 'Did not received an E‑mail',
sendNewEmail: 'Send new E‑mail',
alreadyHaveCode: 'Already have a code',
});
export default factory({
title: messages.title,
body: Body,
@@ -11,6 +16,6 @@ export default factory({
label: messages.sendNewEmail,
},
links: {
label: forgotPasswordMessages.alreadyHaveCode,
label: messages.alreadyHaveCode,
},
});

15
packages/app/components/auth/resendActivation/ResendActivationBody.tsx
View File

@@ -1,11 +1,13 @@
import React from 'react';
import { FormattedMessage as Message } from 'react-intl';
import { defineMessages, FormattedMessage as Message } from 'react-intl';
import { Input, Captcha } from 'app/components/ui/form';
import BaseAuthBody from '../BaseAuthBody';
import registerMessages from '../register/Register.intl.json';
import styles from './resendActivation.scss';
import messages from './ResendActivation.intl.json';
const placeholders = defineMessages({
yourEmail: 'Your E‑mail',
});
export default class ResendActivation extends BaseAuthBody {
static displayName = 'ResendActivation';
@@ -20,7 +22,10 @@ export default class ResendActivation extends BaseAuthBody {
{this.renderErrors()}
<div className={styles.description}>
<Message {...messages.specifyYourEmail} />
<Message
key="specifyYourEmail"
defaultMessage="Please, enter an E‑mail you've registered with and we will send you new activation code"
/>
</div>
<Input
@@ -29,7 +34,7 @@ export default class ResendActivation extends BaseAuthBody {
color="blue"
type="email"
required
placeholder={registerMessages.yourEmail}
placeholder={placeholders.yourEmail}
defaultValue={this.context.user.email}
/>