Added better designed link complete menu.

src/components/HeaderLoginTemplate.vue

@@ -108,7 +108,7 @@ export default {
     height: 0 px;
   }
   10% {
-    height: 27px;
+    height: 33px;
   }
 }
 

src/components/app/Popouts/Popouts/GDriveLinkMenu.vue

@@ -64,17 +64,7 @@ export default {
       const { ok, error, result } = await settingsService.GDriveURL();
       if (ok) {
         const { url } = result.data;
-        //open a new window
+        window.open(url,'_blank');
-        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();
-        };
       }
     },
     donateButton() {

src/views/GDriveCallback.vue

@@ -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)
+    const {ok, error, result} = await settingsService.GDriveAuth(code, token);
-    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>