Initial commit
This commit is contained in:
zhongjin
@@ -0,0 +1,11 @@
|
||||
const Backbone = require('backbone');
|
||||
|
||||
/**
|
||||
* Header view model to handle state for dashboard header view.
|
||||
*/
|
||||
|
||||
module.exports = Backbone.Model.extend({
|
||||
breadcrumbTitle: () => 'Configuration',
|
||||
|
||||
isBreadcrumbDropdownEnabled: () => false
|
||||
});
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
const _ = require('underscore');
|
||||
const Backbone = require('backbone');
|
||||
const CoreView = require('backbone/core-view');
|
||||
const PagesSubheader = require('dashboard/components/pages-subheader/pages-subheader');
|
||||
const ProfileFormView = require('dashboard/views/profile/profile-form/profile-form-view');
|
||||
const template = require('./profile-content.tpl');
|
||||
|
||||
const checkAndBuildOpts = require('builder/helpers/required-opts');
|
||||
|
||||
const REQUIRED_OPTS = [
|
||||
'userModel',
|
||||
'configModel',
|
||||
'flashMessageModel',
|
||||
'modals'
|
||||
];
|
||||
|
||||
module.exports = CoreView.extend({
|
||||
initialize: function (options) {
|
||||
checkAndBuildOpts(options, REQUIRED_OPTS, this);
|
||||
|
||||
this._initModels();
|
||||
this._initBinds();
|
||||
},
|
||||
|
||||
_initBinds: function () {
|
||||
this.model.on('change:isLoading', this.render, this);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.clearSubViews();
|
||||
this.$el.html(template());
|
||||
|
||||
this._initViews();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_initModels: function () {
|
||||
this.model = new Backbone.Model();
|
||||
},
|
||||
|
||||
_initViews: function () {
|
||||
const pagesSubheader = new PagesSubheader({
|
||||
userModel: this._userModel,
|
||||
configModel: this._configModel
|
||||
});
|
||||
this.$('.js-SideMenu').append(pagesSubheader.render().el);
|
||||
this.addView(pagesSubheader);
|
||||
|
||||
const profileFormView = new ProfileFormView({
|
||||
configModel: this._configModel,
|
||||
userModel: this._userModel,
|
||||
renderModel: this.model,
|
||||
modals: this._modals,
|
||||
setLoading: this._setLoading.bind(this),
|
||||
onSaved: this._showSuccess.bind(this),
|
||||
onError: this._showErrors.bind(this)
|
||||
});
|
||||
this.$('.js-ProfileContent').append(profileFormView.render().el);
|
||||
this.addView(profileFormView);
|
||||
},
|
||||
|
||||
_setLoading: function (message) {
|
||||
this._flashMessageModel.hide();
|
||||
|
||||
this.model.set({
|
||||
isLoading: !!message,
|
||||
loadingText: message
|
||||
});
|
||||
},
|
||||
|
||||
_setFlashMessage: function (res, message, type) {
|
||||
this._setLoading('');
|
||||
|
||||
const jsonData = res && res.responseJSON || {};
|
||||
const errors = jsonData.errors;
|
||||
let flashMessage = jsonData.message;
|
||||
|
||||
if (errors) {
|
||||
this.model.set({ errors });
|
||||
}
|
||||
|
||||
if (!flashMessage) {
|
||||
flashMessage = message;
|
||||
}
|
||||
|
||||
this._flashMessageModel.show(flashMessage, type);
|
||||
},
|
||||
|
||||
_showSuccess: function (message, response, request) {
|
||||
this._setFlashMessage(response, 'Your changes have been saved correctly.', 'success');
|
||||
},
|
||||
|
||||
_showErrors: function (message, response, request) {
|
||||
const responseJSON = message && message.responseJSON;
|
||||
let errors = responseJSON && responseJSON.message;
|
||||
|
||||
if (responseJSON && responseJSON.errors) {
|
||||
errors = `${_.values(responseJSON.errors).join('. ')}.`;
|
||||
}
|
||||
|
||||
this._setFlashMessage(response, errors || 'Could not save profile, please try again.', 'error');
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
<div class="CDB-Text FormAccount-Section u-inner">
|
||||
<div class="SideMenu CDB-Text CDB-Size-medium js-SideMenu"></div>
|
||||
|
||||
<div class="FormAccount-Content">
|
||||
<div class="FormAccount-title">
|
||||
<p class="FormAccount-titleText"><%= _t('profile.views.content.title') %></p>
|
||||
</div>
|
||||
|
||||
<span class="FormAccount-separator"></span>
|
||||
|
||||
<div class="js-ProfileContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,217 @@
|
||||
const $ = require('jquery');
|
||||
const _ = require('underscore');
|
||||
const Backbone = require('backbone');
|
||||
const CoreView = require('backbone/core-view');
|
||||
const randomQuote = require('builder/components/loading/random-quote');
|
||||
const AvatarSelector = require('dashboard/components/avatar-selector/avatar-selector-view');
|
||||
const PasswordValidatedForm = require('dashboard/helpers/password-validated-form');
|
||||
const template = require('./profile-form.tpl');
|
||||
const loadingTemplate = require('builder/components/loading/loading.tpl');
|
||||
const utils = require('builder/helpers/utils');
|
||||
const checkAndBuildOpts = require('builder/helpers/required-opts');
|
||||
|
||||
const REQUIRED_OPTS = [
|
||||
'configModel',
|
||||
'renderModel',
|
||||
'userModel',
|
||||
'modals',
|
||||
'setLoading',
|
||||
'onSaved',
|
||||
'onError'
|
||||
];
|
||||
|
||||
// These lists must match the options of the correspondant Hubspot enumeration properties. They can be retrieved from:
|
||||
// https://api.hubapi.com/properties/v1/contacts/properties/named/industry?hapikey=KEY
|
||||
const INDUSTRIES = [
|
||||
'Apparel & Fashion', 'Banking & Financial Services', 'Business Services', 'Consulting Services',
|
||||
'Consumer & Retail', 'Education & Research', 'Energy & Mining', 'Government', 'Health & Medical', 'Insurance',
|
||||
'Manufacturing', 'Marketing & Advertising', 'Natural Resources & Environment', 'Non-Profit', 'Other', 'Real Estate',
|
||||
'Software & Technology', 'Transportation & Logistics', 'Utilities & Communications'
|
||||
];
|
||||
|
||||
const COMPANY_EMPLOYEES_RANGES = ['1-5', '5-25', '25-50', '50-100', '100-500', '500-1000', '1000+'];
|
||||
|
||||
const USE_CASES = [
|
||||
'Catastrophe Analytics', 'Data Monetization', 'Fraud Detection', 'Geomarketing',
|
||||
'Healthcare and Social Factor Analysis', 'Indoor Mapping', 'Investment Analysis',
|
||||
'Logistics and Supply Chain Management', 'Mobility Planning', 'Network Deployment and Optimization', 'Risk Analysis',
|
||||
'Site Planning', 'Smart Cities and IOT', 'Territory Management', 'Other - My use case is not listed'
|
||||
];
|
||||
|
||||
module.exports = CoreView.extend({
|
||||
events: {
|
||||
'click .js-save': '_onClickSave',
|
||||
'submit form': '_onClickSave'
|
||||
},
|
||||
|
||||
initialize: function (options) {
|
||||
checkAndBuildOpts(options, REQUIRED_OPTS, this);
|
||||
|
||||
this._initBinds();
|
||||
},
|
||||
|
||||
_initBinds: function () {
|
||||
this.listenTo(this._renderModel, 'change:isLoading', this.render);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.clearSubViews();
|
||||
|
||||
if (this._renderModel.get('isLoading')) {
|
||||
this.$el.html(
|
||||
loadingTemplate({
|
||||
title: this._renderModel.get('loadingText'),
|
||||
descHTML: randomQuote()
|
||||
})
|
||||
);
|
||||
} else {
|
||||
this.$el.html(template({
|
||||
errors: this._renderModel.get('errors') || {},
|
||||
formAction: `${this._configModel.prefixUrl()}/profile`,
|
||||
accountHost: this._configModel.get('account_host'),
|
||||
user: {
|
||||
username: this._userModel.get('username'),
|
||||
name: this._userModel.get('name'),
|
||||
last_name: this._userModel.get('last_name'),
|
||||
email: this._userModel.get('email'),
|
||||
company: this._userModel.get('company'),
|
||||
job_role: this._userModel.get('job_role'),
|
||||
industry: this._userModel.get('industry'),
|
||||
company_employees: this._userModel.get('company_employees'),
|
||||
use_case: this._userModel.get('use_case'),
|
||||
phone: this._userModel.get('phone'),
|
||||
website: this._userModel.get('website'),
|
||||
location: this._userModel.get('location'),
|
||||
description: this._userModel.get('description'),
|
||||
twitter_username: this._userModel.get('twitter_username'),
|
||||
disqus_shortname: this._userModel.get('disqus_shortname'),
|
||||
available_for_hire: this._userModel.get('available_for_hire')
|
||||
},
|
||||
isViewer: this._userModel.isViewer(),
|
||||
isInsideOrg: this._userModel.isInsideOrg(),
|
||||
hasOrganization: this._userModel.isInsideOrg(),
|
||||
organizationName: this._userModel.organization ? this._userModel.organization.get('name') : '',
|
||||
orgDisplayEmail: this._getOrgAdminEmail(),
|
||||
canChangeEmail: this._userModel.get('can_change_email'),
|
||||
industries: INDUSTRIES,
|
||||
company_employees_ranges: COMPANY_EMPLOYEES_RANGES,
|
||||
use_cases: USE_CASES
|
||||
}));
|
||||
|
||||
this._initViews();
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_getOrgAdminEmail: function () {
|
||||
if (this._userModel.isInsideOrg()) {
|
||||
return this._userModel.organization.display_email;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
_initViews: function () {
|
||||
const avatarSelector = new AvatarSelector({
|
||||
el: this.$('.js-avatarSelector'),
|
||||
configModel: this._configModel,
|
||||
renderModel: new Backbone.Model({
|
||||
inputName: 'user[avatar_url]',
|
||||
name: this._userModel.get('name') || this._userModel.get('username'),
|
||||
avatar_url: this._userModel.get('avatar_url'),
|
||||
id: this._userModel.get('id'),
|
||||
username: this._userModel.get('username')
|
||||
}),
|
||||
acceptedExtensions: this._configModel.avatar_valid_extensions
|
||||
});
|
||||
avatarSelector.render();
|
||||
this.addView(avatarSelector);
|
||||
},
|
||||
|
||||
_getUserFields: function () {
|
||||
return {
|
||||
description: this._userModel.get('description') || '',
|
||||
avatar_url: this._userModel.get('avatar_url') || '',
|
||||
name: this._userModel.get('name') || '',
|
||||
last_name: this._userModel.get('last_name') || '',
|
||||
email: this._userModel.get('email') || '',
|
||||
company: this._userModel.get('company') || '',
|
||||
phone: this._userModel.get('phone') || '',
|
||||
job_role: this._userModel.get('job_role') || '',
|
||||
industry: this._userModel.get('industry') || '',
|
||||
company_employees: this._userModel.get('company_employees') || '',
|
||||
use_case: this._userModel.get('use_case') || '',
|
||||
website: this._userModel.get('website') || '',
|
||||
twitter_username: this._userModel.get('twitter_username') || '',
|
||||
disqus_shortname: this._userModel.get('disqus_shortname') || '',
|
||||
available_for_hire: this._userModel.get('available_for_hire') || false,
|
||||
location: this._userModel.get('location') || ''
|
||||
};
|
||||
},
|
||||
|
||||
_getDestinationValues: function () {
|
||||
return {
|
||||
description: utils.escapeHTML(this.$('#user_description').val()),
|
||||
avatar_url: utils.escapeHTML(this.$('#user_avatar_url').val()),
|
||||
name: utils.escapeHTML(this.$('#user_name').val()),
|
||||
last_name: utils.escapeHTML(this.$('#user_last_name').val()),
|
||||
email: utils.escapeHTML(this.$('#user_email').val()),
|
||||
company: utils.escapeHTML(this.$('#user_company').val()),
|
||||
phone: utils.escapeHTML(this.$('#user_phone').val()),
|
||||
job_role: utils.escapeHTML(this.$('#user_job_role').val()),
|
||||
industry: utils.escapeHTML(this.$('#user_industry').val()),
|
||||
company_employees: utils.escapeHTML(this.$('#user_company_employees').val()),
|
||||
use_case: utils.escapeHTML(this.$('#user_use_case').val()),
|
||||
website: utils.escapeHTML(this.$('#user_website').val()),
|
||||
twitter_username: utils.escapeHTML(this.$('#user_twitter_username').val()),
|
||||
disqus_shortname: utils.escapeHTML(this.$('#user_disqus_shortname').val()),
|
||||
available_for_hire: this.$('#available_for_hire').is(':checked'),
|
||||
location: utils.escapeHTML(this.$('#user_location').val())
|
||||
};
|
||||
},
|
||||
|
||||
_onClickSave: function (event) {
|
||||
this.killEvent(event);
|
||||
|
||||
const origin = this._getUserFields();
|
||||
const destination = this._getDestinationValues();
|
||||
const destinationKeys = _.keys(destination);
|
||||
|
||||
const differenceKeys = _.filter(destinationKeys, function (key) {
|
||||
return origin[key] !== destination[key];
|
||||
});
|
||||
|
||||
const user = _.pick(destination, differenceKeys);
|
||||
|
||||
this._userModel.set({ user: user });
|
||||
|
||||
if (!this._userModel.get('needs_password_confirmation')) {
|
||||
return this._saveUser(user);
|
||||
}
|
||||
|
||||
PasswordValidatedForm.showPasswordModal({
|
||||
modalService: this._modals,
|
||||
onPasswordTyped: (password) => this._saveUser(user, password)
|
||||
});
|
||||
},
|
||||
|
||||
_saveUser: function (userAttributes, password) {
|
||||
$('html, body').scrollTop(0);
|
||||
|
||||
this._setLoading('Saving changes');
|
||||
|
||||
this._userModel.save(userAttributes, {
|
||||
wait: true,
|
||||
url: this._configModel.prefixUrl() + '/api/v3/me',
|
||||
success: this._onSaved,
|
||||
error: this._onError,
|
||||
attrs: {
|
||||
user: {
|
||||
password_confirmation: password,
|
||||
...userAttributes
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,249 @@
|
||||
<p class="CDB-Text CDB-Size-medium u-vspace-m">
|
||||
* 标有星号的字段在您的公开个人资料上可见,
|
||||
<% if (isInsideOrg) { %>
|
||||
<a href="//<%= organizationName %>.<%= accountHost %>/u/<%= user.username %>/me" target="_blank">
|
||||
<%= organizationName %>.<%= accountHost %>/u/<%= user.username %>/me
|
||||
</a>
|
||||
<% } else { %>
|
||||
<a href="//<%= user.username %>.<%= accountHost %>/me" target="_blank">
|
||||
<%= user.username %>.<%= accountHost %>/me
|
||||
</a>
|
||||
<% } %>
|
||||
</p>
|
||||
|
||||
<form accept-charset="UTF-8" action="<%- formAction %>" method="post">
|
||||
<div class="FormAccount-row FormAccount-rowHorizontal">
|
||||
<div class="CDB-Text js-avatarSelector FormAccount-avatarSelector"></div>
|
||||
|
||||
<div class="FormAccount-userType">
|
||||
<div class="FormAccount-rowLabel">
|
||||
<label class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor"><%= _t('profile.views.form.user_type') %></label>
|
||||
</div>
|
||||
<div class="FormAccount-rowData FormAccount-userRole">
|
||||
<% if (isViewer) { %>
|
||||
<div>
|
||||
<span class="UserRoleIndicator Viewer CDB-Text CDB-Size-small is-semibold u-altTextColor"><%= _t('profile.views.form.viewer') %></span>
|
||||
<% if (hasOrganization) { %>
|
||||
<a href="mailto:<%= orgDisplayEmail %>"><%= _t('profile.views.form.become_builder') %></a>
|
||||
<% } %>
|
||||
</div>
|
||||
<p class="CDB-Text CDB-Size-small u-altTextColor u-tSpace"><%= _t('profile.views.form.read_only') %></p>
|
||||
<% } else { %>
|
||||
<span class="UserRoleIndicator Builder CDB-Text CDB-Size-small is-semibold u-altTextColor"><%= _t('profile.views.form.builder') %></span>
|
||||
<p class="CDB-Text CDB-Size-small u-altTextColor u-tSpace"><%= _t('profile.views.form.write_access') %></p>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="FormAccount-row">
|
||||
<div class="FormAccount-rowLabel">
|
||||
<label class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor"><%= _t('profile.views.form.name') %>*</label>
|
||||
</div>
|
||||
<div class="FormAccount-rowData">
|
||||
<input class="CDB-InputText CDB-Text FormAccount-input FormAccount-input--small u-rspace-s" id="user_name" name="user[name]" placeholder="<%= _t('profile.views.form.first_name') %>" size="30" type="text" value="<%= user.name %>">
|
||||
<input class="CDB-InputText CDB-Text FormAccount-input FormAccount-input--small" id="user_last_name" name="user[last_name]" placeholder="<%= _t('profile.views.form.last_name') %>" size="30" type="text" value="<%= user.last_name %>">
|
||||
|
||||
<div class="FormAccount-rowInfo FormAccount-rowInfo--marginLeft">
|
||||
<p class="CDB-Text CDB-Size-small u-altTextColor"><%= _t('profile.views.form.info_public_name') %></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="FormAccount-row">
|
||||
<div class="FormAccount-rowLabel">
|
||||
<label class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor"><%= _t('profile.views.form.email') %></label>
|
||||
</div>
|
||||
|
||||
<div class="FormAccount-rowData">
|
||||
<input class="CDB-InputText CDB-Text FormAccount-input FormAccount-input--med<% if (errors['email']) { %> has-error<% } %><% if (!canChangeEmail) { %> is-disabled<% } %>" id="user_email" name="user[email]" size="30" type="text" value="<%= user.email %>" <% if (!canChangeEmail) { %>readonly="readonly"<% } %>>
|
||||
|
||||
<% if (isInsideOrg) { %>
|
||||
<div class="FormAccount-rowInfo FormAccount-rowInfo--marginLeft">
|
||||
<p class="CDB-Text CDB-Size-small u-altTextColor"><%= _t('profile.views.form.your_url') %>: <%= organizationName %>.<%= accountHost %>/u/<%= user.username %></p>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
<div class="FormAccount-rowInfo">
|
||||
<% if (errors['email']) { %>
|
||||
<p class="CDB-Text CDB-Size-small FormAccount-rowInfoText FormAccount-rowInfoText--error u-tSpace"><%= _t('account.views.form.errors.email_not_valid') %></p>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="FormAccount-row">
|
||||
<div class="FormAccount-rowLabel">
|
||||
<label class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor"><%= _t('profile.views.form.company_name') %></label>
|
||||
</div>
|
||||
<div class="FormAccount-rowData">
|
||||
<input class="CDB-InputText CDB-Text FormAccount-input FormAccount-input--med" id="user_company" name="user[company]" size="30" type="text" value="<%= user.company %>">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="FormAccount-row">
|
||||
<div class="FormAccount-rowLabel">
|
||||
<label class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor"><%= _t('profile.views.form.role') %></label>
|
||||
</div>
|
||||
<div class="FormAccount-rowData">
|
||||
<div class="FormAccount-rowData">
|
||||
<input class="CDB-InputText CDB-Text FormAccount-input FormAccount-input--med" id="user_job_role" name="user[job_role]" size="30" type="text" value="<%= user.job_role %>">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="FormAccount-row">
|
||||
<div class="FormAccount-rowLabel">
|
||||
<label class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor"><%= _t('profile.views.form.industry') %></label>
|
||||
</div>
|
||||
<div class="FormAccount-rowData">
|
||||
<select class="CDB-SelectFake CDB-Text FormAccount-input FormAccount-input--med is-cursor" id="user_industry" name="user[industry]">
|
||||
<option value="">Select one</option>
|
||||
|
||||
<% industries.forEach(function (industry) { %>
|
||||
<option<% if (industry === user.industry) { %> selected<% } %>><%= industry %></option>
|
||||
<% }); %>
|
||||
|
||||
<% if (!_.contains(industries, user.industry) && !_.isEmpty(user.industry)) { %>
|
||||
<option selected><%= user.industry %></option>
|
||||
<% } %>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="FormAccount-row">
|
||||
<div class="FormAccount-rowLabel">
|
||||
<label class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor"><%= _t('profile.views.form.company_employees') %></label>
|
||||
</div>
|
||||
<div class="FormAccount-rowData">
|
||||
<select class="CDB-SelectFake CDB-Text FormAccount-input FormAccount-input--med is-cursor" id="user_company_employees" name="user[company_employees]">
|
||||
<option value="">Select one</option>
|
||||
|
||||
<% company_employees_ranges.forEach(function (range) { %>
|
||||
<option<% if (range === user.company_employees) { %> selected<% } %>><%= range %></option>
|
||||
<% }); %>
|
||||
|
||||
<% if (!_.contains(company_employees_ranges, user.company_employees) && !_.isEmpty(user.company_employees)) { %>
|
||||
<option selected><%= user.company_employees %></option>
|
||||
<% } %>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="FormAccount-row">
|
||||
<div class="FormAccount-rowLabel">
|
||||
<label class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor"><%= _t('profile.views.form.use_case') %></label>
|
||||
</div>
|
||||
<div class="FormAccount-rowData">
|
||||
<select class="CDB-SelectFake CDB-Text FormAccount-input FormAccount-input--med is-cursor" id="user_use_case" name="user[use_case]">
|
||||
<option value="">Select one</option>
|
||||
|
||||
<% use_cases.forEach(function (use_case) { %>
|
||||
<option<% if (use_case === user.use_case) { %> selected<% } %>><%= use_case %></option>
|
||||
<% }); %>
|
||||
|
||||
<% if (!_.contains(use_cases, user.use_case) && !_.isEmpty(user.use_case)) { %>
|
||||
<option selected><%= user.use_case %></option>
|
||||
<% } %>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="FormAccount-row">
|
||||
<div class="FormAccount-rowLabel">
|
||||
<label class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor"><%= _t('profile.views.form.phone') %></label>
|
||||
</div>
|
||||
<div class="FormAccount-rowData">
|
||||
<input class="CDB-InputText CDB-Text FormAccount-input FormAccount-input--med" id="user_phone" name="user[phone]" size="30" type="text" value="<%= user.phone %>">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="FormAccount-row">
|
||||
<div class="FormAccount-rowLabel">
|
||||
<label class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor"><%= _t('profile.views.form.website') %>*</label>
|
||||
</div>
|
||||
<div class="FormAccount-rowData">
|
||||
<input class="CDB-InputText CDB-Text FormAccount-input FormAccount-input--med" id="user_website" name="user[website]" size="30" type="text" value="<%= user.website %>">
|
||||
</div>
|
||||
<div class="FormAccount-rowInfo">
|
||||
<p class="CDB-Text CDB-Size-small u-altTextColor"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="FormAccount-row">
|
||||
<div class="FormAccount-rowLabel">
|
||||
<label class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor"><%= _t('profile.views.form.location') %>*</label>
|
||||
</div>
|
||||
<div class="FormAccount-rowData">
|
||||
<input class="CDB-InputText CDB-Text FormAccount-input FormAccount-input--med" id="user_location" name="user[location]" size="30" type="text" value="<%= user.location %>">
|
||||
</div>
|
||||
<div class="FormAccount-rowInfo">
|
||||
<p class="CDB-Text CDB-Size-small u-altTextColor"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="FormAccount-row">
|
||||
<div class="FormAccount-rowLabel">
|
||||
<label class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor"><%= _t('profile.views.form.description') %>*</label>
|
||||
</div>
|
||||
<div class="FormAccount-rowData">
|
||||
<textarea class="CDB-Textarea CDB-Text FormAccount-textarea FormAccount-input FormAccount-input--totalwidth" cols="40" id="user_description" name="user[description]" rows="20"><%= user.description %></textarea>
|
||||
</div>
|
||||
<div class="FormAccount-rowInfo">
|
||||
<p class="CDB-Text CDB-Size-small u-altTextColor"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="FormAccount-row">
|
||||
<div class="FormAccount-rowLabel">
|
||||
<label class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor"><%= _t('profile.views.form.twitter') %>*</label>
|
||||
</div>
|
||||
<div class="FormAccount-rowData">
|
||||
<input class="CDB-InputText CDB-Text FormAccount-input FormAccount-input--med" id="user_twitter_username" name="user[twitter_username]" size="30" type="text" value="<%= user.twitter_username %>">
|
||||
</div>
|
||||
<div class="FormAccount-rowInfo">
|
||||
<p class="CDB-Text CDB-Size-small u-altTextColor"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="FormAccount-row">
|
||||
<div class="FormAccount-rowLabel">
|
||||
<label class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor"><%= _t('profile.views.form.disqus') %>*</label>
|
||||
</div>
|
||||
<div class="FormAccount-rowData">
|
||||
<input class="CDB-InputText CDB-Text FormAccount-input FormAccount-input--med" id="user_disqus_shortname" name="user[disqus_shortname]" placeholder="<%= _t('profile.views.form.disqus_placeholder') %>" size="30" type="text" value="<%= user.disqus_shortname %>">
|
||||
<div class="FormAccount-rowInfo FormAccount-rowInfo--marginLeft">
|
||||
<p class="CDB-Text CDB-Size-small u-altTextColor"><%= _t('profile.views.form.disqus_notified') %></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="FormAccount-title">
|
||||
<p class="FormAccount-titleText"><%= _t('profile.views.form.jobs') %></p>
|
||||
</div>
|
||||
|
||||
<span class="FormAccount-separator"></span>
|
||||
|
||||
<div class="FormAccount-row">
|
||||
<div class="FormAccount-rowLabel">
|
||||
<label class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor"><%= _t('profile.views.form.available_for_hire') %></label>
|
||||
</div>
|
||||
<div class="FormAccount-rowData">
|
||||
<div class="Toggler">
|
||||
<input name="user[available_for_hire]" type="hidden" value="0">
|
||||
<input id="available_for_hire" name="user[available_for_hire]" type="checkbox" value="<%= user.available_for_hire %>" <% if (user.available_for_hire) { %>checked="checked"<% } %>>
|
||||
<label for="available_for_hire"></label>
|
||||
</div>
|
||||
<div class="FormAccount-rowInfo u-lSpace--xl">
|
||||
<p class="CDB-Text CDB-Size-small u-altTextColor"><%= _t('profile.views.form.show_banner') %></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="FormAccount-footer">
|
||||
<p class="FormAccount-footerText"></p>
|
||||
<button type="submit" class="CDB-Button CDB-Button--primary">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small u-upperCase"><%= _t('profile.views.form.save') %></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -0,0 +1,77 @@
|
||||
const CoreView = require('backbone/core-view');
|
||||
const ProfileContentView = require('dashboard/views/profile/profile-content/profile-content-view');
|
||||
const UpgradeMessage = require('dashboard/components/upgrade-message-view.js');
|
||||
const VendorScriptsView = require('dashboard/components/vendor-scripts/vendor-scripts-view');
|
||||
const TrialNotificationView = require('dashboard/components/trial-notification/trial-notification-view');
|
||||
const FlashMessageModel = require('dashboard/data/flash-message-model');
|
||||
const FlashMessageView = require('dashboard/components/flash-message/flash-message-view');
|
||||
const checkAndBuildOpts = require('builder/helpers/required-opts');
|
||||
var moment = require('moment');
|
||||
|
||||
const TRIAL_ACCOUNTS = ['PERSONAL30', 'Individual'];
|
||||
|
||||
const REQUIRED_OPTS = [
|
||||
'userModel',
|
||||
'configModel',
|
||||
'assetsVersion',
|
||||
'organizationNotifications',
|
||||
'modals'
|
||||
];
|
||||
|
||||
module.exports = CoreView.extend({
|
||||
initialize: function (options) {
|
||||
checkAndBuildOpts(options, REQUIRED_OPTS, this);
|
||||
|
||||
this._initViews();
|
||||
},
|
||||
|
||||
_initViews: function () {
|
||||
const $app = this.$('#app');
|
||||
const accountType = this._userModel.get('account_type');
|
||||
|
||||
if (TRIAL_ACCOUNTS.indexOf(accountType) > -1) {
|
||||
const trialEndsAt = moment(this._userModel.get('trial_ends_at'));
|
||||
const now = moment();
|
||||
const trialNotificationView = new TrialNotificationView({
|
||||
userModel: this._userModel,
|
||||
upgradeUrl: this._configModel.get('upgrade_url'),
|
||||
trialDays: Math.round(trialEndsAt.diff(now, 'days', true))
|
||||
});
|
||||
$app.append(trialNotificationView.render().el);
|
||||
this.addView(trialNotificationView);
|
||||
}
|
||||
|
||||
const flashMessageModel = new FlashMessageModel();
|
||||
const flashMessageView = new FlashMessageView({
|
||||
model: flashMessageModel
|
||||
});
|
||||
$app.prepend(flashMessageView.render().el);
|
||||
this.addView(flashMessageView);
|
||||
|
||||
const profileContentView = new ProfileContentView({
|
||||
configModel: this._configModel,
|
||||
userModel: this._userModel,
|
||||
flashMessageModel: flashMessageModel,
|
||||
modals: this._modals
|
||||
});
|
||||
$app.append(profileContentView.render().el);
|
||||
this.addView(profileContentView);
|
||||
|
||||
const upgradeMessage = new UpgradeMessage({
|
||||
userModel: this._userModel,
|
||||
configModel: this._configModel
|
||||
});
|
||||
$app.prepend(upgradeMessage.render().el);
|
||||
this.addView(upgradeMessage);
|
||||
|
||||
const vendorScriptsView = new VendorScriptsView({
|
||||
configModel: this._configModel,
|
||||
assetsVersion: this._assetsVersion,
|
||||
userModel: this._userModel
|
||||
});
|
||||
this.$el.append(vendorScriptsView.render().el);
|
||||
this.addView(vendorScriptsView);
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user