Fixed pfp issue, added calrity to license, added better login transit…

…ions, added support for state parameter in oauth, added error page, added layouts, added stoer for user data, added middleware, removed api call for discord oauth URL

LICENSE

@@ -20,4 +20,6 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
-Icons used are not under the MIT License. Github logo is owned by Github and Discord logo is owned by Discord. This project is not affiliated with Github or Discord. Other icons are from google fonts.
+Icons used are not under the MIT License. Github logo is owned by Github and 
+Discord logo is owned by Discord. Other icons are from google fonts. This 
+project is not affiliated with Github, Discord, or Google in any way.

app.vue

@@ -1,103 +1,5 @@
 <template>
-  <header>
-    <nav class="page-link space-out" width="95%">
-      <NuxtLink to="/" class="page-link white-text">
-        <b>
-          <h1>Talky</h1>
-        </b>
-      </NuxtLink>
-
-      <ClientOnly>
-        <NuxtImg :src="imgUrl" alt="User Icon" v-if="loggedIn" id="pfp"/>
-        <Button icon="/icons/discord.svg" text="Login with Discord" :page="loginUrl!" v-else />
-      </ClientOnly>
-    </nav>
-  </header>
-
-  <main>
+  <NuxtLayout>
     <NuxtPage />
-  </main>
-
-  <hr>
-  <footer>
-    <b>
-      <h1>Talky</h1>
-    </b>
-    <p>Open sourced under MIT License</p>
-    <p>View project on Github</p>
-  </footer>
-</template>
-
-<script lang="ts" setup>
-// Get redirect url for oauth
-const { data: loginUrl } = await useFetch('/api/auth/login');
-
-// Check if the user is logged in and handle accordingly. Will either show profile pic or login button. Token will be refreshed if needed
-const loggedIn = ref(false)
-await useFetch('/api/auth/status', {
-  onResponse({ response }) {
-    if (response.status === 204) {
-      loggedIn.value = true // User is logged in
-    } else if (response.status === 302) {
-      useFetch('/api/auth/refresh', { // Refresh token
-        onResponse({ response }) {
-          if (response.status === 200) {
-            loggedIn.value = true; // User is logged in
-          } else {
-            loggedIn.value = false; // User is not logged in
-          }
-        }
-      });
-    } else {
-      loggedIn.value = false; // User is not logged in
-    }
-  }
-});
-
-console.log(loggedIn.value);
-
-// Get the url for the profile pic
-const { data: userInfo }: any = await useFetch('/api/data/session');
-const imgUrl = ref(`https://cdn.discordapp.com/avatars/${userInfo.value?.id}/${userInfo.value?.pfp}.webp`);
-</script>
-
-<style>
-header {
-  background-color: #020420D9; /* 85% transparent */
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0px;
-  padding-top: 8px;
-  backdrop-filter: blur(8px);
-}
-nav {
-  width: 98%;
-  margin: auto;
-}
-main, footer {
-  max-width: -moz-fit-content;
-  max-width: fit-content;
-  margin: auto;
-}
-footer {
-  text-align: center;
-}
-.space-out {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-#pfp {
-  border-radius: 50%;
-  height: 48px;
-}
-li {
-  height: min-content;
-}
-
-@media screen and (max-width: 600px) {
-  #pfp {
-    height: 36px;
-  }
-}
-</style>
+  </NuxtLayout>
+</template>

components/Button.vue

@@ -22,7 +22,7 @@ defineProps<{
     align-items: center;
     gap: 8px;
     padding: 8px 12px;
-    background-color: white ;
+    background-color: #B388EB;
     color: black;
     max-width: fit-content;
     max-height: fit-content;

components/FeatureGroup.vue

@@ -37,7 +37,7 @@ defineProps<{
   }
   .move-right {
     display: flex;
-    justify-content: flex-endC;
+    justify-content: flex-end;
   }
   .max-height {
     width: 30%;

components/Loading.vue

@@ -0,0 +1,41 @@
+<template>
+  <div id="login">
+    <h1>{{ header }}</h1>
+    <br>
+    <div id="loader"></div>
+    <br>
+    <small>{{ action }}</small>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  layout: false,
+});
+
+defineProps({
+  header: String,
+  action: String,
+})
+</script>
+
+<style>
+#login {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+#loader {
+  border: 10px solid #fff;
+  border-top: 10px solid #B388EB;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>

error.vue

@@ -0,0 +1,26 @@
+<template>
+  <div id="error">
+    <h1 id="code">{{ error?.statusCode }}</h1>
+    <p>{{ error?.message }}</p>
+    <p>{{ error?.description }}</p>
+    <br>
+    <Button icon="/icons/home.svg" text="Home Page" page="/" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  error: Object
+})
+</script>
+
+<style>
+#error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+#code {
+  font-size: 100px;
+}
+</style>

