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

179 lines
6.7 KiB
Vue

<template>
<div id="WRAPPER">
<!-- Side Menu -->
<menu-comp></menu-comp>
<!-- Side Dialog -->
<dialog-comp></dialog-comp>
<!-- Container -->
<router-view></router-view>
<!-- Side menu (ONLINE/OFFLINE) -->
<side-menu-comp></side-menu-comp>
<!-- 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' :data-loading='gs.popup.loading?1:0' @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' :data-loading='gs.popup.loading?1:0' @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' :data-loading='gs.popup.loading?1:0' @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' :data-loading='gs.popup.loading?1:0' @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' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`channel.remove`).submit()'>Remove</button>
</span>
</div>
<!-- Pop-up ROOM REMOVE -->
<div class='popup' v-show='gs.popup.get(`room.remove`).active'>
<span class='header'>Remove <strong>{{ gs.popup.get(`room.remove`).data.type }}</strong> room</span>
<span class='body form'>
<p>You are about to remove the room #<strong>{{ gs.popup.get(`room.remove`).data.name }}</strong>, this operation cannot be undone. All {{ gs.popup.get(`room.remove`).data.messages.length }} messages will be gone.</p>
</span>
<span class='footer form'>
<button @click='gs.popup.hide()'>Cancel</button>
<button class='submit invalid' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`room.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' :data-loading='gs.popup.loading?1:0' @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' :data-loading='gs.popup.loading?1:0' @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'
import sidemenu_vue from './side-menu.vue'
export default {
name: 'wrapper-',
data(){ return { gs: gs.get }; },
components: {
'MenuComp': menu_vue,
'DialogComp': dialog_vue,
'SideMenuComp': sidemenu_vue
}
}
</script>