mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-16 04:51:16 +00:00
Added better designed link complete menu.
This commit is contained in:
supertiger1234
parent
4e8b50ed47
commit
60ff0353ca
3 changed files with 210 additions and 16 deletions
|
|
@ -108,7 +108,7 @@ export default {
|
|||
height: 0 px;
|
||||
}
|
||||
10% {
|
||||
height: 27px;
|
||||
height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -64,17 +64,7 @@ export default {
|
|||
const { ok, error, result } = await settingsService.GDriveURL();
|
||||
if (ok) {
|
||||
const { url } = result.data;
|
||||
//open a new window
|
||||
const left = screen.width / 2 - 400 / 2;
|
||||
const top = screen.height / 2 - 500 / 2;
|
||||
const consentWindow = window.open(
|
||||
url,
|
||||
"",
|
||||
"width=400,height=500,top=" + top + ", left=" + left
|
||||
);
|
||||
window.onmessage = async e => {
|
||||
consentWindow.close();
|
||||
};
|
||||
window.open(url,'_blank');
|
||||
}
|
||||
},
|
||||
donateButton() {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,224 @@
|
|||
<template>
|
||||
<div>Redirecting...</div>
|
||||
<div id="app">
|
||||
<div class="app-content">
|
||||
<header-login @isDay="isDayEvent" />
|
||||
<div class="content">
|
||||
<transition appear name="fade-up">
|
||||
<div class="box">
|
||||
<div class="loading" v-if="showSpinner" >
|
||||
<spinner />
|
||||
<div class="text">Linking...</div>
|
||||
</div>
|
||||
<div class="loading" v-if="showSuccess">
|
||||
<div class="text">Google drive has been linked with Nertivia account!</div>
|
||||
<div class="text">You may close this tab.</div>
|
||||
</div>
|
||||
<div class="loading" v-if="error">
|
||||
<div class="text">Something went wrong while linking your Google Drive with Nertivia.</div>
|
||||
<div class="text">Please try again later.</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeaderLogin from "@/components/HeaderLoginTemplate.vue";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import settingsService from "../services/settingsService.js";
|
||||
|
||||
export default {
|
||||
components: { HeaderLogin, Spinner },
|
||||
data() {
|
||||
return {
|
||||
isDay: true,
|
||||
showSpinner: true,
|
||||
error: false,
|
||||
showSuccess: false,
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
const url = new URL(location.href);
|
||||
const token = url.searchParams.get("state");
|
||||
const code = url.searchParams.get("code");
|
||||
console.log(url)
|
||||
await settingsService.GDriveAuth(code, token);
|
||||
const {ok, error, result} = await settingsService.GDriveAuth(code, token);
|
||||
if (!ok) {
|
||||
this.showSpinner = false;
|
||||
this.error = true;
|
||||
} else {
|
||||
this.showSpinner = false
|
||||
this.showSuccess = true;
|
||||
}
|
||||
|
||||
window.opener.postMessage({ status: 'done' }, "*");
|
||||
},
|
||||
methods: {
|
||||
isDayEvent(data) {
|
||||
this.isDay = data;
|
||||
}
|
||||
}
|
||||
};
|
||||
</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(75, 75, 75, 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: 20px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.loading div {
|
||||
text-align: center;
|
||||
}
|
||||
.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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue