diff --git a/client/src/app/App.js b/client/src/app/App.js index 2f855f21..340340c4 100644 --- a/client/src/app/App.js +++ b/client/src/app/App.js @@ -3,6 +3,7 @@ import _ from 'lodash'; import classNames from 'classnames'; import { connect } from 'react-redux' import { browserHistory } from 'react-router'; +import DocumentTitle from 'react-document-title'; import ModalContainer from 'app-components/modal-container'; @@ -33,12 +34,14 @@ class App extends React.Component { render() { return ( -
-
- {React.cloneElement(this.props.children, {})} -
- -
+ +
+
+ {React.cloneElement(this.props.children, {})} +
+ +
+ ); } @@ -46,7 +49,8 @@ class App extends React.Component { let classes = { 'application': true, 'application_modal-opened': (this.props.modal.opened), - 'application_full-width': (this.props.config.layout === 'full-width' && !_.includes(this.props.location.pathname, '/admin')) + 'application_full-width': (this.props.config.layout === 'full-width' && !_.includes(this.props.location.pathname, '/admin')), + 'application_user-system': (this.props.config['user-system-enabled']) }; return classNames(classes); diff --git a/client/src/app/app.scss b/client/src/app/app.scss index d7914ff5..5a62ae04 100644 --- a/client/src/app/app.scss +++ b/client/src/app/app.scss @@ -25,10 +25,12 @@ } } + &--content { + position: relative; + } + &-footer { height: 40px; - //position: fixed; - //bottom: 0; &--powered { padding-top: 9px; @@ -37,14 +39,122 @@ } .main-home-page { - width: 1100px; margin: 0 auto; + + .widget { + background-color: $very-light-grey; + } } - .main-signup-page { + .signup-widget { + background-color: $very-light-grey; + } + + .dashboard { - .signup-widget__captcha { - margin-left: 290px; + .widget { + background-color: transparent; + } + + &__menu { + margin-left: -5px; + margin-top: -20px; + padding: 0; + background-color: $very-light-grey; + height: 100%; + position: absolute; + + .menu__list { + background-color: transparent; + height: 100%; + position: relative; + } + + .menu__header { + border-top-left-radius: 0; + border-top-right-radius: 0; + background-color: $secondary-blue; + text-align: right; + } + } + + &__content { + margin-top: -10px; + } + + @media screen and (max-width: 992px) { + + .dashboard__menu { + position: static; + } + } + } + + &__widget { + background-color: $very-light-grey; + } + + @media screen and (max-width: 467px) { + + .input { + width: 250px; + } + } + + &.application_user-system { + + .main-layout { + background-color: white; + } + + .main-home-page { + + &__login-widget { + position: absolute; + } + + &__portal-wrapper { + margin-left: 360px; + padding-left: 15px; + padding-right: 15px; + } + + @media screen and (max-width: 992px) { + .main-home-page { + + &__login-widget, + &__portal-wrapper { + float: none; + width: initial; + margin-left: 0; + position: static; + } + } + } + } + } + + @media screen and (max-width: 379px) { + + .main-home-page { + + .widget { + min-width: 313px !important; + width: initial !important; + } + } + } + } + + &_user-system { + @media screen and (max-width: 379px) { + + .main-home-page { + + .widget { + min-width: initial; + width: 283px; + } } } } diff --git a/client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.js b/client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.js index 8edc3bcc..81c4d6e8 100644 --- a/client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.js +++ b/client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.js @@ -1,5 +1,6 @@ import React from 'react'; import classNames from 'classnames'; +import {connect} from 'react-redux'; import CreateTicketForm from 'app/main/dashboard/dashboard-create-ticket/create-ticket-form'; import Widget from 'core-components/widget'; @@ -29,11 +30,16 @@ class DashboardCreateTicketPage extends React.Component { getClass() { let classes = { 'dashboard-create-ticket-page': true, - 'dashboard-create-ticket-page_wrapped': (this.props.location.pathname === '/create-ticket') + 'dashboard-create-ticket-page_wrapped': (this.props.location.pathname === '/create-ticket'), + 'col-md-10 col-md-offset-1': (!this.props.config['user-system-enabled']) }; return classNames(classes); } } -export default DashboardCreateTicketPage; +export default connect((store) => { + return { + config: store.config + }; +})(DashboardCreateTicketPage); diff --git a/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js b/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js index 0c8ef026..f2d8ad45 100644 --- a/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js +++ b/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js @@ -24,19 +24,19 @@ class DashboardEditProfilePage extends React.Component { render() { return (
-
-
Edit Email
+
+
{i18n('EDIT_EMAIL')}
- CHANGE EMAIL + {i18n('CHANGE_EMAIL')} {this.renderMessageEmail()} -
Edit password
+
{i18n('EDIT_PASSWORD')}
- - - - CHANGE PASSWORD + + + + {i18n('CHANGE_PASSWORD')} {this.renderMessagePass()}
diff --git a/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.scss b/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.scss index d42e3ec5..8e25de49 100644 --- a/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.scss +++ b/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.scss @@ -1,12 +1,15 @@ @import '../../../../scss/vars'; .edit-profile-page { + &__title { color: $dark-grey; font-size: 20px; text-align: left; + margin-bottom: 20px; } - &__message{ + + &__message { margin-top: 20px; margin-bottom: 20px; } diff --git a/client/src/app/main/dashboard/dashboard-layout.js b/client/src/app/main/dashboard/dashboard-layout.js index b1c5c25e..ae51fca4 100644 --- a/client/src/app/main/dashboard/dashboard-layout.js +++ b/client/src/app/main/dashboard/dashboard-layout.js @@ -1,5 +1,6 @@ import React from 'react'; import {connect} from 'react-redux'; +import classNames from 'classnames'; import DashboardMenu from 'app/main/dashboard/dashboard-menu'; import Widget from 'core-components/widget'; @@ -9,8 +10,10 @@ class DashboardLayout extends React.Component { render() { return (this.props.session.logged) ? (
-
-
+
+ +
+
{this.props.children} @@ -18,10 +21,32 @@ class DashboardLayout extends React.Component {
) : null; } + + getDashboardMenuClass() { + let classes = { + 'dashboard__menu': true, + 'col-md-3': (this.props.config.layout === 'boxed'), + 'col-md-2': (this.props.config.layout === 'full-width') + }; + + return classNames(classes); + } + + getDashboardContentClass() { + let classes = { + 'dashboard__content': true, + 'col-md-9': (this.props.config.layout === 'boxed'), + 'col-md-10': (this.props.config.layout === 'full-width'), + 'col-md-offset-2': (this.props.config.layout === 'full-width') + }; + + return classNames(classes); + } } export default connect((store) => { return { - session: store.session + session: store.session, + config: store.config }; })(DashboardLayout); diff --git a/client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.js b/client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.js index f7c434e8..4c0978ff 100644 --- a/client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.js +++ b/client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.js @@ -76,7 +76,8 @@ class DashboardListArticlesPage extends React.Component { getClass() { let classes = { 'dashboard-list-articles-page': true, - 'dashboard-list-articles-page_wrapped': (this.props.location.pathname == '/articles') + 'dashboard-list-articles-page_wrapped': (this.props.location.pathname == '/articles'), + 'col-md-10 col-md-offset-1': (!this.props.config['user-system-enabled']) }; return classNames(classes); @@ -124,6 +125,7 @@ class DashboardListArticlesPage extends React.Component { export default connect((store) => { return { + config: store.config, topics: store.articles.topics, loading: store.articles.loading }; diff --git a/client/src/app/main/dashboard/dashboard-menu.js b/client/src/app/main/dashboard/dashboard-menu.js index a44c470f..27f13466 100644 --- a/client/src/app/main/dashboard/dashboard-menu.js +++ b/client/src/app/main/dashboard/dashboard-menu.js @@ -24,7 +24,7 @@ class DashboardMenu extends React.Component { getProps() { return { - header: 'Dashboard', + header: i18n('DASHBOARD'), items: this.getMenuItems(), selectedIndex: this.getSelectedIndex(), onItemClick: this.onItemClick.bind(this), diff --git a/client/src/app/main/main-check-ticket-page.js b/client/src/app/main/main-check-ticket-page.js index e0a1df21..3e7c4d5c 100644 --- a/client/src/app/main/main-check-ticket-page.js +++ b/client/src/app/main/main-check-ticket-page.js @@ -1,5 +1,7 @@ import React from 'react'; -import { browserHistory } from 'react-router'; +import classNames from 'classnames'; +import {browserHistory} from 'react-router'; +import {connect} from 'react-redux'; import i18n from 'lib-app/i18n'; import API from 'lib-app/api-call'; @@ -25,7 +27,7 @@ class MainCheckTicketPage extends React.Component { render() { return ( -
+
@@ -47,6 +49,15 @@ class MainCheckTicketPage extends React.Component { ); } + getClass() { + let classes = { + 'main-check-ticket-page': true, + 'col-md-10 col-md-offset-1': (!this.props.config['user-system-enabled']) + }; + + return classNames(classes); + } + getFormProps() { return { className: 'main-check-ticket-page__form', @@ -92,4 +103,8 @@ class MainCheckTicketPage extends React.Component { } } -export default MainCheckTicketPage; \ No newline at end of file +export default connect((store) => { + return { + config: store.config + }; +})(MainCheckTicketPage); diff --git a/client/src/app/main/main-home/main-home-page-login-widget.scss b/client/src/app/main/main-home/main-home-page-login-widget.scss index 117fc2e2..f9de5447 100644 --- a/client/src/app/main/main-home/main-home-page-login-widget.scss +++ b/client/src/app/main/main-home/main-home-page-login-widget.scss @@ -17,8 +17,4 @@ &__message { margin-top: 18px; } - - &_password { - width: 324px; - } } \ No newline at end of file diff --git a/client/src/app/main/main-home/main-home-page.js b/client/src/app/main/main-home/main-home-page.js index 92840276..5bc6d323 100644 --- a/client/src/app/main/main-home/main-home-page.js +++ b/client/src/app/main/main-home/main-home-page.js @@ -1,5 +1,6 @@ import React from 'react'; -import {connect} from 'react-redux' +import {connect} from 'react-redux'; +import classNames from 'classnames'; import i18n from 'lib-app/i18n'; @@ -14,7 +15,7 @@ class MainHomePage extends React.Component {
{this.renderMessage()} {(this.props.config['user-system-enabled']) ? this.renderLoginWidget() : null} -
+
@@ -34,7 +35,7 @@ class MainHomePage extends React.Component { renderLoginWidget() { return ( -
+
); @@ -55,6 +56,16 @@ class MainHomePage extends React.Component { ); } + + getPortalClass() { + let classes = { + 'main-home-page__portal-wrapper': true, + 'col-md-8': (this.props.config['user-system-enabled'] && this.props.config['layout'] === 'boxed'), + 'col-md-10 col-md-offset-1' : (!this.props.config['user-system-enabled']) + }; + + return classNames(classes); + } } export default connect((store) => { diff --git a/client/src/app/main/main-layout-header.js b/client/src/app/main/main-layout-header.js index 5f575136..014afa5e 100644 --- a/client/src/app/main/main-layout-header.js +++ b/client/src/app/main/main-layout-header.js @@ -1,5 +1,5 @@ import React from 'react'; -import { connect } from 'react-redux' +import {connect} from 'react-redux'; import i18n from 'lib-app/i18n'; import ConfigActions from 'actions/config-actions'; @@ -32,7 +32,7 @@ class MainLayoutHeader extends React.Component { result = (
- {(this.props.config['registration'] === true) ? : null} + {(this.props.config['registration']) ? : null}
); } diff --git a/client/src/app/main/main-signup/main-signup-page.js b/client/src/app/main/main-signup/main-signup-page.js index e5baab65..293bdae7 100644 --- a/client/src/app/main/main-signup/main-signup-page.js +++ b/client/src/app/main/main-signup/main-signup-page.js @@ -4,7 +4,6 @@ import _ from 'lodash'; import i18n from 'lib-app/i18n'; import API from 'lib-app/api-call'; -import SessionStore from 'lib-app/session-store'; import Captcha from 'app/main/captcha'; import SubmitButton from 'core-components/submit-button'; @@ -12,7 +11,7 @@ import Message from 'core-components/message'; import Form from 'core-components/form'; import FormField from 'core-components/form-field'; import Widget from 'core-components/widget'; - +import Header from 'core-components/header'; class MainSignUpPageWidget extends React.Component { @@ -28,7 +27,8 @@ class MainSignUpPageWidget extends React.Component { render() { return (
- + +
diff --git a/client/src/app/main/main-signup/main-signup-page.scss b/client/src/app/main/main-signup/main-signup-page.scss index b3e0824d..866d62f3 100644 --- a/client/src/app/main/main-signup/main-signup-page.scss +++ b/client/src/app/main/main-signup/main-signup-page.scss @@ -15,7 +15,7 @@ } &__captcha { - margin: 10px 84px 20px; + margin: 10px auto 20px; height: 78px; width: 304px; } diff --git a/client/src/core-components/widget.scss b/client/src/core-components/widget.scss index a7a14c95..0b6cba69 100644 --- a/client/src/core-components/widget.scss +++ b/client/src/core-components/widget.scss @@ -5,7 +5,6 @@ border-radius: 4px; text-align: center; padding: 20px; - min-width: 324px; min-height: 361px; &--title { @@ -14,4 +13,16 @@ font-size: 17px; margin-bottom: 20px; } +} + +@media screen and (min-width: 379px) { + .widget { + min-width: 324px; + } +} +@media screen and (max-width: 409px) { + .widget { + min-width: 313px; + margin-left: -11px; + } } \ No newline at end of file diff --git a/client/src/data/fixtures/system-fixtures.js b/client/src/data/fixtures/system-fixtures.js index f2745afc..b71b7219 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/client/src/data/fixtures/system-fixtures.js @@ -11,8 +11,8 @@ module.exports = [ 'reCaptchaKey': '6LfM5CYTAAAAAGLz6ctpf-hchX2_l0Ge-Bn-n8wS', 'reCaptchaPrivate': 'LALA', 'url': 'http://www.opensupports.com/support', - 'title': 'OpenSupports Support Center', - 'layout': 'full-width', + 'title': 'Support Center', + 'layout': 'boxed', 'time-zone': 3, 'no-reply-email': 'shitr@post.com', 'smtp-host': 'localhost', @@ -38,8 +38,8 @@ module.exports = [ status: 'success', data: { 'language': 'en', - 'title': '', - 'layout': 'full-width', + 'title': 'Support Center', + 'layout': 'boxed', 'reCaptchaKey': '6LfM5CYTAAAAAGLz6ctpf-hchX2_l0Ge-Bn-n8wS', 'maintenance-mode': false, 'departments': [ diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index 5f44005d..739c770f 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -12,6 +12,7 @@ export default { 'FORGOT_PASSWORD': 'Forgot your password?', 'RECOVER_PASSWORD': 'Recover Password', 'RECOVER_SENT': 'An email with recover instructions has been sent.', + 'OLD_PASSWORD': 'Old password', 'NEW_PASSWORD': 'New password', 'REPEAT_NEW_PASSWORD': 'Repeat new password', 'BACK_LOGIN_FORM': 'Back to login form', @@ -82,6 +83,10 @@ export default { 'UN_BAN': 'Disable ban', 'BAN_NEW_EMAIL': 'Ban new email', 'BAN_EMAIL': 'Ban email', + 'EDIT_EMAIL': 'Edit email', + 'EDIT_PASSWORD': 'Edit password', + 'CHANGE_EMAIL': 'Change email', + 'CHANGE_PASSWORD': 'Change password', 'NAME': 'Name', 'SIGNUP_DATE': 'Sign up date', 'SEARCH_USERS': 'Search users...', @@ -243,6 +248,8 @@ export default { 'REGISTRATION_DISABLED': 'Registration has been disabled', 'REGISTRATION_ENABLED': 'Registration has been enabled', 'ADD_API_KEY_DESCRIPTION': 'Insert the name and a registration api key be generated.', + 'SIGN_UP_VIEW_DESCRIPTION': 'Here you can create an account for our support center. It is required for send tickets and see documentation.', + 'EDIT_PROFILE_VIEW_DESCRIPTION': 'Here you can edit your user by changing your email or your password.', //ERRORS 'EMAIL_OR_PASSWORD': 'Email or password invalid', diff --git a/client/src/lib-app/session-store.js b/client/src/lib-app/session-store.js index 6eaa5783..0deb8c60 100644 --- a/client/src/lib-app/session-store.js +++ b/client/src/lib-app/session-store.js @@ -58,6 +58,10 @@ class SessionStore { this.setItem('departments', JSON.stringify(configs.departments)); this.setItem('allowedLanguages', JSON.stringify(configs.allowedLanguages)); this.setItem('supportedLanguages', JSON.stringify(configs.supportedLanguages)); + this.setItem('layout', configs.layout); + this.setItem('title', configs.title); + this.setItem('registration', configs.registration); + this.setItem('user-system-enabled', configs['user-system-enabled']); } getConfigs() { @@ -66,7 +70,11 @@ class SessionStore { reCaptchaKey: this.getItem('reCaptchaKey'), departments: this.getDepartments(), allowedLanguages: JSON.parse(this.getItem('allowedLanguages')), - supportedLanguages: JSON.parse(this.getItem('supportedLanguages')) + supportedLanguages: JSON.parse(this.getItem('supportedLanguages')), + layout: this.getItem('layout'), + registration: this.getItem('registration'), + title: this.getItem('title'), + ['user-system-enabled']: this.getItem('user-system-enabled') }; } diff --git a/client/src/scss/_vars.scss b/client/src/scss/_vars.scss index 61188e1a..8e9f97f3 100644 --- a/client/src/scss/_vars.scss +++ b/client/src/scss/_vars.scss @@ -43,7 +43,7 @@ $font-size--xl: 32px; } &::-webkit-scrollbar-track { - backgroundr: transparent; + background: transparent; } &:hover {