Merge pull request #2400 from mattermost/license-upload-ui

Update license upload UI

utils/license.go

@@ -22,15 +22,14 @@ var IsLicensed bool = false
 var License *model.License = &model.License{}
 var ClientLicense map[string]string = make(map[string]string)
 
-// test public key
 var publicKey []byte = []byte(`-----BEGIN PUBLIC KEY-----
-MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA3/k3Al9q1Xe+xngQ/yGn
+MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAyZmShlU8Z8HdG0IWSZ8r
-0suaJopea3Cpf6NjIHdO8sYTwLlxqt0Mdb+qBR9LbCjZfcNmqc5mZONvsyCEoN/5
+tSyzyxrXkJjsFUf0Ke7bm/TLtIggRdqOcUF3XEWqQk5RGD5vuq7Rlg1zZqMEBk8N
-VoLdlv1m9ao2BSAWphUxE2CPdUWdLOsDbQWliSc5//UhiYeR+67Xxon0Hg0LKXF6
+EZeRhkxyaZW8pLjxwuBUOnXfJew31+gsTNdKZzRjrvPumKr3EtkleuoxNdoatu4E
-PumRIWQenRHJWqlUQZ147e7/1v9ySVRZksKpvlmMDzgq+kCH/uyM1uVP3z7YXhlN
+HrKmR/4Yi71EqAvkhk7ZjQFuF0osSWJMEEGGCSUYQnTEqUzcZSh1BhVpkIkeu8Kk
-K7vSSQYbt4cghvWQxDZFwpLlsChoY+mmzClgq+Yv6FLhj4/lk94twdOZau/AeZFJ
+1wCtptODixvEujgqVe+SrE3UlZjBmPjC/CL+3cYmufpSNgcEJm2mwsdaXp2OPpfn
-NxpC+5KFhU+xSeeklNqwCgnlOyZ7qSTxmdJHb+60SwuYnnGIYzLJhY4LYDr4J+KR
+a0v85XL6i9ote2P+fLZ3wX9EoioHzgdgB7arOxY50QRJO7OyCqpKFKv6lRWTXuSt
-1wIDAQAB
+hwIDAQAB
 -----END PUBLIC KEY-----`)
 
 func LoadLicense(licenseBytes []byte) {

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
+                    <div className='file__upload'>
-                        className='pull-left'
+                        <button className='btn btn-default'>
-                        ref='fileInput'
+                            <FormattedMessage
-                        type='file'
+                                id='admin.license.choose'
-                        accept='.mattermost-license'
+                                defaultMessage='Choose File'
-                        onChange={this.handleChange}
+                            />
-                    />
+                        </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/>
+                    <div className='help-text no-margin'>
-                    <br/>
+                        {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.'

web/sass-files/sass/partials/_admin-console.scss

@@ -145,12 +145,27 @@
             .form-group {
                 margin-bottom: 25px;
             }
-            .help-text {
+            .file__upload {
-                ul, ol {
+                position: relative;
-                    padding-left: 23px;
+                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;
+                }
                 margin: 10px 0 0 15px;
                 color: #777;
                 .help-link {

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>",