From 4284b88f44caa9b7adb180a1e07bdd834f5b7ad6 Mon Sep 17 00:00:00 2001 From: haraldox Date: Tue, 13 Feb 2018 11:02:28 +0100 Subject: feat(App) Feature Added enterprise UI ##Account Dashboard: - CHANGE account type to 'Enterprise Account' (green badge) - REMOVE button 'Edit Account' if SSO login is used - ADD company name and contact information - REMOVE premium account plans section - REMOVE account deletion ##Settings Navigation - REMOVE available services if user not allowed to manage services ##Edit Service - REMOVE delete button if user not allowed to manage services - CHANGE disable team / custom URL if user not allowed to manage services ##Edit User - REMOVE account type ##User.js - ADD mock enterprise properties ##Input.js - FIX disabled passthrough --- .../settings/account/AccountDashboard.js | 86 +++++++++++++++------- .../settings/navigation/SettingsNavigation.js | 28 +++++-- .../settings/services/EditServiceForm.js | 2 +- src/components/settings/user/EditUserForm.js | 8 +- src/components/ui/Input.js | 1 + src/containers/settings/EditServiceScreen.js | 6 +- src/containers/settings/EditUserScreen.js | 1 + src/models/User.js | 21 +++++- src/styles/badge.scss | 6 ++ 9 files changed, 121 insertions(+), 38 deletions(-) diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index 4992f0913..e6ccdaac7 100644 --- a/src/components/settings/account/AccountDashboard.js +++ b/src/components/settings/account/AccountDashboard.js @@ -44,6 +44,10 @@ const messages = defineMessages({ id: 'settings.account.accountType.premium', defaultMessage: '!!!Premium Supporter Account', }, + accountTypeEnterprise: { + id: 'settings.account.accountType.enterprise', + defaultMessage: '!!!Enterprise Account', + }, accountEditButton: { id: 'settings.account.account.editButton', defaultMessage: '!!!Edit Account', @@ -167,17 +171,21 @@ export default class AccountDashboard extends Component { {user.organization && `${user.organization}, `} {user.email}
- {!user.isPremium && ( + {!user.isEnterprise && !user.isPremium && ( {intl.formatMessage(messages.accountTypeBasic)} )} {user.isPremium && ( {intl.formatMessage(messages.accountTypePremium)} )} + {user.isEnterprise && ( + {intl.formatMessage(messages.accountTypeEnterprise)} + )} - - {intl.formatMessage(messages.accountEditButton)} - - + {!user.isSSO && ( + + {intl.formatMessage(messages.accountEditButton)} + + )} {user.emailValidated} @@ -230,6 +238,33 @@ export default class AccountDashboard extends Component { ) )} + {user.isEnterprise && ( +
+
+

{user.company.name}

+

+ Technical contact:  + + {user.company.contact.technical} + +
+ General contact:  + + {user.company.contact.default} + +

+
+
+ )} + {user.isMiner && (
@@ -244,7 +279,7 @@ export default class AccountDashboard extends Component {
)} - {!user.isPremium && ( + {!user.isEnterprise && !user.isPremium && ( isLoadingPlans ? ( ) : ( @@ -259,28 +294,29 @@ export default class AccountDashboard extends Component { ) )} -
-
-

{intl.formatMessage(messages.headlineDangerZone)}

- {!isDeleteAccountSuccessful && ( -
-

{intl.formatMessage(messages.deleteInfo)}

-
- )} - {isDeleteAccountSuccessful && ( -

{intl.formatMessage(messages.deleteEmailSent)}

- )} + {!user.isEnterprise && ( +
+
+

{intl.formatMessage(messages.headlineDangerZone)}

+ {!isDeleteAccountSuccessful && ( +
+

{intl.formatMessage(messages.deleteInfo)}

+
+ )} + {isDeleteAccountSuccessful && ( +

{intl.formatMessage(messages.deleteEmailSent)}

+ )} +
-
+ )}
)} -
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js index 66539f324..620f09189 100644 --- a/src/components/settings/navigation/SettingsNavigation.js +++ b/src/components/settings/navigation/SettingsNavigation.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { defineMessages, intlShape } from 'react-intl'; +import { inject, observer } from 'mobx-react'; import Link from '../../ui/Link'; @@ -31,6 +32,7 @@ const messages = defineMessages({ }, }); +@inject('stores') @observer export default class SettingsNavigation extends Component { static propTypes = { serviceCount: PropTypes.number.isRequired, @@ -42,17 +44,20 @@ export default class SettingsNavigation extends Component { render() { const { serviceCount } = this.props; + const { data: user } = this.props.stores.user; const { intl } = this.context; return (
- - {intl.formatMessage(messages.availableServices)} - + {user.clientSettings && user.clientSettings.userCanManageServices && ( + + {intl.formatMessage(messages.availableServices)} + + )}
{/* Delete Button */} - {action === 'edit' && deleteButton} + {action === 'edit' && user.clientSettings.userCanManageServices && deleteButton} {/* Save Button */} {isSaving || isValidatingCustomUrl ? ( diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js index f36887fc2..1ac8be80f 100644 --- a/src/components/settings/user/EditUserForm.js +++ b/src/components/settings/user/EditUserForm.js @@ -46,6 +46,7 @@ export default class EditServiceForm extends Component { form: PropTypes.instanceOf(Form).isRequired, onSubmit: PropTypes.func.isRequired, isSaving: PropTypes.bool.isRequired, + isEnterprise: PropTypes.bool.isRequired, }; static defaultProps = { @@ -72,6 +73,7 @@ export default class EditServiceForm extends Component { // user, status, form, + isEnterprise, isSaving, } = this.props; const { intl } = this.context; @@ -105,8 +107,10 @@ export default class EditServiceForm extends Component {
- - {form.$('accountType').value === 'company' && ( + {!isEnterprise && ( + + )} + {!isEnterprise && form.$('accountType').value === 'company' && ( )}

{intl.formatMessage(messages.headlinePassword)}

diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js index 0bb9f23bf..69c95702b 100644 --- a/src/components/ui/Input.js +++ b/src/components/ui/Input.js @@ -97,6 +97,7 @@ export default class Input extends Component { onBlur={field.onBlur} onFocus={field.onFocus} ref={(element) => { this.inputElement = element; }} + disabled={field.disabled} /> {suffix && ( {suffix} diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js index 00e888cc4..9084b9889 100644 --- a/src/containers/settings/EditServiceScreen.js +++ b/src/containers/settings/EditServiceScreen.js @@ -77,7 +77,7 @@ export default class EditServiceScreen extends Component { } } - prepareForm(recipe, service) { + prepareForm(recipe, service, userCanManageService) { const { intl } = this.context; const config = { fields: { @@ -118,6 +118,7 @@ export default class EditServiceScreen extends Component { if (recipe.hasTeamId) { Object.assign(config.fields, { team: { + disabled: !userCanManageService, label: intl.formatMessage(messages.team), placeholder: intl.formatMessage(messages.team), value: service.team, @@ -129,6 +130,7 @@ export default class EditServiceScreen extends Component { if (recipe.hasCustomUrl) { Object.assign(config.fields, { customUrl: { + disabled: !userCanManageService, label: intl.formatMessage(messages.customUrl), placeholder: 'https://', value: service.customUrl, @@ -215,7 +217,7 @@ export default class EditServiceScreen extends Component { ); } - const form = this.prepareForm(recipe, service); + const form = this.prepareForm(recipe, service, user.data.clientSettings.userCanManageServices); return ( this.onSubmit(d)} /> diff --git a/src/models/User.js b/src/models/User.js index 2e5df4795..2eb48394f 100644 --- a/src/models/User.js +++ b/src/models/User.js @@ -1,4 +1,4 @@ -import { observable } from 'mobx'; +import { observable, computed } from 'mobx'; export default class User { id = null; @@ -15,6 +15,17 @@ export default class User { @observable donor = {}; @observable isDonor = false; @observable isMiner = false; + @observable isSSO = false; + @observable clientSettings = { + userCanManageServices: true, + }; + @observable company = { + name: 'Happle Apps', + contact: { + technical: 'technical@company.com', + default: 'default@company.com', + }, + }; constructor(data) { if (!data.id) { @@ -33,5 +44,13 @@ export default class User { this.isDonor = data.isDonor || this.isDonor; this.isSubscriptionOwner = data.isSubscriptionOwner || this.isSubscriptionOwner; this.isMiner = data.isMiner || this.isMiner; + this.isSSO = data.isSSO || this.isSSO; + this.clientSettings = data.clientSettings || this.clientSettings; + this.company = data.company || this.company; + } + + @computed get isEnterprise() { + // return false + return this.company.name !== undefined; } } diff --git a/src/styles/badge.scss b/src/styles/badge.scss index d7dfaf783..18a653118 100644 --- a/src/styles/badge.scss +++ b/src/styles/badge.scss @@ -12,4 +12,10 @@ background: $theme-brand-primary; color: #FFF; } + + &.badge--success { + background: $theme-brand-success; + color: #FFF; + } + } -- cgit v1.2.3-70-g09d2