Skip to content

Commit fe81240

Browse files
ghalestriloghalestrilo
committed
🔀 merge from develop
2 parents 03f2832 + 236cdac commit fe81240

File tree

11 files changed

+312
-170
lines changed

11 files changed

+312
-170
lines changed

‎client/modules/User/components/APIKeyForm.jsx

Lines changed: 23 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3-
43
import Button from '../../../common/Button';
54
import { PlusIcon } from '../../../common/icons';
65
import CopyableInput from '../../IDE/components/CopyableInput';
@@ -12,7 +11,7 @@ export const APIKeyPropType = PropTypes.shape({
1211
token: PropTypes.object, // eslint-disable-line
1312
label: PropTypes.string.isRequired,
1413
createdAt: PropTypes.string.isRequired,
15-
lastUsedAt: PropTypes.string,
14+
lastUsedAt: PropTypes.string
1615
});
1716

1817
class APIKeyForm extends React.Component {
@@ -39,7 +38,7 @@ class APIKeyForm extends React.Component {
3938
}
4039

4140
removeKey(key) {
42-
const message = `Are you sure you want to delete "${key.label}"?`;
41+
const message = this.props.t('APIKeyForm.ConfirmDelete', { key_label: key.label });
4342

4443
if (window.confirm(message)) {
4544
this.props.removeApiKey(key.id);
@@ -51,10 +50,10 @@ class APIKeyForm extends React.Component {
5150

5251
if (hasApiKeys) {
5352
return (
54-
<APIKeyList apiKeys={this.props.apiKeys} onRemove={this.removeKey} />
53+
<APIKeyList apiKeys={this.props.apiKeys} onRemove={this.removeKey} t={this.props.t} />
5554
);
5655
}
57-
return <p>You have no exsiting tokens.</p>;
56+
return <p>{this.props.t('APIKeyForm.NoTokens')}</p>;
5857
}
5958

6059
render() {
@@ -63,27 +62,18 @@ class APIKeyForm extends React.Component {
6362
return (
6463
<div className="api-key-form">
6564
<p className="api-key-form__summary">
66-
Personal Access Tokens act like your password to allow automated
67-
scripts to access the Editor API. Create a token for each script that
68-
needs access.
65+
{this.props.t('APIKeyForm.Summary')}
6966
</p>
7067

7168
<div className="api-key-form__section">
72-
<h3 className="api-key-form__title">Create new token</h3>
69+
<h3 className="api-key-form__title">{this.props.t('APIKeyForm.CreateToken')}</h3>
7370
<form className="form form--inline" onSubmit={this.addKey}>
74-
<label
75-
htmlFor="keyLabel"
76-
className="form__label form__label--hidden "
77-
>
78-
What is this token for?
79-
</label>
71+
<label htmlFor="keyLabel" className="form__label form__label--hidden ">{this.props.t('APIKeyForm.TokenLabel')}</label>
8072
<input
8173
className="form__input"
8274
id="keyLabel"
83-
onChange={(event) => {
84-
this.setState({ keyLabel: event.target.value });
85-
}}
86-
placeholder="What is this token for? e.g. Example import script"
75+
onChange={(event) => { this.setState({ keyLabel: event.target.value }); }}
76+
placeholder={this.props.t('APIKeyForm.TokenPlaceholder')}
8777
type="text"
8878
value={this.state.keyLabel}
8979
/>
@@ -93,29 +83,25 @@ class APIKeyForm extends React.Component {
9383
label="Create new key"
9484
type="submit"
9585
>
96-
Create
86+
{this.props.t('APIKeyForm.CreateTokenSubmit')}
9787
</Button>
9888
</form>
9989

100-
{keyWithToken && (
101-
<div className="api-key-form__new-token">
102-
<h4 className="api-key-form__new-token__title">
103-
Your new access token
104-
</h4>
105-
<p className="api-key-form__new-token__info">
106-
Make sure to copy your new personal access token now. You won’t
107-
be able to see it again!
108-
</p>
109-
<CopyableInput
110-
label={keyWithToken.label}
111-
value={keyWithToken.token}
112-
/>
113-
</div>
114-
)}
90+
{
91+
keyWithToken && (
92+
<div className="api-key-form__new-token">
93+
<h4 className="api-key-form__new-token__title">{this.props.t('APIKeyForm.NewTokenTitle')}</h4>
94+
<p className="api-key-form__new-token__info">
95+
{this.props.t('APIKeyForm.NewTokenInfo')}
96+
</p>
97+
<CopyableInput label={keyWithToken.label} value={keyWithToken.token} />
98+
</div>
99+
)
100+
}
115101
</div>
116102

117103
<div className="api-key-form__section">
118-
<h3 className="api-key-form__title">Existing tokens</h3>
104+
<h3 className="api-key-form__title">{this.props.t('APIKeyForm.ExistingTokensTitle')}</h3>
119105
{this.renderApiKeys()}
120106
</div>
121107
</div>
@@ -127,6 +113,7 @@ APIKeyForm.propTypes = {
127113
apiKeys: PropTypes.arrayOf(PropTypes.shape(APIKeyPropType)).isRequired,
128114
createApiKey: PropTypes.func.isRequired,
129115
removeApiKey: PropTypes.func.isRequired,
116+
t: PropTypes.func.isRequired
130117
};
131118

132119
export default APIKeyForm;

‎client/modules/User/components/APIKeyList.jsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,22 @@ import { APIKeyPropType } from './APIKeyForm';
88

99
import TrashCanIcon from '../../../images/trash-can.svg';
1010

11-
function APIKeyList({ apiKeys, onRemove }) {
11+
function APIKeyList({ apiKeys, onRemove, t }) {
1212
return (
1313
<table className="api-key-list">
1414
<thead>
1515
<tr>
16-
<th>Name</th>
17-
<th>Created on</th>
18-
<th>Last used</th>
19-
<th>Actions</th>
16+
<th>{t('APIKeyList.Name')}</th>
17+
<th>{t('APIKeyList.Created')}</th>
18+
<th>{t('APIKeyList.LastUsed')}</th>
19+
<th>{t('APIKeyList.Actions')}</th>
2020
</tr>
2121
</thead>
2222
<tbody>
2323
{orderBy(apiKeys, ['createdAt'], ['desc']).map((key) => {
2424
const lastUsed = key.lastUsedAt ?
2525
distanceInWordsToNow(new Date(key.lastUsedAt), { addSuffix: true }) :
26-
'Never';
26+
t('APIKeyList.Never');
2727

2828
return (
2929
<tr key={key.id}>
@@ -34,7 +34,7 @@ function APIKeyList({ apiKeys, onRemove }) {
3434
<button
3535
className="api-key-list__delete-button"
3636
onClick={() => onRemove(key)}
37-
aria-label="Delete API Key"
37+
aria-label={t('APIKeyList.DeleteARIA')}
3838
>
3939
<TrashCanIcon focusable="false" aria-hidden="true" />
4040
</button>
@@ -50,6 +50,7 @@ function APIKeyList({ apiKeys, onRemove }) {
5050
APIKeyList.propTypes = {
5151
apiKeys: PropTypes.arrayOf(PropTypes.shape(APIKeyPropType)).isRequired,
5252
onRemove: PropTypes.func.isRequired,
53+
t: PropTypes.func.isRequired
5354
};
5455

5556
export default APIKeyList;

‎client/modules/User/components/AccountForm.jsx

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3+
import { withTranslation } from 'react-i18next';
34
import { domOnlyProps } from '../../../utils/reduxFormUtils';
45
import Button from '../../../common/Button';
56

@@ -14,6 +15,7 @@ function AccountForm(props) {
1415
submitting,
1516
invalid,
1617
pristine,
18+
t
1719
} = props;
1820

1921
const handleInitiateVerification = (evt) => {
@@ -24,12 +26,10 @@ function AccountForm(props) {
2426
return (
2527
<form className="form" onSubmit={handleSubmit(props.updateSettings)}>
2628
<p className="form__field">
27-
<label htmlFor="email" className="form__label">
28-
Email
29-
</label>
29+
<label htmlFor="email" className="form__label">{t('AccountForm.Email')}</label>
3030
<input
3131
className="form__input"
32-
aria-label="email"
32+
aria-label={t('AccountForm.EmailARIA')}
3333
type="text"
3434
id="email"
3535
{...domOnlyProps(email)}
@@ -38,28 +38,31 @@ function AccountForm(props) {
3838
<span className="form-error">{email.error}</span>
3939
)}
4040
</p>
41-
{user.verified !== 'verified' && (
42-
<p className="form__context">
43-
<span className="form__status">Unconfirmed.</span>
44-
{user.emailVerificationInitiate === true ? (
45-
<span className="form__status">
46-
{' '}
47-
Confirmation sent, check your email.
48-
</span>
49-
) : (
50-
<Button onClick={handleInitiateVerification}>
51-
Resend confirmation email
52-
</Button>
53-
)}
54-
</p>
55-
)}
41+
{
42+
user.verified !== 'verified' &&
43+
(
44+
<p className="form__context">
45+
<span className="form__status">{t('AccountForm.Unconfirmed')}</span>
46+
{
47+
user.emailVerificationInitiate === true ?
48+
(
49+
<span className="form__status"> {t('AccountForm.EmailSent')}</span>
50+
) :
51+
(
52+
<Button
53+
onClick={handleInitiateVerification}
54+
>{t('AccountForm.Resend')}
55+
</Button>
56+
)
57+
}
58+
</p>
59+
)
60+
}
5661
<p className="form__field">
57-
<label htmlFor="username" className="form__label">
58-
User Name
59-
</label>
62+
<label htmlFor="username" className="form__label">{t('AccountForm.UserName')}</label>
6063
<input
6164
className="form__input"
62-
aria-label="username"
65+
aria-label={t('AccountForm.UserNameARIA')}
6366
type="text"
6467
id="username"
6568
defaultValue={username}
@@ -70,12 +73,10 @@ function AccountForm(props) {
7073
)}
7174
</p>
7275
<p className="form__field">
73-
<label htmlFor="current password" className="form__label">
74-
Current Password
75-
</label>
76+
<label htmlFor="current password" className="form__label">{t('AccountForm.CurrentPassword')}</label>
7677
<input
7778
className="form__input"
78-
aria-label="currentPassword"
79+
aria-label={t('AccountForm.CurrentPasswordARIA')}
7980
type="password"
8081
id="currentPassword"
8182
{...domOnlyProps(currentPassword)}
@@ -85,12 +86,10 @@ function AccountForm(props) {
8586
)}
8687
</p>
8788
<p className="form__field">
88-
<label htmlFor="new password" className="form__label">
89-
New Password
90-
</label>
89+
<label htmlFor="new password" className="form__label">{t('AccountForm.NewPassword')}</label>
9190
<input
9291
className="form__input"
93-
aria-label="newPassword"
92+
aria-label={t('AccountForm.NewPasswordARIA')}
9493
type="password"
9594
id="newPassword"
9695
{...domOnlyProps(newPassword)}
@@ -99,8 +98,10 @@ function AccountForm(props) {
9998
<span className="form-error">{newPassword.error}</span>
10099
)}
101100
</p>
102-
<Button type="submit" disabled={submitting || invalid || pristine}>
103-
Save All Settings
101+
<Button
102+
type="submit"
103+
disabled={submitting || invalid || pristine}
104+
>{t('AccountForm.SubmitSaveAllSettings')}
104105
</Button>
105106
</form>
106107
);
@@ -123,6 +124,7 @@ AccountForm.propTypes = {
123124
submitting: PropTypes.bool,
124125
invalid: PropTypes.bool,
125126
pristine: PropTypes.bool,
127+
t: PropTypes.func.isRequired
126128
};
127129

128130
AccountForm.defaultProps = {
@@ -131,4 +133,4 @@ AccountForm.defaultProps = {
131133
invalid: false,
132134
};
133135

134-
export default AccountForm;
136+
export default withTranslation()(AccountForm);

‎client/modules/User/components/NewPasswordForm.jsx

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,24 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3-
3+
import { withTranslation } from 'react-i18next';
44
import { domOnlyProps } from '../../../utils/reduxFormUtils';
55
import Button from '../../../common/Button';
66

77
function NewPasswordForm(props) {
88
const {
9-
fields: { password, confirmPassword },
10-
handleSubmit,
11-
submitting,
12-
invalid,
13-
pristine,
9+
fields: { password, confirmPassword }, handleSubmit, submitting, invalid, pristine,
10+
t
1411
} = props;
1512
return (
1613
<form
1714
className="form"
1815
onSubmit={handleSubmit(props.updatePassword.bind(this, props.params.reset_password_token))}
1916
>
2017
<p className="form__field">
21-
<label htmlFor="password" className="form__label">
22-
Password
23-
</label>
18+
<label htmlFor="password" className="form__label">{t('NewPasswordForm.Title')}</label>
2419
<input
2520
className="form__input"
26-
aria-label="password"
21+
aria-label={t('NewPasswordForm.TitleARIA')}
2722
type="password"
2823
id="Password"
2924
{...domOnlyProps(password)}
@@ -33,23 +28,19 @@ function NewPasswordForm(props) {
3328
)}
3429
</p>
3530
<p className="form__field">
36-
<label htmlFor="confirm password" className="form__label">
37-
Confirm Password
38-
</label>
31+
<label htmlFor="confirm password" className="form__label">{t('NewPasswordForm.ConfirmPassword')}</label>
3932
<input
4033
className="form__input"
4134
type="password"
42-
aria-label="confirm password"
35+
aria-label={t('NewPasswordForm.ConfirmPasswordARIA')}
4336
id="confirm password"
4437
{...domOnlyProps(confirmPassword)}
4538
/>
4639
{confirmPassword.touched && confirmPassword.error && (
4740
<span className="form-error">{confirmPassword.error}</span>
4841
)}
4942
</p>
50-
<Button type="submit" disabled={submitting || invalid || pristine}>
51-
Set New Password
52-
</Button>
43+
<Button type="submit" disabled={submitting || invalid || pristine}>{t('NewPasswordForm.SubmitSetNewPassword')}</Button>
5344
</form>
5445
);
5546
}
@@ -67,6 +58,7 @@ NewPasswordForm.propTypes = {
6758
params: PropTypes.shape({
6859
reset_password_token: PropTypes.string,
6960
}).isRequired,
61+
t: PropTypes.func.isRequired
7062
};
7163

7264
NewPasswordForm.defaultProps = {
@@ -75,4 +67,4 @@ NewPasswordForm.defaultProps = {
7567
submitting: false,
7668
};
7769

78-
export default NewPasswordForm;
70+
export default withTranslation()(NewPasswordForm);

0 commit comments

Comments
 (0)