discord-client/webpack/vue/auth/wrapper.vue

<template>



	<div id="WRAPPER">

		<!-- Side Menu -->
		<menu-comp></menu-comp>

		<!-- Side Dialog -->
		<dialog-comp></dialog-comp>

		<!-- Container -->
		<router-view></router-view>

		<!-- Pop-up Filter Background -->
		<div id='popup-filter-background' v-show='gs.popup.filter' @click='gs.popup.hide()'></div>

		<!-- Pop-up ROOM CREATE -->
		<div class='popup' v-show='gs.popup.get(`room.create`).active'>
			<span class='header'>Create {{ gs.popup.get(`room.create`).type.mutable }} room</span>

			<span class='body form'>
				<label>Room Name <span :data-err='gs.popup.get(`room.create`).name.error'></span></label>
				<input type='text' v-model='gs.popup.get(`room.create`).name.mutable'>

				<label>Room Type</label>
				<span class='select-box' @click='gs.popup.get(`room.create`).type.mutable=`text`' :data-selected='gs.popup.get(`room.create`).type.mutable==`text`?1:0' data-type='text'>Text Room</span>
				<span class='select-box' @click='gs.popup.get(`room.create`).type.mutable=`voice`' :data-selected='gs.popup.get(`room.create`).type.mutable==`voice`?1:0' data-type='voice'>Voice Room</span>
			</span>

			<span class='footer form'>
				<button @click='gs.popup.hide()'>Cancel</button>
				<button class='submit' @click='gs.popup.get(`room.create`).submit()'>Create Room</button>
			</span>
		</div>

		<!-- Pop-up CHANNEL CREATE -->
		<div class='popup' v-show='gs.popup.get(`channel.create`).active'>
			<span class='header'>Create channel #<strong>{{ gs.popup.get(`channel.create`).name.mutable }}</strong><br>url: <strong>/{{gs.popup.get(`channel.create`).link.mutable}}</strong></span>

			<span class='body form'>
				<label>Channel Name <span :data-err='gs.popup.get(`channel.create`).name.error'></span></label>
				<input type='text' v-model='gs.popup.get(`channel.create`).name.mutable'>

				<label>Channel Link <span :data-err='gs.popup.get(`channel.create`).link.error'></span></label>
				<input type='text' v-model='gs.popup.get(`channel.create`).link.mutable'>
			</span>

			<span class='footer form'>
				<button @click='gs.popup.hide()'>Cancel</button>
				<button class='submit' @click='gs.popup.get(`channel.create`).submit()'>Create Channel</button>
			</span>
		</div>

		<!-- Pop-up NICKNAME CHANGE -->
		<div class='popup' v-show='gs.popup.get(`username.change`).active'>
			<span class='header'>Change nickname</span>

			<span class='body form'>
				<label for='username'>Nickname <span :data-err='gs.popup.get(`username.change`).username.error'></span></label>
				<input type='text' name='username' v-model='gs.popup.get(`username.change`).username.mutable' :placeholder='gs.auth.user.username'>

				<a @click='gs.popup.get(`username.change`).reset()'>Reset Nickname</a>
			</span>

			<span class='footer form'>
				<button @click='gs.popup.hide()'>Cancel</button>
				<button class='submit' @click='gs.popup.get(`username.change`).submit()'>Save</button>
			</span>
		</div>

		<!-- Pop-up CHANNEL INVITE -->
		<div class='popup' v-show='gs.popup.get(`channel.invite`).active'>
			<span class='header'>Invite a friend</span>

			<span class='body form'>
				<label for='username'>friend's username <span :data-err='gs.popup.get(`channel.invite`).username.error'></span></label>
				<input type='text' name='username' v-model='gs.popup.get(`channel.invite`).username.mutable'>
			</span>

			<span class='footer form'>
				<button @click='gs.popup.hide()'>Cancel</button>
				<button class='submit' @click='gs.popup.get(`channel.invite`).submit()'>Invite</button>
			</span>
		</div>

		<!-- Pop-up CHANNEL REMOVE -->
		<div class='popup' v-show='gs.popup.get(`channel.remove`).active'>
			<span class='header'>Remove channel</span>

			<span class='body form'>
				<p>You are about to remove the channel #<strong>{{ gs.content.cbuf.label }}</strong>, this operation cannot be undone.</p>
			</span>

			<span class='footer form'>
				<button @click='gs.popup.hide()'>Cancel</button>
				<button class='submit invalid' @click='gs.popup.get(`channel.remove`).submit()'>Remove</button>
			</span>
		</div>

		<!-- Pop-up CHANNEL LEAVE -->
		<div class='popup' v-show='gs.popup.get(`channel.leave`).active'>
			<span class='header'>Leave channel</span>

			<span class='body form'>
				<p>You are about to leave the channel #<strong>{{ gs.content.cbuf.label }}</strong>, this operation cannot be undone.</p>
			</span>

			<span class='footer form'>
				<button @click='gs.popup.hide()'>Cancel</button>
				<button class='submit invalid' @click='gs.popup.get(`channel.leave`).submit()'>Leave</button>
			</span>
		</div>

		<!-- Pop-up PASSWORD CHANGE -->
		<div class='popup' v-show='gs.popup.get(`password.change`).active'>
			<span class='header'>Change password</span>

			<span class='body form'>
				<label v-show='!gs.popup.get(`password.change`).matches'><span data-err='passwords does not match'></span></label>
				<label>New password <span :data-err='gs.popup.get(`password.change`).password.error'></span></label>
				<input type='password' v-model='gs.popup.get(`password.change`).password.mutable'>

				<label>Confirmation <span :data-err='gs.popup.get(`password.change`).confirm.error'></span></label>
				<input type='password' v-model='gs.popup.get(`password.change`).confirm.mutable'>
			</span>

			<span class='footer form'>
				<button @click='gs.popup.hide()'>Cancel</button>
				<button class='submit' @click='gs.popup.get(`password.change`).submit()'>Update</button>
			</span>
		</div>

	</div>


</template><script>

	import menu_vue   from './menu.vue'
	import dialog_vue from './dialog.vue'

	export default {

		name: 'wrapper-',

		data(){ return { gs: gs.get }; },

		components: {
			'MenuComp':   menu_vue,
			'DialogComp': dialog_vue
		}

	}

</script>