Differential D1894 Diff 5248 src/resources/vue/Meet/SessionSecurityOptions.vue

Changeset View

Standalone View

src/resources/vue/Meet/SessionSecurityOptions.vue

This file was added.

				<template>
				<div v-if="config">
				<div id="security-options-dialog" class="modal" tabindex="-1" role="dialog">
				<div class="modal-dialog" role="document">
				<div class="modal-content">
				<div class="modal-header">
				<h5 class="modal-title">Security options</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">×</span>
				</button>
				</div>
				<div class="modal-body">
				<form id="security-options-password">
				<div id="password-input" class="input-group input-group-activable">
				<span class="input-group-text label">Password:</span>
				<span v-if="config.password" id="password-input-text" class="input-group-text">{{ config.password }}</span>
				<span v-else id="password-input-text" class="input-group-text text-muted">none</span>
				<input type="text" :value="config.password" name="password" class="form-control rounded-left activable">
				<div class="input-group-append">
				<button type="button" @click="passwordSave" id="password-save-btn" class="btn btn-outline-primary activable rounded-right">Save</button>
				<button type="button" v-if="config.password" id="password-clear-btn" @click="passwordClear" class="btn btn-outline-danger rounded">Clear password</button>
				<button type="button" v-else @click="passwordSet" id="password-set-btn" class="btn btn-outline-primary rounded">Set password</button>
				</div>
				</div>
				<small class="form-text text-muted">
				You can add a password to your meeting. Participants will have to provide
				the password before they are allowed to join the meeting.
				</small>
				</form>
				<hr v-if="false">
				<form v-if="false" id="security-options-lock">
				<div id="room-lock" class="">
				<span class="">Locked room:</span>
				<input type="checkbox" name="lock" value="1" :checked="config.locked" @click="lockSave">
				</div>
				<small class="form-text text-muted">
				When the room is locked participants have to be approved by you
				before they could join the meeting.
				</small>
				</form>
				</div>
				<div class="modal-footer">
				<button type="button" class="btn btn-secondary modal-action" data-dismiss="modal">Close</button>
				</div>
				</div>
				</div>
				</div>
				</div>
				</template>

				<script>
				export default {
				props: {
				config: { type: Object, default: () => null },
				room: { type: String, default: () => null }
				},
				data() {
				return {
				}
				},
				mounted() {
				$('#security-options-dialog').on('show.bs.modal', e => {
				$(e.target).find('.input-group-activable.active').removeClass('active')
				})
				},
				methods: {
				configSave(name, value, callback) {
				const post = {}
				post[name] = value

				axios.post('/api/v4/openvidu/rooms/' + this.room + '/config', post)
				.then(response => {
				this.config[name] = value
				if (callback) {
				callback(response.data)
				}
				this.$emit('config-update', this.config)
				this.$toast.success(response.data.message)
				})
				},
				lockSave(e) {
				this.configSave('locked', $(e.target).prop('checked') ? 1 : 0)
				},
				passwordClear() {
				this.configSave('password', '')
				},
				passwordSave() {
				this.configSave('password', $('#password-input input').val(), () => {
				$('#password-input').removeClass('active')
				})
				},
				passwordSet() {
				$('#password-input').addClass('active').find('input')
				.off('keydown.pass')
				.on('keydown.pass', e => {
				if (e.which == 13) {
				// On ENTER save the password
				this.passwordSave()
				e.preventDefault()
				} else if (e.which == 27) {
				// On ESC escape from the input, but not the dialog
				$('#password-input').removeClass('active')
				e.stopPropagation()
				}
				})
				.focus()
				}
				}
				}
				</script>