diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/admin_console/license_settings.jsx | 53 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_admin-console.scss | 19 | ||||
-rw-r--r-- | web/static/i18n/en.json | 2 |
3 files changed, 56 insertions, 18 deletions
diff --git a/web/react/components/admin_console/license_settings.jsx b/web/react/components/admin_console/license_settings.jsx index d4dfa13f2..9d2ec8030 100644 --- a/web/react/components/admin_console/license_settings.jsx +++ b/web/react/components/admin_console/license_settings.jsx @@ -27,6 +27,7 @@ class LicenseSettings extends React.Component { this.state = { fileSelected: false, + fileName: null, serverError: null }; } @@ -34,7 +35,7 @@ class LicenseSettings extends React.Component { handleChange() { const element = $(ReactDOM.findDOMNode(this.refs.fileInput)); if (element.prop('files').length > 0) { - this.setState({fileSelected: true}); + this.setState({fileSelected: true, fileName: element.prop('files')[0].name}); } } @@ -56,13 +57,13 @@ class LicenseSettings extends React.Component { () => { Utils.clearFileInput(element[0]); $('#upload-button').button('reset'); - this.setState({serverError: null}); + this.setState({fileSelected: false, fileName: null, serverError: null}); window.location.reload(true); }, (error) => { Utils.clearFileInput(element[0]); $('#upload-button').button('reset'); - this.setState({serverError: error.message}); + this.setState({fileSelected: false, fileName: null, serverError: error.message}); } ); } @@ -75,12 +76,12 @@ class LicenseSettings extends React.Component { Client.removeLicenseFile( () => { $('#remove-button').button('reset'); - this.setState({serverError: null}); + this.setState({fileSelected: false, fileName: null, serverError: null}); window.location.reload(true); }, (error) => { $('#remove-button').button('reset'); - this.setState({serverError: error.message}); + this.setState({fileSelected: false, fileName: null, serverError: error.message}); } ); } @@ -172,17 +173,36 @@ class LicenseSettings extends React.Component { /> ); + let fileName; + if (this.state.fileName) { + fileName = this.state.fileName; + } else { + fileName = ( + <FormattedMessage + id='admin.license.noFile' + defaultMessage='No file uploaded' + /> + ); + } + licenseKey = ( <div className='col-sm-8'> - <input - className='pull-left' - ref='fileInput' - type='file' - accept='.mattermost-license' - onChange={this.handleChange} - /> + <div className='file__upload'> + <button className='btn btn-default'> + <FormattedMessage + id='admin.license.choose' + defaultMessage='Choose File' + /> + </button> + <input + ref='fileInput' + type='file' + accept='.mattermost-license' + onChange={this.handleChange} + /> + </div> <button - className={btnClass + ' pull-left'} + className={btnClass} disabled={!this.state.fileSelected} onClick={this.handleSubmit} id='upload-button' @@ -193,11 +213,12 @@ class LicenseSettings extends React.Component { defaultMessage='Upload' /> </button> - <br/> - <br/> + <div className='help-text no-margin'> + {fileName} + </div> <br/> {serverError} - <p className='help-text'> + <p className='help-text no-margin'> <FormattedHTMLMessage id='admin.license.uploadDesc' defaultMessage='Upload a license key for Mattermost Enterprise Edition to upgrade this server. <a href="http://mattermost.com" target="_blank">Visit us online</a> to learn more about the benefits of Enterprise Edition or to purchase a key.' diff --git a/web/sass-files/sass/partials/_admin-console.scss b/web/sass-files/sass/partials/_admin-console.scss index f782da36b..76081710f 100644 --- a/web/sass-files/sass/partials/_admin-console.scss +++ b/web/sass-files/sass/partials/_admin-console.scss @@ -145,12 +145,27 @@ .form-group { margin-bottom: 25px; } + .file__upload { + position: relative; + margin: 0 10px 10px 0; + display: inline-block; + input { + position: absolute; + @include opacity(0); + width: 100%; + height: 100%; + z-index: 5; + top: 0; + left: 0; + } + } .help-text { + &.no-margin { + margin: 0; + } ul, ol { padding-left: 23px; } - } - .help-text { margin: 10px 0 0 15px; color: #777; .help-link { diff --git a/web/static/i18n/en.json b/web/static/i18n/en.json index 58a19ea1b..090b8be05 100644 --- a/web/static/i18n/en.json +++ b/web/static/i18n/en.json @@ -191,6 +191,8 @@ "admin.ldap.usernameAttrEx": "Ex \"sAMAccountName\"", "admin.ldap.usernameAttrTitle": "Username Attribute:", "admin.licence.keyMigration": "If you’re migrating servers you may need to remove your license key from this server in order to install it on a new server. To start, <a href=\"http://mattermost.com\" target=\"_blank\">disable all Enterprise Edition features on this server</a>. This will enable the ability to remove the license key and downgrade this server from Enterprise Edition to Team Edition.", + "admin.license.noFile": "No file uploaded", + "admin.license.chooseFile": "Choose File", "admin.license.edition": "Edition: ", "admin.license.enterpriseEdition": "Mattermost Enterprise Edition. Designed for enterprise-scale communication.", "admin.license.enterpriseType": "<div><p>This compiled release of Mattermost platform is provided under a <a href=\"http://mattermost.com\" target=\"_blank\">commercial license</a> from Mattermost, Inc. based on your subscription level and is subject to the <a href=\"{terms}\" target=\"_blank\">Terms of Service.</a></p><p>Your subscription details are as follows:</p>Name: {name}<br />Company or organization name: {company}<br/>Number of users: {users}<br/>License issued: {issued}<br/>Start date of license: {start}<br/>Expiry date of license: {expires}<br/>LDAP: {ldap}<br/></div>", |