layouts/default.vue

@@ -0,0 +1,69 @@
+<template>
+  <header>
+    <nav class="page-link space-out" width="95%">
+      <NuxtLink to="/" class="page-link white-text">
+        <b>
+          <h1>Talky</h1>
+        </b>
+      </NuxtLink>
+
+      <NuxtImg :src="imgUrl" alt="User Icon" id="pfp" v-if="data.loggedIn" />
+      <Button icon="/icons/discord.svg" text="Login with Discord" page="/login" v-else />
+    </nav>
+  </header>
+
+  <main>
+    <slot></slot>
+  </main>
+
+  <hr>
+  <footer>
+    <b>
+      <h1>Talky</h1>
+    </b>
+    <p>Open sourced under MIT License</p>
+    <p>View project on Github</p>
+  </footer>
+</template>
+
+<script lang="ts" setup>
+const data = userData();
+// Get the url for the profile pic
+const imgUrl = ref(`https://cdn.discordapp.com/avatars/${data.id}/${data.pfpHash}.webp`);
+</script>
+
+<style>
+header {
+  background-color: #020420D9; /* 85% transparent */
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0px;
+  backdrop-filter: blur(8px);
+}
+nav {
+  width: 98%;
+  margin: auto;
+}
+main, footer {
+  max-width: 1431.2px;
+  margin: auto;
+}
+footer {
+  text-align: center;
+}
+.space-out {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+#pfp {
+  border-radius: 50%;
+  height: 48px;
+}
+
+@media screen and (max-width: 600px) {
+  #pfp {
+    height: 36px;
+  }
+}
+</style>

middleware/auth.ts

@@ -0,0 +1,8 @@
+export default defineNuxtRouteMiddleware(async (to, from) => {
+    const data = userData();
+    await data.checkLogin();
+
+    if (!data.loggedIn) {
+        return await navigateTo('/login');
+    }
+})

middleware/refreshData.global.ts

@@ -0,0 +1,5 @@
+export default defineNuxtRouteMiddleware(async (to, from) => {
+    const data = userData();
+    await callOnce(data.checkLogin);
+    await callOnce(data.updateInfo);
+})

nuxt.config.ts

@@ -14,7 +14,8 @@ export default defineNuxtConfig({
   },
 
   typescript: {
-    shim: false
+    shim: false,
+    strict: true,
   },
 
   css: ['~/assets/main.css'],
@@ -32,6 +33,16 @@ export default defineNuxtConfig({
   },
 
   routeRules: {
-    // '/api/*': { cors: true },
+    '/': { prerender: true },
+    '/api/**': { cors: true },
+    '/login/**': { ssr: false, prerender: true }, // Disable ssr for login so that the state parameter can be generated and verified on the client
+  },
+
+  runtimeConfig: {
+    DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET!,
+    public: {
+      DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID!,
+      DISCORD_CALLBACK_URL: process.env.DISCORD_CALLBACK_URL!,
+    }
   }
 })

package.json

@@ -14,7 +14,8 @@
     "@nuxt/image": "^1.1.0",
     "nuxt": "^3.9.0",
     "vue": "^3.3.8",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "wrangler": "^3.22.1"
   },
   "dependencies": {
     "@pinia/nuxt": "^0.5.1",

pages/index.vue

@@ -8,12 +8,4 @@
       <Button icon="/icons/github-mark.svg" text="View on Github" page="https://github.com/Inkane/discord-bot-panel" />
     </FeatureGroup>
   </div>
-</template>
-
-<script lang="ts" setup>
-
-</script>
-
-<style>
-
-</style>
+</template>

pages/login/callback.vue

@@ -0,0 +1,43 @@
+<template>
+  <Loading header="Logging In..." :action="action" />
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  layout: false,
+});
+const action = ref('Verifying State');
+const route = useRoute();
+
+const state = route.query.state;
+const code = route.query.code;
+const storedStateHash = useCookie('state_uuid');
+
+if (storedStateHash === undefined) {
+  await navigateTo('/login');
+} else if (storedStateHash.value == state) {
+  const params = new URLSearchParams({
+    code: code as string,
+  });
+
+  useCookie('state_uuid', {
+    maxAge: -1 // Delete the cookie
+  });
+
+  await useFetch(`/api/auth/callback?${params.toString()}`, {
+    method: 'GET',
+  }).then(async () => {
+    const data = userData();
+    data.loggedIn = true;
+    await data.updateInfo();
+
+    await navigateTo('/');
+  }).catch(async () => {
+    action.value = 'Login error, redirecting to try again';
+    await navigateTo('/login');
+  });
+} else {
+  action.value = 'Login blocked, redirecting to try again';
+  await navigateTo('/login');
+}
+</script>