[PLAYER-53] rework identifier modal

src/plugins/Identifiers.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const OverlayPlugin = require('./util/OverlayPlugin');
+const {textInput, chipTag} = require('./util/components');
 
 const HEX = '0123456789abcdef';
 const DIGITS = '0123456789';
@@ -29,10 +30,6 @@ module.exports = class Identifiers extends OverlayPlugin {
         // Register plugin
         this.instance.identifiers = this;
 
-        // Initial state
-        this.invalidAndroidId = false;
-        this.invalidDeviceId = false;
-
         // Render components
         this.renderToolbarButton();
         this.renderWidget();
@@ -46,12 +43,13 @@ module.exports = class Identifiers extends OverlayPlugin {
 
             const deviceId = values[1].match(/(device_id:)(\w+)/);
             if (deviceId) {
-                this.deviceInput.value = deviceId[2];
+                this.deviceInput.setValue(deviceId[2]);
             }
             const androidId = values[1].match(/(android_id:)(\w+)/);
             if (androidId) {
-                this.androidInput.value = androidId[2];
+                this.androidInput.setValue(androidId[2]);
             }
+            this.container.classList.add('gm-identifiers-saved');
         });
     }
 
@@ -79,55 +77,88 @@ module.exports = class Identifiers extends OverlayPlugin {
      */
     renderWidget() {
         // Create elements
-        this.widget = document.createElement('div');
-        this.container = document.createElement('div');
-
-        // Generate title
-        const title = document.createElement('div');
-        title.className = 'gm-title';
-        title.innerHTML = this.i18n.IDENTIFIERS_TITLE || 'Identifiers';
-        this.container.appendChild(title);
+        const {modal, container} = this.createTemplateModal({
+            title: this.i18n.IDENTIFIERS_TITLE || 'Identifiers',
+            classes: 'gm-identifiers-plugin',
+            width: 378,
+            height: 422,
+        });
+        this.widget = modal;
+        this.container = container;
 
         // Generate input rows
         const inputs = document.createElement('div');
         inputs.className = 'gm-inputs';
 
         // Build field list
-        const android = this.generateInput(
-            'android',
-            'Android ID',
-            '',
-            this.generateRandomAndroidId.bind(this),
-            this.validateAndroidId.bind(this),
-        );
-        const device = this.generateInput(
-            'device',
-            'Device ID',
-            '(IMEI/MEID)',
-            this.generateRandomDeviceId.bind(this),
-            this.validateDeviceId.bind(this),
-        );
-        inputs.appendChild(android);
-        inputs.appendChild(device);
+        const androidInputDiv = document.createElement('div');
+        androidInputDiv.className = 'gm-identifier-android';
+        const labelAndroidId = document.createElement('label');
+        labelAndroidId.innerHTML = 'Android ID';
+        this.androidInput = textInput.createTextInput({
+            regexFilter: new RegExp(`^[${HEX}]{0,16}$`),
+            regexValidField: new RegExp(`^[${HEX}]{16}$`),
+            classes: 'gm-identifiers-android-input',
+            onChange: () => {
+                this.container.classList.remove('gm-identifiers-saved');
+                this.checkIDsValidity();
+            },
+        });
+        const generateAndroidIdBtn = document.createElement('div');
+        generateAndroidIdBtn.className = 'gm-icon-button gm-identifiers-android-generate';
+        generateAndroidIdBtn.onclick = () => {
+            this.container.classList.remove('gm-identifiers-saved');
+            this.generateRandomAndroidId();
+        };
+
+        this.generateRandomAndroidId.bind(this);
+        androidInputDiv.appendChild(this.androidInput.element);
+        androidInputDiv.appendChild(generateAndroidIdBtn);
+        inputs.appendChild(labelAndroidId);
+        inputs.appendChild(androidInputDiv);
+
+        const deviceInputDiv = document.createElement('div');
+        deviceInputDiv.className = 'gm-identifier-device';
+        const labelDeviceId = document.createElement('label');
+        labelDeviceId.innerHTML = 'Device ID (IMEI/MEID)';
+        this.deviceInput = textInput.createTextInput({
+            regexFilter: new RegExp(`^[${HEX}]{0,15}$`),
+            regexValidField: new RegExp(`^[${HEX}]{14,15}$`),
+            classes: 'gm-identifiers-device-input',
+            onChange: () => {
+                this.container.classList.remove('gm-identifiers-saved');
+                this.checkIDsValidity();
+            },
+        });
+        const generateDeviceIdBtn = document.createElement('div');
+        generateDeviceIdBtn.className = 'gm-icon-button gm-identifiers-device-generate';
+        generateDeviceIdBtn.onclick = () => {
+            this.container.classList.remove('gm-identifiers-saved');
+            this.generateRandomDeviceId();
+        };
+        deviceInputDiv.appendChild(this.deviceInput.element);
+        deviceInputDiv.appendChild(generateDeviceIdBtn);
+        inputs.appendChild(labelDeviceId);
+        inputs.appendChild(deviceInputDiv);
+
+        const actionsDiv = document.createElement('div');
+        actionsDiv.className = 'gm-actions';
+        const separator = document.createElement('div');
+        separator.className = 'gm-separator';
+
+        const appliedTag = chipTag.createChip();
+        actionsDiv.appendChild(appliedTag.element);
 
         this.submitBtn = document.createElement('button');
-        this.submitBtn.innerHTML = this.i18n.IDENTIFIERS_UPDATE || 'Update';
-        this.submitBtn.className = 'gm-action gm-identifiers-update';
-        inputs.appendChild(this.submitBtn);
+        this.submitBtn.innerHTML = this.i18n.IDENTIFIERS_APPLY || 'Apply';
+        this.submitBtn.className = 'gm-btn gm-identifiers-update';
+        actionsDiv.appendChild(this.submitBtn);
+        this.submitBtn.disabled = true;
         this.submitBtn.onclick = this.sendDataToInstance.bind(this);
 
         this.container.appendChild(inputs);
-
-        // Setup
-        this.widget.className = 'gm-overlay gm-identifiers-plugin gm-hidden';
-
-        // Add close button
-        const close = document.createElement('div');
-        close.className = 'gm-close-btn';
-        close.onclick = this.toggleWidget.bind(this);
-
-        this.widget.appendChild(close);
-        this.widget.appendChild(this.container);
+        this.container.appendChild(separator);
+        this.container.appendChild(actionsDiv);
 
         // Render into document
         this.instance.root.appendChild(this.widget);
@@ -141,25 +172,24 @@ module.exports = class Identifiers extends OverlayPlugin {
     sendDataToInstance(event) {
         event.preventDefault();
 
-        const androidId = this.androidInput.value;
-        const deviceId = this.deviceInput.value;
+        const androidId = this.androidInput.getValue();
+        const deviceId = this.deviceInput.getValue();
 
-        if (androidId && this.androidInput.checkValidity()) {
+        if (androidId) {
             const json = {
                 channel: 'framework',
                 messages: ['set parameter android_id:' + androidId],
             };
             this.instance.sendEvent(json);
         }
 
-        if (deviceId && this.deviceInput.checkValidity()) {
+        if (deviceId) {
             const json = {
                 channel: 'settings',
                 messages: ['set parameter device_id:' + deviceId],
             };
             this.instance.sendEvent(json);
         }
-        this.toggleWidget();
     }
 
     /**
@@ -172,17 +202,8 @@ module.exports = class Identifiers extends OverlayPlugin {
             event.preventDefault();
         }
 
-        this.androidInput.value = this.generateHash(16, HEX);
-        this.invalidAndroidId = false;
-        this.checkErrors();
-    }
-
-    /**
-     * Validate Android ID input value.
-     */
-    validateAndroidId() {
-        this.invalidAndroidId = !this.androidInput.checkValidity();
-        this.checkErrors();
+        this.androidInput.setValue(this.generateHash(16, HEX));
+        this.checkIDsValidity();
     }
 
     /**
@@ -195,74 +216,19 @@ module.exports = class Identifiers extends OverlayPlugin {
             event.preventDefault();
         }
 
-        this.deviceInput.value = this.generateHash(15, DIGITS);
-        this.invalidDeviceId = false;
-        this.checkErrors();
-    }
-
-    /**
-     * Validate Device ID input value.
-     */
-    validateDeviceId() {
-        this.invalidDeviceId = !this.deviceInput.checkValidity();
-        this.checkErrors();
+        this.deviceInput.setValue(this.generateHash(15, DIGITS));
+        this.checkIDsValidity();
     }
 
     /**
-     * Input form validation.
+     * Check if the IDs are valid.
      */
-    checkErrors() {
-        this.androidInput.classList[this.invalidAndroidId ? 'add' : 'remove']('gm-error');
-        this.deviceInput.classList[this.invalidDeviceId ? 'add' : 'remove']('gm-error');
-
-        this.submitBtn.disabled = this.invalidAndroidId || this.invalidDeviceId;
-    }
-
-    /**
-     * Create a form field element.
-     *
-     * @param  {string}      type             Input type.
-     * @param  {string}      label            Input label.
-     * @param  {string}      description      Input description.
-     * @param  {string}      generationMethod Input random value generation method.
-     * @param  {string}      validationMethod Input value validation method.
-     * @return {HTMLElement}                  The created input.
-     */
-    generateInput(type, label, description, generationMethod, validationMethod) {
-        const field = document.createElement('div');
-        const inputWrap = document.createElement('div');
-        const input = document.createElement('input');
-        const button = document.createElement('button');
-
-        inputWrap.className = 'gm-input-group';
-        input.className = 'gm-identifier-' + type + '-input';
-        input.type = 'text';
-        input.required = true;
-        this.instance.addListener(input, 'keyup', validationMethod);
-        inputWrap.appendChild(input);
-
-        // Some customization
-        if (type === 'device') {
-            input.maxLength = 15;
-            input.pattern = '[' + HEX + ']{14,15}';
-        } else if (type === 'android') {
-            input.maxLength = 16;
-            input.pattern = '[' + HEX + ']{16}';
+    checkIDsValidity() {
+        if (this.androidInput.checkValidity() && this.deviceInput.checkValidity()) {
+            this.submitBtn.disabled = false;
+        } else {
+            this.submitBtn.disabled = true;
         }
-
-        button.className = 'gm-identifier-' + type + '-generate';
-        button.innerHTML = this.i18n.IDENTIFIERS_GENERATE || 'Generate';
-        button.onclick = generationMethod;
-        inputWrap.appendChild(button);
-
-        field.className = 'gm-identifier-' + type;
-        field.innerHTML = '<label>' + label + '<i class="gm-description">' + description + '</i>' + '</label>';
-        field.appendChild(inputWrap);
-
-        this[type + 'Input'] = input;
-        this[type + 'Gen'] = button;
-
-        return field;
     }
 
     /**

src/plugins/util/components.js

@@ -125,7 +125,7 @@
 
         const setValue = (newValue, triggerOnChange = false) => {
             if (isNaN(newValue) || newValue < min || newValue > max) {
                 console.warn('`value` must be within the range defined by `min` and `max`.');
                 return;
             }
 
@@ -181,7 +181,8 @@
  */
 
 const textInput = (() => {
-    const createTextInput = ({onChange = null, value = '', regexFilter, appendText = '', classes=''}) => {
+    const createTextInput = ({
+        onChange = null, value = '', regexFilter, regexValidField, appendText = '', classes=''}) => {
         const inputDiv = document.createElement('div');
         inputDiv.className = classes;
         const inputDivContainer = document.createElement('div');
@@ -204,7 +205,7 @@
 
         const setValue = (newValue, triggerOnChange = false) => {
             if (regexFilter && !regexFilter.test(newValue)) {
                 console.warn('Invalid value:', newValue);
                 return;
             }
 
@@ -221,8 +222,16 @@
             input.readOnly = readOnly;
         };
 
+        const checkValidity = () => {
+            if (regexValidField && regexValidField.test(input.value)) {
+                return true;
+            }
+            return false;
+        };
+
         input.addEventListener('input', (event) => {
             const {value: v, selectionStart} = event.target;
+
             if (regexFilter && !regexFilter.test(v)) {
                 // delete the last character if it doesn't match the regex
                 const correctedValue = v.slice(0, selectionStart - 1) + v.slice(selectionStart);
@@ -240,6 +249,7 @@
             element: inputDiv,
             setValue,
             getValue,
+            checkValidity,
             setReadOnly,
         };
     };
@@ -361,7 +371,7 @@
                     && typeof item.value !== 'undefined' && item.element && item.element instanceof HTMLElement) {
                     optionDiv.appendChild(item.element);
                 } else {
                     console.warn('Invalid item. Need at least props element and value. Item', item);
                     return;
                 }
 

src/scss/base/_genymotion.scss

@@ -236,8 +236,12 @@
     border-radius: 4px;
 
     &:hover{
-        background: var(--gm-primary-color);
         background: color-mix(in srgb, var(--gm-primary-color), transparent 85%);
         color: var(--gm-primary-color)
     }
+    &:disabled{
+        color: color-mix(in srgb, var(--gm-text-color), transparent 70%);
+        background: none;
+        cursor: default;
+    }
 }

src/scss/components/_battery.scss

@@ -119,6 +119,9 @@
             .gm-charge-input {
                 width: 39px;
                 margin-top: -30px;
+                input {
+                   text-align: left;
+                }
             }
 
             .gm-charge-slider {

src/scss/components/_chipTag.scss

@@ -2,7 +2,7 @@
  .gm-tag{
     &-success{
         .gm-tag-container{
-            display: flex;
+            display: inline-flex;
             align-items: center;
             border-radius: 8px;
             padding: 2px 6px;