(this.el = el)} />;
- }
+ render() {
+ const props = omit(this.props, ['shouldMeasure', 'onMeasure', 'state']);
- measure = () => {
- requestAnimationFrame(() => {
- this.el && this.props.onMeasure(this.el.offsetHeight);
- });
- };
+ return
(this.el = el)} />;
+ }
- enqueueMeasurement = debounce(this.measure);
+ measure = () => {
+ requestAnimationFrame(() => {
+ this.el && this.props.onMeasure(this.el.offsetHeight);
+ });
+ };
+
+ enqueueMeasurement = debounce(this.measure);
}
diff --git a/packages/app/components/accounts/AccountSwitcher.intl.json b/packages/app/components/accounts/AccountSwitcher.intl.json
index d45f32e..e2ceb9c 100644
--- a/packages/app/components/accounts/AccountSwitcher.intl.json
+++ b/packages/app/components/accounts/AccountSwitcher.intl.json
@@ -1,5 +1,5 @@
{
- "addAccount": "Add account",
- "goToEly": "Go to Ely.by profile",
- "logout": "Log out"
+ "addAccount": "Add account",
+ "goToEly": "Go to Ely.by profile",
+ "logout": "Log out"
}
diff --git a/packages/app/components/accounts/AccountSwitcher.tsx b/packages/app/components/accounts/AccountSwitcher.tsx
index cca5873..60113fd 100644
--- a/packages/app/components/accounts/AccountSwitcher.tsx
+++ b/packages/app/components/accounts/AccountSwitcher.tsx
@@ -14,190 +14,164 @@ import styles from './accountSwitcher.scss';
import messages from './AccountSwitcher.intl.json';
interface Props {
- switchAccount: (account: Account) => Promise;
- removeAccount: (account: Account) => Promise;
- // called after each action performed
- onAfterAction: () => void;
- // called after switching an account. The active account will be passed as arg
- onSwitch: (account: Account) => void;
- accounts: RootState['accounts'];
- skin: Skin;
- // whether active account should be expanded and shown on the top
- highlightActiveAccount: boolean;
- // whether to show logout icon near each account
- allowLogout: boolean;
- // whether to show add account button
- allowAdd: boolean;
+ switchAccount: (account: Account) => Promise;
+ removeAccount: (account: Account) => Promise;
+ // called after each action performed
+ onAfterAction: () => void;
+ // called after switching an account. The active account will be passed as arg
+ onSwitch: (account: Account) => void;
+ accounts: RootState['accounts'];
+ skin: Skin;
+ // whether active account should be expanded and shown on the top
+ highlightActiveAccount: boolean;
+ // whether to show logout icon near each account
+ allowLogout: boolean;
+ // whether to show add account button
+ allowAdd: boolean;
}
export class AccountSwitcher extends React.Component {
- static defaultProps: Partial = {
- skin: SKIN_DARK,
- highlightActiveAccount: true,
- allowLogout: true,
- allowAdd: true,
- onAfterAction() {},
- onSwitch() {},
- };
+ static defaultProps: Partial = {
+ skin: SKIN_DARK,
+ highlightActiveAccount: true,
+ allowLogout: true,
+ allowAdd: true,
+ onAfterAction() {},
+ onSwitch() {},
+ };
- render() {
- const {
- accounts,
- skin,
- allowAdd,
- allowLogout,
- highlightActiveAccount,
- } = this.props;
- const activeAccount = getActiveAccount({ accounts });
+ render() {
+ const { accounts, skin, allowAdd, allowLogout, highlightActiveAccount } = this.props;
+ const activeAccount = getActiveAccount({ accounts });
- if (!activeAccount) {
- return null;
+ if (!activeAccount) {
+ return null;
+ }
+
+ let { available } = accounts;
+
+ if (highlightActiveAccount) {
+ available = available.filter((account) => account.id !== activeAccount.id);
+ }
+
+ return (
+ ) => {
+ event.preventDefault();
- if (highlightActiveAccount) {
- available = available.filter(
- (account) => account.id !== activeAccount.id,
- );
- }
+ loader.show();
- return (
- ) => {
- event.preventDefault();
-
- loader.show();
-
- this.props
- .switchAccount(account)
- .finally(() => this.props.onAfterAction())
- .then(() => this.props.onSwitch(account))
- // we won't sent any logs to sentry, because an error should be already
- // handled by external logic
- .catch((error) => console.warn('Error switching account', { error }))
- .finally(() => loader.hide());
- };
-
- onRemove = (account: Account) => (event: React.MouseEvent) => {
- event.preventDefault();
- event.stopPropagation();
-
- this.props.removeAccount(account).then(() => this.props.onAfterAction());
- };
+ this.props.removeAccount(account).then(() => this.props.onAfterAction());
+ };
}
export default connect(
- ({ accounts }: RootState) => ({
- accounts,
- }),
- {
- switchAccount: authenticate,
- removeAccount: revoke,
- },
+ ({ accounts }: RootState) => ({
+ accounts,
+ }),
+ {
+ switchAccount: authenticate,
+ removeAccount: revoke,
+ },
)(AccountSwitcher);
diff --git a/packages/app/components/accounts/accountSwitcher.scss b/packages/app/components/accounts/accountSwitcher.scss
index 7382d77..6ca7365 100644
--- a/packages/app/components/accounts/accountSwitcher.scss
+++ b/packages/app/components/accounts/accountSwitcher.scss
@@ -8,7 +8,7 @@ $bodyLeftRightPadding: 20px;
$lightBorderColor: #eee;
.accountSwitcher {
- text-align: left;
+ text-align: left;
}
.accountInfo {
@@ -16,210 +16,210 @@ $lightBorderColor: #eee;
.accountUsername,
.accountEmail {
- overflow: hidden;
- text-overflow: ellipsis;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.lightAccountSwitcher {
- background: #fff;
- color: #444;
- min-width: 205px;
+ background: #fff;
+ color: #444;
+ min-width: 205px;
- $border: 1px solid $lightBorderColor;
- border-left: $border;
- border-right: $border;
- border-bottom: 7px solid darker($green);
+ $border: 1px solid $lightBorderColor;
+ border-left: $border;
+ border-right: $border;
+ border-bottom: 7px solid darker($green);
- .item {
- padding: 15px;
- border-bottom: 1px solid $lightBorderColor;
- }
-
- .accountSwitchItem {
- cursor: pointer;
- transition: 0.25s;
-
- &:hover {
- background-color: $whiteButtonLight;
+ .item {
+ padding: 15px;
+ border-bottom: 1px solid $lightBorderColor;
}
- &:active {
- background-color: $whiteButtonDark;
+ .accountSwitchItem {
+ cursor: pointer;
+ transition: 0.25s;
+
+ &:hover {
+ background-color: $whiteButtonLight;
+ }
+
+ &:active {
+ background-color: $whiteButtonDark;
+ }
}
- }
- .accountIcon {
- font-size: 27px;
- width: 20px;
- text-align: center;
- }
-
- .activeAccountIcon {
- font-size: 40px;
- }
-
- .activeAccountInfo {
- margin-left: 29px;
- }
-
- .activeAccountUsername {
- font-family: $font-family-title;
- font-size: 20px;
- color: $green;
- }
-
- .activeAccountEmail {
- }
-
- .links {
- margin-top: 6px;
- }
-
- .link {
- font-size: 12px;
- margin-bottom: 3px;
- white-space: nowrap;
-
- &:last-of-type {
- margin-bottom: 0;
+ .accountIcon {
+ font-size: 27px;
+ width: 20px;
+ text-align: center;
}
- }
- .accountInfo {
- margin-left: 29px;
- margin-right: 25px;
- }
+ .activeAccountIcon {
+ font-size: 40px;
+ }
- .accountUsername {
- font-family: $font-family-title;
- font-size: 14px;
- color: #666;
- }
+ .activeAccountInfo {
+ margin-left: 29px;
+ }
- .accountEmail {
- font-size: 10px;
- color: #999;
- }
+ .activeAccountUsername {
+ font-family: $font-family-title;
+ font-size: 20px;
+ color: $green;
+ }
- .addAccount {
- }
+ .activeAccountEmail {
+ }
+
+ .links {
+ margin-top: 6px;
+ }
+
+ .link {
+ font-size: 12px;
+ margin-bottom: 3px;
+ white-space: nowrap;
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ }
+
+ .accountInfo {
+ margin-left: 29px;
+ margin-right: 25px;
+ }
+
+ .accountUsername {
+ font-family: $font-family-title;
+ font-size: 14px;
+ color: #666;
+ }
+
+ .accountEmail {
+ font-size: 10px;
+ color: #999;
+ }
+
+ .addAccount {
+ }
}
.darkAccountSwitcher {
- background: $black;
+ background: $black;
- $border: 1px solid lighter($black);
+ $border: 1px solid lighter($black);
- .item {
- padding: 15px 20px;
- border-top: 1px solid lighter($black);
- transition: 0.25s;
- cursor: pointer;
+ .item {
+ padding: 15px 20px;
+ border-top: 1px solid lighter($black);
+ transition: 0.25s;
+ cursor: pointer;
- &:hover {
- background-color: lighter($black);
+ &:hover {
+ background-color: lighter($black);
+ }
+
+ &:active {
+ background-color: darker($black);
+ }
+
+ &:last-of-type {
+ border-bottom: $border;
+ }
}
- &:active {
- background-color: darker($black);
+ .accountIcon {
+ font-size: 35px;
}
- &:last-of-type {
- border-bottom: $border;
+ .accountInfo {
+ margin-left: 30px;
+ margin-right: 26px;
}
- }
- .accountIcon {
- font-size: 35px;
- }
+ .accountUsername {
+ font-family: $font-family-title;
+ color: #fff;
+ }
- .accountInfo {
- margin-left: 30px;
- margin-right: 26px;
- }
-
- .accountUsername {
- font-family: $font-family-title;
- color: #fff;
- }
-
- .accountEmail {
- color: #666;
- font-size: 12px;
- }
+ .accountEmail {
+ color: #666;
+ font-size: 12px;
+ }
}
.accountIcon {
- composes: minecraft-character from '~app/components/ui/icons.scss';
+ composes: minecraft-character from '~app/components/ui/icons.scss';
- float: left;
+ float: left;
- &1 {
- color: $green;
- }
+ &1 {
+ color: $green;
+ }
- &2 {
- color: $blue;
- }
+ &2 {
+ color: $blue;
+ }
- &3 {
- color: $violet;
- }
+ &3 {
+ color: $violet;
+ }
- &4 {
- color: $orange;
- }
+ &4 {
+ color: $orange;
+ }
- &5 {
- color: $dark_blue;
- }
+ &5 {
+ color: $dark_blue;
+ }
- &6 {
- color: $light_violet;
- }
+ &6 {
+ color: $light_violet;
+ }
- &7 {
- color: $red;
- }
+ &7 {
+ color: $red;
+ }
}
.addIcon {
- composes: plus from '~app/components/ui/icons.scss';
+ composes: plus from '~app/components/ui/icons.scss';
- color: $green;
- position: relative;
- bottom: 1px;
- margin-right: 3px;
+ color: $green;
+ position: relative;
+ bottom: 1px;
+ margin-right: 3px;
}
.nextIcon {
- composes: arrowRight from '~app/components/ui/icons.scss';
+ composes: arrowRight from '~app/components/ui/icons.scss';
- position: relative;
- float: right;
+ position: relative;
+ float: right;
- font-size: 24px;
- color: #4e4e4e;
- line-height: 35px;
- left: 0;
+ font-size: 24px;
+ color: #4e4e4e;
+ line-height: 35px;
+ left: 0;
- transition: color 0.25s, left 0.5s;
+ transition: color 0.25s, left 0.5s;
- .item:hover & {
- color: #aaa;
- left: 5px;
- }
+ .item:hover & {
+ color: #aaa;
+ left: 5px;
+ }
}
.logoutIcon {
- composes: exit from '~app/components/ui/icons.scss';
+ composes: exit from '~app/components/ui/icons.scss';
- color: #cdcdcd;
- float: right;
- line-height: 27px;
- transition: 0.25s;
+ color: #cdcdcd;
+ float: right;
+ line-height: 27px;
+ transition: 0.25s;
- &:hover {
- color: #777;
- }
+ &:hover {
+ color: #777;
+ }
}
diff --git a/packages/app/components/accounts/actions.test.ts b/packages/app/components/accounts/actions.test.ts
index 63a9891..89e606a 100644
--- a/packages/app/components/accounts/actions.test.ts
+++ b/packages/app/components/accounts/actions.test.ts
@@ -4,491 +4,420 @@ import { browserHistory } from 'app/services/history';
import { InternalServerError } from 'app/services/request';
import { sessionStorage } from 'app/services/localStorage';
import * as authentication from 'app/services/api/authentication';
-import {
- authenticate,
- revoke,
- logoutAll,
- logoutStrangers,
-} from 'app/components/accounts/actions';
-import {
- add,
- activate,
- remove,
- reset,
-} from 'app/components/accounts/actions/pure-actions';
+import { authenticate, revoke, logoutAll, logoutStrangers } from 'app/components/accounts/actions';
+import { add, activate, remove, reset } from 'app/components/accounts/actions/pure-actions';
import { updateUser, setUser } from 'app/components/user/actions';
import { setLogin, setAccountSwitcher } from 'app/components/auth/actions';
import { Dispatch, RootState } from 'app/reducers';
import { Account } from './reducer';
-const token =
- 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJlbHl8MSJ9.pRJ7vakt2eIscjqwG__KhSxKb3qwGsdBBeDbBffJs_I';
-const legacyToken =
- 'eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOjF9.cRF-sQNrwWQ94xCb3vWioVdjxAZeefEE7GMGwh7708o';
+const token = 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJlbHl8MSJ9.pRJ7vakt2eIscjqwG__KhSxKb3qwGsdBBeDbBffJs_I';
+const legacyToken = 'eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOjF9.cRF-sQNrwWQ94xCb3vWioVdjxAZeefEE7GMGwh7708o';
const account = {
- id: 1,
- username: 'username',
- email: 'email@test.com',
- token,
- refreshToken: 'bar',
+ id: 1,
+ username: 'username',
+ email: 'email@test.com',
+ token,
+ refreshToken: 'bar',
};
const user = {
- id: 1,
- username: 'username',
- email: 'email@test.com',
- lang: 'be',
+ id: 1,
+ username: 'username',
+ email: 'email@test.com',
+ lang: 'be',
};
describe('components/accounts/actions', () => {
- let dispatch: Dispatch;
- let getState: () => RootState;
+ let dispatch: Dispatch;
+ let getState: () => RootState;
- beforeEach(() => {
- dispatch = sinon
- .spy((arg) => (typeof arg === 'function' ? arg(dispatch, getState) : arg))
- .named('store.dispatch');
- getState = sinon.stub().named('store.getState');
+ beforeEach(() => {
+ dispatch = sinon
+ .spy((arg) => (typeof arg === 'function' ? arg(dispatch, getState) : arg))
+ .named('store.dispatch');
+ getState = sinon.stub().named('store.getState');
- (getState as any).returns({
- accounts: {
- available: [],
- active: null,
- },
- auth: {
- credentials: {},
- },
- user: {},
- });
-
- sinon
- .stub(authentication, 'validateToken')
- .named('authentication.validateToken');
- sinon.stub(browserHistory, 'push').named('browserHistory.push');
- sinon.stub(authentication, 'logout').named('authentication.logout');
-
- (authentication.logout as any).returns(Promise.resolve());
- (authentication.validateToken as any).returns(
- Promise.resolve({
- token: account.token,
- refreshToken: account.refreshToken,
- user,
- }),
- );
- });
-
- afterEach(() => {
- (authentication.validateToken as any).restore();
- (authentication.logout as any).restore();
- (browserHistory.push as any).restore();
- });
-
- describe('#authenticate()', () => {
- it('should request user state using token', () =>
- authenticate(account)(dispatch, getState, undefined).then(() =>
- expect(authentication.validateToken, 'to have a call satisfying', [
- account.id,
- account.token,
- account.refreshToken,
- ]),
- ));
-
- it('should request user by extracting id from token', () =>
- authenticate({ token } as Account)(
- dispatch,
- getState,
- undefined,
- ).then(() =>
- expect(authentication.validateToken, 'to have a call satisfying', [
- 1,
- token,
- undefined,
- ]),
- ));
-
- it('should request user by extracting id from legacy token', () =>
- authenticate({ token: legacyToken } as Account)(
- dispatch,
- getState,
- undefined,
- ).then(() =>
- expect(authentication.validateToken, 'to have a call satisfying', [
- 1,
- legacyToken,
- undefined,
- ]),
- ));
-
- it(`dispatches accounts:add action`, () =>
- authenticate(account)(dispatch, getState, undefined).then(() =>
- expect(dispatch, 'to have a call satisfying', [add(account)]),
- ));
-
- it(`dispatches accounts:activate action`, () =>
- authenticate(account)(dispatch, getState, undefined).then(() =>
- expect(dispatch, 'to have a call satisfying', [activate(account)]),
- ));
-
- it(`dispatches i18n:setLocale action`, () =>
- authenticate(account)(dispatch, getState, undefined).then(() =>
- expect(dispatch, 'to have a call satisfying', [
- { type: 'i18n:setLocale', payload: { locale: 'be' } },
- ]),
- ));
-
- it('should update user state', () =>
- authenticate(account)(dispatch, getState, undefined).then(() =>
- expect(dispatch, 'to have a call satisfying', [
- updateUser({ ...user, isGuest: false }),
- ]),
- ));
-
- it('resolves with account', () =>
- authenticate(account)(dispatch, getState, undefined).then((resp) =>
- expect(resp, 'to equal', account),
- ));
-
- it('rejects when bad auth data', () => {
- (authentication.validateToken as any).returns(Promise.reject({}));
-
- return expect(
- authenticate(account)(dispatch, getState, undefined),
- 'to be rejected',
- ).then(() => {
- expect(dispatch, 'to have a call satisfying', [
- setLogin(account.email),
- ]);
-
- expect(browserHistory.push, 'to have a call satisfying', ['/login']);
- });
- });
-
- it('rejects when 5xx without logouting', () => {
- const resp = new InternalServerError('500', { status: 500 });
-
- (authentication.validateToken as any).rejects(resp);
-
- return expect(
- authenticate(account)(dispatch, getState, undefined),
- 'to be rejected with',
- resp,
- ).then(() =>
- expect(dispatch, 'to have no calls satisfying', [
- { payload: { isGuest: true } },
- ]),
- );
- });
-
- it('marks user as stranger, if there is no refreshToken', () => {
- const expectedKey = `stranger${account.id}`;
- (authentication.validateToken as any).resolves({
- token: account.token,
- user,
- });
-
- sessionStorage.removeItem(expectedKey);
-
- return authenticate(account)(dispatch, getState, undefined).then(() => {
- expect(sessionStorage.getItem(expectedKey), 'not to be null');
- sessionStorage.removeItem(expectedKey);
- });
- });
-
- describe('when user authenticated during oauth', () => {
- beforeEach(() => {
(getState as any).returns({
- accounts: {
- available: [],
- active: null,
- },
- user: {},
- auth: {
- oauth: {
- clientId: 'ely.by',
- prompt: [],
+ accounts: {
+ available: [],
+ active: null,
},
- },
+ auth: {
+ credentials: {},
+ },
+ user: {},
});
- });
- it('should dispatch setAccountSwitcher', () =>
- authenticate(account)(dispatch, getState, undefined).then(() =>
- expect(dispatch, 'to have a call satisfying', [
- setAccountSwitcher(false),
- ]),
- ));
- });
+ sinon.stub(authentication, 'validateToken').named('authentication.validateToken');
+ sinon.stub(browserHistory, 'push').named('browserHistory.push');
+ sinon.stub(authentication, 'logout').named('authentication.logout');
- describe('when one account available', () => {
- beforeEach(() => {
- (getState as any).returns({
- accounts: {
- active: account.id,
- available: [account],
- },
- auth: {
- credentials: {},
- },
- user,
- });
- });
-
- it('should activate account before auth api call', () => {
+ (authentication.logout as any).returns(Promise.resolve());
(authentication.validateToken as any).returns(
- Promise.reject({ error: 'foo' }),
+ Promise.resolve({
+ token: account.token,
+ refreshToken: account.refreshToken,
+ user,
+ }),
);
-
- return expect(
- authenticate(account)(dispatch, getState, undefined),
- 'to be rejected with',
- { error: 'foo' },
- ).then(() =>
- expect(dispatch, 'to have a call satisfying', [activate(account)]),
- );
- });
- });
- });
-
- describe('#revoke()', () => {
- describe('when one account available', () => {
- beforeEach(() => {
- (getState as any).returns({
- accounts: {
- active: account.id,
- available: [account],
- },
- auth: {
- credentials: {},
- },
- user,
- });
- });
-
- it('should dispatch reset action', () =>
- revoke(account)(dispatch, getState, undefined).then(() =>
- expect(dispatch, 'to have a call satisfying', [reset()]),
- ));
-
- it('should call logout api method in background', () =>
- revoke(account)(dispatch, getState, undefined).then(() =>
- expect(authentication.logout, 'to have a call satisfying', [
- account.token,
- ]),
- ));
-
- it('should update user state', () =>
- revoke(account)(dispatch, getState, undefined).then(
- () =>
- expect(dispatch, 'to have a call satisfying', [
- setUser({ isGuest: true }),
- ]),
- // expect(dispatch, 'to have calls satisfying', [
- // [remove(account)],
- // [expect.it('to be a function')]
- // // [logout()] // TODO: this is not a plain action. How should we simplify its testing?
- // ])
- ));
});
- describe('when multiple accounts available', () => {
- const account2 = { ...account, id: 2 };
-
- beforeEach(() => {
- (getState as any).returns({
- accounts: {
- active: account2.id,
- available: [account, account2],
- },
- user,
- });
- });
-
- it('should switch to the next account', () =>
- revoke(account2)(dispatch, getState, undefined).then(() =>
- expect(dispatch, 'to have a call satisfying', [activate(account)]),
- ));
-
- it('should remove current account', () =>
- revoke(account2)(dispatch, getState, undefined).then(() =>
- expect(dispatch, 'to have a call satisfying', [remove(account2)]),
- ));
-
- it('should call logout api method in background', () =>
- revoke(account2)(dispatch, getState, undefined).then(() =>
- expect(authentication.logout, 'to have a call satisfying', [
- account2.token,
- ]),
- ));
- });
- });
-
- describe('#logoutAll()', () => {
- const account2 = { ...account, id: 2 };
-
- beforeEach(() => {
- (getState as any).returns({
- accounts: {
- active: account2.id,
- available: [account, account2],
- },
- auth: {
- credentials: {},
- },
- user,
- });
+ afterEach(() => {
+ (authentication.validateToken as any).restore();
+ (authentication.logout as any).restore();
+ (browserHistory.push as any).restore();
});
- it('should call logout api method for each account', () => {
- logoutAll()(dispatch, getState, undefined);
+ describe('#authenticate()', () => {
+ it('should request user state using token', () =>
+ authenticate(account)(dispatch, getState, undefined).then(() =>
+ expect(authentication.validateToken, 'to have a call satisfying', [
+ account.id,
+ account.token,
+ account.refreshToken,
+ ]),
+ ));
- expect(authentication.logout, 'to have calls satisfying', [
- [account.token],
- [account2.token],
- ]);
- });
+ it('should request user by extracting id from token', () =>
+ authenticate({ token } as Account)(dispatch, getState, undefined).then(() =>
+ expect(authentication.validateToken, 'to have a call satisfying', [1, token, undefined]),
+ ));
- it('should dispatch reset', () => {
- logoutAll()(dispatch, getState, undefined);
+ it('should request user by extracting id from legacy token', () =>
+ authenticate({ token: legacyToken } as Account)(dispatch, getState, undefined).then(() =>
+ expect(authentication.validateToken, 'to have a call satisfying', [1, legacyToken, undefined]),
+ ));
- expect(dispatch, 'to have a call satisfying', [reset()]);
- });
+ it(`dispatches accounts:add action`, () =>
+ authenticate(account)(dispatch, getState, undefined).then(() =>
+ expect(dispatch, 'to have a call satisfying', [add(account)]),
+ ));
- it('should redirect to /login', () =>
- logoutAll()(dispatch, getState, undefined).then(() => {
- expect(browserHistory.push, 'to have a call satisfying', ['/login']);
- }));
+ it(`dispatches accounts:activate action`, () =>
+ authenticate(account)(dispatch, getState, undefined).then(() =>
+ expect(dispatch, 'to have a call satisfying', [activate(account)]),
+ ));
- it('should change user to guest', () =>
- logoutAll()(dispatch, getState, undefined).then(() => {
- expect(dispatch, 'to have a call satisfying', [
- setUser({
- lang: user.lang,
- isGuest: true,
- }),
- ]);
- }));
- });
+ it(`dispatches i18n:setLocale action`, () =>
+ authenticate(account)(dispatch, getState, undefined).then(() =>
+ expect(dispatch, 'to have a call satisfying', [{ type: 'i18n:setLocale', payload: { locale: 'be' } }]),
+ ));
- describe('#logoutStrangers', () => {
- const foreignAccount = {
- ...account,
- id: 2,
- refreshToken: null,
- };
+ it('should update user state', () =>
+ authenticate(account)(dispatch, getState, undefined).then(() =>
+ expect(dispatch, 'to have a call satisfying', [updateUser({ ...user, isGuest: false })]),
+ ));
- const foreignAccount2 = {
- ...foreignAccount,
- id: 3,
- };
+ it('resolves with account', () =>
+ authenticate(account)(dispatch, getState, undefined).then((resp) => expect(resp, 'to equal', account)));
- beforeEach(() => {
- (getState as any).returns({
- accounts: {
- active: foreignAccount.id,
- available: [account, foreignAccount, foreignAccount2],
- },
- user,
- });
- });
+ it('rejects when bad auth data', () => {
+ (authentication.validateToken as any).returns(Promise.reject({}));
- it('should remove stranger accounts', () => {
- logoutStrangers()(dispatch, getState, undefined);
+ return expect(authenticate(account)(dispatch, getState, undefined), 'to be rejected').then(() => {
+ expect(dispatch, 'to have a call satisfying', [setLogin(account.email)]);
- expect(dispatch, 'to have a call satisfying', [remove(foreignAccount)]);
- expect(dispatch, 'to have a call satisfying', [remove(foreignAccount2)]);
- });
-
- it('should logout stranger accounts', () => {
- logoutStrangers()(dispatch, getState, undefined);
-
- expect(authentication.logout, 'to have calls satisfying', [
- [foreignAccount.token],
- [foreignAccount2.token],
- ]);
- });
-
- it('should activate another account if available', () =>
- logoutStrangers()(dispatch, getState, undefined).then(() =>
- expect(dispatch, 'to have a call satisfying', [activate(account)]),
- ));
-
- it('should not activate another account if active account is already not a stranger', () => {
- (getState as any).returns({
- accounts: {
- active: account.id,
- available: [account, foreignAccount],
- },
- user,
- });
-
- return logoutStrangers()(dispatch, getState, undefined).then(() =>
- expect(dispatch, 'not to have calls satisfying', [activate(account)]),
- );
- });
-
- it('should not dispatch if no strangers', () => {
- (getState as any).returns({
- accounts: {
- active: account.id,
- available: [account],
- },
- user,
- });
-
- return logoutStrangers()(dispatch, getState, undefined).then(() =>
- expect(dispatch, 'was not called'),
- );
- });
-
- describe('when all accounts are strangers', () => {
- beforeEach(() => {
- (getState as any).returns({
- accounts: {
- active: foreignAccount.id,
- available: [foreignAccount, foreignAccount2],
- },
- auth: {
- credentials: {},
- },
- user,
+ expect(browserHistory.push, 'to have a call satisfying', ['/login']);
+ });
});
- logoutStrangers()(dispatch, getState, undefined);
- });
+ it('rejects when 5xx without logouting', () => {
+ const resp = new InternalServerError('500', { status: 500 });
- it('logouts all accounts', () => {
- expect(authentication.logout, 'to have calls satisfying', [
- [foreignAccount.token],
- [foreignAccount2.token],
- ]);
+ (authentication.validateToken as any).rejects(resp);
- expect(dispatch, 'to have a call satisfying', [
- setUser({ isGuest: true }),
- ]);
+ return expect(authenticate(account)(dispatch, getState, undefined), 'to be rejected with', resp).then(() =>
+ expect(dispatch, 'to have no calls satisfying', [{ payload: { isGuest: true } }]),
+ );
+ });
- expect(dispatch, 'to have a call satisfying', [reset()]);
- });
+ it('marks user as stranger, if there is no refreshToken', () => {
+ const expectedKey = `stranger${account.id}`;
+ (authentication.validateToken as any).resolves({
+ token: account.token,
+ user,
+ });
+
+ sessionStorage.removeItem(expectedKey);
+
+ return authenticate(account)(dispatch, getState, undefined).then(() => {
+ expect(sessionStorage.getItem(expectedKey), 'not to be null');
+ sessionStorage.removeItem(expectedKey);
+ });
+ });
+
+ describe('when user authenticated during oauth', () => {
+ beforeEach(() => {
+ (getState as any).returns({
+ accounts: {
+ available: [],
+ active: null,
+ },
+ user: {},
+ auth: {
+ oauth: {
+ clientId: 'ely.by',
+ prompt: [],
+ },
+ },
+ });
+ });
+
+ it('should dispatch setAccountSwitcher', () =>
+ authenticate(account)(dispatch, getState, undefined).then(() =>
+ expect(dispatch, 'to have a call satisfying', [setAccountSwitcher(false)]),
+ ));
+ });
+
+ describe('when one account available', () => {
+ beforeEach(() => {
+ (getState as any).returns({
+ accounts: {
+ active: account.id,
+ available: [account],
+ },
+ auth: {
+ credentials: {},
+ },
+ user,
+ });
+ });
+
+ it('should activate account before auth api call', () => {
+ (authentication.validateToken as any).returns(Promise.reject({ error: 'foo' }));
+
+ return expect(authenticate(account)(dispatch, getState, undefined), 'to be rejected with', {
+ error: 'foo',
+ }).then(() => expect(dispatch, 'to have a call satisfying', [activate(account)]));
+ });
+ });
});
- describe('when a stranger has a mark in sessionStorage', () => {
- const key = `stranger${foreignAccount.id}`;
+ describe('#revoke()', () => {
+ describe('when one account available', () => {
+ beforeEach(() => {
+ (getState as any).returns({
+ accounts: {
+ active: account.id,
+ available: [account],
+ },
+ auth: {
+ credentials: {},
+ },
+ user,
+ });
+ });
- beforeEach(() => {
- sessionStorage.setItem(key, '1');
+ it('should dispatch reset action', () =>
+ revoke(account)(dispatch, getState, undefined).then(() =>
+ expect(dispatch, 'to have a call satisfying', [reset()]),
+ ));
- logoutStrangers()(dispatch, getState, undefined);
- });
+ it('should call logout api method in background', () =>
+ revoke(account)(dispatch, getState, undefined).then(() =>
+ expect(authentication.logout, 'to have a call satisfying', [account.token]),
+ ));
- afterEach(() => {
- sessionStorage.removeItem(key);
- });
+ it('should update user state', () =>
+ revoke(account)(dispatch, getState, undefined).then(
+ () => expect(dispatch, 'to have a call satisfying', [setUser({ isGuest: true })]),
+ // expect(dispatch, 'to have calls satisfying', [
+ // [remove(account)],
+ // [expect.it('to be a function')]
+ // // [logout()] // TODO: this is not a plain action. How should we simplify its testing?
+ // ])
+ ));
+ });
- it('should not log out', () =>
- expect(dispatch, 'not to have calls satisfying', [
- { payload: foreignAccount },
- ]));
+ describe('when multiple accounts available', () => {
+ const account2 = { ...account, id: 2 };
+
+ beforeEach(() => {
+ (getState as any).returns({
+ accounts: {
+ active: account2.id,
+ available: [account, account2],
+ },
+ user,
+ });
+ });
+
+ it('should switch to the next account', () =>
+ revoke(account2)(dispatch, getState, undefined).then(() =>
+ expect(dispatch, 'to have a call satisfying', [activate(account)]),
+ ));
+
+ it('should remove current account', () =>
+ revoke(account2)(dispatch, getState, undefined).then(() =>
+ expect(dispatch, 'to have a call satisfying', [remove(account2)]),
+ ));
+
+ it('should call logout api method in background', () =>
+ revoke(account2)(dispatch, getState, undefined).then(() =>
+ expect(authentication.logout, 'to have a call satisfying', [account2.token]),
+ ));
+ });
+ });
+
+ describe('#logoutAll()', () => {
+ const account2 = { ...account, id: 2 };
+
+ beforeEach(() => {
+ (getState as any).returns({
+ accounts: {
+ active: account2.id,
+ available: [account, account2],
+ },
+ auth: {
+ credentials: {},
+ },
+ user,
+ });
+ });
+
+ it('should call logout api method for each account', () => {
+ logoutAll()(dispatch, getState, undefined);
+
+ expect(authentication.logout, 'to have calls satisfying', [[account.token], [account2.token]]);
+ });
+
+ it('should dispatch reset', () => {
+ logoutAll()(dispatch, getState, undefined);
+
+ expect(dispatch, 'to have a call satisfying', [reset()]);
+ });
+
+ it('should redirect to /login', () =>
+ logoutAll()(dispatch, getState, undefined).then(() => {
+ expect(browserHistory.push, 'to have a call satisfying', ['/login']);
+ }));
+
+ it('should change user to guest', () =>
+ logoutAll()(dispatch, getState, undefined).then(() => {
+ expect(dispatch, 'to have a call satisfying', [
+ setUser({
+ lang: user.lang,
+ isGuest: true,
+ }),
+ ]);
+ }));
+ });
+
+ describe('#logoutStrangers', () => {
+ const foreignAccount = {
+ ...account,
+ id: 2,
+ refreshToken: null,
+ };
+
+ const foreignAccount2 = {
+ ...foreignAccount,
+ id: 3,
+ };
+
+ beforeEach(() => {
+ (getState as any).returns({
+ accounts: {
+ active: foreignAccount.id,
+ available: [account, foreignAccount, foreignAccount2],
+ },
+ user,
+ });
+ });
+
+ it('should remove stranger accounts', () => {
+ logoutStrangers()(dispatch, getState, undefined);
+
+ expect(dispatch, 'to have a call satisfying', [remove(foreignAccount)]);
+ expect(dispatch, 'to have a call satisfying', [remove(foreignAccount2)]);
+ });
+
+ it('should logout stranger accounts', () => {
+ logoutStrangers()(dispatch, getState, undefined);
+
+ expect(authentication.logout, 'to have calls satisfying', [
+ [foreignAccount.token],
+ [foreignAccount2.token],
+ ]);
+ });
+
+ it('should activate another account if available', () =>
+ logoutStrangers()(dispatch, getState, undefined).then(() =>
+ expect(dispatch, 'to have a call satisfying', [activate(account)]),
+ ));
+
+ it('should not activate another account if active account is already not a stranger', () => {
+ (getState as any).returns({
+ accounts: {
+ active: account.id,
+ available: [account, foreignAccount],
+ },
+ user,
+ });
+
+ return logoutStrangers()(dispatch, getState, undefined).then(() =>
+ expect(dispatch, 'not to have calls satisfying', [activate(account)]),
+ );
+ });
+
+ it('should not dispatch if no strangers', () => {
+ (getState as any).returns({
+ accounts: {
+ active: account.id,
+ available: [account],
+ },
+ user,
+ });
+
+ return logoutStrangers()(dispatch, getState, undefined).then(() => expect(dispatch, 'was not called'));
+ });
+
+ describe('when all accounts are strangers', () => {
+ beforeEach(() => {
+ (getState as any).returns({
+ accounts: {
+ active: foreignAccount.id,
+ available: [foreignAccount, foreignAccount2],
+ },
+ auth: {
+ credentials: {},
+ },
+ user,
+ });
+
+ logoutStrangers()(dispatch, getState, undefined);
+ });
+
+ it('logouts all accounts', () => {
+ expect(authentication.logout, 'to have calls satisfying', [
+ [foreignAccount.token],
+ [foreignAccount2.token],
+ ]);
+
+ expect(dispatch, 'to have a call satisfying', [setUser({ isGuest: true })]);
+
+ expect(dispatch, 'to have a call satisfying', [reset()]);
+ });
+ });
+
+ describe('when a stranger has a mark in sessionStorage', () => {
+ const key = `stranger${foreignAccount.id}`;
+
+ beforeEach(() => {
+ sessionStorage.setItem(key, '1');
+
+ logoutStrangers()(dispatch, getState, undefined);
+ });
+
+ afterEach(() => {
+ sessionStorage.removeItem(key);
+ });
+
+ it('should not log out', () =>
+ expect(dispatch, 'not to have calls satisfying', [{ payload: foreignAccount }]));
+ });
});
- });
});
diff --git a/packages/app/components/accounts/actions.ts b/packages/app/components/accounts/actions.ts
index 17d7b43..d88cdee 100644
--- a/packages/app/components/accounts/actions.ts
+++ b/packages/app/components/accounts/actions.ts
@@ -1,27 +1,14 @@
import { getJwtPayloads } from 'app/functions';
import { sessionStorage } from 'app/services/localStorage';
-import {
- validateToken,
- requestToken,
- logout,
-} from 'app/services/api/authentication';
-import {
- relogin as navigateToLogin,
- setAccountSwitcher,
-} from 'app/components/auth/actions';
+import { validateToken, requestToken, logout } from 'app/services/api/authentication';
+import { relogin as navigateToLogin, setAccountSwitcher } from 'app/components/auth/actions';
import { updateUser, setGuest } from 'app/components/user/actions';
import { setLocale } from 'app/components/i18n/actions';
import logger from 'app/services/logger';
import { ThunkAction } from 'app/reducers';
import { getActiveAccount, Account } from './reducer';
-import {
- add,
- remove,
- activate,
- reset,
- updateToken,
-} from './actions/pure-actions';
+import { add, remove, activate, reset, updateToken } from './actions/pure-actions';
export { updateToken, activate, remove };
@@ -33,120 +20,118 @@ export { updateToken, activate, remove };
* @returns {Function}
*/
export function authenticate(
- account:
- | Account
- | {
- token: string;
- refreshToken: string | null;
- },
+ account:
+ | Account
+ | {
+ token: string;
+ refreshToken: string | null;
+ },
): ThunkAction> {
- const { token, refreshToken } = account;
- const email = 'email' in account ? account.email : null;
+ const { token, refreshToken } = account;
+ const email = 'email' in account ? account.email : null;
- return async (dispatch, getState) => {
- let accountId: number;
+ return async (dispatch, getState) => {
+ let accountId: number;
- if ('id' in account && typeof account.id === 'number') {
- accountId = account.id;
- } else {
- accountId = findAccountIdFromToken(token);
- }
+ if ('id' in account && typeof account.id === 'number') {
+ accountId = account.id;
+ } else {
+ accountId = findAccountIdFromToken(token);
+ }
- const knownAccount = getState().accounts.available.find(
- (item) => item.id === accountId,
- );
+ const knownAccount = getState().accounts.available.find((item) => item.id === accountId);
- if (knownAccount) {
- // this account is already available
- // activate it before validation
- dispatch(activate(knownAccount));
- }
+ if (knownAccount) {
+ // this account is already available
+ // activate it before validation
+ dispatch(activate(knownAccount));
+ }
- try {
- const {
- token: newToken,
- refreshToken: newRefreshToken,
- user,
- } = await validateToken(accountId, token, refreshToken);
- const { auth } = getState();
- const newAccount: Account = {
- id: user.id,
- username: user.username,
- email: user.email,
- token: newToken,
- refreshToken: newRefreshToken,
- };
- dispatch(add(newAccount));
- dispatch(activate(newAccount));
- dispatch(
- updateUser({
- isGuest: false,
- ...user,
- }),
- );
+ try {
+ const { token: newToken, refreshToken: newRefreshToken, user } = await validateToken(
+ accountId,
+ token,
+ refreshToken,
+ );
+ const { auth } = getState();
+ const newAccount: Account = {
+ id: user.id,
+ username: user.username,
+ email: user.email,
+ token: newToken,
+ refreshToken: newRefreshToken,
+ };
+ dispatch(add(newAccount));
+ dispatch(activate(newAccount));
+ dispatch(
+ updateUser({
+ isGuest: false,
+ ...user,
+ }),
+ );
- // TODO: probably should be moved from here, because it is a side effect
- logger.setUser(user);
+ // TODO: probably should be moved from here, because it is a side effect
+ logger.setUser(user);
- if (!newRefreshToken) {
- // mark user as stranger (user does not want us to remember his account)
- sessionStorage.setItem(`stranger${newAccount.id}`, '1');
- }
+ if (!newRefreshToken) {
+ // mark user as stranger (user does not want us to remember his account)
+ sessionStorage.setItem(`stranger${newAccount.id}`, '1');
+ }
- if (auth && auth.oauth && auth.oauth.clientId) {
- // if we authenticating during oauth, we disable account chooser
- // because user probably has made his choise now
- // this may happen, when user registers, logs in or uses account
- // chooser panel during oauth
- dispatch(setAccountSwitcher(false));
- }
+ if (auth && auth.oauth && auth.oauth.clientId) {
+ // if we authenticating during oauth, we disable account chooser
+ // because user probably has made his choise now
+ // this may happen, when user registers, logs in or uses account
+ // chooser panel during oauth
+ dispatch(setAccountSwitcher(false));
+ }
- await dispatch(setLocale(user.lang));
+ await dispatch(setLocale(user.lang));
- return newAccount;
- } catch (resp) {
- // all the logic to get the valid token was failed,
- // looks like we have some problems with token
- // lets redirect to login page
- if (typeof email === 'string') {
- // TODO: we should somehow try to find email by token
- dispatch(relogin(email));
- }
+ return newAccount;
+ } catch (resp) {
+ // all the logic to get the valid token was failed,
+ // looks like we have some problems with token
+ // lets redirect to login page
+ if (typeof email === 'string') {
+ // TODO: we should somehow try to find email by token
+ dispatch(relogin(email));
+ }
- throw resp;
- }
- };
+ throw resp;
+ }
+ };
}
/**
* Re-fetch user data for currently active account
*/
export function refreshUserData(): ThunkAction> {
- return async (dispatch, getState) => {
- const activeAccount = getActiveAccount(getState());
+ return async (dispatch, getState) => {
+ const activeAccount = getActiveAccount(getState());
- if (!activeAccount) {
- throw new Error('Can not fetch user data. No user.id available');
- }
+ if (!activeAccount) {
+ throw new Error('Can not fetch user data. No user.id available');
+ }
- await dispatch(authenticate(activeAccount));
- };
+ await dispatch(authenticate(activeAccount));
+ };
}
function findAccountIdFromToken(token: string): number {
- const { sub, jti } = getJwtPayloads(token);
+ const { sub, jti } = getJwtPayloads(token);
- // sub has the format "ely|{accountId}", so we must trim "ely|" part
- if (sub) {
- return parseInt(sub.substr(4), 10);
- }
+ // sub has the format "ely|{accountId}", so we must trim "ely|" part
+ if (sub) {
+ return parseInt(sub.substr(4), 10);
+ }
- // In older backend versions identity was stored in jti claim. Some users still have such tokens
- if (jti) {
- return jti;
- }
+ // In older backend versions identity was stored in jti claim. Some users still have such tokens
+ if (jti) {
+ return jti;
+ }
- throw new Error('payloads is not contains any identity claim');
+ throw new Error('payloads is not contains any identity claim');
}
/**
@@ -158,28 +143,28 @@ function findAccountIdFromToken(token: string): number {
* @returns {Function}
*/
export function ensureToken(): ThunkAction> {
- return (dispatch, getState) => {
- const { token } = getActiveAccount(getState()) || {};
+ return (dispatch, getState) => {
+ const { token } = getActiveAccount(getState()) || {};
- try {
- const SAFETY_FACTOR = 300; // ask new token earlier to overcome time desynchronization problem
- const { exp } = getJwtPayloads(token as any);
+ try {
+ const SAFETY_FACTOR = 300; // ask new token earlier to overcome time desynchronization problem
+ const { exp } = getJwtPayloads(token as any);
- if (exp - SAFETY_FACTOR < Date.now() / 1000) {
- return dispatch(requestNewToken());
- }
- } catch (err) {
- logger.warn('Refresh token error: bad token', {
- token,
- });
+ if (exp - SAFETY_FACTOR < Date.now() / 1000) {
+ return dispatch(requestNewToken());
+ }
+ } catch (err) {
+ logger.warn('Refresh token error: bad token', {
+ token,
+ });
- dispatch(relogin());
+ dispatch(relogin());
- return Promise.reject(new Error('Invalid token'));
- }
+ return Promise.reject(new Error('Invalid token'));
+ }
- return Promise.resolve();
- };
+ return Promise.resolve();
+ };
}
/**
@@ -193,40 +178,38 @@ export function ensureToken(): ThunkAction> {
* @returns {Function}
*/
export function recoverFromTokenError(
- error: {
- status: number;
- message: string;
- } | void,
+ error: {
+ status: number;
+ message: string;
+ } | void,
): ThunkAction> {
- return (dispatch, getState) => {
- if (error && error.status === 401) {
- const activeAccount = getActiveAccount(getState());
+ return (dispatch, getState) => {
+ if (error && error.status === 401) {
+ const activeAccount = getActiveAccount(getState());
- if (activeAccount && activeAccount.refreshToken) {
- if (
- [
- 'Token expired',
- 'Incorrect token',
- 'You are requesting with an invalid credential.',
- ].includes(error.message)
- ) {
- // request token and retry
- return dispatch(requestNewToken());
+ if (activeAccount && activeAccount.refreshToken) {
+ if (
+ ['Token expired', 'Incorrect token', 'You are requesting with an invalid credential.'].includes(
+ error.message,
+ )
+ ) {
+ // request token and retry
+ return dispatch(requestNewToken());
+ }
+
+ logger.error('Unknown unauthorized response', {
+ error,
+ });
+ }
+
+ // user's access token is outdated and we have no refreshToken
+ // or something unexpected happend
+ // in both cases we resetting all the user's state
+ dispatch(relogin());
}
- logger.error('Unknown unauthorized response', {
- error,
- });
- }
-
- // user's access token is outdated and we have no refreshToken
- // or something unexpected happend
- // in both cases we resetting all the user's state
- dispatch(relogin());
- }
-
- return Promise.reject(error);
- };
+ return Promise.reject(error);
+ };
}
/**
@@ -236,28 +219,28 @@ export function recoverFromTokenError(
* @returns {Function}
*/
export function requestNewToken(): ThunkAction> {
- return (dispatch, getState) => {
- const { refreshToken } = getActiveAccount(getState()) || {};
+ return (dispatch, getState) => {
+ const { refreshToken } = getActiveAccount(getState()) || {};
- if (!refreshToken) {
- dispatch(relogin());
+ if (!refreshToken) {
+ dispatch(relogin());
- return Promise.resolve();
- }
+ return Promise.resolve();
+ }
- return requestToken(refreshToken)
- .then((token) => {
- dispatch(updateToken(token));
- })
- .catch((resp) => {
- // all the logic to get the valid token was failed,
- // looks like we have some problems with token
- // lets redirect to login page
- dispatch(relogin());
+ return requestToken(refreshToken)
+ .then((token) => {
+ dispatch(updateToken(token));
+ })
+ .catch((resp) => {
+ // all the logic to get the valid token was failed,
+ // looks like we have some problems with token
+ // lets redirect to login page
+ dispatch(relogin());
- return Promise.reject(resp);
- });
- };
+ return Promise.reject(resp);
+ });
+ };
}
/**
@@ -268,62 +251,62 @@ export function requestNewToken(): ThunkAction> {
* @returns {Function}
*/
export function revoke(account: Account): ThunkAction> {
- return async (dispatch, getState) => {
- const accountToReplace: Account | null =
- getState().accounts.available.find(({ id }) => id !== account.id) || null;
+ return async (dispatch, getState) => {
+ const accountToReplace: Account | null =
+ getState().accounts.available.find(({ id }) => id !== account.id) || null;
- if (accountToReplace) {
- await dispatch(authenticate(accountToReplace))
- .finally(() => {
- // we need to logout user, even in case, when we can
- // not authenticate him with new account
- logout(account.token).catch(() => {
- // we don't care
- });
- dispatch(remove(account));
- })
- .catch(() => {
- // we don't care
- });
+ if (accountToReplace) {
+ await dispatch(authenticate(accountToReplace))
+ .finally(() => {
+ // we need to logout user, even in case, when we can
+ // not authenticate him with new account
+ logout(account.token).catch(() => {
+ // we don't care
+ });
+ dispatch(remove(account));
+ })
+ .catch(() => {
+ // we don't care
+ });
- return;
- }
+ return;
+ }
- return dispatch(logoutAll());
- };
+ return dispatch(logoutAll());
+ };
}
export function relogin(email?: string): ThunkAction> {
- return async (dispatch, getState) => {
- const activeAccount = getActiveAccount(getState());
+ return async (dispatch, getState) => {
+ const activeAccount = getActiveAccount(getState());
- if (!email && activeAccount) {
- email = activeAccount.email;
- }
+ if (!email && activeAccount) {
+ email = activeAccount.email;
+ }
- dispatch(navigateToLogin(email || null));
- };
+ dispatch(navigateToLogin(email || null));
+ };
}
export function logoutAll(): ThunkAction> {
- return (dispatch, getState) => {
- dispatch(setGuest());
+ return (dispatch, getState) => {
+ dispatch(setGuest());
- const {
- accounts: { available },
- } = getState();
+ const {
+ accounts: { available },
+ } = getState();
- available.forEach((account) =>
- logout(account.token).catch(() => {
- // we don't care
- }),
- );
+ available.forEach((account) =>
+ logout(account.token).catch(() => {
+ // we don't care
+ }),
+ );
- dispatch(reset());
- dispatch(relogin());
+ dispatch(reset());
+ dispatch(relogin());
- return Promise.resolve();
- };
+ return Promise.resolve();
+ };
}
/**
@@ -335,38 +318,35 @@ export function logoutAll(): ThunkAction> {
* @returns {Function}
*/
export function logoutStrangers(): ThunkAction> {
- return async (dispatch, getState) => {
- const {
- accounts: { available },
- } = getState();
- const activeAccount = getActiveAccount(getState());
+ return async (dispatch, getState) => {
+ const {
+ accounts: { available },
+ } = getState();
+ const activeAccount = getActiveAccount(getState());
- const isStranger = ({ refreshToken, id }: Account) =>
- !refreshToken && !sessionStorage.getItem(`stranger${id}`);
+ const isStranger = ({ refreshToken, id }: Account) => !refreshToken && !sessionStorage.getItem(`stranger${id}`);
- if (available.some(isStranger)) {
- const accountToReplace = available.find(
- (account) => !isStranger(account),
- );
+ if (available.some(isStranger)) {
+ const accountToReplace = available.find((account) => !isStranger(account));
- if (accountToReplace) {
- available.filter(isStranger).forEach((account) => {
- dispatch(remove(account));
- logout(account.token);
- });
+ if (accountToReplace) {
+ available.filter(isStranger).forEach((account) => {
+ dispatch(remove(account));
+ logout(account.token);
+ });
- if (activeAccount && isStranger(activeAccount)) {
- await dispatch(authenticate(accountToReplace));
+ if (activeAccount && isStranger(activeAccount)) {
+ await dispatch(authenticate(accountToReplace));
- return;
+ return;
+ }
+ } else {
+ await dispatch(logoutAll());
+
+ return;
+ }
}
- } else {
- await dispatch(logoutAll());
- return;
- }
- }
-
- return Promise.resolve();
- };
+ return Promise.resolve();
+ };
}
diff --git a/packages/app/components/accounts/actions/pure-actions.ts b/packages/app/components/accounts/actions/pure-actions.ts
index c65d464..4916110 100644
--- a/packages/app/components/accounts/actions/pure-actions.ts
+++ b/packages/app/components/accounts/actions/pure-actions.ts
@@ -2,66 +2,61 @@ import { Action as ReduxAction } from 'redux';
import { Account } from 'app/components/accounts/reducer';
interface AddAction extends ReduxAction {
- type: 'accounts:add';
- payload: Account;
+ type: 'accounts:add';
+ payload: Account;
}
export function add(account: Account): AddAction {
- return {
- type: 'accounts:add',
- payload: account,
- };
+ return {
+ type: 'accounts:add',
+ payload: account,
+ };
}
interface RemoveAction extends ReduxAction {
- type: 'accounts:remove';
- payload: Account;
+ type: 'accounts:remove';
+ payload: Account;
}
export function remove(account: Account): RemoveAction {
- return {
- type: 'accounts:remove',
- payload: account,
- };
+ return {
+ type: 'accounts:remove',
+ payload: account,
+ };
}
interface ActivateAction extends ReduxAction {
- type: 'accounts:activate';
- payload: Account;
+ type: 'accounts:activate';
+ payload: Account;
}
export function activate(account: Account): ActivateAction {
- return {
- type: 'accounts:activate',
- payload: account,
- };
+ return {
+ type: 'accounts:activate',
+ payload: account,
+ };
}
interface ResetAction extends ReduxAction {
- type: 'accounts:reset';
+ type: 'accounts:reset';
}
export function reset(): ResetAction {
- return {
- type: 'accounts:reset',
- };
+ return {
+ type: 'accounts:reset',
+ };
}
interface UpdateTokenAction extends ReduxAction {
- type: 'accounts:updateToken';
- payload: string;
+ type: 'accounts:updateToken';
+ payload: string;
}
export function updateToken(token: string): UpdateTokenAction {
- return {
- type: 'accounts:updateToken',
- payload: token,
- };
+ return {
+ type: 'accounts:updateToken',
+ payload: token,
+ };
}
-export type Action =
- | AddAction
- | RemoveAction
- | ActivateAction
- | ResetAction
- | UpdateTokenAction;
+export type Action = AddAction | RemoveAction | ActivateAction | ResetAction | UpdateTokenAction;
diff --git a/packages/app/components/accounts/reducer.test.ts b/packages/app/components/accounts/reducer.test.ts
index 4ec1c47..378807a 100644
--- a/packages/app/components/accounts/reducer.test.ts
+++ b/packages/app/components/accounts/reducer.test.ts
@@ -6,148 +6,122 @@ import { AccountsState } from './index';
import accounts, { Account } from './reducer';
const account: Account = {
- id: 1,
- username: 'username',
- email: 'email@test.com',
- token: 'foo',
+ id: 1,
+ username: 'username',
+ email: 'email@test.com',
+ token: 'foo',
} as Account;
describe('Accounts reducer', () => {
- let initial: AccountsState;
+ let initial: AccountsState;
- beforeEach(() => {
- initial = accounts(undefined, {} as any);
- });
-
- it('should be empty', () =>
- expect(accounts(undefined, {} as any), 'to equal', {
- active: null,
- available: [],
- }));
-
- it('should return last state if unsupported action', () =>
- expect(accounts({ state: 'foo' } as any, {} as any), 'to equal', {
- state: 'foo',
- }));
-
- describe('accounts:activate', () => {
- it('sets active account', () => {
- expect(accounts(initial, activate(account)), 'to satisfy', {
- active: account.id,
- });
- });
- });
-
- describe('accounts:add', () => {
- it('adds an account', () =>
- expect(accounts(initial, add(account)), 'to satisfy', {
- available: [account],
- }));
-
- it('should replace if account was added for the second time', () => {
- const outdatedAccount = {
- ...account,
- someShit: true,
- };
-
- const updatedAccount = {
- ...account,
- token: 'newToken',
- };
-
- expect(
- accounts(
- { ...initial, available: [outdatedAccount] },
- add(updatedAccount),
- ),
- 'to satisfy',
- {
- available: [updatedAccount],
- },
- );
+ beforeEach(() => {
+ initial = accounts(undefined, {} as any);
});
- it('should sort accounts by username', () => {
- const newAccount = {
- ...account,
- id: 2,
- username: 'abc',
- };
+ it('should be empty', () =>
+ expect(accounts(undefined, {} as any), 'to equal', {
+ active: null,
+ available: [],
+ }));
- expect(
- accounts({ ...initial, available: [account] }, add(newAccount)),
- 'to satisfy',
- {
- available: [newAccount, account],
- },
- );
+ it('should return last state if unsupported action', () =>
+ expect(accounts({ state: 'foo' } as any, {} as any), 'to equal', {
+ state: 'foo',
+ }));
+
+ describe('accounts:activate', () => {
+ it('sets active account', () => {
+ expect(accounts(initial, activate(account)), 'to satisfy', {
+ active: account.id,
+ });
+ });
});
- it('throws, when account is invalid', () => {
- expect(
- () =>
- accounts(
- initial,
- // @ts-ignore
- add(),
- ),
- 'to throw',
- 'Invalid or empty payload passed for accounts.add',
- );
+ describe('accounts:add', () => {
+ it('adds an account', () =>
+ expect(accounts(initial, add(account)), 'to satisfy', {
+ available: [account],
+ }));
+
+ it('should replace if account was added for the second time', () => {
+ const outdatedAccount = {
+ ...account,
+ someShit: true,
+ };
+
+ const updatedAccount = {
+ ...account,
+ token: 'newToken',
+ };
+
+ expect(accounts({ ...initial, available: [outdatedAccount] }, add(updatedAccount)), 'to satisfy', {
+ available: [updatedAccount],
+ });
+ });
+
+ it('should sort accounts by username', () => {
+ const newAccount = {
+ ...account,
+ id: 2,
+ username: 'abc',
+ };
+
+ expect(accounts({ ...initial, available: [account] }, add(newAccount)), 'to satisfy', {
+ available: [newAccount, account],
+ });
+ });
+
+ it('throws, when account is invalid', () => {
+ expect(
+ () =>
+ accounts(
+ initial,
+ // @ts-ignore
+ add(),
+ ),
+ 'to throw',
+ 'Invalid or empty payload passed for accounts.add',
+ );
+ });
});
- });
- describe('accounts:remove', () => {
- it('should remove an account', () =>
- expect(
- accounts({ ...initial, available: [account] }, remove(account)),
- 'to equal',
- initial,
- ));
+ describe('accounts:remove', () => {
+ it('should remove an account', () =>
+ expect(accounts({ ...initial, available: [account] }, remove(account)), 'to equal', initial));
- it('throws, when account is invalid', () => {
- expect(
- () =>
- accounts(
- initial,
- // @ts-ignore
- remove(),
- ),
- 'to throw',
- 'Invalid or empty payload passed for accounts.remove',
- );
+ it('throws, when account is invalid', () => {
+ expect(
+ () =>
+ accounts(
+ initial,
+ // @ts-ignore
+ remove(),
+ ),
+ 'to throw',
+ 'Invalid or empty payload passed for accounts.remove',
+ );
+ });
});
- });
- describe('actions:reset', () => {
- it('should reset accounts state', () =>
- expect(
- accounts({ ...initial, available: [account] }, reset()),
- 'to equal',
- initial,
- ));
- });
-
- describe('accounts:updateToken', () => {
- it('should update token', () => {
- const newToken = 'newToken';
-
- expect(
- accounts(
- { active: account.id, available: [account] },
- updateToken(newToken),
- ),
- 'to satisfy',
- {
- active: account.id,
- available: [
- {
- ...account,
- token: newToken,
- },
- ],
- },
- );
+ describe('actions:reset', () => {
+ it('should reset accounts state', () =>
+ expect(accounts({ ...initial, available: [account] }, reset()), 'to equal', initial));
+ });
+
+ describe('accounts:updateToken', () => {
+ it('should update token', () => {
+ const newToken = 'newToken';
+
+ expect(accounts({ active: account.id, available: [account] }, updateToken(newToken)), 'to satisfy', {
+ active: account.id,
+ available: [
+ {
+ ...account,
+ token: newToken,
+ },
+ ],
+ });
+ });
});
- });
});
diff --git a/packages/app/components/accounts/reducer.ts b/packages/app/components/accounts/reducer.ts
index f34799a..f8b24d0 100644
--- a/packages/app/components/accounts/reducer.ts
+++ b/packages/app/components/accounts/reducer.ts
@@ -1,124 +1,116 @@
import { Action } from './actions/pure-actions';
export type Account = {
- id: number;
- username: string;
- email: string;
- token: string;
- refreshToken: string | null;
+ id: number;
+ username: string;
+ email: string;
+ token: string;
+ refreshToken: string | null;
};
export type State = {
- active: number | null;
- available: Array;
+ active: number | null;
+ available: Array;
};
export function getActiveAccount(state: { accounts: State }): Account | null {
- const accountId = state.accounts.active;
+ const accountId = state.accounts.active;
- return (
- state.accounts.available.find((account) => account.id === accountId) || null
- );
+ return state.accounts.available.find((account) => account.id === accountId) || null;
}
-export function getAvailableAccounts(state: {
- accounts: State;
-}): Array {
- return state.accounts.available;
+export function getAvailableAccounts(state: { accounts: State }): Array {
+ return state.accounts.available;
}
export default function accounts(
- state: State = {
- active: null,
- available: [],
- },
- action: Action,
-): State {
- switch (action.type) {
- case 'accounts:add': {
- if (!action.payload || !action.payload.id || !action.payload.token) {
- throw new Error('Invalid or empty payload passed for accounts.add');
- }
-
- const { payload } = action;
-
- state.available = state.available
- .filter((account) => account.id !== payload.id)
- .concat(payload);
-
- state.available.sort((account1, account2) => {
- if (account1.username === account2.username) {
- return 0;
- }
-
- return account1.username > account2.username ? 1 : -1;
- });
-
- return state;
- }
-
- case 'accounts:activate': {
- if (!action.payload || !action.payload.id || !action.payload.token) {
- throw new Error('Invalid or empty payload passed for accounts.add');
- }
-
- const { payload } = action;
-
- return {
- available: state.available.map((account) => {
- if (account.id === payload.id) {
- return { ...payload };
- }
-
- return { ...account };
- }),
- active: payload.id,
- };
- }
-
- case 'accounts:reset':
- return {
+ state: State = {
active: null,
available: [],
- };
+ },
+ action: Action,
+): State {
+ switch (action.type) {
+ case 'accounts:add': {
+ if (!action.payload || !action.payload.id || !action.payload.token) {
+ throw new Error('Invalid or empty payload passed for accounts.add');
+ }
- case 'accounts:remove': {
- if (!action.payload || !action.payload.id) {
- throw new Error('Invalid or empty payload passed for accounts.remove');
- }
+ const { payload } = action;
- const { payload } = action;
+ state.available = state.available.filter((account) => account.id !== payload.id).concat(payload);
- return {
- ...state,
- available: state.available.filter(
- (account) => account.id !== payload.id,
- ),
- };
- }
+ state.available.sort((account1, account2) => {
+ if (account1.username === account2.username) {
+ return 0;
+ }
- case 'accounts:updateToken': {
- if (typeof action.payload !== 'string') {
- throw new Error('payload must be a jwt token');
- }
+ return account1.username > account2.username ? 1 : -1;
+ });
- const { payload } = action;
+ return state;
+ }
+
+ case 'accounts:activate': {
+ if (!action.payload || !action.payload.id || !action.payload.token) {
+ throw new Error('Invalid or empty payload passed for accounts.add');
+ }
+
+ const { payload } = action;
- return {
- ...state,
- available: state.available.map((account) => {
- if (account.id === state.active) {
return {
- ...account,
- token: payload,
+ available: state.available.map((account) => {
+ if (account.id === payload.id) {
+ return { ...payload };
+ }
+
+ return { ...account };
+ }),
+ active: payload.id,
};
- }
+ }
- return { ...account };
- }),
- };
+ case 'accounts:reset':
+ return {
+ active: null,
+ available: [],
+ };
+
+ case 'accounts:remove': {
+ if (!action.payload || !action.payload.id) {
+ throw new Error('Invalid or empty payload passed for accounts.remove');
+ }
+
+ const { payload } = action;
+
+ return {
+ ...state,
+ available: state.available.filter((account) => account.id !== payload.id),
+ };
+ }
+
+ case 'accounts:updateToken': {
+ if (typeof action.payload !== 'string') {
+ throw new Error('payload must be a jwt token');
+ }
+
+ const { payload } = action;
+
+ return {
+ ...state,
+ available: state.available.map((account) => {
+ if (account.id === state.active) {
+ return {
+ ...account,
+ token: payload,
+ };
+ }
+
+ return { ...account };
+ }),
+ };
+ }
}
- }
- return state;
+ return state;
}
diff --git a/packages/app/components/auth/AuthTitle.tsx b/packages/app/components/auth/AuthTitle.tsx
index 2557e2c..cafdb35 100644
--- a/packages/app/components/auth/AuthTitle.tsx
+++ b/packages/app/components/auth/AuthTitle.tsx
@@ -3,14 +3,14 @@ import { Helmet } from 'react-helmet-async';
import { FormattedMessage as Message, MessageDescriptor } from 'react-intl';
export default function AuthTitle({ title }: { title: MessageDescriptor }) {
- return (
-
- {(msg) => (
-
- {msg}
-
- );
+ return (
+
+ {(msg) => (
+
+ {msg}
+
+ );
}
diff --git a/packages/app/components/auth/BaseAuthBody.tsx b/packages/app/components/auth/BaseAuthBody.tsx
index 7692663..d5339c7 100644
--- a/packages/app/components/auth/BaseAuthBody.tsx
+++ b/packages/app/components/auth/BaseAuthBody.tsx
@@ -11,63 +11,63 @@ import Context, { AuthContext } from './Context';
*/
class BaseAuthBody extends React.Component<
- // TODO: this may be converted to generic type RouteComponentProps
- RouteComponentProps>
+ // TODO: this may be converted to generic type RouteComponentProps
+ RouteComponentProps>
> {
- static contextType = Context;
- /* TODO: use declare */ context: React.ContextType;
- prevErrors: AuthContext['auth']['error'];
+ static contextType = Context;
+ /* TODO: use declare */ context: React.ContextType;
+ prevErrors: AuthContext['auth']['error'];
- autoFocusField: string | null = '';
+ autoFocusField: string | null = '';
- componentDidMount() {
- this.prevErrors = this.context.auth.error;
- }
-
- componentDidUpdate() {
- if (this.context.auth.error !== this.prevErrors) {
- this.form.setErrors(this.context.auth.error || {});
- this.context.requestRedraw();
+ componentDidMount() {
+ this.prevErrors = this.context.auth.error;
}
- this.prevErrors = this.context.auth.error;
- }
+ componentDidUpdate() {
+ if (this.context.auth.error !== this.prevErrors) {
+ this.form.setErrors(this.context.auth.error || {});
+ this.context.requestRedraw();
+ }
- renderErrors(): ReactNode {
- const error = this.form.getFirstError();
-
- if (error === null) {
- return null;
+ this.prevErrors = this.context.auth.error;
}
- return ;
- clearErrors: () => void;
- resolve: (payload: { [key: string]: any } | undefined) => void;
- reject: (payload: { [key: string]: any } | undefined) => void;
+ auth: AuthState;
+ user: User;
+ requestRedraw: () => Promise;
+ clearErrors: () => void;
+ resolve: (payload: { [key: string]: any } | undefined) => void;
+ reject: (payload: { [key: string]: any } | undefined) => void;
}
const Context = React.createContext({
- auth: {
- error: null,
- login: '',
- scopes: [],
- } as any,
- user: {
- id: null,
- isGuest: true,
- } as any,
- async requestRedraw() {},
- clearErrors() {},
- resolve() {},
- reject() {},
+ auth: {
+ error: null,
+ login: '',
+ scopes: [],
+ } as any,
+ user: {
+ id: null,
+ isGuest: true,
+ } as any,
+ async requestRedraw() {},
+ clearErrors() {},
+ resolve() {},
+ reject() {},
});
Context.displayName = 'AuthContext';
diff --git a/packages/app/components/auth/PanelTransition.tsx b/packages/app/components/auth/PanelTransition.tsx
index 6279498..5364072 100644
--- a/packages/app/components/auth/PanelTransition.tsx
+++ b/packages/app/components/auth/PanelTransition.tsx
@@ -1,26 +1,9 @@
-import React, {
- CSSProperties,
- MouseEventHandler,
- ReactElement,
- ReactNode,
-} from 'react';
+import React, { CSSProperties, MouseEventHandler, ReactElement, ReactNode } from 'react';
import { AccountsState } from 'app/components/accounts';
import { User } from 'app/components/user';
import { connect } from 'react-redux';
-import {
- TransitionMotion,
- spring,
- PlainStyle,
- Style,
- TransitionStyle,
- TransitionPlainStyle,
-} from 'react-motion';
-import {
- Panel,
- PanelBody,
- PanelFooter,
- PanelHeader,
-} from 'app/components/ui/Panel';
+import { TransitionMotion, spring, PlainStyle, Style, TransitionStyle, TransitionPlainStyle } from 'react-motion';
+import { Panel, PanelBody, PanelFooter, PanelHeader } from 'app/components/ui/Panel';
import { Form } from 'app/components/ui/form';
import MeasureHeight from 'app/components/MeasureHeight';
import panelStyles from 'app/components/ui/panel.scss';
@@ -36,9 +19,9 @@ import helpLinks from './helpLinks.scss';
const opacitySpringConfig = { stiffness: 300, damping: 20 };
const transformSpringConfig = { stiffness: 500, damping: 50, precision: 0.5 };
const changeContextSpringConfig = {
- stiffness: 500,
- damping: 20,
- precision: 0.5,
+ stiffness: 500,
+ damping: 20,
+ precision: 0.5,
};
const { helpLinks: helpLinksStyles } = helpLinks;
@@ -57,592 +40,543 @@ type PanelId = string;
* (e.g. the panel with lower index will slide from left side, and with greater from right side)
*/
const contexts: Array> = [
- ['login', 'password', 'forgotPassword', 'mfa', 'recoverPassword'],
- ['register', 'activation', 'resendActivation'],
- ['acceptRules'],
- ['chooseAccount', 'permissions'],
+ ['login', 'password', 'forgotPassword', 'mfa', 'recoverPassword'],
+ ['register', 'activation', 'resendActivation'],
+ ['acceptRules'],
+ ['chooseAccount', 'permissions'],
];
// eslint-disable-next-line
if (process.env.NODE_ENV !== 'production') {
- // test panel uniquenes between contexts
- // TODO: it may be moved to tests in future
+ // test panel uniquenes between contexts
+ // TODO: it may be moved to tests in future
- contexts.reduce((acc, context) => {
- context.forEach((panel) => {
- if (acc[panel]) {
- throw new Error(
- `Panel ${panel} is already exists in context ${JSON.stringify(
- acc[panel],
- )}`,
- );
- }
+ contexts.reduce((acc, context) => {
+ context.forEach((panel) => {
+ if (acc[panel]) {
+ throw new Error(`Panel ${panel} is already exists in context ${JSON.stringify(acc[panel])}`);
+ }
- acc[panel] = context;
- });
+ acc[panel] = context;
+ });
- return acc;
- }, {} as Record>);
+ return acc;
+ }, {} as Record>);
}
type ValidationError =
- | string
- | {
- type: string;
- payload: Record;
- };
+ | string
+ | {
+ type: string;
+ payload: Record;
+ };
interface AnimationStyle extends PlainStyle {
- opacitySpring: number;
- transformSpring: number;
+ opacitySpring: number;
+ transformSpring: number;
}
interface AnimationData {
- Title: ReactElement;
- Body: ReactElement;
- Footer: ReactElement;
- Links: ReactNode;
- hasBackButton: boolean | ((props: Props) => boolean);
+ Title: ReactElement;
+ Body: ReactElement;
+ Footer: ReactElement;
+ Links: ReactNode;
+ hasBackButton: boolean | ((props: Props) => boolean);
}
interface AnimationContext extends TransitionPlainStyle {
- key: PanelId;
- style: AnimationStyle;
- data: AnimationData;
+ key: PanelId;
+ style: AnimationStyle;
+ data: AnimationData;
}
interface OwnProps {
- Title: ReactElement;
- Body: ReactElement;
- Footer: ReactElement;
- Links: ReactNode;
+ Title: ReactElement;
+ Body: ReactElement;
+ Footer: ReactElement;
+ Links: ReactNode;
}
interface Props extends OwnProps {
- // context props
- auth: AuthState;
- user: User;
- accounts: AccountsState;
- clearErrors: () => void;
- resolve: () => void;
- reject: () => void;
+ // context props
+ auth: AuthState;
+ user: User;
+ accounts: AccountsState;
+ clearErrors: () => void;
+ resolve: () => void;
+ reject: () => void;
- setErrors: (errors: Record) => void;
+ setErrors: (errors: Record) => void;
}
interface State {
- contextHeight: number;
- panelId: PanelId | void;
- prevPanelId: PanelId | void;
- isHeightDirty: boolean;
- forceHeight: 1 | 0;
- direction: 'X' | 'Y';
- formsHeights: Record;
+ contextHeight: number;
+ panelId: PanelId | void;
+ prevPanelId: PanelId | void;
+ isHeightDirty: boolean;
+ forceHeight: 1 | 0;
+ direction: 'X' | 'Y';
+ formsHeights: Record;
}
class PanelTransition extends React.PureComponent {
- state: State = {
- contextHeight: 0,
- panelId: this.props.Body && (this.props.Body.type as any).panelId,
- isHeightDirty: false,
- forceHeight: 0 as const,
- direction: 'X' as const,
- prevPanelId: undefined,
- formsHeights: {},
- };
+ state: State = {
+ contextHeight: 0,
+ panelId: this.props.Body && (this.props.Body.type as any).panelId,
+ isHeightDirty: false,
+ forceHeight: 0 as const,
+ direction: 'X' as const,
+ prevPanelId: undefined,
+ formsHeights: {},
+ };
- isHeightMeasured: boolean = false;
- wasAutoFocused: boolean = false;
- body: {
- autoFocus: () => void;
- onFormSubmit: () => void;
- } | null = null;
+ isHeightMeasured: boolean = false;
+ wasAutoFocused: boolean = false;
+ body: {
+ autoFocus: () => void;
+ onFormSubmit: () => void;
+ } | null = null;
- timerIds: Array = []; // this is a list of a probably running timeouts to clean on unmount
+ timerIds: Array = []; // this is a list of a probably running timeouts to clean on unmount
- componentDidUpdate(prevProps: Props) {
- const nextPanel: PanelId =
- this.props.Body && (this.props.Body.type as any).panelId;
- const prevPanel: PanelId =
- prevProps.Body && (prevProps.Body.type as any).panelId;
+ componentDidUpdate(prevProps: Props) {
+ const nextPanel: PanelId = this.props.Body && (this.props.Body.type as any).panelId;
+ const prevPanel: PanelId = prevProps.Body && (prevProps.Body.type as any).panelId;
- if (nextPanel !== prevPanel) {
- const direction = this.getDirection(nextPanel, prevPanel);
- const forceHeight = direction === 'Y' && nextPanel !== prevPanel ? 1 : 0;
+ if (nextPanel !== prevPanel) {
+ const direction = this.getDirection(nextPanel, prevPanel);
+ const forceHeight = direction === 'Y' && nextPanel !== prevPanel ? 1 : 0;
- this.props.clearErrors();
+ this.props.clearErrors();
- this.setState({
- direction,
- panelId: nextPanel,
- prevPanelId: prevPanel,
- forceHeight,
- });
+ this.setState({
+ direction,
+ panelId: nextPanel,
+ prevPanelId: prevPanel,
+ forceHeight,
+ });
- if (forceHeight) {
- this.timerIds.push(
- // https://stackoverflow.com/a/51040768/5184751
- window.setTimeout(() => {
- this.setState({ forceHeight: 0 });
- }, 100),
- );
- }
- }
- }
-
- componentWillUnmount() {
- this.timerIds.forEach((id) => clearTimeout(id));
- this.timerIds = [];
- }
-
- render() {
- const { contextHeight, forceHeight } = this.state;
-
- const {
- Title,
- Body,
- Footer,
- Links,
- auth,
- user,
- clearErrors,
- resolve,
- reject,
- } = this.props;
-
- if (this.props.children) {
- return this.props.children;
- } else if (!Title || !Body || !Footer || !Links) {
- throw new Error('Title, Body, Footer and Links are required');
+ if (forceHeight) {
+ this.timerIds.push(
+ // https://stackoverflow.com/a/51040768/5184751
+ window.setTimeout(() => {
+ this.setState({ forceHeight: 0 });
+ }, 100),
+ );
+ }
+ }
}
- const {
- panelId,
- hasGoBack,
- }: {
- panelId: PanelId;
- hasGoBack: boolean;
- } = Body.type as any;
+ componentWillUnmount() {
+ this.timerIds.forEach((id) => clearTimeout(id));
+ this.timerIds = [];
+ }
- const formHeight = this.state.formsHeights[panelId] || 0;
+ render() {
+ const { contextHeight, forceHeight } = this.state;
- // a hack to disable height animation on first render
- const { isHeightMeasured } = this;
- this.isHeightMeasured = isHeightMeasured || formHeight > 0;
+ const { Title, Body, Footer, Links, auth, user, clearErrors, resolve, reject } = this.props;
- return (
-
-
- {(items) => {
- const panels = items.filter(({ key }) => key !== 'common');
- const [common] = items.filter(({ key }) => key === 'common');
+ if (this.props.children) {
+ return this.props.children;
+ } else if (!Title || !Body || !Footer || !Links) {
+ throw new Error('Title, Body, Footer and Links are required');
+ }
- const contentHeight = {
- overflow: 'hidden',
- height: forceHeight
- ? common.style.switchContextHeightSpring
- : 'auto',
- };
+ const {
+ panelId,
+ hasGoBack,
+ }: {
+ panelId: PanelId;
+ hasGoBack: boolean;
+ } = Body.type as any;
- this.tryToAutoFocus(panels.length);
+ const formHeight = this.state.formsHeights[panelId] || 0;
- const bodyHeight = {
- position: 'relative' as const,
- height: `${common.style.heightSpring}px`,
- };
+ // a hack to disable height animation on first render
+ const { isHeightMeasured } = this;
+ this.isHeightMeasured = isHeightMeasured || formHeight > 0;
- return (
-
- );
- }}
-
-
- );
- }
+ {(items) => {
+ const panels = items.filter(({ key }) => key !== 'common');
+ const [common] = items.filter(({ key }) => key === 'common');
- onFormSubmit = (): void => {
- this.props.clearErrors();
+ const contentHeight = {
+ overflow: 'hidden',
+ height: forceHeight ? common.style.switchContextHeightSpring : 'auto',
+ };
- if (this.body) {
- this.body.onFormSubmit();
- }
- };
+ this.tryToAutoFocus(panels.length);
- onFormInvalid = (errors: Record): void =>
- this.props.setErrors(errors);
+ const bodyHeight = {
+ position: 'relative' as const,
+ height: `${common.style.heightSpring}px`,
+ };
- willEnter = (config: TransitionStyle): PlainStyle => {
- const transform = this.getTransformForPanel(config.key);
-
- return {
- transformSpring: transform,
- opacitySpring: 1,
- };
- };
-
- willLeave = (config: TransitionStyle): Style => {
- const transform = this.getTransformForPanel(config.key);
-
- return {
- transformSpring: spring(transform, transformSpringConfig),
- opacitySpring: spring(0, opacitySpringConfig),
- };
- };
-
- getTransformForPanel(key: PanelId): number {
- const { panelId, prevPanelId } = this.state;
-
- const fromLeft = -1;
- const fromRight = 1;
-
- const currentContext = contexts.find((context) => context.includes(key));
-
- if (!currentContext) {
- throw new Error(`Can not find settings for ${key} panel`);
+ return (
+
+ );
+ }}
+
+
+ );
}
- let sign =
- prevPanelId &&
- panelId &&
- currentContext.indexOf(panelId) > currentContext.indexOf(prevPanelId)
- ? fromRight
- : fromLeft;
+ onFormSubmit = (): void => {
+ this.props.clearErrors();
- if (prevPanelId === key) {
- sign *= -1;
- }
-
- return sign * 100;
- }
-
- getDirection(next: PanelId, prev: PanelId): 'X' | 'Y' {
- const context = contexts.find((item) => item.includes(prev));
-
- if (!context) {
- throw new Error(`Can not find context for transition ${prev} -> ${next}`);
- }
-
- return context.includes(next) ? 'X' : 'Y';
- }
-
- onUpdateHeight = (height: number, key: PanelId): void => {
- this.setState({
- formsHeights: {
- ...this.state.formsHeights,
- [key]: height,
- },
- });
- };
-
- onUpdateContextHeight = (height: number): void => {
- this.setState({
- contextHeight: height,
- });
- };
-
- onGoBack: MouseEventHandler = (event): void => {
- event.preventDefault();
- authFlow.goBack();
- };
-
- /**
- * Tries to auto focus form fields after transition end
- *
- * @param {number} length number of panels transitioned
- */
- tryToAutoFocus(length: number): void {
- if (!this.body) {
- return;
- }
-
- if (length === 1) {
- if (!this.wasAutoFocused) {
- this.body.autoFocus();
- }
-
- this.wasAutoFocused = true;
- } else if (this.wasAutoFocused) {
- this.wasAutoFocused = false;
- }
- }
-
- shouldMeasureHeight(): string {
- const { user, accounts, auth } = this.props;
- const { isHeightDirty } = this.state;
-
- const errorString = Object.values(auth.error || {}).reduce((acc, item) => {
- if (typeof item === 'string') {
- return acc + item;
- }
-
- return acc + item.type;
- }, '') as string;
-
- return [
- errorString,
- isHeightDirty,
- user.lang,
- accounts.available.length,
- ].join('');
- }
-
- getHeader({ key, style, data }: TransitionPlainStyle): ReactElement {
- const { Title } = data as AnimationData;
- const { transformSpring } = (style as unknown) as AnimationStyle;
-
- let { hasBackButton } = data;
-
- if (typeof hasBackButton === 'function') {
- hasBackButton = hasBackButton(this.props);
- }
-
- const transitionStyle = {
- ...this.getDefaultTransitionStyles(
- key,
- (style as unknown) as AnimationStyle,
- ),
- opacity: 1, // reset default
+ if (this.body) {
+ this.body.onFormSubmit();
+ }
};
- const scrollStyle = this.translate(transformSpring, 'Y');
+ onFormInvalid = (errors: Record): void => this.props.setErrors(errors);
- const sideScrollStyle = {
- position: 'relative' as const,
- zIndex: 2,
- ...this.translate(-Math.abs(transformSpring)),
+ willEnter = (config: TransitionStyle): PlainStyle => {
+ const transform = this.getTransformForPanel(config.key);
+
+ return {
+ transformSpring: transform,
+ opacitySpring: 1,
+ };
};
- const backButton = (
-
- );
+ willLeave = (config: TransitionStyle): Style => {
+ const transform = this.getTransformForPanel(config.key);
- return (
- this.onUpdateHeight(height, key)}
- >
- {React.cloneElement(Body, {
- // @ts-ignore
- ref: (body) => {
- this.body = body;
- },
- })}
-
- );
- }
-
- getFooter({ key, style, data }: TransitionPlainStyle): ReactElement {
- const { Footer } = data as AnimationData;
-
- const transitionStyle = this.getDefaultTransitionStyles(
- key,
- (style as unknown) as AnimationStyle,
- );
-
- return (
- ,
- ): {
- position: 'absolute';
- top: number;
- left: number;
- width: string;
- opacity: number;
- pointerEvents: 'none' | 'auto';
- } {
- return {
- position: 'absolute',
- top: 0,
- left: 0,
- width: '100%',
- opacity: opacitySpring,
- pointerEvents: key === this.state.panelId ? 'auto' : 'none',
+ onUpdateContextHeight = (height: number): void => {
+ this.setState({
+ contextHeight: height,
+ });
};
- }
- translate(
- value: number,
- direction: 'X' | 'Y' = 'X',
- unit: '%' | 'px' = '%',
- ): CSSProperties {
- return {
- WebkitTransform: `translate${direction}(${value}${unit})`,
- transform: `translate${direction}(${value}${unit})`,
+ onGoBack: MouseEventHandler = (event): void => {
+ event.preventDefault();
+ authFlow.goBack();
};
- }
- requestRedraw = (): Promise =>
- new Promise((resolve) =>
- this.setState({ isHeightDirty: true }, () => {
- this.setState({ isHeightDirty: false });
+ /**
+ * Tries to auto focus form fields after transition end
+ *
+ * @param {number} length number of panels transitioned
+ */
+ tryToAutoFocus(length: number): void {
+ if (!this.body) {
+ return;
+ }
- // wait till transition end
- this.timerIds.push(setTimeout(resolve, 200));
- }),
- );
+ if (length === 1) {
+ if (!this.wasAutoFocused) {
+ this.body.autoFocus();
+ }
+
+ this.wasAutoFocused = true;
+ } else if (this.wasAutoFocused) {
+ this.wasAutoFocused = false;
+ }
+ }
+
+ shouldMeasureHeight(): string {
+ const { user, accounts, auth } = this.props;
+ const { isHeightDirty } = this.state;
+
+ const errorString = Object.values(auth.error || {}).reduce((acc, item) => {
+ if (typeof item === 'string') {
+ return acc + item;
+ }
+
+ return acc + item.type;
+ }, '') as string;
+
+ return [errorString, isHeightDirty, user.lang, accounts.available.length].join('');
+ }
+
+ getHeader({ key, style, data }: TransitionPlainStyle): ReactElement {
+ const { Title } = data as AnimationData;
+ const { transformSpring } = (style as unknown) as AnimationStyle;
+
+ let { hasBackButton } = data;
+
+ if (typeof hasBackButton === 'function') {
+ hasBackButton = hasBackButton(this.props);
+ }
+
+ const transitionStyle = {
+ ...this.getDefaultTransitionStyles(key, (style as unknown) as AnimationStyle),
+ opacity: 1, // reset default
+ };
+
+ const scrollStyle = this.translate(transformSpring, 'Y');
+
+ const sideScrollStyle = {
+ position: 'relative' as const,
+ zIndex: 2,
+ ...this.translate(-Math.abs(transformSpring)),
+ };
+
+ const backButton = (
+
+ );
+
+ return (
+ this.onUpdateHeight(height, key)}
+ >
+ {React.cloneElement(Body, {
+ // @ts-ignore
+ ref: (body) => {
+ this.body = body;
+ },
+ })}
+
+ );
+ }
+
+ getFooter({ key, style, data }: TransitionPlainStyle): ReactElement {
+ const { Footer } = data as AnimationData;
+
+ const transitionStyle = this.getDefaultTransitionStyles(key, (style as unknown) as AnimationStyle);
+
+ return (
+ ,
+ ): {
+ position: 'absolute';
+ top: number;
+ left: number;
+ width: string;
+ opacity: number;
+ pointerEvents: 'none' | 'auto';
+ } {
+ return {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%',
+ opacity: opacitySpring,
+ pointerEvents: key === this.state.panelId ? 'auto' : 'none',
+ };
+ }
+
+ translate(value: number, direction: 'X' | 'Y' = 'X', unit: '%' | 'px' = '%'): CSSProperties {
+ return {
+ WebkitTransform: `translate${direction}(${value}${unit})`,
+ transform: `translate${direction}(${value}${unit})`,
+ };
+ }
+
+ requestRedraw = (): Promise =>
+ new Promise((resolve) =>
+ this.setState({ isHeightDirty: true }, () => {
+ this.setState({ isHeightDirty: false });
+
+ // wait till transition end
+ this.timerIds.push(setTimeout(resolve, 200));
+ }),
+ );
}
export default connect(
- (state: RootState) => {
- const login = getLogin(state);
- let user = {
- ...state.user,
- };
+ (state: RootState) => {
+ const login = getLogin(state);
+ let user = {
+ ...state.user,
+ };
- if (login) {
- user = {
- ...user,
- isGuest: true,
- email: '',
- username: '',
- };
+ if (login) {
+ user = {
+ ...user,
+ isGuest: true,
+ email: '',
+ username: '',
+ };
- if (/[@.]/.test(login)) {
- user.email = login;
- } else {
- user.username = login;
- }
- }
+ if (/[@.]/.test(login)) {
+ user.email = login;
+ } else {
+ user.username = login;
+ }
+ }
- return {
- user,
- accounts: state.accounts, // need this, to re-render height
- auth: state.auth,
- resolve: authFlow.resolve.bind(authFlow),
- reject: authFlow.reject.bind(authFlow),
- };
- },
- {
- clearErrors: actions.clearErrors,
- setErrors: actions.setErrors,
- },
+ return {
+ user,
+ accounts: state.accounts, // need this, to re-render height
+ auth: state.auth,
+ resolve: authFlow.resolve.bind(authFlow),
+ reject: authFlow.reject.bind(authFlow),
+ };
+ },
+ {
+ clearErrors: actions.clearErrors,
+ setErrors: actions.setErrors,
+ },
)(PanelTransition);
diff --git a/packages/app/components/auth/README.md b/packages/app/components/auth/README.md
index 09fa172..9288b6e 100644
--- a/packages/app/components/auth/README.md
+++ b/packages/app/components/auth/README.md
@@ -2,16 +2,13 @@
To add new panel you need to:
-- create panel component at `components/auth/[panelId]`
-- add new context in `components/auth/PanelTransition`
-- connect component to router in `pages/auth/AuthPage`
-- add new state to `services/authFlow` and coresponding test to
- `tests/services/authFlow`
-- connect state to `authFlow`. Update `services/authFlow/AuthFlow.test` and
- `services/authFlow/AuthFlow.functional.test` (the last one for some complex
- flow)
-- add new actions to `components/auth/actions` and api endpoints to
- `services/api`
-- whatever else you need
+- create panel component at `components/auth/[panelId]`
+- add new context in `components/auth/PanelTransition`
+- connect component to router in `pages/auth/AuthPage`
+- add new state to `services/authFlow` and coresponding test to `tests/services/authFlow`
+- connect state to `authFlow`. Update `services/authFlow/AuthFlow.test` and
+ `services/authFlow/AuthFlow.functional.test` (the last one for some complex flow)
+- add new actions to `components/auth/actions` and api endpoints to `services/api`
+- whatever else you need
Commit id with example implementation: f4d315c
diff --git a/packages/app/components/auth/RejectionLink.tsx b/packages/app/components/auth/RejectionLink.tsx
index e767f9c..7385592 100644
--- a/packages/app/components/auth/RejectionLink.tsx
+++ b/packages/app/components/auth/RejectionLink.tsx
@@ -4,36 +4,32 @@ import { FormattedMessage as Message, MessageDescriptor } from 'react-intl';
import Context, { AuthContext } from './Context';
interface Props {
- isAvailable?: (context: AuthContext) => boolean;
- payload?: Record;
- label: MessageDescriptor;
+ isAvailable?: (context: AuthContext) => boolean;
+ payload?: Record;
+ label: MessageDescriptor;
}
-const RejectionLink: ComponentType = ({
- isAvailable,
- payload,
- label,
-}) => {
- const context = useContext(Context);
+const RejectionLink: ComponentType = ({ isAvailable, payload, label }) => {
+ const context = useContext(Context);
- if (isAvailable && !isAvailable(context)) {
- // TODO: if want to properly support multiple links, we should control
- // the dividers ' | ' rendered from factory too
- return null;
- }
+ if (isAvailable && !isAvailable(context)) {
+ // TODO: if want to properly support multiple links, we should control
+ // the dividers ' | ' rendered from factory too
+ return null;
+ }
- return (
- {
- event.preventDefault();
+ return (
+ {
+ event.preventDefault();
- context.reject(payload);
- }}
- >
- {
- const thunk = fn(...args);
+ function callThunk, F extends (...args: A) => any>(fn: F, ...args: A): Promise {
+ const thunk = fn(...args);
- return thunk(dispatch, getState);
- }
+ return thunk(dispatch, getState);
+ }
- function expectDispatchCalls(calls: Array>) {
- expect(dispatch, 'to have calls satisfying', [
- [setLoadingState(true)],
- ...calls,
- [setLoadingState(false)],
- ]);
- }
-
- beforeEach(() => {
- dispatch.reset();
- getState.reset();
- getState.returns({});
- sinon.stub(request, 'get').named('request.get');
- sinon.stub(request, 'post').named('request.post');
- });
-
- afterEach(() => {
- (request.get as any).restore();
- (request.post as any).restore();
- });
-
- describe('#oAuthValidate()', () => {
- let resp: OAuthValidateResponse;
+ function expectDispatchCalls(calls: Array>) {
+ expect(dispatch, 'to have calls satisfying', [[setLoadingState(true)], ...calls, [setLoadingState(false)]]);
+ }
beforeEach(() => {
- resp = {
- client: {
- id: '123',
- name: '',
- description: '',
- },
- oAuth: {
- state: 123,
- },
- session: {
- scopes: ['account_info'],
- },
- };
-
- (request.get as any).returns(Promise.resolve(resp));
+ dispatch.reset();
+ getState.reset();
+ getState.returns({});
+ sinon.stub(request, 'get').named('request.get');
+ sinon.stub(request, 'post').named('request.post');
});
- it('should send get request to an api', () =>
- callThunk(oAuthValidate, oauthData).then(() => {
- expect(request.get, 'to have a call satisfying', [
- '/api/oauth2/v1/validate',
- {},
- ]);
- }));
-
- it('should dispatch setClient, setOAuthRequest and setScopes', () =>
- callThunk(oAuthValidate, oauthData).then(() => {
- expectDispatchCalls([
- [setClient(resp.client)],
- [
- setOAuthRequest({
- ...resp.oAuth,
- prompt: 'none',
- loginHint: undefined,
- }),
- ],
- [setScopes(resp.session.scopes)],
- ]);
- }));
- });
-
- describe('#oAuthComplete()', () => {
- beforeEach(() => {
- getState.returns({
- auth: {
- oauth: oauthData,
- },
- });
+ afterEach(() => {
+ (request.get as any).restore();
+ (request.post as any).restore();
});
- it('should post to api/oauth2/complete', () => {
- (request.post as any).returns(
- Promise.resolve({
- redirectUri: '',
- }),
- );
+ describe('#oAuthValidate()', () => {
+ let resp: OAuthValidateResponse;
- return callThunk(oAuthComplete).then(() => {
- expect(request.post, 'to have a call satisfying', [
- '/api/oauth2/v1/complete?client_id=&redirect_uri=&response_type=&description=&scope=&prompt=none&login_hint=&state=',
- {},
- ]);
- });
+ beforeEach(() => {
+ resp = {
+ client: {
+ id: '123',
+ name: '',
+ description: '',
+ },
+ oAuth: {
+ state: 123,
+ },
+ session: {
+ scopes: ['account_info'],
+ },
+ };
+
+ (request.get as any).returns(Promise.resolve(resp));
+ });
+
+ it('should send get request to an api', () =>
+ callThunk(oAuthValidate, oauthData).then(() => {
+ expect(request.get, 'to have a call satisfying', ['/api/oauth2/v1/validate', {}]);
+ }));
+
+ it('should dispatch setClient, setOAuthRequest and setScopes', () =>
+ callThunk(oAuthValidate, oauthData).then(() => {
+ expectDispatchCalls([
+ [setClient(resp.client)],
+ [
+ setOAuthRequest({
+ ...resp.oAuth,
+ prompt: 'none',
+ loginHint: undefined,
+ }),
+ ],
+ [setScopes(resp.session.scopes)],
+ ]);
+ }));
});
- it('should dispatch setOAuthCode for static_page redirect', () => {
- const resp = {
- success: true,
- redirectUri: 'static_page?code=123&state=',
- };
+ describe('#oAuthComplete()', () => {
+ beforeEach(() => {
+ getState.returns({
+ auth: {
+ oauth: oauthData,
+ },
+ });
+ });
- (request.post as any).returns(Promise.resolve(resp));
+ it('should post to api/oauth2/complete', () => {
+ (request.post as any).returns(
+ Promise.resolve({
+ redirectUri: '',
+ }),
+ );
- return callThunk(oAuthComplete).then(() => {
- expectDispatchCalls([
- [
- setOAuthCode({
- success: true,
- code: '123',
- displayCode: false,
- }),
- ],
- ]);
- });
+ return callThunk(oAuthComplete).then(() => {
+ expect(request.post, 'to have a call satisfying', [
+ '/api/oauth2/v1/complete?client_id=&redirect_uri=&response_type=&description=&scope=&prompt=none&login_hint=&state=',
+ {},
+ ]);
+ });
+ });
+
+ it('should dispatch setOAuthCode for static_page redirect', () => {
+ const resp = {
+ success: true,
+ redirectUri: 'static_page?code=123&state=',
+ };
+
+ (request.post as any).returns(Promise.resolve(resp));
+
+ return callThunk(oAuthComplete).then(() => {
+ expectDispatchCalls([
+ [
+ setOAuthCode({
+ success: true,
+ code: '123',
+ displayCode: false,
+ }),
+ ],
+ ]);
+ });
+ });
+
+ it('should resolve to with success false and redirectUri for access_denied', async () => {
+ const resp = {
+ statusCode: 401,
+ error: 'access_denied',
+ redirectUri: 'redirectUri',
+ };
+
+ (request.post as any).returns(Promise.reject(resp));
+
+ const data = await callThunk(oAuthComplete);
+
+ expect(data, 'to equal', {
+ success: false,
+ redirectUri: 'redirectUri',
+ });
+ });
+
+ it('should dispatch requirePermissionsAccept if accept_required', () => {
+ const resp = {
+ statusCode: 401,
+ error: 'accept_required',
+ };
+
+ (request.post as any).returns(Promise.reject(resp));
+
+ return callThunk(oAuthComplete).catch((error) => {
+ expect(error.acceptRequired, 'to be true');
+ expectDispatchCalls([[requirePermissionsAccept()]]);
+ });
+ });
});
- it('should resolve to with success false and redirectUri for access_denied', async () => {
- const resp = {
- statusCode: 401,
- error: 'access_denied',
- redirectUri: 'redirectUri',
- };
+ describe('#login()', () => {
+ describe('when correct login was entered', () => {
+ beforeEach(() => {
+ (request.post as any).returns(
+ Promise.reject({
+ errors: {
+ password: 'error.password_required',
+ },
+ }),
+ );
+ });
- (request.post as any).returns(Promise.reject(resp));
-
- const data = await callThunk(oAuthComplete);
-
- expect(data, 'to equal', {
- success: false,
- redirectUri: 'redirectUri',
- });
+ it('should set login', () =>
+ callThunk(login, { login: 'foo' }).then(() => {
+ expectDispatchCalls([[setLogin('foo')]]);
+ }));
+ });
});
-
- it('should dispatch requirePermissionsAccept if accept_required', () => {
- const resp = {
- statusCode: 401,
- error: 'accept_required',
- };
-
- (request.post as any).returns(Promise.reject(resp));
-
- return callThunk(oAuthComplete).catch((error) => {
- expect(error.acceptRequired, 'to be true');
- expectDispatchCalls([[requirePermissionsAccept()]]);
- });
- });
- });
-
- describe('#login()', () => {
- describe('when correct login was entered', () => {
- beforeEach(() => {
- (request.post as any).returns(
- Promise.reject({
- errors: {
- password: 'error.password_required',
- },
- }),
- );
- });
-
- it('should set login', () =>
- callThunk(login, { login: 'foo' }).then(() => {
- expectDispatchCalls([[setLogin('foo')]]);
- }));
- });
- });
});
diff --git a/packages/app/components/auth/actions.ts b/packages/app/components/auth/actions.ts
index a18ef0b..a2ae2c5 100644
--- a/packages/app/components/auth/actions.ts
+++ b/packages/app/components/auth/actions.ts
@@ -4,23 +4,20 @@ import logger from 'app/services/logger';
import localStorage from 'app/services/localStorage';
import * as loader from 'app/services/loader';
import history from 'app/services/history';
-import {
- updateUser,
- acceptRules as userAcceptRules,
-} from 'app/components/user/actions';
+import { updateUser, acceptRules as userAcceptRules } from 'app/components/user/actions';
import { authenticate, logoutAll } from 'app/components/accounts/actions';
import { getActiveAccount } from 'app/components/accounts/reducer';
import {
- login as loginEndpoint,
- forgotPassword as forgotPasswordEndpoint,
- recoverPassword as recoverPasswordEndpoint,
- OAuthResponse,
+ login as loginEndpoint,
+ forgotPassword as forgotPasswordEndpoint,
+ recoverPassword as recoverPasswordEndpoint,
+ OAuthResponse,
} from 'app/services/api/authentication';
import oauth, { OauthData, Scope } from 'app/services/api/oauth';
import {
- register as registerEndpoint,
- activate as activateEndpoint,
- resendActivation as resendActivationEndpoint,
+ register as registerEndpoint,
+ activate as activateEndpoint,
+ resendActivation as resendActivationEndpoint,
} from 'app/services/api/signup';
import dispatchBsod from 'app/components/ui/bsod/dispatchBsod';
import { create as createPopup } from 'app/components/ui/popup/actions';
@@ -32,8 +29,8 @@ import { Resp } from 'app/services/request';
import { Credentials, Client, OAuthState, getCredentials } from './reducer';
interface ValidationErrorLiteral {
- type: string;
- payload: Record;
+ type: string;
+ payload: Record;
}
type ValidationError = string | ValidationErrorLiteral;
@@ -47,28 +44,28 @@ type ValidationError = string | ValidationErrorLiteral;
* @returns {object} - action definition
*/
export function goBack(options: { fallbackUrl?: string }) {
- const { fallbackUrl } = options || {};
+ const { fallbackUrl } = options || {};
- if (history.canGoBack()) {
- browserHistory.goBack();
- } else if (fallbackUrl) {
- browserHistory.push(fallbackUrl);
- }
+ if (history.canGoBack()) {
+ browserHistory.goBack();
+ } else if (fallbackUrl) {
+ browserHistory.push(fallbackUrl);
+ }
- return {
- type: 'noop',
- };
+ return {
+ type: 'noop',
+ };
}
export function redirect(url: string): () => Promise {
- loader.show();
+ loader.show();
- return () =>
- new Promise(() => {
- // do not resolve promise to make loader visible and
- // overcome app rendering
- location.href = url;
- });
+ return () =>
+ new Promise(() => {
+ // do not resolve promise to make loader visible and
+ // overcome app rendering
+ location.href = url;
+ });
}
const PASSWORD_REQUIRED = 'error.password_required';
@@ -77,177 +74,159 @@ const ACTIVATION_REQUIRED = 'error.account_not_activated';
const TOTP_REQUIRED = 'error.totp_required';
export function login({
- login = '',
- password = '',
- totp,
- rememberMe = false,
+ login = '',
+ password = '',
+ totp,
+ rememberMe = false,
}: {
- login: string;
- password?: string;
- totp?: string;
- rememberMe?: boolean;
+ login: string;
+ password?: string;
+ totp?: string;
+ rememberMe?: boolean;
}) {
- return wrapInLoader((dispatch) =>
- loginEndpoint({ login, password, totp, rememberMe })
- .then(authHandler(dispatch))
- .catch((resp) => {
- if (resp.errors) {
- if (resp.errors.password === PASSWORD_REQUIRED) {
- return dispatch(setLogin(login));
- } else if (resp.errors.login === ACTIVATION_REQUIRED) {
- return dispatch(needActivation());
- } else if (resp.errors.totp === TOTP_REQUIRED) {
- return dispatch(
- requestTotp({
- login,
- password,
- rememberMe,
- }),
- );
- } else if (resp.errors.login === LOGIN_REQUIRED && password) {
- logger.warn('No login on password panel');
+ return wrapInLoader((dispatch) =>
+ loginEndpoint({ login, password, totp, rememberMe })
+ .then(authHandler(dispatch))
+ .catch((resp) => {
+ if (resp.errors) {
+ if (resp.errors.password === PASSWORD_REQUIRED) {
+ return dispatch(setLogin(login));
+ } else if (resp.errors.login === ACTIVATION_REQUIRED) {
+ return dispatch(needActivation());
+ } else if (resp.errors.totp === TOTP_REQUIRED) {
+ return dispatch(
+ requestTotp({
+ login,
+ password,
+ rememberMe,
+ }),
+ );
+ } else if (resp.errors.login === LOGIN_REQUIRED && password) {
+ logger.warn('No login on password panel');
- return dispatch(logoutAll());
- }
- }
+ return dispatch(logoutAll());
+ }
+ }
- return Promise.reject(resp);
- })
- .catch(validationErrorsHandler(dispatch)),
- );
+ return Promise.reject(resp);
+ })
+ .catch(validationErrorsHandler(dispatch)),
+ );
}
export function acceptRules() {
- return wrapInLoader((dispatch) =>
- dispatch(userAcceptRules()).catch(validationErrorsHandler(dispatch)),
- );
+ return wrapInLoader((dispatch) => dispatch(userAcceptRules()).catch(validationErrorsHandler(dispatch)));
}
-export function forgotPassword({
- login = '',
- captcha = '',
-}: {
- login: string;
- captcha: string;
-}) {
- return wrapInLoader((dispatch, getState) =>
- forgotPasswordEndpoint(login, captcha)
- .then(({ data = {} }) =>
- dispatch(
- updateUser({
- maskedEmail: data.emailMask || getState().user.email,
- }),
- ),
- )
- .catch(validationErrorsHandler(dispatch)),
- );
+export function forgotPassword({ login = '', captcha = '' }: { login: string; captcha: string }) {
+ return wrapInLoader((dispatch, getState) =>
+ forgotPasswordEndpoint(login, captcha)
+ .then(({ data = {} }) =>
+ dispatch(
+ updateUser({
+ maskedEmail: data.emailMask || getState().user.email,
+ }),
+ ),
+ )
+ .catch(validationErrorsHandler(dispatch)),
+ );
}
export function recoverPassword({
- key = '',
- newPassword = '',
- newRePassword = '',
+ key = '',
+ newPassword = '',
+ newRePassword = '',
}: {
- key: string;
- newPassword: string;
- newRePassword: string;
+ key: string;
+ newPassword: string;
+ newRePassword: string;
}) {
- return wrapInLoader((dispatch) =>
- recoverPasswordEndpoint(key, newPassword, newRePassword)
- .then(authHandler(dispatch))
- .catch(validationErrorsHandler(dispatch, '/forgot-password')),
- );
+ return wrapInLoader((dispatch) =>
+ recoverPasswordEndpoint(key, newPassword, newRePassword)
+ .then(authHandler(dispatch))
+ .catch(validationErrorsHandler(dispatch, '/forgot-password')),
+ );
}
export function register({
- email = '',
- username = '',
- password = '',
- rePassword = '',
- captcha = '',
- rulesAgreement = false,
+ email = '',
+ username = '',
+ password = '',
+ rePassword = '',
+ captcha = '',
+ rulesAgreement = false,
}: {
- email: string;
- username: string;
- password: string;
- rePassword: string;
- captcha: string;
- rulesAgreement: boolean;
+ email: string;
+ username: string;
+ password: string;
+ rePassword: string;
+ captcha: string;
+ rulesAgreement: boolean;
}) {
- return wrapInLoader((dispatch, getState) =>
- registerEndpoint({
- email,
- username,
- password,
- rePassword,
- rulesAgreement,
- lang: getState().user.lang,
- captcha,
- })
- .then(() => {
- dispatch(
- updateUser({
+ return wrapInLoader((dispatch, getState) =>
+ registerEndpoint({
+ email,
username,
- email,
- }),
- );
+ password,
+ rePassword,
+ rulesAgreement,
+ lang: getState().user.lang,
+ captcha,
+ })
+ .then(() => {
+ dispatch(
+ updateUser({
+ username,
+ email,
+ }),
+ );
- dispatch(needActivation());
+ dispatch(needActivation());
- browserHistory.push('/activation');
- })
- .catch(validationErrorsHandler(dispatch)),
- );
+ browserHistory.push('/activation');
+ })
+ .catch(validationErrorsHandler(dispatch)),
+ );
}
-export function activate({
- key = '',
-}: {
- key: string;
-}): ThunkAction> {
- return wrapInLoader((dispatch) =>
- activateEndpoint(key)
- .then(authHandler(dispatch))
- .catch(validationErrorsHandler(dispatch, '/resend-activation')),
- );
+export function activate({ key = '' }: { key: string }): ThunkAction> {
+ return wrapInLoader((dispatch) =>
+ activateEndpoint(key)
+ .then(authHandler(dispatch))
+ .catch(validationErrorsHandler(dispatch, '/resend-activation')),
+ );
}
-export function resendActivation({
- email = '',
- captcha,
-}: {
- email: string;
- captcha: string;
-}) {
- return wrapInLoader((dispatch) =>
- resendActivationEndpoint(email, captcha)
- .then((resp) => {
- dispatch(
- updateUser({
- email,
- }),
- );
+export function resendActivation({ email = '', captcha }: { email: string; captcha: string }) {
+ return wrapInLoader((dispatch) =>
+ resendActivationEndpoint(email, captcha)
+ .then((resp) => {
+ dispatch(
+ updateUser({
+ email,
+ }),
+ );
- return resp;
- })
- .catch(validationErrorsHandler(dispatch)),
- );
+ return resp;
+ })
+ .catch(validationErrorsHandler(dispatch)),
+ );
}
export function contactUs() {
- return createPopup({ Popup: ContactForm });
+ return createPopup({ Popup: ContactForm });
}
interface SetCredentialsAction extends ReduxAction {
- type: 'auth:setCredentials';
- payload: Credentials | null;
+ type: 'auth:setCredentials';
+ payload: Credentials | null;
}
function setCredentials(payload: Credentials | null): SetCredentialsAction {
- return {
- type: 'auth:setCredentials',
- payload,
- };
+ return {
+ type: 'auth:setCredentials',
+ payload,
+ };
}
/**
@@ -257,95 +236,92 @@ function setCredentials(payload: Credentials | null): SetCredentialsAction {
* @param login
*/
export function setLogin(login: string | null): SetCredentialsAction {
- return setCredentials(login ? { login } : null);
+ return setCredentials(login ? { login } : null);
}
export function relogin(login: string | null): ThunkAction {
- return (dispatch, getState) => {
- const credentials = getCredentials(getState());
- const returnUrl =
- credentials.returnUrl || location.pathname + location.search;
+ return (dispatch, getState) => {
+ const credentials = getCredentials(getState());
+ const returnUrl = credentials.returnUrl || location.pathname + location.search;
- dispatch(
- setCredentials({
- login,
- returnUrl,
- isRelogin: true,
- }),
- );
+ dispatch(
+ setCredentials({
+ login,
+ returnUrl,
+ isRelogin: true,
+ }),
+ );
- browserHistory.push('/login');
- };
+ browserHistory.push('/login');
+ };
}
export type CredentialsAction = SetCredentialsAction;
function requestTotp({
- login,
- password,
- rememberMe,
+ login,
+ password,
+ rememberMe,
}: {
- login: string;
- password: string;
- rememberMe: boolean;
+ login: string;
+ password: string;
+ rememberMe: boolean;
}): ThunkAction {
- return (dispatch, getState) => {
- // merging with current credentials to propogate returnUrl
- const credentials = getCredentials(getState());
+ return (dispatch, getState) => {
+ // merging with current credentials to propogate returnUrl
+ const credentials = getCredentials(getState());
- dispatch(
- setCredentials({
- ...credentials,
- login,
- password,
- rememberMe,
- isTotpRequired: true,
- }),
- );
- };
+ dispatch(
+ setCredentials({
+ ...credentials,
+ login,
+ password,
+ rememberMe,
+ isTotpRequired: true,
+ }),
+ );
+ };
}
interface SetSwitcherAction extends ReduxAction {
- type: 'auth:setAccountSwitcher';
- payload: boolean;
+ type: 'auth:setAccountSwitcher';
+ payload: boolean;
}
export function setAccountSwitcher(isOn: boolean): SetSwitcherAction {
- return {
- type: 'auth:setAccountSwitcher',
- payload: isOn,
- };
+ return {
+ type: 'auth:setAccountSwitcher',
+ payload: isOn,
+ };
}
export type AccountSwitcherAction = SetSwitcherAction;
interface SetErrorAction extends ReduxAction {
- type: 'auth:error';
- payload: Record | null;
- error: boolean;
+ type: 'auth:error';
+ payload: Record | null;
+ error: boolean;
}
-export function setErrors(
- errors: Record | null,
-): SetErrorAction {
- return {
- type: 'auth:error',
- payload: errors,
- error: true,
- };
+export function setErrors(errors: Record | null): SetErrorAction {
+ return {
+ type: 'auth:error',
+ payload: errors,
+ error: true,
+ };
}
export function clearErrors(): SetErrorAction {
- return setErrors(null);
+ return setErrors(null);
}
export type ErrorAction = SetErrorAction;
const KNOWN_SCOPES: ReadonlyArray = [
- 'minecraft_server_session',
- 'offline_access',
- 'account_info',
- 'account_email',
+ 'minecraft_server_session',
+ 'offline_access',
+ 'account_info',
+ 'account_email',
];
/**
* @param {object} oauthData
@@ -366,50 +342,46 @@ const KNOWN_SCOPES: ReadonlyArray = [
* @returns {Promise}
*/
export function oAuthValidate(oauthData: OauthData) {
- // TODO: move to oAuth actions?
- // test request: /oauth?client_id=ely&redirect_uri=http%3A%2F%2Fely.by&response_type=code&scope=minecraft_server_session&description=foo
- return wrapInLoader((dispatch) =>
- oauth
- .validate(oauthData)
- .then((resp) => {
- const { scopes } = resp.session;
- const invalidScopes = scopes.filter(
- (scope) => !KNOWN_SCOPES.includes(scope),
- );
- let prompt = (oauthData.prompt || 'none')
- .split(',')
- .map((item) => item.trim());
+ // TODO: move to oAuth actions?
+ // test request: /oauth?client_id=ely&redirect_uri=http%3A%2F%2Fely.by&response_type=code&scope=minecraft_server_session&description=foo
+ return wrapInLoader((dispatch) =>
+ oauth
+ .validate(oauthData)
+ .then((resp) => {
+ const { scopes } = resp.session;
+ const invalidScopes = scopes.filter((scope) => !KNOWN_SCOPES.includes(scope));
+ let prompt = (oauthData.prompt || 'none').split(',').map((item) => item.trim());
- if (prompt.includes('none')) {
- prompt = ['none'];
- }
+ if (prompt.includes('none')) {
+ prompt = ['none'];
+ }
- if (invalidScopes.length) {
- logger.error('Got invalid scopes after oauth validation', {
- invalidScopes,
- });
- }
+ if (invalidScopes.length) {
+ logger.error('Got invalid scopes after oauth validation', {
+ invalidScopes,
+ });
+ }
- dispatch(setClient(resp.client));
- dispatch(
- setOAuthRequest({
- ...resp.oAuth,
- prompt: oauthData.prompt || 'none',
- loginHint: oauthData.loginHint,
- }),
- );
- dispatch(setScopes(scopes));
- localStorage.setItem(
- 'oauthData',
- JSON.stringify({
- // @see services/authFlow/AuthFlow
- timestamp: Date.now(),
- payload: oauthData,
- }),
- );
- })
- .catch(handleOauthParamsValidation),
- );
+ dispatch(setClient(resp.client));
+ dispatch(
+ setOAuthRequest({
+ ...resp.oAuth,
+ prompt: oauthData.prompt || 'none',
+ loginHint: oauthData.loginHint,
+ }),
+ );
+ dispatch(setScopes(scopes));
+ localStorage.setItem(
+ 'oauthData',
+ JSON.stringify({
+ // @see services/authFlow/AuthFlow
+ timestamp: Date.now(),
+ payload: oauthData,
+ }),
+ );
+ })
+ .catch(handleOauthParamsValidation),
+ );
}
/**
@@ -419,304 +391,283 @@ export function oAuthValidate(oauthData: OauthData) {
* @returns {Promise}
*/
export function oAuthComplete(params: { accept?: boolean } = {}) {
- return wrapInLoader(
- async (
- dispatch,
- getState,
- ): Promise<{
- success: boolean;
- redirectUri: string;
- }> => {
- const oauthData = getState().auth.oauth;
+ return wrapInLoader(
+ async (
+ dispatch,
+ getState,
+ ): Promise<{
+ success: boolean;
+ redirectUri: string;
+ }> => {
+ const oauthData = getState().auth.oauth;
- if (!oauthData) {
- throw new Error('Can not complete oAuth. Oauth data does not exist');
- }
-
- try {
- const resp = await oauth.complete(oauthData, params);
- localStorage.removeItem('oauthData');
-
- if (resp.redirectUri.startsWith('static_page')) {
- const displayCode = /static_page_with_code/.test(resp.redirectUri);
-
- const [, code] = resp.redirectUri.match(/code=(.+)&/) || [];
- [, resp.redirectUri] = resp.redirectUri.match(/^(.+)\?/) || [];
-
- dispatch(
- setOAuthCode({
- success: resp.success,
- code,
- displayCode,
- }),
- );
- }
-
- return resp;
- } catch (error) {
- const resp:
- | {
- acceptRequired: boolean;
+ if (!oauthData) {
+ throw new Error('Can not complete oAuth. Oauth data does not exist');
}
- | {
- unauthorized: boolean;
- } = error;
- if ('acceptRequired' in resp) {
- dispatch(requirePermissionsAccept());
+ try {
+ const resp = await oauth.complete(oauthData, params);
+ localStorage.removeItem('oauthData');
- return Promise.reject(resp);
- }
+ if (resp.redirectUri.startsWith('static_page')) {
+ const displayCode = /static_page_with_code/.test(resp.redirectUri);
- return handleOauthParamsValidation(resp);
- }
- },
- );
+ const [, code] = resp.redirectUri.match(/code=(.+)&/) || [];
+ [, resp.redirectUri] = resp.redirectUri.match(/^(.+)\?/) || [];
+
+ dispatch(
+ setOAuthCode({
+ success: resp.success,
+ code,
+ displayCode,
+ }),
+ );
+ }
+
+ return resp;
+ } catch (error) {
+ const resp:
+ | {
+ acceptRequired: boolean;
+ }
+ | {
+ unauthorized: boolean;
+ } = error;
+
+ if ('acceptRequired' in resp) {
+ dispatch(requirePermissionsAccept());
+
+ return Promise.reject(resp);
+ }
+
+ return handleOauthParamsValidation(resp);
+ }
+ },
+ );
}
function handleOauthParamsValidation(
- resp: {
- [key: string]: any;
- userMessage?: string;
- } = {},
+ resp: {
+ [key: string]: any;
+ userMessage?: string;
+ } = {},
) {
- dispatchBsod();
- localStorage.removeItem('oauthData');
+ dispatchBsod();
+ localStorage.removeItem('oauthData');
- // eslint-disable-next-line no-alert
- resp.userMessage && setTimeout(() => alert(resp.userMessage), 500); // 500 ms to allow re-render
+ // eslint-disable-next-line no-alert
+ resp.userMessage && setTimeout(() => alert(resp.userMessage), 500); // 500 ms to allow re-render
- return Promise.reject(resp);
+ return Promise.reject(resp);
}
interface SetClientAction extends ReduxAction {
- type: 'set_client';
- payload: Client;
+ type: 'set_client';
+ payload: Client;
}
export function setClient(payload: Client): SetClientAction {
- return {
- type: 'set_client',
- payload,
- };
+ return {
+ type: 'set_client',
+ payload,
+ };
}
export type ClientAction = SetClientAction;
interface SetOauthAction extends ReduxAction {
- type: 'set_oauth';
- payload: Pick<
- OAuthState,
- | 'clientId'
- | 'redirectUrl'
- | 'responseType'
- | 'scope'
- | 'prompt'
- | 'loginHint'
- | 'state'
- >;
+ type: 'set_oauth';
+ payload: Pick;
}
// Input data is coming right from the query string, so the names
// are the same, as used for initializing OAuth2 request
export function setOAuthRequest(data: {
- client_id?: string;
- redirect_uri?: string;
- response_type?: string;
- scope?: string;
- prompt?: string;
- loginHint?: string;
- state?: string;
+ client_id?: string;
+ redirect_uri?: string;
+ response_type?: string;
+ scope?: string;
+ prompt?: string;
+ loginHint?: string;
+ state?: string;
}): SetOauthAction {
- return {
- type: 'set_oauth',
- payload: {
- // TODO: there is too much default empty string. Maybe we can somehow validate it
- // on the level, where this action is called?
- clientId: data.client_id || '',
- redirectUrl: data.redirect_uri || '',
- responseType: data.response_type || '',
- scope: data.scope || '',
- prompt: data.prompt || '',
- loginHint: data.loginHint || '',
- state: data.state || '',
- },
- };
+ return {
+ type: 'set_oauth',
+ payload: {
+ // TODO: there is too much default empty string. Maybe we can somehow validate it
+ // on the level, where this action is called?
+ clientId: data.client_id || '',
+ redirectUrl: data.redirect_uri || '',
+ responseType: data.response_type || '',
+ scope: data.scope || '',
+ prompt: data.prompt || '',
+ loginHint: data.loginHint || '',
+ state: data.state || '',
+ },
+ };
}
interface SetOAuthResultAction extends ReduxAction {
- type: 'set_oauth_result';
- payload: Pick;
+ type: 'set_oauth_result';
+ payload: Pick;
}
export const SET_OAUTH_RESULT = 'set_oauth_result'; // TODO: remove
-export function setOAuthCode(payload: {
- success: boolean;
- code: string;
- displayCode: boolean;
-}): SetOAuthResultAction {
- return {
- type: 'set_oauth_result',
- payload,
- };
+export function setOAuthCode(payload: { success: boolean; code: string; displayCode: boolean }): SetOAuthResultAction {
+ return {
+ type: 'set_oauth_result',
+ payload,
+ };
}
export function resetOAuth(): ThunkAction {
- return (dispatch): void => {
- localStorage.removeItem('oauthData');
- dispatch(setOAuthRequest({}));
- };
+ return (dispatch): void => {
+ localStorage.removeItem('oauthData');
+ dispatch(setOAuthRequest({}));
+ };
}
/**
* Resets all temporary state related to auth
*/
export function resetAuth(): ThunkAction {
- return (dispatch, getSate): Promise => {
- dispatch(setLogin(null));
- dispatch(resetOAuth());
- // ensure current account is valid
- const activeAccount = getActiveAccount(getSate());
+ return (dispatch, getSate): Promise => {
+ dispatch(setLogin(null));
+ dispatch(resetOAuth());
+ // ensure current account is valid
+ const activeAccount = getActiveAccount(getSate());
- if (activeAccount) {
- return Promise.resolve(dispatch(authenticate(activeAccount)))
- .then(() => {})
- .catch(() => {
- // its okay. user will be redirected to an appropriate place
- });
- }
+ if (activeAccount) {
+ return Promise.resolve(dispatch(authenticate(activeAccount)))
+ .then(() => {})
+ .catch(() => {
+ // its okay. user will be redirected to an appropriate place
+ });
+ }
- return Promise.resolve();
- };
+ return Promise.resolve();
+ };
}
interface RequestPermissionsAcceptAction extends ReduxAction {
- type: 'require_permissions_accept';
+ type: 'require_permissions_accept';
}
export function requirePermissionsAccept(): RequestPermissionsAcceptAction {
- return {
- type: 'require_permissions_accept',
- };
+ return {
+ type: 'require_permissions_accept',
+ };
}
-export type OAuthAction =
- | SetOauthAction
- | SetOAuthResultAction
- | RequestPermissionsAcceptAction;
+export type OAuthAction = SetOauthAction | SetOAuthResultAction | RequestPermissionsAcceptAction;
interface SetScopesAction extends ReduxAction {
- type: 'set_scopes';
- payload: Array;
+ type: 'set_scopes';
+ payload: Array;
}
export function setScopes(payload: Array): SetScopesAction {
- return {
- type: 'set_scopes',
- payload,
- };
+ return {
+ type: 'set_scopes',
+ payload,
+ };
}
export type ScopesAction = SetScopesAction;
interface SetLoadingAction extends ReduxAction {
- type: 'set_loading_state';
- payload: boolean;
+ type: 'set_loading_state';
+ payload: boolean;
}
export function setLoadingState(isLoading: boolean): SetLoadingAction {
- return {
- type: 'set_loading_state',
- payload: isLoading,
- };
+ return {
+ type: 'set_loading_state',
+ payload: isLoading,
+ };
}
function wrapInLoader(fn: ThunkAction>): ThunkAction> {
- return (dispatch, getState) => {
- dispatch(setLoadingState(true));
- const endLoading = () => dispatch(setLoadingState(false));
+ return (dispatch, getState) => {
+ dispatch(setLoadingState(true));
+ const endLoading = () => dispatch(setLoadingState(false));
- return fn(dispatch, getState, undefined).then(
- (resp) => {
- endLoading();
+ return fn(dispatch, getState, undefined).then(
+ (resp) => {
+ endLoading();
- return resp;
- },
- (resp) => {
- endLoading();
+ return resp;
+ },
+ (resp) => {
+ endLoading();
- return Promise.reject(resp);
- },
- );
- };
+ return Promise.reject(resp);
+ },
+ );
+ };
}
export type LoadingAction = SetLoadingAction;
function needActivation() {
- return updateUser({
- isActive: false,
- isGuest: false,
- });
-}
-
-function authHandler(dispatch: Dispatch) {
- return (oAuthResp: OAuthResponse): Promise =>
- dispatch(
- authenticate({
- token: oAuthResp.access_token,
- refreshToken: oAuthResp.refresh_token || null,
- }),
- ).then((resp) => {
- dispatch(setLogin(null));
-
- return resp;
+ return updateUser({
+ isActive: false,
+ isGuest: false,
});
}
-function validationErrorsHandler(
- dispatch: Dispatch,
- repeatUrl?: string,
-): (
- resp: Resp<{
- errors?: Record;
- data?: Record;
- }>,
-) => Promise {
- return (resp) => {
- if (resp.errors) {
- const [firstError] = Object.keys(resp.errors);
- const firstErrorObj: ValidationError = {
- type: resp.errors[firstError] as string,
- payload: {
- isGuest: true,
- repeatUrl: '',
- },
- };
+function authHandler(dispatch: Dispatch) {
+ return (oAuthResp: OAuthResponse): Promise =>
+ dispatch(
+ authenticate({
+ token: oAuthResp.access_token,
+ refreshToken: oAuthResp.refresh_token || null,
+ }),
+ ).then((resp) => {
+ dispatch(setLogin(null));
- if (resp.data) {
- // TODO: this should be formatted on backend
- Object.assign(firstErrorObj.payload, resp.data);
- }
-
- if (
- ['error.key_not_exists', 'error.key_expire'].includes(
- firstErrorObj.type,
- ) &&
- repeatUrl
- ) {
- // TODO: this should be formatted on backend
- firstErrorObj.payload.repeatUrl = repeatUrl;
- }
-
- // TODO: can I clone the object or its necessary to catch modified errors list on corresponding catches?
- const { errors } = resp;
- errors[firstError] = firstErrorObj;
-
- dispatch(setErrors(errors));
- }
-
- return Promise.reject(resp);
- };
+ return resp;
+ });
+}
+
+function validationErrorsHandler(
+ dispatch: Dispatch,
+ repeatUrl?: string,
+): (
+ resp: Resp<{
+ errors?: Record;
+ data?: Record;
+ }>,
+) => Promise {
+ return (resp) => {
+ if (resp.errors) {
+ const [firstError] = Object.keys(resp.errors);
+ const firstErrorObj: ValidationError = {
+ type: resp.errors[firstError] as string,
+ payload: {
+ isGuest: true,
+ repeatUrl: '',
+ },
+ };
+
+ if (resp.data) {
+ // TODO: this should be formatted on backend
+ Object.assign(firstErrorObj.payload, resp.data);
+ }
+
+ if (['error.key_not_exists', 'error.key_expire'].includes(firstErrorObj.type) && repeatUrl) {
+ // TODO: this should be formatted on backend
+ firstErrorObj.payload.repeatUrl = repeatUrl;
+ }
+
+ // TODO: can I clone the object or its necessary to catch modified errors list on corresponding catches?
+ const { errors } = resp;
+ errors[firstError] = firstErrorObj;
+
+ dispatch(setErrors(errors));
+ }
+
+ return Promise.reject(resp);
+ };
}
diff --git a/packages/app/components/auth/activation/Activation.intl.json b/packages/app/components/auth/activation/Activation.intl.json
index adec44a..0c5efd3 100644
--- a/packages/app/components/auth/activation/Activation.intl.json
+++ b/packages/app/components/auth/activation/Activation.intl.json
@@ -1,8 +1,8 @@
{
- "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"
+ "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"
}
diff --git a/packages/app/components/auth/activation/Activation.ts b/packages/app/components/auth/activation/Activation.ts
index d43e1cf..9c2e737 100644
--- a/packages/app/components/auth/activation/Activation.ts
+++ b/packages/app/components/auth/activation/Activation.ts
@@ -3,13 +3,13 @@ import messages from './Activation.intl.json';
import Body from './ActivationBody';
export default factory({
- title: messages.accountActivationTitle,
- body: Body,
- footer: {
- color: 'blue',
- label: messages.confirmEmail,
- },
- links: {
- label: messages.didNotReceivedEmail,
- },
+ title: messages.accountActivationTitle,
+ body: Body,
+ footer: {
+ color: 'blue',
+ label: messages.confirmEmail,
+ },
+ links: {
+ label: messages.didNotReceivedEmail,
+ },
});
diff --git a/packages/app/components/auth/activation/ActivationBody.tsx b/packages/app/components/auth/activation/ActivationBody.tsx
index 45dc4cd..a27f4cb 100644
--- a/packages/app/components/auth/activation/ActivationBody.tsx
+++ b/packages/app/components/auth/activation/ActivationBody.tsx
@@ -9,49 +9,48 @@ import styles from './activation.scss';
import messages from './Activation.intl.json';
export default class ActivationBody extends BaseAuthBody {
- static displayName = 'ActivationBody';
- static panelId = 'activation';
+ static displayName = 'ActivationBody';
+ static panelId = 'activation';
- autoFocusField =
- this.props.match.params && this.props.match.params.key ? null : 'key';
+ autoFocusField = this.props.match.params && this.props.match.params.key ? null : 'key';
- render() {
- const { key } = this.props.match.params;
- const { email } = this.context.user;
+ render() {
+ const { key } = this.props.match.params;
+ const { email } = this.context.user;
- return (
-
+ {highlightActiveAccount && (
+
+ )}
+
+ {available.map((account, index) => (
+
+ );
}
- let { available } = accounts;
+ onSwitch = (account: Account) => (event: React.MouseEvent
+
+
+ {allowLogout ? (
+
+ ) : (
+
+ )}
+
+
+ ))}
+ {allowAdd ? (
+
+
+
+ {account.username}
+ {account.email}
+
- {highlightActiveAccount && (
-
- )}
+ this.props
+ .switchAccount(account)
+ .finally(() => this.props.onAfterAction())
+ .then(() => this.props.onSwitch(account))
+ // we won't sent any logs to sentry, because an error should be already
+ // handled by external logic
+ .catch((error) => console.warn('Error switching account', { error }))
+ .finally(() => loader.hide());
+ };
- {available.map((account, index) => (
-
- );
- }
-
- onSwitch = (account: Account) => (event: React.MouseEvent
-
+ onRemove = (account: Account) => (event: React.MouseEvent) => {
+ event.preventDefault();
+ event.stopPropagation();
- {allowLogout ? (
-
- ) : (
-
- )}
-
-
- ))}
- {allowAdd ? (
-
-
-
- {account.username}
- {account.email}
-
- {hasBackButton ? backButton : null}
-
- );
- }
+ return {
+ transformSpring: spring(transform, transformSpringConfig),
+ opacitySpring: spring(0, opacitySpringConfig),
+ };
+ };
- getBody({ key, style, data }: TransitionPlainStyle): ReactElement {
- const { Body } = data as AnimationData;
- const { transformSpring } = (style as unknown) as AnimationStyle;
- const { direction } = this.state;
+ getTransformForPanel(key: PanelId): number {
+ const { panelId, prevPanelId } = this.state;
- let transform = this.translate(transformSpring, direction);
- let verticalOrigin = 'top';
+ const fromLeft = -1;
+ const fromRight = 1;
- if (direction === 'Y') {
- verticalOrigin = 'bottom';
- transform = {};
+ const currentContext = contexts.find((context) => context.includes(key));
+
+ if (!currentContext) {
+ throw new Error(`Can not find settings for ${key} panel`);
+ }
+
+ let sign =
+ prevPanelId && panelId && currentContext.indexOf(panelId) > currentContext.indexOf(prevPanelId)
+ ? fromRight
+ : fromLeft;
+
+ if (prevPanelId === key) {
+ sign *= -1;
+ }
+
+ return sign * 100;
}
- const transitionStyle: CSSProperties = {
- ...this.getDefaultTransitionStyles(
- key,
- (style as unknown) as AnimationStyle,
- ),
- top: 'auto', // reset default
- [verticalOrigin]: 0,
- ...transform,
+ getDirection(next: PanelId, prev: PanelId): 'X' | 'Y' {
+ const context = contexts.find((item) => item.includes(prev));
+
+ if (!context) {
+ throw new Error(`Can not find context for transition ${prev} -> ${next}`);
+ }
+
+ return context.includes(next) ? 'X' : 'Y';
+ }
+
+ onUpdateHeight = (height: number, key: PanelId): void => {
+ this.setState({
+ formsHeights: {
+ ...this.state.formsHeights,
+ [key]: height,
+ },
+ });
};
- return (
- {Title}
-
- {Footer}
-
- );
- }
-
- getLinks({ key, style, data }: TransitionPlainStyle): ReactElement {
- const { Links } = data as AnimationData;
-
- const transitionStyle = this.getDefaultTransitionStyles(
- key,
- (style as unknown) as AnimationStyle,
- );
-
- return (
-
- {Links}
-
- );
- }
-
- getDefaultTransitionStyles(
- key: string,
- { opacitySpring }: Readonly
+ {hasBackButton ? backButton : null}
+
+ );
+ }
+
+ getBody({ key, style, data }: TransitionPlainStyle): ReactElement {
+ const { Body } = data as AnimationData;
+ const { transformSpring } = (style as unknown) as AnimationStyle;
+ const { direction } = this.state;
+
+ let transform = this.translate(transformSpring, direction);
+ let verticalOrigin = 'top';
+
+ if (direction === 'Y') {
+ verticalOrigin = 'bottom';
+ transform = {};
+ }
+
+ const transitionStyle: CSSProperties = {
+ ...this.getDefaultTransitionStyles(key, (style as unknown) as AnimationStyle),
+ top: 'auto', // reset default
+ [verticalOrigin]: 0,
+ ...transform,
+ };
+
+ return (
+ {Title}
+
+ {Footer}
+
+ );
+ }
+
+ getLinks({ key, style, data }: TransitionPlainStyle): ReactElement {
+ const { Links } = data as AnimationData;
+
+ const transitionStyle = this.getDefaultTransitionStyles(key, (style as unknown) as AnimationStyle);
+
+ return (
+
+ {Links}
+
+ );
+ }
+
+ getDefaultTransitionStyles(
+ key: string,
+ { opacitySpring }: Readonly
- {this.renderErrors()}
+ render() {
+ return (
+
+ );
+ }
}
diff --git a/packages/app/components/auth/acceptRules/acceptRules.scss b/packages/app/components/auth/acceptRules/acceptRules.scss
index 0d79be3..338bb50 100644
--- a/packages/app/components/auth/acceptRules/acceptRules.scss
+++ b/packages/app/components/auth/acceptRules/acceptRules.scss
@@ -1,16 +1,16 @@
@import '~app/components/ui/colors.scss';
.descriptionText {
- font-size: 15px;
- line-height: 1.4;
- padding-bottom: 8px;
- color: #aaa;
+ font-size: 15px;
+ line-height: 1.4;
+ padding-bottom: 8px;
+ color: #aaa;
}
// TODO: вынести иконки такого типа в какую-то внешнюю структуру?
.security {
- color: #fff;
- font-size: 90px;
- line-height: 1;
- margin-bottom: 15px;
+ color: #fff;
+ font-size: 90px;
+ line-height: 1;
+ margin-bottom: 15px;
}
diff --git a/packages/app/components/auth/actions.test.ts b/packages/app/components/auth/actions.test.ts
index 630cf4a..2aa64ca 100644
--- a/packages/app/components/auth/actions.test.ts
+++ b/packages/app/components/auth/actions.test.ts
@@ -5,200 +5,190 @@ import expect from 'app/test/unexpected';
import request from 'app/services/request';
import {
- setLoadingState,
- oAuthValidate,
- oAuthComplete,
- setClient,
- setOAuthRequest,
- setScopes,
- setOAuthCode,
- requirePermissionsAccept,
- login,
- setLogin,
+ setLoadingState,
+ oAuthValidate,
+ oAuthComplete,
+ setClient,
+ setOAuthRequest,
+ setScopes,
+ setOAuthCode,
+ requirePermissionsAccept,
+ login,
+ setLogin,
} from 'app/components/auth/actions';
import { OauthData, OAuthValidateResponse } from '../../services/api/oauth';
const oauthData: OauthData = {
- clientId: '',
- redirectUrl: '',
- responseType: '',
- scope: '',
- state: '',
- prompt: 'none',
+ clientId: '',
+ redirectUrl: '',
+ responseType: '',
+ scope: '',
+ state: '',
+ prompt: 'none',
};
describe('components/auth/actions', () => {
- const dispatch = sinon.stub().named('store.dispatch');
- const getState = sinon.stub().named('store.getState');
+ const dispatch = sinon.stub().named('store.dispatch');
+ const getState = sinon.stub().named('store.getState');
- function callThunk, F extends (...args: A) => any>(
- fn: F,
- ...args: A
- ): Promise
+ {this.renderErrors()}
-
- );
- }
+
-
-
+
+
+
-
-
-
+
+
- {this.renderErrors()}
+ return (
+
+ );
+ }
}
diff --git a/packages/app/components/auth/activation/activation.scss b/packages/app/components/auth/activation/activation.scss
index dd817d1..7d2746b 100644
--- a/packages/app/components/auth/activation/activation.scss
+++ b/packages/app/components/auth/activation/activation.scss
@@ -5,15 +5,15 @@
}
.descriptionImage {
- composes: envelope from '~app/components/ui/icons.scss';
+ composes: envelope from '~app/components/ui/icons.scss';
- font-size: 100px;
- color: $blue;
+ font-size: 100px;
+ color: $blue;
}
.descriptionText {
- font-family: $font-family-title;
- margin: 5px 0 19px;
- line-height: 1.4;
- font-size: 16px;
+ font-family: $font-family-title;
+ margin: 5px 0 19px;
+ line-height: 1.4;
+ font-size: 16px;
}
diff --git a/packages/app/components/auth/appInfo/AppInfo.intl.json b/packages/app/components/auth/appInfo/AppInfo.intl.json
index 8cd2c53..1f25d49 100644
--- a/packages/app/components/auth/appInfo/AppInfo.intl.json
+++ b/packages/app/components/auth/appInfo/AppInfo.intl.json
@@ -1,7 +1,7 @@
{
- "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"
+ "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"
}
diff --git a/packages/app/components/auth/appInfo/AppInfo.tsx b/packages/app/components/auth/appInfo/AppInfo.tsx
index eec0634..004f819 100644
--- a/packages/app/components/auth/appInfo/AppInfo.tsx
+++ b/packages/app/components/auth/appInfo/AppInfo.tsx
@@ -7,51 +7,49 @@ import styles from './appInfo.scss';
import messages from './AppInfo.intl.json';
export default class AppInfo extends React.Component<{
- name?: string;
- description?: string;
- onGoToAuth: () => void;
+ name?: string;
+ description?: string;
+ onGoToAuth: () => void;
}> {
- render() {
- const { name, description, onGoToAuth } = this.props;
+ render() {
+ const { name, description, onGoToAuth } = this.props;
- return (
-
+ {this.renderErrors()}
-
+
-
+
- );
- }
+
+
-
-
- {email ? (
- {email},
- }}
- />
- ) : (
-
-
-
-
-
+ {email ? (
+ {email},
+ }}
+ />
+ ) : (
+
+
+
+
+
- = ({ error, onClose }) => {
- useEffect(() => {
- resetTimeout();
+ useEffect(() => {
+ resetTimeout();
- if (
- onClose &&
- typeof error !== 'string' &&
- error.payload &&
- error.payload.canRepeatIn
- ) {
- const msLeft = error.payload.canRepeatIn * 1000;
- // 1500 to let the user see, that time is elapsed
- setTimeout(onClose, msLeft - Date.now() + 1500);
- }
+ if (onClose && typeof error !== 'string' && error.payload && error.payload.canRepeatIn) {
+ const msLeft = error.payload.canRepeatIn * 1000;
+ // 1500 to let the user see, that time is elapsed
+ setTimeout(onClose, msLeft - Date.now() + 1500);
+ }
- return resetTimeout;
- }, [error, onClose]);
+ return resetTimeout;
+ }, [error, onClose]);
- return (
-
- {resolveError(error)}
-
- );
+ return (
+
+ {resolveError(error)}
+
+ );
};
export default AuthError;
diff --git a/packages/app/components/auth/chooseAccount/ChooseAccount.intl.json b/packages/app/components/auth/chooseAccount/ChooseAccount.intl.json
index ab70d46..1770688 100644
--- a/packages/app/components/auth/chooseAccount/ChooseAccount.intl.json
+++ b/packages/app/components/auth/chooseAccount/ChooseAccount.intl.json
@@ -1,7 +1,7 @@
{
- "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}"
+ "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}"
}
diff --git a/packages/app/components/auth/chooseAccount/ChooseAccount.ts b/packages/app/components/auth/chooseAccount/ChooseAccount.ts
index be84023..cfa04ee 100644
--- a/packages/app/components/auth/chooseAccount/ChooseAccount.ts
+++ b/packages/app/components/auth/chooseAccount/ChooseAccount.ts
@@ -3,14 +3,14 @@ import messages from './ChooseAccount.intl.json';
import Body from './ChooseAccountBody';
export default factory({
- title: messages.chooseAccountTitle,
- body: Body,
- footer: {
- label: messages.addAccount,
- },
- links: [
- {
- label: messages.logoutAll,
+ title: messages.chooseAccountTitle,
+ body: Body,
+ footer: {
+ label: messages.addAccount,
},
- ],
+ links: [
+ {
+ label: messages.logoutAll,
+ },
+ ],
});
diff --git a/packages/app/components/auth/chooseAccount/ChooseAccountBody.tsx b/packages/app/components/auth/chooseAccount/ChooseAccountBody.tsx
index 7ea8286..906e457 100644
--- a/packages/app/components/auth/chooseAccount/ChooseAccountBody.tsx
+++ b/packages/app/components/auth/chooseAccount/ChooseAccountBody.tsx
@@ -10,44 +10,44 @@ import styles from './chooseAccount.scss';
import messages from './ChooseAccount.intl.json';
export default class ChooseAccountBody extends BaseAuthBody {
- static displayName = 'ChooseAccountBody';
- static panelId = 'chooseAccount';
+ static displayName = 'ChooseAccountBody';
+ static panelId = 'chooseAccount';
- render() {
- const { client } = this.context.auth;
+ render() {
+ const { client } = this.context.auth;
- return (
-
-
- {name ? name :
-
-
- {name ? name :
-
- {description ? (
-
- );
- }
+ );
+ }
}
diff --git a/packages/app/components/auth/appInfo/appInfo.scss b/packages/app/components/auth/appInfo/appInfo.scss
index 5242235..febbe2c 100644
--- a/packages/app/components/auth/appInfo/appInfo.scss
+++ b/packages/app/components/auth/appInfo/appInfo.scss
@@ -2,71 +2,71 @@
@import '~app/components/ui/fonts.scss';
.appInfo {
- max-width: 270px;
- margin: 0 auto;
- padding: 55px 25px;
+ max-width: 270px;
+ margin: 0 auto;
+ padding: 55px 25px;
}
.logoContainer {
- position: relative;
- padding: 15px 0;
+ position: relative;
+ padding: 15px 0;
- &:after {
- content: '';
- display: block;
+ &:after {
+ content: '';
+ display: block;
- position: absolute;
- left: 0;
- bottom: 0;
- height: 3px;
- width: 40px;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ height: 3px;
+ width: 40px;
- background: $green;
- }
+ background: $green;
+ }
}
.logo {
- font-family: $font-family-title;
- color: #fff;
- font-size: 36px;
+ font-family: $font-family-title;
+ color: #fff;
+ font-size: 36px;
}
.descriptionContainer {
- margin: 20px 0;
+ margin: 20px 0;
}
.description {
- $font-color: #ccc;
- font-family: $font-family-base;
- color: $font-color;
- font-size: 13px;
- line-height: 1.7;
- margin-top: 7px;
+ $font-color: #ccc;
+ font-family: $font-family-base;
+ color: $font-color;
+ font-size: 13px;
+ line-height: 1.7;
+ margin-top: 7px;
- a {
- color: lighten($font-color, 10%);
- border-bottom-color: #666;
+ a {
+ color: lighten($font-color, 10%);
+ border-bottom-color: #666;
- &:hover {
- color: $font-color;
+ &:hover {
+ color: $font-color;
+ }
}
- }
}
.goToAuth {
}
@media (min-width: 720px) {
- .goToAuth {
- display: none;
- }
+ .goToAuth {
+ display: none;
+ }
}
.footer {
- position: absolute;
- bottom: 10px;
- left: 0;
- right: 0;
- text-align: center;
- line-height: 1.5;
+ position: absolute;
+ bottom: 10px;
+ left: 0;
+ right: 0;
+ text-align: center;
+ line-height: 1.5;
}
diff --git a/packages/app/components/auth/auth.scss b/packages/app/components/auth/auth.scss
index b3bf69c..877a295 100644
--- a/packages/app/components/auth/auth.scss
+++ b/packages/app/components/auth/auth.scss
@@ -1,3 +1,3 @@
.checkboxInput {
- margin-top: 15px;
+ margin-top: 15px;
}
diff --git a/packages/app/components/auth/authError/AuthError.tsx b/packages/app/components/auth/authError/AuthError.tsx
index 08b29b0..b3582e8 100644
--- a/packages/app/components/auth/authError/AuthError.tsx
+++ b/packages/app/components/auth/authError/AuthError.tsx
@@ -5,41 +5,36 @@ import { PanelBodyHeader } from 'app/components/ui/Panel';
import { ValidationError } from 'app/components/ui/form/FormModel';
interface Props {
- error: ValidationError;
- onClose?: () => void;
+ error: ValidationError;
+ onClose?: () => void;
}
let autoHideTimer: number | null = null;
function resetTimeout(): void {
- if (autoHideTimer) {
- clearTimeout(autoHideTimer);
- autoHideTimer = null;
- }
+ if (autoHideTimer) {
+ clearTimeout(autoHideTimer);
+ autoHideTimer = null;
+ }
}
const AuthError: ComponentType{description}
- ) : ( -
-
-
-
-
+
- )}
-
+ {name ? name :
+
+ {name ? name :
+
+ {description ? (
+
+ {description}
+ ) : ( +
+
+ )}
+
+
+
+
+
+
+
+
-
-
-
-
-
-
- {this.renderErrors()}
+ return (
+ ;
interface FactoryParams {
- title: MessageDescriptor;
- body: typeof BaseAuthBody;
- footer: {
- color?: Color;
- label: string | MessageDescriptor;
- autoFocus?: boolean;
- };
- links?: RejectionLinkProps | Array;
+ title: MessageDescriptor;
+ body: typeof BaseAuthBody;
+ footer: {
+ color?: Color;
+ label: string | MessageDescriptor;
+ autoFocus?: boolean;
+ };
+ links?: RejectionLinkProps | Array;
}
-export default function ({
- title,
- body,
- footer,
- links,
-}: FactoryParams): Factory {
- return () => ({
- Title: () => )
- .concat(links)
- .map((link, index) => [
- index ? ' | ' : '',
-
- ) : null,
- });
+export default function ({ title, body, footer, links }: FactoryParams): Factory {
+ return () => ({
+ Title: () => )
+ .concat(links)
+ .map((link, index) => [index ? ' | ' : '',
+ ) : null,
+ });
}
diff --git a/packages/app/components/auth/finish/Finish.intl.json b/packages/app/components/auth/finish/Finish.intl.json
index b4e6503..a1aba85 100644
--- a/packages/app/components/auth/finish/Finish.intl.json
+++ b/packages/app/components/auth/finish/Finish.intl.json
@@ -1,7 +1,7 @@
{
- "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"
+ "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"
}
diff --git a/packages/app/components/auth/finish/Finish.tsx b/packages/app/components/auth/finish/Finish.tsx
index 8f68766..19560a4 100644
--- a/packages/app/components/auth/finish/Finish.tsx
+++ b/packages/app/components/auth/finish/Finish.tsx
@@ -10,100 +10,95 @@ import messages from './Finish.intl.json';
import styles from './finish.scss';
interface Props {
- appName: string;
- code?: string;
- state: string;
- displayCode?: boolean;
- success?: boolean;
+ appName: string;
+ code?: string;
+ state: string;
+ displayCode?: boolean;
+ success?: boolean;
}
class Finish extends React.Component {
- render() {
- const { appName, code, state, displayCode, success } = this.props;
- const authData = JSON.stringify({
- auth_code: code,
- state,
- });
+ render() {
+ const { appName, code, state, displayCode, success } = this.props;
+ const authData = JSON.stringify({
+ auth_code: code,
+ state,
+ });
- history.pushState(null, document.title, `#${authData}`);
+ history.pushState(null, document.title, `#${authData}`);
- return (
-
+ {this.renderErrors()}
-
- );
- }
-
- onSwitch = (account: Account): void => {
- this.context.resolve(account);
- };
+ onSwitch = (account: Account): void => {
+ this.context.resolve(account);
+ };
}
diff --git a/packages/app/components/auth/chooseAccount/chooseAccount.scss b/packages/app/components/auth/chooseAccount/chooseAccount.scss
index afe267d..9dfa7bd 100644
--- a/packages/app/components/auth/chooseAccount/chooseAccount.scss
+++ b/packages/app/components/auth/chooseAccount/chooseAccount.scss
@@ -2,17 +2,17 @@
@import '~app/components/ui/fonts.scss';
.accountSwitcherContainer {
- margin-left: -$bodyLeftRightPadding;
- margin-right: -$bodyLeftRightPadding;
+ margin-left: -$bodyLeftRightPadding;
+ margin-right: -$bodyLeftRightPadding;
}
.description {
- font-family: $font-family-title;
- margin: 5px 0 19px;
- line-height: 1.4;
- font-size: 16px;
+ font-family: $font-family-title;
+ margin: 5px 0 19px;
+ line-height: 1.4;
+ font-size: 16px;
}
.appName {
- color: #fff;
+ color: #fff;
}
diff --git a/packages/app/components/auth/factory.tsx b/packages/app/components/auth/factory.tsx
index 9cbef7f..a8a4395 100644
--- a/packages/app/components/auth/factory.tsx
+++ b/packages/app/components/auth/factory.tsx
@@ -7,44 +7,36 @@ import { Color } from 'app/components/ui';
import BaseAuthBody from './BaseAuthBody';
export type Factory = () => {
- Title: ComponentType;
- Body: typeof BaseAuthBody;
- Footer: ComponentType;
- Links: ComponentType;
+ Title: ComponentType;
+ Body: typeof BaseAuthBody;
+ Footer: ComponentType;
+ Links: ComponentType;
};
type RejectionLinkProps = ComponentProps
- {client ? (
- {client.name},
- }}
- />
- ) : (
-
+ );
+ }
-
-
- )}
-
+ {client ? (
+ {client.name},
+ }}
+ />
+ ) : (
+
+
+
+
+ )}
+
+
-
-
-
+
- );
- }
-
- onCopyClick: MouseEventHandler = (event) => {
- event.preventDefault();
-
- const { code } = this.props;
-
- if (code) {
- copy(code);
+ );
}
- };
+
+ onCopyClick: MouseEventHandler = (event) => {
+ event.preventDefault();
+
+ const { code } = this.props;
+
+ if (code) {
+ copy(code);
+ }
+ };
}
export default connect(({ auth }: RootState) => {
- if (!auth || !auth.client || !auth.oauth) {
- throw new Error('Can not connect Finish component. No auth data in state');
- }
+ if (!auth || !auth.client || !auth.oauth) {
+ throw new Error('Can not connect Finish component. No auth data in state');
+ }
- return {
- appName: auth.client.name,
- code: auth.oauth.code,
- displayCode: auth.oauth.displayCode,
- state: auth.oauth.state,
- success: auth.oauth.success,
- };
+ return {
+ appName: auth.client.name,
+ code: auth.oauth.code,
+ displayCode: auth.oauth.displayCode,
+ state: auth.oauth.state,
+ success: auth.oauth.success,
+ };
})(Finish);
diff --git a/packages/app/components/auth/finish/finish.scss b/packages/app/components/auth/finish/finish.scss
index 36e8719..52d1a24 100644
--- a/packages/app/components/auth/finish/finish.scss
+++ b/packages/app/components/auth/finish/finish.scss
@@ -2,75 +2,75 @@
@import '~app/components/ui/fonts.scss';
.finishPage {
- font-family: $font-family-title;
- position: relative;
- max-width: 515px;
- padding-top: 40px;
- margin: 0 auto;
- text-align: center;
+ font-family: $font-family-title;
+ position: relative;
+ max-width: 515px;
+ padding-top: 40px;
+ margin: 0 auto;
+ text-align: center;
}
.iconBackground {
- position: absolute;
- top: -15px;
- transform: translateX(-50%);
- font-size: 200px;
- color: #e0d9cf;
- z-index: -1;
+ position: absolute;
+ top: -15px;
+ transform: translateX(-50%);
+ font-size: 200px;
+ color: #e0d9cf;
+ z-index: -1;
}
.successBackground {
- composes: checkmark from '~app/components/ui/icons.scss';
- @extend .iconBackground;
+ composes: checkmark from '~app/components/ui/icons.scss';
+ @extend .iconBackground;
}
.failBackground {
- composes: close from '~app/components/ui/icons.scss';
- @extend .iconBackground;
+ composes: close from '~app/components/ui/icons.scss';
+ @extend .iconBackground;
}
.title {
- font-size: 22px;
- margin-bottom: 10px;
+ font-size: 22px;
+ margin-bottom: 10px;
}
.greenTitle {
- composes: title;
+ composes: title;
- color: $green;
+ color: $green;
- .appName {
- color: darker($green);
- }
+ .appName {
+ color: darker($green);
+ }
}
.redTitle {
- composes: title;
+ composes: title;
- color: $red;
+ color: $red;
- .appName {
- color: darker($red);
- }
+ .appName {
+ color: darker($red);
+ }
}
.description {
- font-size: 18px;
- margin-bottom: 10px;
+ font-size: 18px;
+ margin-bottom: 10px;
}
.codeContainer {
- margin-bottom: 5px;
- margin-top: 35px;
+ margin-bottom: 5px;
+ margin-top: 35px;
}
.code {
- $border: 5px solid darker($green);
+ $border: 5px solid darker($green);
- display: inline-block;
- border-right: $border;
- border-left: $border;
- padding: 5px 10px;
- word-break: break-all;
- text-align: center;
+ display: inline-block;
+ border-right: $border;
+ border-left: $border;
+ padding: 5px 10px;
+ word-break: break-all;
+ text-align: center;
}
diff --git a/packages/app/components/auth/forgotPassword/ForgotPassword.intl.json b/packages/app/components/auth/forgotPassword/ForgotPassword.intl.json
index 571a5bb..04eca46 100644
--- a/packages/app/components/auth/forgotPassword/ForgotPassword.intl.json
+++ b/packages/app/components/auth/forgotPassword/ForgotPassword.intl.json
@@ -1,7 +1,7 @@
{
- "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"
+ "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"
}
diff --git a/packages/app/components/auth/forgotPassword/ForgotPassword.ts b/packages/app/components/auth/forgotPassword/ForgotPassword.ts
index 73725a5..79641fb 100644
--- a/packages/app/components/auth/forgotPassword/ForgotPassword.ts
+++ b/packages/app/components/auth/forgotPassword/ForgotPassword.ts
@@ -3,14 +3,14 @@ import messages from './ForgotPassword.intl.json';
import Body from './ForgotPasswordBody';
export default factory({
- title: messages.title,
- body: Body,
- footer: {
- color: 'lightViolet',
- autoFocus: true,
- label: messages.sendMail,
- },
- links: {
- label: messages.alreadyHaveCode,
- },
+ title: messages.title,
+ body: Body,
+ footer: {
+ color: 'lightViolet',
+ autoFocus: true,
+ label: messages.sendMail,
+ },
+ links: {
+ label: messages.alreadyHaveCode,
+ },
});
diff --git a/packages/app/components/auth/forgotPassword/ForgotPasswordBody.tsx b/packages/app/components/auth/forgotPassword/ForgotPasswordBody.tsx
index f2448cc..2dfc790 100644
--- a/packages/app/components/auth/forgotPassword/ForgotPasswordBody.tsx
+++ b/packages/app/components/auth/forgotPassword/ForgotPasswordBody.tsx
@@ -11,87 +11,83 @@ import styles from './forgotPassword.scss';
import messages from './ForgotPassword.intl.json';
export default class ForgotPasswordBody extends BaseAuthBody {
- static displayName = 'ForgotPasswordBody';
- static panelId = 'forgotPassword';
- static hasGoBack = true;
+ static displayName = 'ForgotPasswordBody';
+ static panelId = 'forgotPassword';
+ static hasGoBack = true;
- state = {
- isLoginEdit: false,
- };
+ state = {
+ isLoginEdit: false,
+ };
- autoFocusField = 'login';
+ autoFocusField = 'login';
- render() {
- const { isLoginEdit } = this.state;
+ render() {
+ const { isLoginEdit } = this.state;
- const login = this.getLogin();
- const isLoginEditShown = isLoginEdit || !login;
+ const login = this.getLogin();
+ const isLoginEditShown = isLoginEdit || !login;
- return (
-
-
-
- ) : (
-
- {appName},
- }}
- />
+ {success ? (
+
- {displayCode ? (
-
+
+
+ ) : (
+
+ {appName},
+ }}
+ />
+
+ {displayCode ? (
+
+
+ ) : (
+
+
+
+
+
+ {code}
+
+
+ )}
+
+
+
+ )}
+ {appName},
+ }}
+ />
+
+
+
+
-
- ) : (
-
-
-
-
-
- {code}
-
-
- )}
-
-
-
- )}
-
- {appName},
- }}
- />
-
-
-
-
- {this.renderErrors()}
+ return (
+
+ {this.renderErrors()}
-
- );
- }
-
- serialize() {
- const data = super.serialize();
-
- if (!data.login) {
- data.login = this.getLogin();
+ );
}
- return data;
- }
+ serialize() {
+ const data = super.serialize();
- getLogin() {
- const login = getLogin(this.context);
- const { user } = this.context;
+ if (!data.login) {
+ data.login = this.getLogin();
+ }
- return login || user.username || user.email || '';
- }
+ return data;
+ }
- onClickEdit = async () => {
- this.setState({
- isLoginEdit: true,
- });
+ getLogin() {
+ const login = getLogin(this.context);
+ const { user } = this.context;
- await this.context.requestRedraw();
+ return login || user.username || user.email || '';
+ }
- this.form.focus('login');
- };
+ onClickEdit = async () => {
+ this.setState({
+ isLoginEdit: true,
+ });
+
+ await this.context.requestRedraw();
+
+ this.form.focus('login');
+ };
}
diff --git a/packages/app/components/auth/forgotPassword/forgotPassword.scss b/packages/app/components/auth/forgotPassword/forgotPassword.scss
index 889c3d4..de7757a 100644
--- a/packages/app/components/auth/forgotPassword/forgotPassword.scss
+++ b/packages/app/components/auth/forgotPassword/forgotPassword.scss
@@ -1,31 +1,31 @@
@import '~app/components/ui/colors.scss';
.descriptionText {
- font-size: 15px;
- line-height: 1.4;
- padding-bottom: 8px;
- color: #aaa;
+ font-size: 15px;
+ line-height: 1.4;
+ padding-bottom: 8px;
+ color: #aaa;
}
.login {
- composes: email from '~app/components/auth/password/password.scss';
+ composes: email from '~app/components/auth/password/password.scss';
}
.editLogin {
- composes: pencil from '~app/components/ui/icons.scss';
+ composes: pencil from '~app/components/ui/icons.scss';
- position: relative;
- bottom: 1px;
- padding-left: 3px;
+ position: relative;
+ bottom: 1px;
+ padding-left: 3px;
- color: #666666;
- font-size: 10px;
+ color: #666666;
+ font-size: 10px;
- transition: color 0.3s;
+ transition: color 0.3s;
- cursor: pointer;
+ cursor: pointer;
- &:hover {
- color: #ccc;
- }
+ &:hover {
+ color: #ccc;
+ }
}
diff --git a/packages/app/components/auth/helpLinks.scss b/packages/app/components/auth/helpLinks.scss
index c2d2293..9769a7e 100644
--- a/packages/app/components/auth/helpLinks.scss
+++ b/packages/app/components/auth/helpLinks.scss
@@ -1,9 +1,9 @@
.helpLinks {
- margin: 8px 0;
- position: relative;
- height: 20px;
+ margin: 8px 0;
+ position: relative;
+ height: 20px;
- color: #444;
- text-align: center;
- font-size: 16px;
+ color: #444;
+ text-align: center;
+ font-size: 16px;
}
diff --git a/packages/app/components/auth/login/Login.intl.json b/packages/app/components/auth/login/Login.intl.json
index a3f6d6e..93f82eb 100644
--- a/packages/app/components/auth/login/Login.intl.json
+++ b/packages/app/components/auth/login/Login.intl.json
@@ -1,6 +1,6 @@
{
- "createNewAccount": "Create new account",
- "loginTitle": "Sign in",
- "emailOrUsername": "E‑mail or username",
- "next": "Next"
+ "createNewAccount": "Create new account",
+ "loginTitle": "Sign in",
+ "emailOrUsername": "E‑mail or username",
+ "next": "Next"
}
diff --git a/packages/app/components/auth/login/Login.ts b/packages/app/components/auth/login/Login.ts
index cb28913..86a9575 100644
--- a/packages/app/components/auth/login/Login.ts
+++ b/packages/app/components/auth/login/Login.ts
@@ -3,14 +3,14 @@ import Body from './LoginBody';
import messages from './Login.intl.json';
export default factory({
- title: messages.loginTitle,
- body: Body,
- footer: {
- color: 'green',
- label: messages.next,
- },
- links: {
- isAvailable: (context) => !context.user.isGuest,
- label: messages.createNewAccount,
- },
+ title: messages.loginTitle,
+ body: Body,
+ footer: {
+ color: 'green',
+ label: messages.next,
+ },
+ links: {
+ isAvailable: (context) => !context.user.isGuest,
+ label: messages.createNewAccount,
+ },
});
diff --git a/packages/app/components/auth/login/LoginBody.tsx b/packages/app/components/auth/login/LoginBody.tsx
index a139801..421efe5 100644
--- a/packages/app/components/auth/login/LoginBody.tsx
+++ b/packages/app/components/auth/login/LoginBody.tsx
@@ -7,26 +7,21 @@ import { User } from 'app/components/user/reducer';
import messages from './Login.intl.json';
export default class LoginBody extends BaseAuthBody {
- static displayName = 'LoginBody';
- static panelId = 'login';
- static hasGoBack = (state: { user: User }) => {
- return !state.user.isGuest;
- };
+ static displayName = 'LoginBody';
+ static panelId = 'login';
+ static hasGoBack = (state: { user: User }) => {
+ return !state.user.isGuest;
+ };
- autoFocusField = 'login';
+ autoFocusField = 'login';
- render() {
- return (
-
-
- ) : (
-
-
-
- )}
-
-
- {login}
-
+ {isLoginEditShown ? (
+
-
+
+ ) : (
+
+
+
+ )}
+
+
+ {login}
+
+
+
+
-
- {this.renderErrors()}
+ render() {
+ return (
+
+ );
+ }
}
diff --git a/packages/app/components/auth/mfa/Mfa.intl.json b/packages/app/components/auth/mfa/Mfa.intl.json
index de053eb..b19e7e8 100644
--- a/packages/app/components/auth/mfa/Mfa.intl.json
+++ b/packages/app/components/auth/mfa/Mfa.intl.json
@@ -1,4 +1,4 @@
{
- "enterTotp": "Enter code",
- "description": "In order to sign in this account, you need to enter a one-time password from mobile application"
+ "enterTotp": "Enter code",
+ "description": "In order to sign in this account, you need to enter a one-time password from mobile application"
}
diff --git a/packages/app/components/auth/mfa/Mfa.tsx b/packages/app/components/auth/mfa/Mfa.tsx
index 79d58bf..ffda313 100644
--- a/packages/app/components/auth/mfa/Mfa.tsx
+++ b/packages/app/components/auth/mfa/Mfa.tsx
@@ -4,10 +4,10 @@ import messages from './Mfa.intl.json';
import passwordMessages from '../password/Password.intl.json';
export default factory({
- title: messages.enterTotp,
- body: Body,
- footer: {
- color: 'green',
- label: passwordMessages.signInButton,
- },
+ title: messages.enterTotp,
+ body: Body,
+ footer: {
+ color: 'green',
+ label: passwordMessages.signInButton,
+ },
});
diff --git a/packages/app/components/auth/mfa/MfaBody.tsx b/packages/app/components/auth/mfa/MfaBody.tsx
index 16eb9fc..02ea0f3 100644
--- a/packages/app/components/auth/mfa/MfaBody.tsx
+++ b/packages/app/components/auth/mfa/MfaBody.tsx
@@ -8,30 +8,30 @@ import styles from './mfa.scss';
import messages from './Mfa.intl.json';
export default class MfaBody extends BaseAuthBody {
- static panelId = 'mfa';
- static hasGoBack = true;
+ static panelId = 'mfa';
+ static hasGoBack = true;
- autoFocusField = 'totp';
+ autoFocusField = 'totp';
- render() {
- return (
-
+ {this.renderErrors()}
-
-
- );
- }
+
+
- {this.renderErrors()}
+ render() {
+ return (
+
+ );
+ }
}
diff --git a/packages/app/components/auth/mfa/mfa.scss b/packages/app/components/auth/mfa/mfa.scss
index 70aff73..8edb590 100644
--- a/packages/app/components/auth/mfa/mfa.scss
+++ b/packages/app/components/auth/mfa/mfa.scss
@@ -1,6 +1,6 @@
.descriptionText {
- font-size: 15px;
- line-height: 1.4;
- padding-bottom: 8px;
- color: #aaa;
+ font-size: 15px;
+ line-height: 1.4;
+ padding-bottom: 8px;
+ color: #aaa;
}
diff --git a/packages/app/components/auth/password/Password.intl.json b/packages/app/components/auth/password/Password.intl.json
index 6b3eb35..c2e9388 100644
--- a/packages/app/components/auth/password/Password.intl.json
+++ b/packages/app/components/auth/password/Password.intl.json
@@ -1,7 +1,7 @@
{
- "passwordTitle": "Enter password",
- "signInButton": "Sign in",
- "forgotPassword": "Forgot password",
- "accountPassword": "Account password",
- "rememberMe": "Remember me on this device"
+ "passwordTitle": "Enter password",
+ "signInButton": "Sign in",
+ "forgotPassword": "Forgot password",
+ "accountPassword": "Account password",
+ "rememberMe": "Remember me on this device"
}
diff --git a/packages/app/components/auth/password/Password.ts b/packages/app/components/auth/password/Password.ts
index d0ab75d..ffa58c1 100644
--- a/packages/app/components/auth/password/Password.ts
+++ b/packages/app/components/auth/password/Password.ts
@@ -3,13 +3,13 @@ import Body from './PasswordBody';
import messages from './Password.intl.json';
export default factory({
- title: messages.passwordTitle,
- body: Body,
- footer: {
- color: 'green',
- label: messages.signInButton,
- },
- links: {
- label: messages.forgotPassword,
- },
+ title: messages.passwordTitle,
+ body: Body,
+ footer: {
+ color: 'green',
+ label: messages.signInButton,
+ },
+ links: {
+ label: messages.forgotPassword,
+ },
});
diff --git a/packages/app/components/auth/password/PasswordBody.tsx b/packages/app/components/auth/password/PasswordBody.tsx
index a13e379..b67b3a3 100644
--- a/packages/app/components/auth/password/PasswordBody.tsx
+++ b/packages/app/components/auth/password/PasswordBody.tsx
@@ -8,46 +8,38 @@ import styles from './password.scss';
import messages from './Password.intl.json';
export default class PasswordBody extends BaseAuthBody {
- static displayName = 'PasswordBody';
- static panelId = 'password';
- static hasGoBack = true;
+ static displayName = 'PasswordBody';
+ static panelId = 'password';
+ static hasGoBack = true;
- autoFocusField = 'password';
+ autoFocusField = 'password';
- render() {
- const { user } = this.context;
+ render() {
+ const { user } = this.context;
- return (
-
+ {this.renderErrors()}
-
- );
- }
+
+
-
+
- {this.renderErrors()}
+ return (
+
+ );
+ }
}
diff --git a/packages/app/components/auth/password/password.scss b/packages/app/components/auth/password/password.scss
index d3c084c..7f7c03d 100644
--- a/packages/app/components/auth/password/password.scss
+++ b/packages/app/components/auth/password/password.scss
@@ -1,22 +1,22 @@
@import '~app/components/ui/fonts.scss';
.avatar {
- width: 90px;
- height: 90px;
- font-size: 90px;
- line-height: 1;
- margin: 0 auto;
+ width: 90px;
+ height: 90px;
+ font-size: 90px;
+ line-height: 1;
+ margin: 0 auto;
- img {
- width: 100%;
- }
+ img {
+ width: 100%;
+ }
}
.email {
- font-family: $font-family-title;
- font-size: 18px;
- color: #fff;
+ font-family: $font-family-title;
+ font-size: 18px;
+ color: #fff;
- margin-bottom: 15px;
- margin-top: 10px;
+ margin-bottom: 15px;
+ margin-top: 10px;
}
diff --git a/packages/app/components/auth/permissions/Permissions.intl.json b/packages/app/components/auth/permissions/Permissions.intl.json
index 6143d48..8af4b87 100644
--- a/packages/app/components/auth/permissions/Permissions.intl.json
+++ b/packages/app/components/auth/permissions/Permissions.intl.json
@@ -1,12 +1,12 @@
{
- "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"
+ "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"
}
diff --git a/packages/app/components/auth/permissions/Permissions.ts b/packages/app/components/auth/permissions/Permissions.ts
index 053bc23..c630a5a 100644
--- a/packages/app/components/auth/permissions/Permissions.ts
+++ b/packages/app/components/auth/permissions/Permissions.ts
@@ -3,14 +3,14 @@ import messages from './Permissions.intl.json';
import Body from './PermissionsBody';
export default factory({
- title: messages.permissionsTitle,
- body: Body,
- footer: {
- color: 'orange',
- autoFocus: true,
- label: messages.approve,
- },
- links: {
- label: messages.decline,
- },
+ title: messages.permissionsTitle,
+ body: Body,
+ footer: {
+ color: 'orange',
+ autoFocus: true,
+ label: messages.approve,
+ },
+ links: {
+ label: messages.decline,
+ },
});
diff --git a/packages/app/components/auth/permissions/PermissionsBody.tsx b/packages/app/components/auth/permissions/PermissionsBody.tsx
index 7c4cd06..90992c6 100644
--- a/packages/app/components/auth/permissions/PermissionsBody.tsx
+++ b/packages/app/components/auth/permissions/PermissionsBody.tsx
@@ -8,58 +8,52 @@ import styles from './permissions.scss';
import messages from './Permissions.intl.json';
export default class PermissionsBody extends BaseAuthBody {
- static displayName = 'PermissionsBody';
- static panelId = 'permissions';
+ static displayName = 'PermissionsBody';
+ static panelId = 'permissions';
- render() {
- const { user } = this.context;
- const { scopes } = this.context.auth;
+ render() {
+ const { user } = this.context;
+ const { scopes } = this.context.auth;
- return (
-
+ {this.renderErrors()}
-
- );
- }
+
-
+
- {user.avatar ? (
- 
- ) : (
-
- )}
-
- {user.email || user.username}
-
+
-
+
-
+ {user.avatar ? : }
+
+ {user.email || user.username}
+
-
-
+
+
- {this.renderErrors()}
+ return (
+ ;
- }
+ string,
+ | string
+ | {
+ type: string;
+ payload: Record;
+ }
> | null;
export interface Client {
- id: string;
- name: string;
- description: string;
+ id: string;
+ name: string;
+ description: string;
}
export interface OAuthState {
- clientId: string;
- redirectUrl: string;
- responseType: string;
- description?: string;
- scope: string;
- prompt: string;
- loginHint: string;
- state: string;
- success?: boolean;
- code?: string;
- displayCode?: boolean;
- acceptRequired?: boolean;
+ clientId: string;
+ redirectUrl: string;
+ responseType: string;
+ description?: string;
+ scope: string;
+ prompt: string;
+ loginHint: string;
+ state: string;
+ success?: boolean;
+ code?: string;
+ displayCode?: boolean;
+ acceptRequired?: boolean;
}
type Scopes = Array;
export interface State {
- credentials: Credentials;
- error: Error;
- isLoading: boolean;
- isSwitcherEnabled: boolean;
- client: Client | null;
- oauth: OAuthState | null;
- scopes: Scopes;
+ credentials: Credentials;
+ error: Error;
+ isLoading: boolean;
+ isSwitcherEnabled: boolean;
+ client: Client | null;
+ oauth: OAuthState | null;
+ scopes: Scopes;
}
-const error: Reducer = (
- state = null,
- { type, payload },
-) => {
- if (type === 'auth:error') {
- return payload;
- }
-
- return state;
-};
-
-const credentials: Reducer = (
- state = {},
- { type, payload },
-) => {
- if (type === 'auth:setCredentials') {
- if (payload) {
- return {
- ...payload,
- };
+const error: Reducer = (state = null, { type, payload }) => {
+ if (type === 'auth:error') {
+ return payload;
}
- return {};
- }
-
- return state;
+ return state;
};
-const isSwitcherEnabled: Reducer<
- State['isSwitcherEnabled'],
- AccountSwitcherAction
-> = (state = true, { type, payload }) => {
- if (type === 'auth:setAccountSwitcher') {
- return payload;
- }
+const credentials: Reducer = (state = {}, { type, payload }) => {
+ if (type === 'auth:setCredentials') {
+ if (payload) {
+ return {
+ ...payload,
+ };
+ }
- return state;
+ return {};
+ }
+
+ return state;
};
-const isLoading: Reducer = (
- state = false,
- { type, payload },
+const isSwitcherEnabled: Reducer = (
+ state = true,
+ { type, payload },
) => {
- if (type === 'set_loading_state') {
- return payload;
- }
+ if (type === 'auth:setAccountSwitcher') {
+ return payload;
+ }
- return state;
+ return state;
};
-const client: Reducer = (
- state = null,
- { type, payload },
-) => {
- if (type === 'set_client') {
- return payload;
- }
+const isLoading: Reducer = (state = false, { type, payload }) => {
+ if (type === 'set_loading_state') {
+ return payload;
+ }
- return state;
+ return state;
+};
+
+const client: Reducer = (state = null, { type, payload }) => {
+ if (type === 'set_client') {
+ return payload;
+ }
+
+ return state;
};
const oauth: Reducer = (state = null, action) => {
- switch (action.type) {
- case 'set_oauth':
- return action.payload;
- case 'set_oauth_result':
- return {
- ...(state as OAuthState),
- ...action.payload,
- };
- case 'require_permissions_accept':
- return {
- ...(state as OAuthState),
- acceptRequired: true,
- };
- default:
- return state;
- }
+ switch (action.type) {
+ case 'set_oauth':
+ return action.payload;
+ case 'set_oauth_result':
+ return {
+ ...(state as OAuthState),
+ ...action.payload,
+ };
+ case 'require_permissions_accept':
+ return {
+ ...(state as OAuthState),
+ acceptRequired: true,
+ };
+ default:
+ return state;
+ }
};
-const scopes: Reducer = (
- state = [],
- { type, payload },
-) => {
- if (type === 'set_scopes') {
- return payload;
- }
+const scopes: Reducer = (state = [], { type, payload }) => {
+ if (type === 'set_scopes') {
+ return payload;
+ }
- return state;
+ return state;
};
export default combineReducers({
- credentials,
- error,
- isLoading,
- isSwitcherEnabled,
- client,
- oauth,
- scopes,
+ credentials,
+ error,
+ isLoading,
+ isSwitcherEnabled,
+ client,
+ oauth,
+ scopes,
});
-export function getLogin(
- state: RootState | Pick,
-): string | null {
- return state.auth.credentials.login || null;
+export function getLogin(state: RootState | Pick): string | null {
+ return state.auth.credentials.login || null;
}
export function getCredentials(state: RootState): Credentials {
- return state.auth.credentials;
+ return state.auth.credentials;
}
diff --git a/packages/app/components/auth/register/Register.intl.json b/packages/app/components/auth/register/Register.intl.json
index 7a83ef3..39e167b 100644
--- a/packages/app/components/auth/register/Register.intl.json
+++ b/packages/app/components/auth/register/Register.intl.json
@@ -1,10 +1,10 @@
{
- "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"
+ "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"
}
diff --git a/packages/app/components/auth/register/Register.ts b/packages/app/components/auth/register/Register.ts
index ac50d6b..6536bd1 100644
--- a/packages/app/components/auth/register/Register.ts
+++ b/packages/app/components/auth/register/Register.ts
@@ -5,19 +5,19 @@ import messages from './Register.intl.json';
import Body from './RegisterBody';
export default factory({
- title: messages.registerTitle,
- body: Body,
- footer: {
- color: 'blue',
- label: messages.signUpButton,
- },
- links: [
- {
- label: activationMessages.didNotReceivedEmail,
- payload: { requestEmail: true },
+ title: messages.registerTitle,
+ body: Body,
+ footer: {
+ color: 'blue',
+ label: messages.signUpButton,
},
- {
- label: forgotPasswordMessages.alreadyHaveCode,
- },
- ],
+ links: [
+ {
+ label: activationMessages.didNotReceivedEmail,
+ payload: { requestEmail: true },
+ },
+ {
+ label: forgotPasswordMessages.alreadyHaveCode,
+ },
+ ],
});
diff --git a/packages/app/components/auth/register/RegisterBody.tsx b/packages/app/components/auth/register/RegisterBody.tsx
index 9578975..80aad09 100644
--- a/packages/app/components/auth/register/RegisterBody.tsx
+++ b/packages/app/components/auth/register/RegisterBody.tsx
@@ -11,73 +11,73 @@ import messages from './Register.intl.json';
// TODO: password and username can be validate for length and sameness
export default class RegisterBody extends BaseAuthBody {
- static panelId = 'register';
+ static panelId = 'register';
- autoFocusField = 'username';
+ autoFocusField = 'username';
- render() {
- return (
-
- ,
- );
+ render(
+
+ ,
+ );
- expect(screen.getAllByRole('textbox').length, 'to be greater than', 1);
+ expect(screen.getAllByRole('textbox').length, 'to be greater than', 1);
- expect(
- screen.getByRole('button', { name: /Send/ }),
- 'to have property',
- 'type',
- 'submit',
- );
+ expect(screen.getByRole('button', { name: /Send/ }), 'to have property', 'type', 'submit');
- [
- {
- label: 'subject',
- name: 'subject',
- },
- {
- label: 'E‑mail',
- name: 'email',
- },
- {
- label: 'message',
- name: 'message',
- },
- ].forEach((el) => {
- expect(
- screen.getByLabelText(el.label, { exact: false }),
- 'to have property',
- 'name',
- el.name,
- );
- });
- });
-
- describe('when rendered with user', () => {
- const user = {
- email: 'foo@bar.com',
- } as User;
-
- it('should render email field with user email', () => {
- render(
-
- ,
- );
-
- expect(screen.getByDisplayValue(user.email), 'to be a', HTMLInputElement);
- });
- });
-
- it('should submit and then hide form and display success message', async () => {
- const user = {
- email: 'foo@bar.com',
- } as User;
-
- render(
-
- ,
- );
-
- fireEvent.change(screen.getByLabelText(/subject/i), {
- target: {
- value: 'subject',
- },
+ [
+ {
+ label: 'subject',
+ name: 'subject',
+ },
+ {
+ label: 'E‑mail',
+ name: 'email',
+ },
+ {
+ label: 'message',
+ name: 'message',
+ },
+ ].forEach((el) => {
+ expect(screen.getByLabelText(el.label, { exact: false }), 'to have property', 'name', el.name);
+ });
});
- fireEvent.change(screen.getByLabelText(/message/i), {
- target: {
- value: 'the message',
- },
+ describe('when rendered with user', () => {
+ const user = {
+ email: 'foo@bar.com',
+ } as User;
+
+ it('should render email field with user email', () => {
+ render(
+
+ ,
+ );
+
+ expect(screen.getByDisplayValue(user.email), 'to be a', HTMLInputElement);
+ });
});
- const button = screen.getByRole('button', { name: 'Send' });
+ it('should submit and then hide form and display success message', async () => {
+ const user = {
+ email: 'foo@bar.com',
+ } as User;
- expect(button, 'to have property', 'disabled', false);
+ render(
+
+ ,
+ );
- fireEvent.click(button);
+ fireEvent.change(screen.getByLabelText(/subject/i), {
+ target: {
+ value: 'subject',
+ },
+ });
- expect(button, 'to have property', 'disabled', true);
- expect(feedback.send, 'to have a call exhaustively satisfying', [
- {
- subject: 'subject',
- email: user.email,
- category: '',
- message: 'the message',
- },
- ]);
+ fireEvent.change(screen.getByLabelText(/message/i), {
+ target: {
+ value: 'the message',
+ },
+ });
- await waitFor(() => {
- expect(
- screen.getByText('Your message was received', { exact: false }),
- 'to be a',
- HTMLElement,
- );
+ const button = screen.getByRole('button', { name: 'Send' });
+
+ expect(button, 'to have property', 'disabled', false);
+
+ fireEvent.click(button);
+
+ expect(button, 'to have property', 'disabled', true);
+ expect(feedback.send, 'to have a call exhaustively satisfying', [
+ {
+ subject: 'subject',
+ email: user.email,
+ category: '',
+ message: 'the message',
+ },
+ ]);
+
+ await waitFor(() => {
+ expect(screen.getByText('Your message was received', { exact: false }), 'to be a', HTMLElement);
+ });
+
+ expect(screen.getByText(user.email), 'to be a', HTMLElement);
+
+ expect(screen.queryByRole('button', { name: /Send/ }), 'to be null');
});
- expect(screen.getByText(user.email), 'to be a', HTMLElement);
+ it('should show validation messages', async () => {
+ const user = {
+ email: 'foo@bar.com',
+ } as User;
- expect(screen.queryByRole('button', { name: /Send/ }), 'to be null');
- });
+ (feedback.send as any).callsFake(() =>
+ Promise.reject({
+ success: false,
+ errors: { email: 'error.email_invalid' },
+ }),
+ );
- it('should show validation messages', async () => {
- const user = {
- email: 'foo@bar.com',
- } as User;
+ render(
+
+ ,
+ );
- (feedback.send as any).callsFake(() =>
- Promise.reject({
- success: false,
- errors: { email: 'error.email_invalid' },
- }),
- );
+ fireEvent.change(screen.getByLabelText(/subject/i), {
+ target: {
+ value: 'subject',
+ },
+ });
- render(
-
- ,
- );
+ fireEvent.change(screen.getByLabelText(/message/i), {
+ target: {
+ value: 'the message',
+ },
+ });
- fireEvent.change(screen.getByLabelText(/subject/i), {
- target: {
- value: 'subject',
- },
+ fireEvent.click(screen.getByRole('button', { name: 'Send' }));
+
+ await waitFor(() => {
+ expect(screen.getByRole('alert'), 'to have property', 'innerHTML', 'E‑mail is invalid');
+ });
});
-
- fireEvent.change(screen.getByLabelText(/message/i), {
- target: {
- value: 'the message',
- },
- });
-
- fireEvent.click(screen.getByRole('button', { name: 'Send' }));
-
- await waitFor(() => {
- expect(
- screen.getByRole('alert'),
- 'to have property',
- 'innerHTML',
- 'E‑mail is invalid',
- );
- });
- });
});
diff --git a/packages/app/components/contact/ContactForm.tsx b/packages/app/components/contact/ContactForm.tsx
index 461f7ed..2bbe241 100644
--- a/packages/app/components/contact/ContactForm.tsx
+++ b/packages/app/components/contact/ContactForm.tsx
@@ -2,14 +2,7 @@ import React from 'react';
import { connect } from 'react-redux';
import clsx from 'clsx';
import { FormattedMessage as Message } from 'react-intl';
-import {
- Input,
- TextArea,
- Button,
- Form,
- FormModel,
- Dropdown,
-} from 'app/components/ui/form';
+import { Input, TextArea, Button, Form, FormModel, Dropdown } from 'app/components/ui/form';
import feedback from 'app/services/api/feedback';
import icons from 'app/components/ui/icons.scss';
import popupStyles from 'app/components/ui/popup/popup.scss';
@@ -21,190 +14,170 @@ import styles from './contactForm.scss';
import messages from './contactForm.intl.json';
const CONTACT_CATEGORIES = {
- // TODO: сюда позже проставить реальные id категорий с backend
- 0:
+ {this.renderErrors()}
-
-
-
- );
- }
+ );
+ }
}
diff --git a/packages/app/components/auth/permissions/permissions.scss b/packages/app/components/auth/permissions/permissions.scss
index 5c24898..c3400d6 100644
--- a/packages/app/components/auth/permissions/permissions.scss
+++ b/packages/app/components/auth/permissions/permissions.scss
@@ -2,76 +2,76 @@
@import '~app/components/ui/fonts.scss';
.authInfo {
- // Отступы сверху и снизу разные т.к. мы ужимаем высоту линии строки с логином на 2 пикселя и из-за этого теряем отступ снизу
- padding: 5px 20px 7px;
- text-align: left;
+ // Отступы сверху и снизу разные т.к. мы ужимаем высоту линии строки с логином на 2 пикселя и из-за этого теряем отступ снизу
+ padding: 5px 20px 7px;
+ text-align: left;
}
.authInfoAvatar {
- $size: 30px;
+ $size: 30px;
- float: left;
- height: $size;
- width: $size;
- font-size: $size;
- line-height: 1;
- margin-right: 10px;
- margin-top: 2px;
- color: #aaa;
+ float: left;
+ height: $size;
+ width: $size;
+ font-size: $size;
+ line-height: 1;
+ margin-right: 10px;
+ margin-top: 2px;
+ color: #aaa;
- img {
- width: 100%;
- }
+ img {
+ width: 100%;
+ }
}
.authInfoTitle {
- font-size: 14px;
- color: #666;
+ font-size: 14px;
+ color: #666;
}
.authInfoEmail {
- font-family: $font-family-title;
- font-size: 20px;
- line-height: 16px;
- color: #fff;
+ font-family: $font-family-title;
+ font-size: 20px;
+ line-height: 16px;
+ color: #fff;
}
.permissionsContainer {
- padding: 15px 12px;
- text-align: left;
+ padding: 15px 12px;
+ text-align: left;
}
.permissionsTitle {
- font-family: $font-family-title;
- font-size: 18px;
- color: #dd8650;
- padding-bottom: 6px;
+ font-family: $font-family-title;
+ font-size: 18px;
+ color: #dd8650;
+ padding-bottom: 6px;
}
.permissionsList {
- list-style: none;
- margin-top: 10px;
+ list-style: none;
+ margin-top: 10px;
- li {
- color: #a9a9a9;
- font-size: 14px;
- line-height: 1.4;
- padding-bottom: 4px;
- padding-left: 17px;
- position: relative;
+ li {
+ color: #a9a9a9;
+ font-size: 14px;
+ line-height: 1.4;
+ padding-bottom: 4px;
+ padding-left: 17px;
+ position: relative;
- &:last-of-type {
- padding-bottom: 0;
+ &:last-of-type {
+ padding-bottom: 0;
+ }
+
+ &:before {
+ content: '• ';
+ color: lighter($light_violet);
+ font-size: 39px; // ~ 9px
+ line-height: 9px;
+ position: absolute;
+ top: 6px;
+ left: -4px;
+ }
}
-
- &:before {
- content: '• ';
- color: lighter($light_violet);
- font-size: 39px; // ~ 9px
- line-height: 9px;
- position: absolute;
- top: 6px;
- left: -4px;
- }
- }
}
diff --git a/packages/app/components/auth/recoverPassword/RecoverPassword.intl.json b/packages/app/components/auth/recoverPassword/RecoverPassword.intl.json
index b769994..ce776a5 100644
--- a/packages/app/components/auth/recoverPassword/RecoverPassword.intl.json
+++ b/packages/app/components/auth/recoverPassword/RecoverPassword.intl.json
@@ -1,12 +1,12 @@
{
- "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"
+ "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"
}
diff --git a/packages/app/components/auth/recoverPassword/RecoverPassword.ts b/packages/app/components/auth/recoverPassword/RecoverPassword.ts
index 6a8137f..fb54884 100644
--- a/packages/app/components/auth/recoverPassword/RecoverPassword.ts
+++ b/packages/app/components/auth/recoverPassword/RecoverPassword.ts
@@ -3,13 +3,13 @@ import messages from './RecoverPassword.intl.json';
import Body from './RecoverPasswordBody';
export default factory({
- title: messages.title,
- body: Body,
- footer: {
- color: 'lightViolet',
- label: messages.change,
- },
- links: {
- label: messages.contactSupport,
- },
+ title: messages.title,
+ body: Body,
+ footer: {
+ color: 'lightViolet',
+ label: messages.change,
+ },
+ links: {
+ label: messages.contactSupport,
+ },
});
diff --git a/packages/app/components/auth/recoverPassword/RecoverPasswordBody.tsx b/packages/app/components/auth/recoverPassword/RecoverPasswordBody.tsx
index 2a252a8..e75a338 100644
--- a/packages/app/components/auth/recoverPassword/RecoverPasswordBody.tsx
+++ b/packages/app/components/auth/recoverPassword/RecoverPasswordBody.tsx
@@ -11,70 +11,67 @@ import messages from './RecoverPassword.intl.json';
// TODO: activation code field may be decoupled into common component and reused here and in activation panel
export default class RecoverPasswordBody extends BaseAuthBody {
- static displayName = 'RecoverPasswordBody';
- static panelId = 'recoverPassword';
- static hasGoBack = true;
+ static displayName = 'RecoverPasswordBody';
+ static panelId = 'recoverPassword';
+ static hasGoBack = true;
- autoFocusField =
- this.props.match.params && this.props.match.params.key
- ? 'newPassword'
- : 'key';
+ autoFocusField = this.props.match.params && this.props.match.params.key ? 'newPassword' : 'key';
- render() {
- const { user } = this.context;
- const { key } = this.props.match.params;
+ render() {
+ const { user } = this.context;
+ const { key } = this.props.match.params;
- return (
-
-
-
- {user.avatar ? (
-
- ) : (
-
- )}
+
+
+
-
+
+
+ {user.avatar ? : }
+
+
+
+ {user.username}
+
+
+
+
+ +
-
+ {scopes.map((scope) => {
+ const key = `scope_${scope}`;
+ const message = messages[key];
+
+ return (
+
-
+ {message ? (
+
+ ) : ( + scope.replace(/^\w|_/g, (match) => match.replace('_', ' ').toUpperCase()) + )} +
+ );
+ })}
+
-
- {user.username}
-
-
-
-
-
- -
-
- {scopes.map((scope) => {
- const key = `scope_${scope}`;
- const message = messages[key];
-
- return (
-
-
- {message ? (
-
- ) : ( - scope.replace(/^\w|_/g, (match) => - match.replace('_', ' ').toUpperCase(), - ) - )} -
- );
- })}
-
- {this.renderErrors()}
+ return (
+
+ );
+ }
}
diff --git a/packages/app/components/auth/recoverPassword/recoverPassword.scss b/packages/app/components/auth/recoverPassword/recoverPassword.scss
index 7da264e..ddc9bed 100644
--- a/packages/app/components/auth/recoverPassword/recoverPassword.scss
+++ b/packages/app/components/auth/recoverPassword/recoverPassword.scss
@@ -1,8 +1,8 @@
@import '~app/components/ui/colors.scss';
.descriptionText {
- font-size: 15px;
- line-height: 1.4;
- margin-bottom: 8px;
- color: #aaa;
+ font-size: 15px;
+ line-height: 1.4;
+ margin-bottom: 8px;
+ color: #aaa;
}
diff --git a/packages/app/components/auth/reducer.test.ts b/packages/app/components/auth/reducer.test.ts
index 1b5ba5d..e7b9fec 100644
--- a/packages/app/components/auth/reducer.test.ts
+++ b/packages/app/components/auth/reducer.test.ts
@@ -3,40 +3,36 @@ import auth from './reducer';
import { setLogin, setAccountSwitcher } from './actions';
describe('components/auth/reducer', () => {
- describe('auth:setCredentials', () => {
- it('should set login', () => {
- const expectedLogin = 'foo';
+ describe('auth:setCredentials', () => {
+ it('should set login', () => {
+ const expectedLogin = 'foo';
- expect(
- auth(undefined, setLogin(expectedLogin)).credentials,
- 'to satisfy',
- {
- login: expectedLogin,
- },
- );
- });
- });
-
- describe('auth:setAccountSwitcher', () => {
- it('should be enabled by default', () =>
- expect(auth(undefined, {} as any), 'to satisfy', {
- isSwitcherEnabled: true,
- }));
-
- it('should enable switcher', () => {
- const expectedValue = true;
-
- expect(auth(undefined, setAccountSwitcher(expectedValue)), 'to satisfy', {
- isSwitcherEnabled: expectedValue,
- });
+ expect(auth(undefined, setLogin(expectedLogin)).credentials, 'to satisfy', {
+ login: expectedLogin,
+ });
+ });
});
- it('should disable switcher', () => {
- const expectedValue = false;
+ describe('auth:setAccountSwitcher', () => {
+ it('should be enabled by default', () =>
+ expect(auth(undefined, {} as any), 'to satisfy', {
+ isSwitcherEnabled: true,
+ }));
- expect(auth(undefined, setAccountSwitcher(expectedValue)), 'to satisfy', {
- isSwitcherEnabled: expectedValue,
- });
+ it('should enable switcher', () => {
+ const expectedValue = true;
+
+ expect(auth(undefined, setAccountSwitcher(expectedValue)), 'to satisfy', {
+ isSwitcherEnabled: expectedValue,
+ });
+ });
+
+ it('should disable switcher', () => {
+ const expectedValue = false;
+
+ expect(auth(undefined, setAccountSwitcher(expectedValue)), 'to satisfy', {
+ isSwitcherEnabled: expectedValue,
+ });
+ });
});
- });
});
diff --git a/packages/app/components/auth/reducer.ts b/packages/app/components/auth/reducer.ts
index 8be2f20..b173059 100644
--- a/packages/app/components/auth/reducer.ts
+++ b/packages/app/components/auth/reducer.ts
@@ -3,173 +3,156 @@ import { RootState } from 'app/reducers';
import { Scope } from '../../services/api/oauth';
import {
- ErrorAction,
- CredentialsAction,
- AccountSwitcherAction,
- LoadingAction,
- ClientAction,
- OAuthAction,
- ScopesAction,
+ ErrorAction,
+ CredentialsAction,
+ AccountSwitcherAction,
+ LoadingAction,
+ ClientAction,
+ OAuthAction,
+ ScopesAction,
} from './actions';
export interface Credentials {
- login?: string | null; // By some reasons there is can be null value. Need to investigate.
- password?: string;
- rememberMe?: boolean;
- returnUrl?: string;
- isRelogin?: boolean;
- isTotpRequired?: boolean;
+ login?: string | null; // By some reasons there is can be null value. Need to investigate.
+ password?: string;
+ rememberMe?: boolean;
+ returnUrl?: string;
+ isRelogin?: boolean;
+ isTotpRequired?: boolean;
}
type Error = Record<
- string,
- | string
- | {
- type: string;
- payload: Record
+ {this.renderErrors()}
-
- );
- }
+
+
- {user.maskedEmail ? (
-
+ {user.maskedEmail ? (
+
-
+
- {this.renderErrors()}
+ render() {
+ return (
+
+ );
+ }
}
diff --git a/packages/app/components/auth/resendActivation/ResendActivation.intl.json b/packages/app/components/auth/resendActivation/ResendActivation.intl.json
index 99803c0..b2d7652 100644
--- a/packages/app/components/auth/resendActivation/ResendActivation.intl.json
+++ b/packages/app/components/auth/resendActivation/ResendActivation.intl.json
@@ -1,5 +1,5 @@
{
- "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"
+ "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"
}
diff --git a/packages/app/components/auth/resendActivation/ResendActivation.ts b/packages/app/components/auth/resendActivation/ResendActivation.ts
index b33b817..d56a772 100644
--- a/packages/app/components/auth/resendActivation/ResendActivation.ts
+++ b/packages/app/components/auth/resendActivation/ResendActivation.ts
@@ -4,13 +4,13 @@ import messages from './ResendActivation.intl.json';
import Body from './ResendActivationBody';
export default factory({
- title: messages.title,
- body: Body,
- footer: {
- color: 'blue',
- label: messages.sendNewEmail,
- },
- links: {
- label: forgotPasswordMessages.alreadyHaveCode,
- },
+ title: messages.title,
+ body: Body,
+ footer: {
+ color: 'blue',
+ label: messages.sendNewEmail,
+ },
+ links: {
+ label: forgotPasswordMessages.alreadyHaveCode,
+ },
});
diff --git a/packages/app/components/auth/resendActivation/ResendActivationBody.tsx b/packages/app/components/auth/resendActivation/ResendActivationBody.tsx
index 773e6d3..9fd24cd 100644
--- a/packages/app/components/auth/resendActivation/ResendActivationBody.tsx
+++ b/packages/app/components/auth/resendActivation/ResendActivationBody.tsx
@@ -8,33 +8,33 @@ import styles from './resendActivation.scss';
import messages from './ResendActivation.intl.json';
export default class ResendActivation extends BaseAuthBody {
- static displayName = 'ResendActivation';
- static panelId = 'resendActivation';
- static hasGoBack = true;
+ static displayName = 'ResendActivation';
+ static panelId = 'resendActivation';
+ static hasGoBack = true;
- autoFocusField = 'email';
+ autoFocusField = 'email';
- render() {
- return (
-
+ {this.renderErrors()}
-
+
-
+
-
+
-
+
-
- );
- }
+
-
-
-
+
+
+
- {this.renderErrors()}
+ render() {
+ return (
+
+ );
+ }
}
diff --git a/packages/app/components/auth/resendActivation/resendActivation.scss b/packages/app/components/auth/resendActivation/resendActivation.scss
index 69b43c3..f1ba029 100644
--- a/packages/app/components/auth/resendActivation/resendActivation.scss
+++ b/packages/app/components/auth/resendActivation/resendActivation.scss
@@ -1,8 +1,8 @@
@import '~app/components/ui/fonts.scss';
.description {
- font-family: $font-family-title;
- margin: 5px 0 19px;
- line-height: 1.4;
- font-size: 16px;
+ font-family: $font-family-title;
+ margin: 5px 0 19px;
+ line-height: 1.4;
+ font-size: 16px;
}
diff --git a/packages/app/components/contact/ContactForm.test.tsx b/packages/app/components/contact/ContactForm.test.tsx
index 99327b5..6fe4ebe 100644
--- a/packages/app/components/contact/ContactForm.test.tsx
+++ b/packages/app/components/contact/ContactForm.test.tsx
@@ -9,162 +9,143 @@ import { TestContextProvider } from 'app/shell';
import { ContactForm } from './ContactForm';
beforeEach(() => {
- sinon.stub(feedback, 'send').returns(Promise.resolve() as any);
+ sinon.stub(feedback, 'send').returns(Promise.resolve() as any);
});
afterEach(() => {
- (feedback.send as any).restore();
+ (feedback.send as any).restore();
});
describe('ContactForm', () => {
- it('should contain Form', () => {
- const user = {} as User;
+ it('should contain Form', () => {
+ const user = {} as User;
- render(
-
+ {this.renderErrors()}
-
- );
- }
+
-
+
+
-
+
-
- => {
- if (this.state.isLoading) {
- return Promise.resolve();
+ );
}
- this.setState({ isLoading: true });
+ renderForm() {
+ const { form } = this;
+ const { user } = this.props;
+ const { isLoading } = this.state;
- return feedback
- .send(this.form.serialize())
- .then(() =>
- this.setState({
- isSuccessfullySent: true,
- lastEmail: this.form.value('email'),
- }),
- )
- .catch((resp) => {
- if (resp.errors) {
- this.form.setErrors(resp.errors);
+ return (
+
+ );
+ }
+
+ renderSuccess() {
+ const { lastEmail: email } = this.state;
+ const { onClose } = this.props;
+
+ return (
+ => {
+ if (this.state.isLoading) {
+ return Promise.resolve();
}
- logger.warn('Error sending feedback', resp);
- })
- .finally(() => this.setState({ isLoading: false }));
- };
+ this.setState({ isLoading: true });
+
+ return feedback
+ .send(this.form.serialize())
+ .then(() =>
+ this.setState({
+ isSuccessfullySent: true,
+ lastEmail: this.form.value('email'),
+ }),
+ )
+ .catch((resp) => {
+ if (resp.errors) {
+ this.form.setErrors(resp.errors);
+
+ return;
+ }
+
+ logger.warn('Error sending feedback', resp);
+ })
+ .finally(() => this.setState({ isLoading: false }));
+ };
}
export default connect((state: RootState) => ({
- user: state.user,
+ user: state.user,
}))(ContactForm);
diff --git a/packages/app/components/contact/ContactLink.tsx b/packages/app/components/contact/ContactLink.tsx
index 651afe5..aeddb08 100644
--- a/packages/app/components/contact/ContactLink.tsx
+++ b/packages/app/components/contact/ContactLink.tsx
@@ -4,24 +4,24 @@ import { create as createPopup } from 'app/components/ui/popup/actions';
import ContactForm from './ContactForm';
type Props = React.AnchorHTMLAttributes & {
- createContactPopup: () => void;
+ createContactPopup: () => void;
};
function ContactLink({ createContactPopup, ...props }: Props) {
- return (
- {
- event.preventDefault();
+ return (
+ {
+ event.preventDefault();
- createContactPopup();
- }}
- {...props}
- />
- );
+ createContactPopup();
+ }}
+ {...props}
+ />
+ );
}
export default connect(null, {
- createContactPopup: () => createPopup({ Popup: ContactForm }),
+ createContactPopup: () => createPopup({ Popup: ContactForm }),
})(ContactLink);
diff --git a/packages/app/components/contact/contactForm.intl.json b/packages/app/components/contact/contactForm.intl.json
index 3dacabc..415e84b 100644
--- a/packages/app/components/contact/contactForm.intl.json
+++ b/packages/app/components/contact/contactForm.intl.json
@@ -1,19 +1,19 @@
{
- "title": "Feedback form",
- "subject": "Subject",
- "email": "E‑mail",
- "message": "Message",
- "send": "Send",
- "philosophicalThought": "Properly formulated question — half of the answer",
- "disclaimer": "Please formulate your feedback providing as much useful information, as possible to help us understand your problem and solve it",
- "whichQuestion": "What are you interested in?",
+ "title": "Feedback form",
+ "subject": "Subject",
+ "email": "E‑mail",
+ "message": "Message",
+ "send": "Send",
+ "philosophicalThought": "Properly formulated question — half of the answer",
+ "disclaimer": "Please formulate your feedback providing as much useful information, as possible to help us understand your problem and solve it",
+ "whichQuestion": "What are you interested in?",
- "cannotAccessMyAccount": "Can not access my account",
- "foundBugOnSite": "I found a bug on the site",
- "improvementsSuggestion": "I have a suggestion for improving the functional",
- "integrationQuestion": "Service integration question",
- "other": "Other",
+ "cannotAccessMyAccount": "Can not access my account",
+ "foundBugOnSite": "I found a bug on the site",
+ "improvementsSuggestion": "I have a suggestion for improving the functional",
+ "integrationQuestion": "Service integration question",
+ "other": "Other",
- "youMessageReceived": "Your message was received. We will respond to you shortly. The answer will come to your E‑mail:",
- "close": "Close"
+ "youMessageReceived": "Your message was received. We will respond to you shortly. The answer will come to your E‑mail:",
+ "close": "Close"
}
diff --git a/packages/app/components/contact/contactForm.scss b/packages/app/components/contact/contactForm.scss
index 26ad1f1..be89711 100644
--- a/packages/app/components/contact/contactForm.scss
+++ b/packages/app/components/contact/contactForm.scss
@@ -5,81 +5,81 @@
/* Form state */
.contactForm {
- composes: popupWrapper from '~app/components/ui/popup/popup.scss';
+ composes: popupWrapper from '~app/components/ui/popup/popup.scss';
- @include popupBounding(500px);
+ @include popupBounding(500px);
}
.philosophicalThought {
- font-family: $font-family-title;
- font-size: 19px;
- color: $green;
- text-align: center;
- margin-bottom: 5px;
+ font-family: $font-family-title;
+ font-size: 19px;
+ color: $green;
+ text-align: center;
+ margin-bottom: 5px;
}
.formDisclaimer {
- font-size: 12px;
- line-height: 14px;
- text-align: center;
- max-width: 400px;
- margin: 0 auto 10px;
+ font-size: 12px;
+ line-height: 14px;
+ text-align: center;
+ max-width: 400px;
+ margin: 0 auto 10px;
}
.pairInputRow {
- display: flex;
- margin-bottom: 10px;
+ display: flex;
+ margin-bottom: 10px;
}
.pairInput {
- width: 50%;
+ width: 50%;
- &:first-of-type {
- margin-right: $popupPadding;
- }
+ &:first-of-type {
+ margin-right: $popupPadding;
+ }
}
.formMargin {
- margin-bottom: 20px;
+ margin-bottom: 20px;
}
/* Success State */
.successState {
- composes: popupWrapper from '~app/components/ui/popup/popup.scss';
+ composes: popupWrapper from '~app/components/ui/popup/popup.scss';
- @include popupBounding(320px);
+ @include popupBounding(320px);
}
.successBody {
- composes: body from '~app/components/ui/popup/popup.scss';
+ composes: body from '~app/components/ui/popup/popup.scss';
- text-align: center;
+ text-align: center;
}
.successDescription {
- @extend .formDisclaimer;
+ @extend .formDisclaimer;
- margin-bottom: 15px;
+ margin-bottom: 15px;
}
.successIcon {
- composes: checkmark from '~app/components/ui/icons.scss';
+ composes: checkmark from '~app/components/ui/icons.scss';
- font-size: 90px;
- color: #aaa;
- margin-bottom: 20px;
- line-height: 71px;
+ font-size: 90px;
+ color: #aaa;
+ margin-bottom: 20px;
+ line-height: 71px;
}
.sentToEmail {
- font-family: $font-family-title;
- color: #444;
- font-size: 18px;
+ font-family: $font-family-title;
+ color: #444;
+ font-size: 18px;
}
/* Common */
.footer {
- margin-top: 0;
+ margin-top: 0;
}
diff --git a/packages/app/components/dev/apps/ApplicationsIndex.intl.json b/packages/app/components/dev/apps/ApplicationsIndex.intl.json
index 0aa4e50..683ca2c 100644
--- a/packages/app/components/dev/apps/ApplicationsIndex.intl.json
+++ b/packages/app/components/dev/apps/ApplicationsIndex.intl.json
@@ -1,26 +1,26 @@
{
- "accountsForDevelopers": "Ely.by Accounts for developers",
- "accountsAllowsYouYoUseOauth2": "Ely.by Accounts service provides users with a quick and easy-to-use way to login to your site, launcher or Minecraft server via OAuth2 authorization protocol. You can find more information about integration with Ely.by Accounts in {ourDocumentation}.",
- "ourDocumentation": "our documentation",
- "ifYouHaveAnyTroubles": "If you are experiencing difficulties, you can always use {feedback}. We'll surely help you.",
- "feedback": "feedback",
- "weDontKnowAnythingAboutYou": "We don't know anything about you yet.",
- "youMustAuthToBegin": "You have to authorize to start.",
- "authorization": "Authorization",
- "youDontHaveAnyApplication": "You don't have any app registered yet.",
- "shallWeStart": "Shall we start?",
- "addNew": "Add new",
- "yourApplications": "Your applications:",
- "countUsers": "{count, plural, =0 {No users} one {# user} other {# users}}",
- "ifYouSuspectingThatSecretHasBeenCompromised": "If you are suspecting that your Client Secret has been compromised, then you may want to reset it value. It'll cause recall of the all \"access\" and \"refresh\" tokens that have been issued. You can also recall all issued tokens without changing Client Secret.",
- "revokeAllTokens": "Revoke all tokens",
- "resetClientSecret": "Reset Client Secret",
- "delete": "Delete",
- "editDescription": "{icon} Edit description",
- "allRefreshTokensWillBecomeInvalid": "All \"refresh\" tokens will become invalid and after next authorization the user will get permissions prompt.",
- "appAndAllTokenWillBeDeleted": "Application and all associated tokens will be deleted.",
- "takeCareAccessTokensInvalidation": "Take care because \"access\" tokens won't be invalidated immediately.",
- "cancel": "Cancel",
- "continue": "Continue",
- "performing": "Performing…"
+ "accountsForDevelopers": "Ely.by Accounts for developers",
+ "accountsAllowsYouYoUseOauth2": "Ely.by Accounts service provides users with a quick and easy-to-use way to login to your site, launcher or Minecraft server via OAuth2 authorization protocol. You can find more information about integration with Ely.by Accounts in {ourDocumentation}.",
+ "ourDocumentation": "our documentation",
+ "ifYouHaveAnyTroubles": "If you are experiencing difficulties, you can always use {feedback}. We'll surely help you.",
+ "feedback": "feedback",
+ "weDontKnowAnythingAboutYou": "We don't know anything about you yet.",
+ "youMustAuthToBegin": "You have to authorize to start.",
+ "authorization": "Authorization",
+ "youDontHaveAnyApplication": "You don't have any app registered yet.",
+ "shallWeStart": "Shall we start?",
+ "addNew": "Add new",
+ "yourApplications": "Your applications:",
+ "countUsers": "{count, plural, =0 {No users} one {# user} other {# users}}",
+ "ifYouSuspectingThatSecretHasBeenCompromised": "If you are suspecting that your Client Secret has been compromised, then you may want to reset it value. It'll cause recall of the all \"access\" and \"refresh\" tokens that have been issued. You can also recall all issued tokens without changing Client Secret.",
+ "revokeAllTokens": "Revoke all tokens",
+ "resetClientSecret": "Reset Client Secret",
+ "delete": "Delete",
+ "editDescription": "{icon} Edit description",
+ "allRefreshTokensWillBecomeInvalid": "All \"refresh\" tokens will become invalid and after next authorization the user will get permissions prompt.",
+ "appAndAllTokenWillBeDeleted": "Application and all associated tokens will be deleted.",
+ "takeCareAccessTokensInvalidation": "Take care because \"access\" tokens won't be invalidated immediately.",
+ "cancel": "Cancel",
+ "continue": "Continue",
+ "performing": "Performing…"
}
diff --git a/packages/app/components/dev/apps/ApplicationsIndex.tsx b/packages/app/components/dev/apps/ApplicationsIndex.tsx
index d0b304a..2c84c6f 100644
--- a/packages/app/components/dev/apps/ApplicationsIndex.tsx
+++ b/packages/app/components/dev/apps/ApplicationsIndex.tsx
@@ -15,144 +15,133 @@ import toolsIcon from './icons/tools.svg';
import ApplicationsList from './list';
type Props = {
- clientId: string | null;
- resetClientId: () => void; // notify parent to remove clientId from current location.href
- displayForGuest: boolean;
- applications: Array;
- isLoading: boolean;
- deleteApp: (clientId: string) => Promise;
- resetApp: (clientId: string, resetClientSecret: boolean) => Promise;
+ clientId: string | null;
+ resetClientId: () => void; // notify parent to remove clientId from current location.href
+ displayForGuest: boolean;
+ applications: Array;
+ isLoading: boolean;
+ deleteApp: (clientId: string) => Promise;
+ resetApp: (clientId: string, resetClientSecret: boolean) => Promise;
};
export default class ApplicationsIndex extends React.Component {
- render() {
- return (
-
-
-
-
-
-
-
-
+ return (
+
-
-
-
+
- );
- }
-
- renderForm() {
- const { form } = this;
- const { user } = this.props;
- const { isLoading } = this.state;
-
- return (
-
+
-
+
+
+
+
- {isSuccessfullySent ? this.renderSuccess() : this.renderForm()}
-
+
+
+
-
-
-
- );
- }
-
- renderSuccess() {
- const { lastEmail: email } = this.state;
- const { onClose } = this.props;
-
- return (
-
-
- );
- }
-
- onSubmit = (): Promise
-
-
-
-
-
- {email}
-
-
-
-
+
+ );
+ }
+
+ onSubmit = (): Promise
+
+
+
+
+
+ {email}
+
+
+
+
-
+ );
}
- if (displayForGuest) {
- return
-
- {(pageTitle: string) => (
-
-
- )}
-
-
-
+ render() {
+ return (
+
-
- )}
-
-
-
-
-
-
-
+
- );
- }
-
- getContent() {
- const {
- displayForGuest,
- applications,
- isLoading,
- resetApp,
- deleteApp,
- clientId,
- resetClientId,
- } = this.props;
-
- if (applications.length > 0) {
- return (
-
+
+ {(pageTitle: string) => (
+
+
+ )}
+
+
+
- {this.getContent()}
-
+
+ )}
+
+
+
+
+
+
+
- 
+ return (
+ ;
+ type: 'apps:setAvailable';
+ payload: Array;
}
export function setAppsList(apps: Array): SetAvailableAction {
- return {
- type: 'apps:setAvailable',
- payload: apps,
- };
+ return {
+ type: 'apps:setAvailable',
+ payload: apps,
+ };
}
-export function getApp(
- state: { apps: Apps },
- clientId: string,
-): OauthAppResponse | null {
- return state.apps.available.find((app) => app.clientId === clientId) || null;
+export function getApp(state: { apps: Apps }, clientId: string): OauthAppResponse | null {
+ return state.apps.available.find((app) => app.clientId === clientId) || null;
}
export function fetchApp(clientId: string): ThunkAction> {
- return async (dispatch) => {
- const app = await oauth.getApp(clientId);
+ return async (dispatch) => {
+ const app = await oauth.getApp(clientId);
- dispatch(addApp(app));
- };
+ dispatch(addApp(app));
+ };
}
interface AddAppAction extends ReduxAction {
- type: 'apps:addApp';
- payload: OauthAppResponse;
+ type: 'apps:addApp';
+ payload: OauthAppResponse;
}
function addApp(app: OauthAppResponse): AddAppAction {
- return {
- type: 'apps:addApp',
- payload: app,
- };
+ return {
+ type: 'apps:addApp',
+ payload: app,
+ };
}
export function fetchAvailableApps() {
- return async (
- dispatch: Dispatch,
- getState: () => { user: User },
- ): Promise => {
- const { id } = getState().user;
+ return async (dispatch: Dispatch, getState: () => { user: User }): Promise => {
+ const { id } = getState().user;
- if (!id) {
- dispatch(setAppsList([]));
+ if (!id) {
+ dispatch(setAppsList([]));
- return;
- }
+ return;
+ }
- const apps = await oauth.getAppsByUser(id);
+ const apps = await oauth.getAppsByUser(id);
- dispatch(setAppsList(apps));
- };
+ dispatch(setAppsList(apps));
+ };
}
export function deleteApp(clientId: string) {
- return async (dispatch: Dispatch): Promise => {
- await oauth.delete(clientId);
+ return async (dispatch: Dispatch): Promise => {
+ await oauth.delete(clientId);
- dispatch(createDeleteAppAction(clientId));
- };
+ dispatch(createDeleteAppAction(clientId));
+ };
}
interface DeleteAppAction extends ReduxAction {
- type: 'apps:deleteApp';
- payload: string;
+ type: 'apps:deleteApp';
+ payload: string;
}
function createDeleteAppAction(clientId: string): DeleteAppAction {
- return {
- type: 'apps:deleteApp',
- payload: clientId,
- };
+ return {
+ type: 'apps:deleteApp',
+ payload: clientId,
+ };
}
-export function resetApp(
- clientId: string,
- resetSecret: boolean,
-): ThunkAction> {
- return async (dispatch) => {
- const { data: app } = await oauth.reset(clientId, resetSecret);
+export function resetApp(clientId: string, resetSecret: boolean): ThunkAction> {
+ return async (dispatch) => {
+ const { data: app } = await oauth.reset(clientId, resetSecret);
- if (resetSecret) {
- dispatch(addApp(app));
- }
- };
+ if (resetSecret) {
+ dispatch(addApp(app));
+ }
+ };
}
export type Action = SetAvailableAction | DeleteAppAction | AddAppAction;
diff --git a/packages/app/components/dev/apps/applicationForm/ApplicationForm.intl.json b/packages/app/components/dev/apps/applicationForm/ApplicationForm.intl.json
index 9789a98..776201a 100644
--- a/packages/app/components/dev/apps/applicationForm/ApplicationForm.intl.json
+++ b/packages/app/components/dev/apps/applicationForm/ApplicationForm.intl.json
@@ -1,20 +1,20 @@
{
- "creatingApplication": "Creating an application",
- "website": "Web site",
- "minecraftServer": "Minecraft server",
- "toDisplayRegistrationFormChooseType": "To display registration form for a new application choose necessary type.",
- "applicationName": "Application name:",
- "appDescriptionWillBeAlsoVisibleOnOauthPage": "Application's description will be displayed at the authorization page too. It isn't a required field. In authorization process the value may be overridden.",
- "description": "Description:",
- "websiteLinkWillBeUsedAsAdditionalId": "Site's link is optional, but it can be used as an additional identifier of the application.",
- "websiteLink": "Website link:",
- "redirectUriLimitsAllowableBaseAddress": "Redirection URI (redirectUri) determines a base address, that user will be allowed to be redirected to after authorization. In order to improve security it's better to use the whole path instead of just a domain name. For example: https://example.com/oauth/ely.",
- "redirectUri": "Redirect URI:",
- "createApplication": "Create application",
- "serverName": "Server name:",
- "ipAddressIsOptionButPreferable": "IP address is optional, but is very preferable. It might become handy in case of we suddenly decide to play on your server with the entire band (=",
- "serverIp": "Server IP:",
- "youCanAlsoSpecifyServerSite": "You also can specify either server's site URL or its community in a social network.",
- "updatingApplication": "Updating an application",
- "updateApplication": "Update application"
+ "creatingApplication": "Creating an application",
+ "website": "Web site",
+ "minecraftServer": "Minecraft server",
+ "toDisplayRegistrationFormChooseType": "To display registration form for a new application choose necessary type.",
+ "applicationName": "Application name:",
+ "appDescriptionWillBeAlsoVisibleOnOauthPage": "Application's description will be displayed at the authorization page too. It isn't a required field. In authorization process the value may be overridden.",
+ "description": "Description:",
+ "websiteLinkWillBeUsedAsAdditionalId": "Site's link is optional, but it can be used as an additional identifier of the application.",
+ "websiteLink": "Website link:",
+ "redirectUriLimitsAllowableBaseAddress": "Redirection URI (redirectUri) determines a base address, that user will be allowed to be redirected to after authorization. In order to improve security it's better to use the whole path instead of just a domain name. For example: https://example.com/oauth/ely.",
+ "redirectUri": "Redirect URI:",
+ "createApplication": "Create application",
+ "serverName": "Server name:",
+ "ipAddressIsOptionButPreferable": "IP address is optional, but is very preferable. It might become handy in case of we suddenly decide to play on your server with the entire band (=",
+ "serverIp": "Server IP:",
+ "youCanAlsoSpecifyServerSite": "You also can specify either server's site URL or its community in a social network.",
+ "updatingApplication": "Updating an application",
+ "updateApplication": "Update application"
}
diff --git a/packages/app/components/dev/apps/applicationForm/ApplicationForm.tsx b/packages/app/components/dev/apps/applicationForm/ApplicationForm.tsx
index 4b0938c..a594bec 100644
--- a/packages/app/components/dev/apps/applicationForm/ApplicationForm.tsx
+++ b/packages/app/components/dev/apps/applicationForm/ApplicationForm.tsx
@@ -7,10 +7,7 @@ import { ApplicationType } from 'app/components/dev/apps';
import { Form, FormModel, Button } from 'app/components/ui/form';
import { BackButton } from 'app/components/profile/ProfileForm';
import { COLOR_GREEN } from 'app/components/ui';
-import {
- TYPE_APPLICATION,
- TYPE_MINECRAFT_SERVER,
-} from 'app/components/dev/apps';
+import { TYPE_APPLICATION, TYPE_MINECRAFT_SERVER } from 'app/components/dev/apps';
import styles from 'app/components/profile/profileForm.scss';
import logger from 'app/services/logger';
import messages from './ApplicationForm.intl.json';
@@ -20,125 +17,116 @@ import WebsiteType from './WebsiteType';
import MinecraftServerType from './MinecraftServerType';
type TypeToForm = Record<
- ApplicationType,
- {
- label: MessageDescriptor;
- component: React.ComponentType;
- }
+ ApplicationType,
+ {
+ label: MessageDescriptor;
+ component: React.ComponentType;
+ }
>;
const typeToForm: TypeToForm = {
- [TYPE_APPLICATION]: {
- label: messages.website,
- component: WebsiteType,
- },
- [TYPE_MINECRAFT_SERVER]: {
- label: messages.minecraftServer,
- component: MinecraftServerType,
- },
+ [TYPE_APPLICATION]: {
+ label: messages.website,
+ component: WebsiteType,
+ },
+ [TYPE_MINECRAFT_SERVER]: {
+ label: messages.minecraftServer,
+ component: MinecraftServerType,
+ },
};
type TypeToLabel = Record;
-const typeToLabel: TypeToLabel = ((Object.keys(typeToForm) as unknown) as Array<
- ApplicationType
->).reduce((result, key) => {
- result[key] = typeToForm[key].label;
+const typeToLabel: TypeToLabel = ((Object.keys(typeToForm) as unknown) as Array).reduce(
+ (result, key) => {
+ result[key] = typeToForm[key].label;
- return result;
-}, {} as TypeToLabel);
+ return result;
+ },
+ {} as TypeToLabel,
+);
export default class ApplicationForm extends React.Component<{
- app: OauthAppResponse;
- form: FormModel;
- displayTypeSwitcher?: boolean;
- type: ApplicationType | null;
- setType: (type: ApplicationType) => void;
- onSubmit: (form: FormModel) => Promise;
+ app: OauthAppResponse;
+ form: FormModel;
+ displayTypeSwitcher?: boolean;
+ type: ApplicationType | null;
+ setType: (type: ApplicationType) => void;
+ onSubmit: (form: FormModel) => Promise;
}> {
- static defaultProps = {
- setType: () => {},
- };
+ static defaultProps = {
+ setType: () => {},
+ };
- render() {
- const { type, setType, form, displayTypeSwitcher, app } = this.props;
- const { component: FormComponent } = (type && typeToForm[type]) || {};
- const isUpdate = app.clientId !== '';
+ render() {
+ const { type, setType, form, displayTypeSwitcher, app } = this.props;
+ const { component: FormComponent } = (type && typeToForm[type]) || {};
+ const isUpdate = app.clientId !== '';
- return (
-
+
-
- );
+ );
}
function Guest() {
- return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
- 
-
+ );
}
diff --git a/packages/app/components/dev/apps/actions.ts b/packages/app/components/dev/apps/actions.ts
index 205950c..3bbc257 100644
--- a/packages/app/components/dev/apps/actions.ts
+++ b/packages/app/components/dev/apps/actions.ts
@@ -7,94 +7,85 @@ import { ThunkAction } from 'app/reducers';
import { Apps } from './reducer';
interface SetAvailableAction extends ReduxAction {
- type: 'apps:setAvailable';
- payload: Array
-
+ return (
+
-
-
-
-
+
+
- );
+
+
-
+
+
+
+