mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-18 22:11:03 +00:00
alpha built ready
This commit is contained in:
supertiger1234
parent
62f725522a
commit
5af8c39acc
11 changed files with 441 additions and 57 deletions
|
|
@ -3,6 +3,7 @@
|
|||
<div class="header">
|
||||
<div class="title">Members</div>
|
||||
</div>
|
||||
<div style="text-align: center">Soon!</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="right-panel">
|
||||
<heading
|
||||
:uniqueID="recipients && recipients.length ? recipients[0].uniqueID : undefined"
|
||||
:type="selectedChannelID && channel && !channel.server_id ? 1 : 0"
|
||||
:type="selectedChannelID && channel && !channel.server_id ? 1 : channel && channel.server_id ? 2 : 0"
|
||||
:status-color="userStatusColor"
|
||||
:name="selectedChannelID ? channelName : `Welcome back, ${user.username}!` "
|
||||
/>
|
||||
|
|
@ -22,6 +22,7 @@
|
|||
:message="msg.message"
|
||||
:files="msg.files"
|
||||
:status="msg.status"
|
||||
:type="msg.type"
|
||||
/>
|
||||
<uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue"/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@
|
|||
<div class="information">
|
||||
<div :class="{name: true, clickable: !!uniqueID }" @click="openUserInfoPanel">{{name}}</div>
|
||||
</div>
|
||||
<div class="show-members-button" @click="toggleMembersPanel">
|
||||
<i class="material-icons">view_list</i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -17,7 +20,7 @@
|
|||
import { bus } from "@/main";
|
||||
export default {
|
||||
props: [
|
||||
"type", // 0: without online status; 1: with online status
|
||||
"type", // 0: without online status; 1: with online status; 2: server.
|
||||
"statusColor", // only if type is set to 1;
|
||||
"name",
|
||||
"uniqueID"
|
||||
|
|
@ -29,6 +32,9 @@ export default {
|
|||
},
|
||||
toggleLeftMenu() {
|
||||
bus.$emit("toggleLeftMenu");
|
||||
},
|
||||
toggleMembersPanel() {
|
||||
bus.$emit("toggleMembersPanel");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -51,6 +57,14 @@ export default {
|
|||
user-select: none;
|
||||
display: none;
|
||||
}
|
||||
.show-members-button{
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
margin-top: 3px;
|
||||
user-select: none;
|
||||
display: none;
|
||||
color: white;
|
||||
}
|
||||
.show-menu-button .material-icons {
|
||||
color: rgb(207, 207, 207);
|
||||
transition: 0.3s;
|
||||
|
|
@ -94,6 +108,14 @@ export default {
|
|||
color: rgb(219, 219, 219);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 949px) {
|
||||
.show-members-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.show-menu-button {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1,33 +1,50 @@
|
|||
<template>
|
||||
<div :class="{message: true, ownMessage: user.uniqueID === $props.uniqueID, ownMessageLeft: user.uniqueID === $props.uniqueID && (apperance && apperance.own_message_right === true)} ">
|
||||
<profile-picture class="avatar" :admin="$props.admin" :url="userAvatar" size="50px" :hover="true" @click.native="openUserInformation"/>
|
||||
<div class="triangle">
|
||||
<div class="triangle-inner"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="user-info">
|
||||
<div class="username" @click="openUserInformation">{{this.$props.username}}</div>
|
||||
<div class="date">{{getDate}}</div>
|
||||
<div class="container">
|
||||
<div v-if="!type || type === 0" :class="{message: true, ownMessage: user.uniqueID === $props.uniqueID, ownMessageLeft: user.uniqueID === $props.uniqueID && (apperance && apperance.own_message_right === true)} " >
|
||||
<profile-picture
|
||||
class="avatar"
|
||||
:admin="$props.admin"
|
||||
:url="userAvatar"
|
||||
size="50px"
|
||||
:hover="true"
|
||||
@click.native="openUserInformation"
|
||||
/>
|
||||
<div class="triangle">
|
||||
<div class="triangle-inner"></div>
|
||||
</div>
|
||||
<div class="content-message" v-html="formatMessage"></div>
|
||||
|
||||
<div class="file-content" v-if="getFile">
|
||||
<div class="icon">
|
||||
<i class="material-icons">insert_drive_file</i>
|
||||
<div class="content">
|
||||
<div class="user-info">
|
||||
<div class="username" @click="openUserInformation">{{this.$props.username}}</div>
|
||||
<div class="date">{{getDate}}</div>
|
||||
</div>
|
||||
<div class="information">
|
||||
<div class="info">{{getFile.fileName}}</div>
|
||||
<a :href="getFile.url" target="_blank">
|
||||
<div class="download-button">Download</div>
|
||||
</a>
|
||||
<div class="content-message" v-html="formatMessage"></div>
|
||||
|
||||
<div class="file-content" v-if="getFile">
|
||||
<div class="icon">
|
||||
<i class="material-icons">insert_drive_file</i>
|
||||
</div>
|
||||
<div class="information">
|
||||
<div class="info">{{getFile.fileName}}</div>
|
||||
<a :href="getFile.url" target="_blank">
|
||||
<div class="download-button">Download</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image-content" v-if="getImage">
|
||||
<img :src="getImage" @click="imageClicked">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image-content" v-if="getImage">
|
||||
<img :src="getImage" @click="imageClicked">
|
||||
</div>
|
||||
<div class="sending-status" v-html="statusMessage"></div>
|
||||
</div>
|
||||
<div v-if="type && (type === 1 || type === 2)" :class="{'presence-message': true, green: type === 1, red: type === 2}" >
|
||||
<span>
|
||||
<span class="username" @click="openUserInformation">{{this.$props.username}}</span>
|
||||
<span class="text" v-if="type === 1">has joined the server!</span>
|
||||
<span class="text" v-if="type === 2">has left the server.</span>
|
||||
<span class="date">{{getDate}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="sending-status" v-html="statusMessage"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -53,18 +70,19 @@ export default {
|
|||
"date",
|
||||
"uniqueID",
|
||||
"files",
|
||||
"admin"
|
||||
"admin",
|
||||
"type"
|
||||
],
|
||||
methods: {
|
||||
openUserInformation() {
|
||||
this.$store.dispatch('setUserInformationPopout', this.uniqueID)
|
||||
this.$store.dispatch("setUserInformationPopout", this.uniqueID);
|
||||
},
|
||||
imageClicked(event) {
|
||||
this.$store.dispatch("setImagePreviewURL", event.target.src);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('settingsModule', ['apperance']),
|
||||
...mapState("settingsModule", ["apperance"]),
|
||||
getImage() {
|
||||
if (!this.$props.files || this.$props.files.length === 0)
|
||||
return undefined;
|
||||
|
|
@ -118,7 +136,27 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
|
||||
.ownMessageLeft {
|
||||
.presence-message {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
display: table;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
animation: showMessage 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.presence-message .text {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.presence-message.green {
|
||||
background: rgba(0, 128, 0, 0.534);
|
||||
}
|
||||
.presence-message.red {
|
||||
background: rgba(128, 0, 0, 0.534);
|
||||
}
|
||||
|
||||
.ownMessageLeft {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
|
|
@ -127,17 +165,15 @@ export default {
|
|||
border-left: 7px solid rgba(184, 184, 184, 0.219);
|
||||
border-right: none !important;
|
||||
}
|
||||
.ownMessageLeft .avatar {
|
||||
margin-right: 0px;
|
||||
margin-left: 5px;
|
||||
.ownMessageLeft .avatar {
|
||||
margin-right: 0px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.ownMessageLeft .sending-status{
|
||||
.ownMessageLeft .sending-status {
|
||||
margin-left: auto !important;
|
||||
margin-right: 4px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.message {
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
|
|
@ -259,7 +295,7 @@ export default {
|
|||
transition: 0.1s;
|
||||
cursor: default;
|
||||
}
|
||||
.username:hover{
|
||||
.username:hover {
|
||||
color: rgb(199, 199, 199);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,24 +13,24 @@
|
|||
<strong>What's new?</strong>
|
||||
<br>
|
||||
<ul>
|
||||
<li v-for="(wnew, index) in change.new" :key="index">{{wnew}}</li>
|
||||
<li v-for="(wnew, index) in change.new" :key="index" v-html="wnew"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="change.fix">
|
||||
<strong>Issues fixed</strong>
|
||||
<br>
|
||||
<ul>
|
||||
<li v-for="(wfix, index) in change.fix" :key="index">{{wfix}}</li>
|
||||
<li v-for="(wfix, index) in change.fix" :key="index" v-html="wfix"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="change.next">
|
||||
<strong>Up next</strong>
|
||||
<br>
|
||||
<ul>
|
||||
<li v-for="(wnext, index) in change.next" :key="index">{{wnext}}</li>
|
||||
<li v-for="(wnext, index) in change.next" :key="index" v-html="wnext"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="change.msg">{{change.msg}}</div>
|
||||
<div v-if="change.msg" v-html="change.msg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,20 @@
|
|||
<template>
|
||||
<div class="direct-message-tab">
|
||||
<transition name="slidein">
|
||||
<transition name="slide-left">
|
||||
<server-list
|
||||
class="left-panel"
|
||||
v-click-outside="hideLeftPanel"
|
||||
v-show="$mq === 'mobile' && showLeftPanel || $mq === 'desktop'"
|
||||
v-show="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')"
|
||||
/>
|
||||
</transition>
|
||||
<message-panel/>
|
||||
<members-list/>
|
||||
<transition name="slide-right">
|
||||
<members-list
|
||||
class="members-panel"
|
||||
v-click-outside="hideMembersPanel"
|
||||
v-show="($mq === 'members_panel' || $mq === 'mobile') && showMembersPanel || ($mq === 'desktop')"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -27,7 +33,8 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
showLeftPanel: false
|
||||
showLeftPanel: false,
|
||||
showMembersPanel: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -37,12 +44,22 @@ export default {
|
|||
this.showLeftPanel = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
hideMembersPanel(event) {
|
||||
if (this.showMembersPanel) {
|
||||
if (event.target.closest(".show-members-button") == null) {
|
||||
this.showMembersPanel = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
bus.$on("toggleLeftMenu", () => {
|
||||
this.showLeftPanel = !this.showLeftPanel;
|
||||
});
|
||||
bus.$on("toggleMembersPanel", () => {
|
||||
this.showMembersPanel = !this.showMembersPanel;
|
||||
});
|
||||
bus.$on("closeLeftMenu", () => {
|
||||
this.showLeftPanel = false;
|
||||
});
|
||||
|
|
@ -51,13 +68,31 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.slidein-enter-active,
|
||||
.slidein-leave-active {
|
||||
.slide-left-enter-active,
|
||||
.slide-left-leave-active {
|
||||
transition: 0.5s;
|
||||
}
|
||||
.slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
.slide-left-enter, .slide-left-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
margin-left: -300px;
|
||||
}
|
||||
|
||||
.slide-right-enter-active,
|
||||
.slide-right-leave-active {
|
||||
transition: 0.5s;
|
||||
}
|
||||
.slide-right-enter, .slide-right-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
margin-right: -300px;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 949px) {
|
||||
.members-panel {
|
||||
position: absolute;
|
||||
background-color: rgba(39, 39, 39, 0.97);
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.left-panel {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ const MainApp = () => import(/* webpackChunkName: "MainApp" */ "../src/views/App
|
|||
const HomePage = () => import(/* webpackChunkName: "HomePage" */ "../src/views/HomePage.vue");
|
||||
const GDriveCallback = () => import(/* webpackChunkName: "GDriveCallback" */ "../src/views/GDriveCallback.vue");
|
||||
const LoginPage = () => import(/* webpackChunkName: "LoginPage" */ "../src/views/LoginPage.vue");
|
||||
const InvitesPage = () => import(/* webpackChunkName: "Invites" */ "../src/views/Invites.vue");
|
||||
const RegisterPage = () => import(/* webpackChunkName: "RegisterPage" */ "../src/views/RegisterPage.vue");
|
||||
|
||||
export const router = new VueRouter({
|
||||
|
|
@ -69,10 +70,11 @@ export const router = new VueRouter({
|
|||
}
|
||||
}),
|
||||
{ store }
|
||||
);
|
||||
Vue.use(VueMq, {
|
||||
breakpoints: {
|
||||
);
|
||||
Vue.use(VueMq, {
|
||||
breakpoints: {
|
||||
mobile: 600,
|
||||
members_panel: 950,
|
||||
desktop: Infinity
|
||||
}
|
||||
});
|
||||
|
|
@ -83,6 +85,11 @@ export const router = new VueRouter({
|
|||
path: "/GDrive_callback",
|
||||
name: "GDrive callback",
|
||||
component: GDriveCallback
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/invites/:invite_id",
|
||||
name: "invites",
|
||||
component: InvitesPage,
|
||||
},
|
||||
]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
|
||||
const prototype = {
|
||||
version: 3,
|
||||
title: "Make your own servers!",
|
||||
shortTitle: "Servers",
|
||||
date: "24/04/2019",
|
||||
version: 4,
|
||||
title: "",
|
||||
shortTitle: "",
|
||||
date: "23/05/2019",
|
||||
headColor: "rgba(155, 244, 66, 0.77)",
|
||||
new: [
|
||||
"",
|
||||
|
|
@ -13,6 +13,27 @@
|
|||
}
|
||||
|
||||
const config = [
|
||||
{
|
||||
version: 4,
|
||||
title: "Make your own servers! (Alpha)",
|
||||
shortTitle: "Servers (Alpha)",
|
||||
date: "23/05/2019",
|
||||
headColor: "rgb(0, 102, 170, 0.77)",
|
||||
new: [
|
||||
"You can now make servers! Note that this is in alpha stage which means that it's not complete and there could be a ton of bugs everywhere :c get reporting!",
|
||||
"Adjusted padding in some areas.",
|
||||
],
|
||||
next: ["Members list for servers"],
|
||||
msg:
|
||||
`
|
||||
<div style='color: red;'>
|
||||
Please note that this update could be unstable and could involve of resetting the database.
|
||||
</div>Join the official Nertivia server by clicking
|
||||
|
||||
<a style="
|
||||
color: #27a3ff;
|
||||
" href='https://nertivia.supertiger.tk/invites/8SSrCF'>here</a>`
|
||||
},
|
||||
{
|
||||
version: 3,
|
||||
title: "Page Re-designs",
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ export default {
|
|||
this.showPopout = false;
|
||||
},
|
||||
logOut() {
|
||||
localStorage.removeItem("hauthid");
|
||||
this.$store.dispatch("logout");
|
||||
this.loggedIn = null;
|
||||
},
|
||||
loginPage() {
|
||||
|
|
|
|||
257
src/views/Invites.vue
Normal file
257
src/views/Invites.vue
Normal file
|
|
@ -0,0 +1,257 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<div class="app-content">
|
||||
<header-login v-on:isDay="isDayEvent"/>
|
||||
<div class="content">
|
||||
<transition appear name="fade-up">
|
||||
<div :class="{box: true, red: server === undefined}" >
|
||||
<spinner v-if="server === null"/>
|
||||
<div v-if="server === undefined">
|
||||
<div class="invalid">{{errorMsg}}</div>
|
||||
</div>
|
||||
<div class="server" v-if="server">
|
||||
<profile-picture class="avatar" size="100px" :url="tempImage"/>
|
||||
<div class="server-name">{{server.name}}</div>
|
||||
<div class="buttons">
|
||||
<div class="button join-button" @click="joinServerButton" v-if="loggedIn">Join {{server.name}}</div>
|
||||
<div class="button join-button" v-else @click="loginButton">Login to join</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="background">
|
||||
<div :class="{background: true, 'night-background': true, chosen: !isDay}">
|
||||
<particlesJS class="particles"/>
|
||||
</div>
|
||||
<div class="background day-background"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config";
|
||||
import particlesJS from "@/components/ParticlesJS.vue";
|
||||
import HeaderLogin from "@/components/HeaderLoginTemplate.vue";
|
||||
import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import ServerService from "@/services/ServerService";
|
||||
export default {
|
||||
components: { HeaderLogin, particlesJS, Spinner, ProfilePicture},
|
||||
data() {
|
||||
return {
|
||||
isDay: true,
|
||||
server: null,
|
||||
tempImage: config.domain + "/avatars/noob",
|
||||
loggedIn: localStorage.getItem('hauthid'),
|
||||
errorMsg: ""
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
isDayEvent(data) {
|
||||
this.isDay = data;
|
||||
},
|
||||
async joinServerButton(event) {
|
||||
if (event.target.classList.contains("button-clicked")) return;
|
||||
event.target.classList.add("button-clicked");
|
||||
const inviteID = this.$route.params.invite_id;
|
||||
if (!localStorage.getItem("hauthid")) {
|
||||
return this.loggedIn = undefined;
|
||||
}
|
||||
const { ok, error, result } = await ServerService.joinServer(inviteID)
|
||||
if (ok) {
|
||||
this.$router.push(`/app`);
|
||||
} else {
|
||||
event.target.classList.remove("button-clicked");
|
||||
//409 404
|
||||
if (error.response === undefined) {
|
||||
this.errorMsg = "Cannot connect to server. Try again later.";
|
||||
} else {
|
||||
const status = error.response.status;
|
||||
if (status === 409){
|
||||
return this.$router.push(`/app`);
|
||||
}
|
||||
if (status === 404){
|
||||
return this.errorMsg = "Invite does not exist.";
|
||||
}
|
||||
this.errorMsg = "Something went wrong. Try again later.";
|
||||
}
|
||||
this.server = undefined;
|
||||
}
|
||||
},
|
||||
loginButton() {
|
||||
const inviteID = this.$route.params.invite_id;
|
||||
this.$router.push(`/login?to=invites&id=${inviteID}`);
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
const inviteID = this.$route.params.invite_id;
|
||||
const { ok, error, result } = await ServerService.getInviteDetail(inviteID);
|
||||
if (ok) {
|
||||
this.server = result.data;
|
||||
} else {
|
||||
if (error.response === undefined) {
|
||||
this.errorMsg = "Cannot connect to server. Try again later.";
|
||||
} else {
|
||||
this.errorMsg = "The invite code is either invalid, expired or blocked.";
|
||||
}
|
||||
this.server = undefined;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.fade-up-enter-active {
|
||||
opacity: 0;
|
||||
animation: bounce-in 0.5s;
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
.fade-up-leave-active {
|
||||
animation: bounce-in 0.5s reverse;
|
||||
}
|
||||
|
||||
@keyframes bounce-in {
|
||||
0% {
|
||||
transform: translateX(30px);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: background 10s;
|
||||
color: white;
|
||||
height: 100%;
|
||||
}
|
||||
.app-content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
z-index: 9999;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.background {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: background 10s;
|
||||
}
|
||||
|
||||
.night-background {
|
||||
opacity: 0;
|
||||
transition: 10s;
|
||||
background: linear-gradient(to bottom, #000000 0%, #606060 100%) !important;
|
||||
}
|
||||
.day-background {
|
||||
opacity: 1;
|
||||
background: linear-gradient(to bottom, #165dc0 0%, #5482bf 100%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.night-background.chosen {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.night-background .particles {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
margin: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.box {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: rgba(44, 44, 44, 0.774);
|
||||
transition: 0.3s;
|
||||
margin: auto;
|
||||
margin-top: 20px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.server {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
|
||||
height: 300px;
|
||||
}
|
||||
.invalid{
|
||||
margin-top: 15px;
|
||||
}
|
||||
.red{
|
||||
background: rgba(117, 10, 10, 0.774)
|
||||
}
|
||||
.avatar {
|
||||
align-self: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.server-name {
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 10px;
|
||||
background: rgba(25, 151, 255, 0.699);
|
||||
border-radius: 5px;
|
||||
user-select: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 17px;
|
||||
outline: none;
|
||||
transition: 0.2s;
|
||||
box-shadow: 3px 3px rgba(23, 112, 255, 0.479);
|
||||
align-self: center;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.button:hover {
|
||||
background: rgb(25, 151, 255);
|
||||
}
|
||||
.button:focus {
|
||||
background: rgb(25, 151, 255);
|
||||
}
|
||||
.button:active {
|
||||
background: rgb(25, 151, 255);
|
||||
transform: translate(3px, 3px);
|
||||
box-shadow: 0px 0px rgba(0, 97, 207, 0.479);
|
||||
}
|
||||
|
||||
.button-clicked {
|
||||
background: rgb(126, 126, 126) !important;
|
||||
transform: translate(3px, 3px) !important;
|
||||
box-shadow: 0px 0px rgba(61, 61, 61, 0.479) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -117,6 +117,10 @@ export default {
|
|||
this.visible = false;
|
||||
this.$store.dispatch("token", result.data.token);
|
||||
setTimeout(_ => {
|
||||
const {to, id} = this.$route.query;
|
||||
if (to) {
|
||||
return window.location.href = `/${to}/${id}`
|
||||
}
|
||||
window.location.href = "/app";
|
||||
}, 1000);
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Reference in a new issue