Support for locks that need code to lock/unlock in frontend

More fixes, Code input is now available in more-info card for lock

Fix

If code not needed, do not show lock and unlock buttons

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

@@ -11,6 +11,7 @@
 <link rel='import' href='more-info-camera.html'>
 <link rel='import' href='more-info-updater.html'>
 <link rel='import' href='more-info-alarm_control_panel.html'>
+<link rel='import' href='more-info-lock.html'>
 
 <dom-module id='more-info-content'>
   <style>

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

@@ -12,6 +12,7 @@ require('./more-info-media_player');
 require('./more-info-camera');
 require('./more-info-updater');
 require('./more-info-alarm_control_panel');
+require('./more-info-lock');
 
 export default new Polymer({
   is: 'more-info-content',

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

@@ -0,0 +1,16 @@
+<link rel='import' href='../../bower_components/polymer/polymer.html'>
+
+<link rel='import' href='../../bower_components/paper-button/paper-button.html'>
+<link rel='import' href='../../bower_components/paper-input/paper-input.html'>
+
+<dom-module id='more-info-lock'>
+  <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>
+  </template>
+</dom-module>

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

@@ -0,0 +1,74 @@
+import hass from '../util/home-assistant-js-instance';
+
+import Polymer from '../polymer';
+
+const { serviceActions } = hass;
+
+export default new Polymer({
+  is: 'more-info-lock',
+  properties: {
+    stateObj: {
+      type: Object,
+      observer: 'stateObjChanged',
+    },
+    enteredCode: {
+      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.async(() => this.fire('iron-resize'), 500);
+  },
+  callService(service, data) {
+    const serviceData = data || {};
+    serviceData.entity_id = this.stateObj.entityId;
+    serviceActions.callService('lock', service, serviceData);
+  },
+});

src/util/state-more-info-type.js

@@ -1,6 +1,6 @@
 const DOMAINS_WITH_MORE_INFO = [
   'light', 'group', 'sun', 'configurator', 'thermostat', 'script',
-  'media_player', 'camera', 'updater', 'alarm_control_panel',
+  'media_player', 'camera', 'updater', 'alarm_control_panel', 'lock',
 ];
 
 export default function stateMoreInfoType(state) {