add lock controls for users.

client/src/components/chat.vue

@@ -404,7 +404,7 @@
     }
 
     member(id: string) {
-      return this.$accessor.user.members[id]
+      return this.$accessor.user.members[id] || { id, displayname: this.$t('somebody') }
     }
 
     timestamp(time: Date) {

client/src/components/controls.vue

@@ -1,17 +1,17 @@
 <template>
   <ul>
-    <li v-if="!isTouch">
+    <li v-if="!isTouch && seesControl">
       <i
         :class="[
-          shakeKbd ? 'shake' : '',
-          hosted && !hosting ? 'disabled' : '',
-          !hosted && !hosting ? 'faded' : '',
+          !disabeld && shakeKbd ? 'shake' : '',
+          disabeld && !hosting ? 'disabled' : '',
+          !disabeld && !hosting ? 'faded' : '',
           'fas',
           'fa-keyboard',
           'request',
         ]"
         v-tooltip="{
-          content: !hosted || hosting ? (hosting ? $t('controls.release') : $t('controls.request')) : '',
+          content: !disabeld || hosting ? (hosting ? $t('controls.release') : $t('controls.request')) : '',
           placement: 'top',
           offset: 5,
           boundariesElement: 'body',
@@ -20,7 +20,7 @@
         @click.stop.prevent="toggleControl"
       />
     </li>
-    <li>
+    <li v-if="seesControl">
       <label
         class="switch"
         v-tooltip="{
@@ -240,7 +240,7 @@
 
   @Component({ name: 'neko-controls' })
   export default class extends Vue {
-    @Prop(Boolean) readonly shakeKbd = false
+    @Prop(Boolean) readonly shakeKbd!: boolean
 
     get isTouch() {
       return (
@@ -249,7 +249,15 @@
       )
     }
 
-    get hosted() {
+    get severLocked(): boolean {
+      return 'control' in this.$accessor.locked && this.$accessor.locked['control']
+    }
+
+    get seesControl(): boolean {
+      return !this.severLocked || this.$accessor.user.admin || this.hosting
+    }
+
+    get disabeld() {
       return this.$accessor.remote.hosted
     }
 

client/src/components/header.vue

@@ -7,16 +7,23 @@
     <ul class="menu">
       <li>
         <i
-          :class="[{ disabled: !admin }, { 'fa-lock-open': !locked }, { 'fa-lock': locked }, 'fas', 'lock']"
-          @click="toggleLock"
+          :class="[{ disabled: !admin }, { locked: isLocked('control') }, 'fas', 'fa-mouse']"
+          @click="toggleLock('control')"
           v-tooltip="{
-            content: admin
-              ? locked
-                ? $t('room.unlock')
-                : $t('room.lock')
-              : locked
-              ? $t('room.locked')
-              : $t('room.unlocked'),
+            content: lockedTooltip('control'),
+            placement: 'bottom',
+            offset: 5,
+            boundariesElement: 'body',
+            delay: { show: 300, hide: 100 },
+          }"
+        />
+      </li>
+      <li>
+        <i
+          :class="[{ disabled: !admin }, { locked: isLocked('login') }, locked ? 'fa-lock' : 'fa-lock-open', 'fas']"
+          @click="toggleLock('login')"
+          v-tooltip="{
+            content: lockedTooltip('login'),
             placement: 'bottom',
             offset: 5,
             boundariesElement: 'body',
@@ -90,7 +97,7 @@
           opacity: 0.8;
         }
 
-        .fa-lock {
+        .locked {
           color: rgba($color: $style-error, $alpha: 0.5);
         }
 
@@ -138,6 +145,7 @@
 
 <script lang="ts">
   import { Component, Ref, Watch, Vue } from 'vue-property-decorator'
+  import { AdminLockResource } from '~/neko/messages'
 
   @Component({ name: 'neko-settings' })
   export default class extends Vue {
@@ -167,14 +175,26 @@
       this.readTexts = this.texts
     }
 
-    toggleLock() {
-      if (this.admin) {
-        if (this.locked) {
-          this.$accessor.unlock()
-        } else {
-          this.$accessor.lock()
-        }
+    toggleLock(resource: AdminLockResource) {
+      if (!this.admin) return
+
+      if (this.isLocked(resource)) {
+        this.$accessor.unlock(resource)
+      } else {
+        this.$accessor.lock(resource)
       }
     }
+
+    isLocked(resource: AdminLockResource): boolean {
+      return resource in this.locked && this.locked[resource]
+    }
+
+    lockedTooltip(resource: AdminLockResource) {
+      if (this.admin) {
+        return this.$t(`locks.${resource}.` + (this.isLocked(resource) ? `unlock` : `lock`))
+      }
+
+      return this.$t(`locks.${resource}.` + (this.isLocked(resource) ? `locked` : `unlocked`))
+    }
   }
 </script>

client/src/components/video.vue

@@ -213,7 +213,7 @@
     @Ref('resolution') readonly _resolution!: any
     @Ref('clipboard') readonly _clipboard!: any
 
-    @Prop(Boolean) readonly hideControls = false
+    @Prop(Boolean) readonly hideControls!: boolean
 
     private keyboard = GuacamoleKeyboard()
     private observer = new ResizeObserver(this.onResise.bind(this))