Clean up and fix lock more info

src/more-infos/more-info-lock.html

@@ -4,13 +4,16 @@
 <link rel='import' href='../../bower_components/paper-input/paper-input.html'>
 
 <dom-module id='more-info-lock'>
+  <style>
+    paper-input {
+      display: inline-block;
+    }
+  </style>
   <template>
-      <div class='layout horizontal'>
-        <paper-input label='code' value='{{enteredCode}}' pattern='[[codeFormat]]' type='password' hidden='[[!codeInputVisible]]' disabled='[[!codeInputEnabled]]'></paper-input>
-      </div>
-      <div class='layout horizontal'>
-	      <paper-button on-tap='handleUnlockTap' hidden='[[!codeInputVisible]]' disabled='[[!unlockButtonVisible]]'>Unlock</paper-button>
-	      <paper-button on-tap='handleLockTap' hidden='[[!codeInputVisible]]' disabled=[[!lockButtonVisible]]>Lock</paper-button>
-      </div>
+    <div hidden='[[!stateObj.attributes.codeFormat]]'>
+      <paper-input label='code' value='{{enteredCode}}' pattern='[[stateObj.attributes.codeFormat]]' type='password'></paper-input>
+      <paper-button on-tap='handleUnlockTap' hidden$='[[!isLocked]]'>Unlock</paper-button>
+      <paper-button on-tap='handleLockTap' hidden$=[[isLocked]]>Lock</paper-button>
+    </div>
   </template>
 </dom-module>

src/more-infos/more-info-lock.js

@@ -15,57 +15,23 @@ export default new Polymer({
       type: String,
       value: '',
     },
-    unlockButtonVisible: {
-      type: Boolean,
-      value: false,
-    },
-    lockButtonVisible: {
-      type: Boolean,
-      value: false,
-    },
-    codeInputVisible: {
-      type: Boolean,
-      value: false,
-    },
-    codeInputEnabled: {
-      type: Boolean,
-      value: false,
-    },
-    codeFormat: {
-      type: String,
-      value: '',
-    },
-    codeValid: {
-      type: Boolean,
-      computed: 'validateCode(enteredCode, codeFormat)',
-    },
   },
+
   handleUnlockTap() {
     this.callService('unlock', { code: this.enteredCode });
   },
+
   handleLockTap() {
     this.callService('lock', { code: this.enteredCode });
   },
-  validateCode(code, format) {
-    const re = new RegExp(format);
-    if (format === null) {
-      return true;
-    }
-    return re.test(code);
-  },
+
   stateObjChanged(newVal) {
     if (newVal) {
-      this.codeFormat = newVal.attributes.code_format;
-      this.codeInputVisible = this.codeFormat !== null;
-      this.codeInputEnabled = (
-        newVal.state === 'locked' ||
-	newVal.state === 'unlocked');
-      this.unlockButtonVisible = (
-	newVal.state === 'locked');
-      this.lockButtonVisible = newVal.state === 'unlocked';
+      this.isLocked = newVal.state === 'locked';
     }
     this.async(() => this.fire('iron-resize'), 500);
   },
+
   callService(service, data) {
     const serviceData = data || {};
     serviceData.entity_id = this.stateObj.entityId;