Compare commits
No commits in common. "f37280c3f6e28d0973a6c418e8e494c896d26bcd" and "d40146435397c4aba908f09e87b111c43368439b" have entirely different histories.
f37280c3f6
...
d401464353
20 changed files with 345 additions and 1261 deletions
18
app.vue
18
app.vue
|
|
@ -1,19 +1,3 @@
|
||||||
<template>
|
<template>
|
||||||
<NuxtPage />
|
<NuxtLayout />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: rgb(190, 190, 190);
|
|
||||||
background-color: rgb(30, 30, 30);
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: aquamarine;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg style="height: 512px; width: 512px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 0h512v512H0z" fill="#000" fill-opacity="1"></path><g class="" style="" transform="translate(0,0)"><path d="M17.47 250.9C88.82 328.1 158 397.6 224.5 485.5c72.3-143.8 146.3-288.1 268.4-444.37L460 26.06C356.9 135.4 276.8 238.9 207.2 361.9c-48.4-43.6-126.62-105.3-174.38-137z" fill="#fff" fill-opacity="1"></path></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 430 B |
|
|
@ -1,56 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="main-container">
|
|
||||||
<div id="auth-form-container">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
<div v-if="accessToken">
|
|
||||||
You're logged in!
|
|
||||||
<button @click="logout">Log out</button>
|
|
||||||
</div>
|
|
||||||
<div v-if="res">
|
|
||||||
Response:
|
|
||||||
<p>
|
|
||||||
{{ res }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
|
|
||||||
const apiVersion = useRuntimeConfig().public.apiVersion;
|
|
||||||
|
|
||||||
const accessToken = useCookie("access_token");
|
|
||||||
|
|
||||||
const res = ref();
|
|
||||||
|
|
||||||
async function logout(e: Event) {
|
|
||||||
e.preventDefault();
|
|
||||||
accessToken.value = null;
|
|
||||||
useCookie("refresh_token").value = null;
|
|
||||||
res.value = await $fetch(`/api/v${apiVersion}/auth/revoke`, { credentials: "include" });
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
#main-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#auth-form-container,
|
|
||||||
#auth-form-container form {
|
|
||||||
display: flex;
|
|
||||||
width: 50dvw;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#auth-form-container form {
|
|
||||||
text-align: left;
|
|
||||||
margin-top: 10dvh;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,18 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="client-root">
|
<div id="client-root">
|
||||||
<div id="home" class=".homebar-item">
|
<div id="home">
|
||||||
<NuxtLink href="/web">
|
<NuxtLink href="/web">
|
||||||
<img src="~/assets/img/house.svg" alt="Home">
|
<img src="~/assets/img/house.svg" alt="Home">
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
<div id="current-channel" class=".homebar-item">
|
<div id="current-channel">
|
||||||
main bar
|
main bar
|
||||||
</div>
|
</div>
|
||||||
<div id="test" class=".homebar-item">test</div>
|
<div id="test">test</div>
|
||||||
<div id="test2" class=".homebar-item">test2</div>
|
|
||||||
<div id="servers-list">
|
<div id="servers-list">
|
||||||
<NuxtLink v-for="server of servers" :href="'web' + server.url">
|
<NuxtLink v-for="server of servers" :href="'web' + server.url">
|
||||||
<img src="~/assets/img/server.svg" :alt="server.name">
|
<img src="~/assets/img/server.svg" :alt="server.name" width="1%">
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
<div id="channels-list" class="main-grid-row">
|
<div id="channels-list" class="main-grid-row">
|
||||||
|
|
@ -21,9 +20,6 @@
|
||||||
<div id="message-history" class="main-grid-row">
|
<div id="message-history" class="main-grid-row">
|
||||||
<Message v-for="message of messages" :img="pfp" :username="message.author.username" :text="message.text"
|
<Message v-for="message of messages" :img="pfp" :username="message.author.username" :text="message.text"
|
||||||
:timestamp="message.timestamp" format="12" />
|
:timestamp="message.timestamp" format="12" />
|
||||||
<div id="message-box" class="main-grid-row">
|
|
||||||
<input type="text" name="message-box-input" id="message-box-input">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="members-list">
|
<div id="members-list">
|
||||||
<div class="member-item" v-for="member of members">
|
<div class="member-item" v-for="member of members">
|
||||||
|
|
@ -32,7 +28,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<NuxtPage />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|
@ -154,12 +149,12 @@ const channels = [
|
||||||
/* border: 1px solid white; */
|
/* border: 1px solid white; */
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 4fr 18fr 4fr;
|
grid-template-columns: 1fr 18fr 4fr;
|
||||||
grid-template-rows: 8dvh auto;
|
grid-template-rows: 8dvh auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#client-root>div:nth-child(-n+4) {
|
#client-root > div:nth-child(-n+3) {
|
||||||
border-bottom: 1px solid rgb(70, 70, 70);
|
border-bottom: 1px solid rgb(70, 70, 70);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -167,7 +162,8 @@ const channels = [
|
||||||
/* border: 1px solid cyan; */
|
/* border: 1px solid cyan; */
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-bar {}
|
#main-bar {
|
||||||
|
}
|
||||||
|
|
||||||
#__nuxt {
|
#__nuxt {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -246,12 +242,6 @@ const channels = [
|
||||||
/* border: 1px solid cyan; */
|
/* border: 1px solid cyan; */
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-bar {}
|
#main-bar {
|
||||||
|
|
||||||
#servers-list,
|
|
||||||
#channels-list,
|
|
||||||
#message-history,
|
|
||||||
#members-list {
|
|
||||||
margin-top: 3dvh;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
19
layouts/default.vue
Normal file
19
layouts/default.vue
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<template>
|
||||||
|
<NuxtPage />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: rgb(190, 190, 190);
|
||||||
|
background-color: rgb(30, 30, 30);
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -2,18 +2,5 @@
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
compatibilityDate: '2024-11-01',
|
compatibilityDate: '2024-11-01',
|
||||||
devtools: { enabled: true },
|
devtools: { enabled: true },
|
||||||
modules: ['@nuxt/eslint', '@nuxt/image', "@pinia/nuxt"],
|
modules: ['@nuxt/eslint']
|
||||||
app: {
|
|
||||||
/*
|
|
||||||
Defines what prefix the client runs on
|
|
||||||
E.g.: baseURL set to "/web" would host at https://gorb.app/web
|
|
||||||
Default is "/" (aka root), which hosts at https://gorb.app/
|
|
||||||
*/
|
|
||||||
baseURL: "/",
|
|
||||||
},
|
|
||||||
runtimeConfig: {
|
|
||||||
public: {
|
|
||||||
apiVersion: 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
@ -11,19 +11,13 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nuxt/eslint": "^1.3.0",
|
"@nuxt/eslint": "^1.3.0",
|
||||||
"@nuxt/image": "1.10.0",
|
|
||||||
"@pinia/nuxt": "0.11.0",
|
|
||||||
"nuxt": "^3.17.0",
|
"nuxt": "^3.17.0",
|
||||||
"pinia": "^3.0.2",
|
|
||||||
"pinia-plugin-persistedstate": "^4.2.0",
|
|
||||||
"typescript": "^5.8.3",
|
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
"vue-router": "^4.5.1"
|
"vue-router": "^4.5.1"
|
||||||
},
|
},
|
||||||
"packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
|
"packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "^22.15.3",
|
|
||||||
"eslint-config-prettier": "^10.1.2",
|
"eslint-config-prettier": "^10.1.2",
|
||||||
"eslint-plugin-prettier": "^5.2.6"
|
"eslint-plugin-prettier": "^5.2.6"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
260
pages/index.vue
260
pages/index.vue
|
|
@ -1,268 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="client-root">
|
<div id="main">
|
||||||
<div id="home" class=".homebar-item">
|
<h1 class="center">Welcome to Gorb, the best chat app in the WORLD!!!</h1>
|
||||||
<NuxtLink href="/web">
|
<a href="/web" class="center">Go to web client</a>
|
||||||
<img src="~/assets/img/house.svg" alt="Home">
|
|
||||||
</NuxtLink>
|
|
||||||
</div>
|
|
||||||
<div id="current-channel" class=".homebar-item">
|
|
||||||
main bar
|
|
||||||
</div>
|
|
||||||
<div id="test" class=".homebar-item">test</div>
|
|
||||||
<div id="test2" class=".homebar-item">test2</div>
|
|
||||||
<div id="servers-list">
|
|
||||||
<NuxtLink v-for="server of servers" :href="'web' + server.url">
|
|
||||||
<img src="~/assets/img/server.svg" :alt="server.name">
|
|
||||||
</NuxtLink>
|
|
||||||
</div>
|
|
||||||
<div id="channels-list" class="main-grid-row">
|
|
||||||
<Channel v-for="channel of channels" :name="channel.name" :href="`${useRoute().path}/${channel.id}`" />
|
|
||||||
</div>
|
|
||||||
<div id="message-history" class="main-grid-row">
|
|
||||||
<div id="messages">
|
|
||||||
<Message v-for="message of messages" :img="pfp" :username="message.author.username" :text="message.text"
|
|
||||||
:timestamp="message.timestamp" format="12" />
|
|
||||||
</div>
|
|
||||||
<div id="message-box" class="main-grid-row">
|
|
||||||
<form @submit="sendMessage">
|
|
||||||
<input type="text" name="message-box-input" id="message-box-input">
|
|
||||||
<button type="submit">
|
|
||||||
<img :src="checkmark" alt="Send" width="20">
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="members-list">
|
|
||||||
<div class="member-item" v-for="member of members">
|
|
||||||
<img src="~/assets/img/tiger-head.svg" :alt="member.displayName" width="30dvw">
|
|
||||||
<span class="member-display-name">{{ member.displayName }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|
||||||
import pfp from "~/assets/img/tiger-head.svg";
|
|
||||||
import checkmark from "~/assets/img/check-mark.png";
|
|
||||||
|
|
||||||
const servers = [
|
|
||||||
{
|
|
||||||
name: "Test",
|
|
||||||
url: "/servers/284103257435"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Test",
|
|
||||||
url: "/servers/284103257435"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Test",
|
|
||||||
url: "/servers/284103257435"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const members = [
|
|
||||||
{
|
|
||||||
id: "3287484395",
|
|
||||||
displayName: "SauceyRed"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3287484395",
|
|
||||||
displayName: "SauceyRed"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3287484395",
|
|
||||||
displayName: "SauceyRed"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3287484395",
|
|
||||||
displayName: "SauceyRed"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3287484395",
|
|
||||||
displayName: "SauceyRed"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3287484395",
|
|
||||||
displayName: "SauceyRed"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3287484395",
|
|
||||||
displayName: "SauceyRed"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3287484395",
|
|
||||||
displayName: "SauceyRed"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3287484395",
|
|
||||||
displayName: "SauceyRed"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const messages = [
|
|
||||||
{
|
|
||||||
author: {
|
|
||||||
id: "3287484395",
|
|
||||||
username: "SauceyRed",
|
|
||||||
avatar: "~/assets/img/tiger-head.svg"
|
|
||||||
},
|
|
||||||
text: "hello gamers!",
|
|
||||||
timestamp: 1745948498000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
author: {
|
|
||||||
id: "3287484395",
|
|
||||||
username: "SauceyRed",
|
|
||||||
avatar: "~/assets/img/tiger-head.svg"
|
|
||||||
},
|
|
||||||
text: "yo what's up!",
|
|
||||||
timestamp: 1745948498000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
author: {
|
|
||||||
id: "3287484395",
|
|
||||||
username: "SauceyRed",
|
|
||||||
avatar: "~/assets/img/tiger-head.svg"
|
|
||||||
},
|
|
||||||
text: "how are you guys?",
|
|
||||||
timestamp: 1745948498000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
author: {
|
|
||||||
id: "3287484395",
|
|
||||||
username: "SauceyRed",
|
|
||||||
avatar: "~/assets/img/tiger-head.svg"
|
|
||||||
},
|
|
||||||
text: "im doing well",
|
|
||||||
timestamp: 1745948498000
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const channels = [
|
|
||||||
{
|
|
||||||
name: "#super-cool-channel",
|
|
||||||
id: "8gh9548rg44"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "#super-lame-channel",
|
|
||||||
id: "hgff45387hy"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "#secret-channel",
|
|
||||||
id: "g8f734h87gt"
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
function sendMessage(e: Event) {
|
|
||||||
e.preventDefault();
|
|
||||||
const textInput = document.getElementById("message-box-input") as HTMLInputElement;
|
|
||||||
const text = textInput.value;
|
|
||||||
console.log("MESSAGE SENT!!!");
|
|
||||||
console.log("text:", text);
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#client-root {
|
#main {
|
||||||
/* border: 1px solid white; */
|
|
||||||
height: 100%;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 4fr 18fr 4fr;
|
|
||||||
grid-template-rows: 8dvh auto;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#client-root>div:nth-child(-n+4) {
|
|
||||||
border-bottom: 1px solid rgb(70, 70, 70);
|
|
||||||
}
|
|
||||||
|
|
||||||
#__nuxt {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-column {
|
|
||||||
padding-top: 1dvh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#home {
|
|
||||||
grid-column: 1;
|
|
||||||
grid-row: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#current-info {
|
|
||||||
grid-column: 2;
|
|
||||||
grid-row: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#test {
|
|
||||||
grid-column: 3;
|
|
||||||
grid-row: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#utilities {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin-bottom: 3dvh;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#left-sidebar-container,
|
|
||||||
#right-sidebar-container {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-border {
|
|
||||||
border-bottom: 1px solid rgb(70, 70, 70);
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-border {
|
|
||||||
border-left: 1px solid rgb(70, 70, 70);
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-border {
|
|
||||||
border-right: 1px solid rgb(70, 70, 70);
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-content {
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: 1fr 15fr 30fr 2fr;
|
|
||||||
text-align: center;
|
|
||||||
margin-left: 1dvw;
|
|
||||||
}
|
|
||||||
|
|
||||||
#message-box {
|
|
||||||
border: 1px solid rgb(70, 70, 70);
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 1dvh;
|
|
||||||
height: 5%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#message-box-input {
|
|
||||||
width: 80%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#servers-list,
|
|
||||||
#channels-list,
|
|
||||||
#message-history,
|
|
||||||
#members-list {
|
|
||||||
margin-top: 3dvh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#message-history {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,84 +0,0 @@
|
||||||
<template>
|
|
||||||
<NuxtLayout>
|
|
||||||
<form @submit="login">
|
|
||||||
<div>
|
|
||||||
<label for="username">Username/Email</label>
|
|
||||||
<br>
|
|
||||||
<input type="text" name="username" id="username" v-model="form.username">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="password">Password</label>
|
|
||||||
<br>
|
|
||||||
<input type="password" name="password" id="password" v-model="form.password">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button type="submit">Login</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<div>
|
|
||||||
Don't have an account? <NuxtLink href="/register">Register</NuxtLink> one!
|
|
||||||
</div>
|
|
||||||
<div v-if="response">
|
|
||||||
Response:
|
|
||||||
<p>
|
|
||||||
{{ response }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</NuxtLayout>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
|
|
||||||
definePageMeta({
|
|
||||||
layout: "auth"
|
|
||||||
})
|
|
||||||
|
|
||||||
const form = reactive({
|
|
||||||
username: "",
|
|
||||||
password: "",
|
|
||||||
});
|
|
||||||
|
|
||||||
const response = ref();
|
|
||||||
|
|
||||||
//const authStore = useAuthStore();
|
|
||||||
const accessToken = useCookie("access_token");
|
|
||||||
const refreshToken = useCookie("refresh_token");
|
|
||||||
const redirectTo = useRoute().query.redirect_to;
|
|
||||||
|
|
||||||
console.log("access token:", accessToken.value);
|
|
||||||
console.log("refresh token:", refreshToken.value);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
console.log("accessToken:", accessToken.value);
|
|
||||||
console.log("refreshToken:", refreshToken.value);
|
|
||||||
|
|
||||||
if (accessToken.value) {
|
|
||||||
//return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const apiVersion = useRuntimeConfig().public.apiVersion;
|
|
||||||
|
|
||||||
async function login(e: Event) {
|
|
||||||
e.preventDefault();
|
|
||||||
console.log("Sending login data");
|
|
||||||
const hashedPass = await hashPassword(form.password);
|
|
||||||
console.log("hashedPass:", hashedPass);
|
|
||||||
//authStore.setAccessToken(accessToken);
|
|
||||||
const res = await $fetch(`/api/v${apiVersion}/auth/login`, {
|
|
||||||
method: "POST", body:
|
|
||||||
{
|
|
||||||
username: form.username, password: hashedPass
|
|
||||||
}
|
|
||||||
}) as { access_token: string, refresh_token: string };
|
|
||||||
response.value = res;
|
|
||||||
accessToken.value = res.access_token;
|
|
||||||
console.log("set access token:", accessToken.value);
|
|
||||||
const refreshToken = useCookie("refresh_token", { secure: true, httpOnly: false });
|
|
||||||
refreshToken.value = res.refresh_token;
|
|
||||||
//return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style></style>
|
|
||||||
|
|
@ -1,156 +0,0 @@
|
||||||
<template>
|
|
||||||
<NuxtLayout>
|
|
||||||
<form @submit="register">
|
|
||||||
<div>
|
|
||||||
<!--
|
|
||||||
<span class="form-error" v-if="errors.username.length > 0">
|
|
||||||
<p v-for="error of errors.username">
|
|
||||||
{{ error }}
|
|
||||||
</p>
|
|
||||||
</span>
|
|
||||||
-->
|
|
||||||
<label for="username">Username</label>
|
|
||||||
<br>
|
|
||||||
<input type="text" name="username" id="username" v-model="form.username">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="email">Email</label>
|
|
||||||
<br>
|
|
||||||
<input type="email" name="email" id="email" v-model="form.email">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="password">Password</label>
|
|
||||||
<br>
|
|
||||||
<input type="password" name="password" id="password" v-model="form.password">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="repeat-password">Password</label>
|
|
||||||
<br>
|
|
||||||
<input type="password" name="repeat-password" id="repeat-password" v-model="form.repeatPassword">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button type="submit">Register</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<div>
|
|
||||||
Already have an account? <NuxtLink href="/login">Log in</NuxtLink>!
|
|
||||||
</div>
|
|
||||||
<div v-if="response">
|
|
||||||
Response:
|
|
||||||
<p>
|
|
||||||
{{ response }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</NuxtLayout>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
|
|
||||||
definePageMeta({
|
|
||||||
layout: "auth"
|
|
||||||
})
|
|
||||||
|
|
||||||
const form = reactive({
|
|
||||||
username: "",
|
|
||||||
email: "",
|
|
||||||
password: "",
|
|
||||||
repeatPassword: ""
|
|
||||||
});
|
|
||||||
|
|
||||||
const response = ref();
|
|
||||||
|
|
||||||
/*
|
|
||||||
const errorMessages = reactive({
|
|
||||||
username: {
|
|
||||||
invalidChars: "Username contains invalid characters!",
|
|
||||||
tooShort: "Username must be at least 2 characters long!",
|
|
||||||
tooLong: "Username must be at most 32 characters long!",
|
|
||||||
empty: "Username must not be empty!"
|
|
||||||
},
|
|
||||||
email: {
|
|
||||||
invalidChars: "Email contains invalid characters!",
|
|
||||||
empty: "Email must not be empty!"
|
|
||||||
},
|
|
||||||
password: {
|
|
||||||
tooShort: "Password must be at least 8 characters long!",
|
|
||||||
missingSpecialChars: "Password must contain at least 1 special character!",
|
|
||||||
empty: "Password must not be empty!"
|
|
||||||
},
|
|
||||||
repeatPassword: [] as { id: string, message: string }[],
|
|
||||||
});
|
|
||||||
*/
|
|
||||||
|
|
||||||
//const authStore = useAuthStore();
|
|
||||||
const accessToken = useCookie("access_token");
|
|
||||||
const refreshToken = useCookie("refresh_token");
|
|
||||||
const redirectTo = useRoute().query.redirect_to;
|
|
||||||
|
|
||||||
console.log("access token:", accessToken.value);
|
|
||||||
console.log("refresh token:", refreshToken.value);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
console.log("accessToken:", accessToken.value);
|
|
||||||
console.log("refreshToken:", refreshToken.value);
|
|
||||||
|
|
||||||
if (accessToken.value) {
|
|
||||||
//return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/*
|
|
||||||
watch(() => form.username, (newValue) => {
|
|
||||||
console.log("username change:", newValue);
|
|
||||||
if (!validateUsername(newValue)) {
|
|
||||||
errors.username.push({ id: "invalidCharacters", message: "!" });
|
|
||||||
}
|
|
||||||
if (newValue.length < 2) {
|
|
||||||
errors.username.push({ id: "tooShort", message: "" });
|
|
||||||
} else if (newValue.length > 32) {
|
|
||||||
errors.username.push({ id: "tooLong", message: "" });
|
|
||||||
} else {
|
|
||||||
for (const error of Object.entries(errors.username)) {
|
|
||||||
console.log("error:", error);
|
|
||||||
if (["tooShort", "tooLong"].includes(error[1].id)) {
|
|
||||||
errors.username.splice(parseInt(error[0]), 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
*/
|
|
||||||
|
|
||||||
watch(() => form.email, (newValue) => {
|
|
||||||
console.log("email change:", newValue);
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(() => form.password, (newValue) => {
|
|
||||||
console.log("password change:", newValue);
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(() => form.repeatPassword, (newValue) => {
|
|
||||||
console.log("repeat password change:", newValue);
|
|
||||||
})
|
|
||||||
|
|
||||||
const apiVersion = useRuntimeConfig().public.apiVersion;
|
|
||||||
|
|
||||||
async function register(e: Event) {
|
|
||||||
e.preventDefault();
|
|
||||||
console.log("Sending registration data");
|
|
||||||
const hashedPass = await hashPassword(form.password);
|
|
||||||
const res = await $fetch(`/api/v${apiVersion}/auth/register`, {
|
|
||||||
method: "POST", body:
|
|
||||||
{
|
|
||||||
email: form.email, username: form.username, password: hashedPass
|
|
||||||
}
|
|
||||||
}) as { access_token: string, refresh_token: string };
|
|
||||||
response.value = res;
|
|
||||||
//authStore.setAccessToken(accessToken);
|
|
||||||
accessToken.value = res.access_token;
|
|
||||||
console.log("set access token:", accessToken.value);
|
|
||||||
const refreshToken = useCookie("refresh_token", { secure: true, httpOnly: false });
|
|
||||||
refreshToken.value = res.refresh_token;
|
|
||||||
//return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style></style>
|
|
||||||
249
pages/web/index.vue
Normal file
249
pages/web/index.vue
Normal file
|
|
@ -0,0 +1,249 @@
|
||||||
|
<template>
|
||||||
|
<div id="client-root">
|
||||||
|
<div id="grid-container">
|
||||||
|
<div id="left-sidebar-container" class="grid-column right-border">
|
||||||
|
<div id="home" class="bottom-border">
|
||||||
|
<NuxtLink href="web">
|
||||||
|
<img src="~/assets/img/house.svg" alt="Home" width="70%">
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
<div id="servers-list" v-for="server of servers">
|
||||||
|
<NuxtLink :href="'web' + server.url">
|
||||||
|
<img src="~/assets/img/server.svg" :alt="server.name" width="70%">
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="main-content" class="grid-column">
|
||||||
|
<div id="main-bar" class="main-grid-row bottom-border">
|
||||||
|
main bar
|
||||||
|
</div>
|
||||||
|
<div id="channels-list" class="main-grid-row">
|
||||||
|
<Channel v-for="channel of channels" :name="channel.name" :href="`${useRoute().path}/${channel.id}`" />
|
||||||
|
</div>
|
||||||
|
<div id="message-history" class="main-grid-row">
|
||||||
|
<Message v-for="message of messages" :img="pfp" :username="message.author.username" :text="message.text"
|
||||||
|
:timestamp="message.timestamp" format="12" />
|
||||||
|
</div>
|
||||||
|
<div id="message-box" class="main-grid-row">
|
||||||
|
<input type="text" name="message-box-input" id="message-box-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="right-sidebar-container" class="grid-column left-border">
|
||||||
|
<div id="utilities" class="bottom-border">
|
||||||
|
<div>
|
||||||
|
<NuxtLink>
|
||||||
|
<img src="~/assets/img/envelope.svg" alt="Inbox" width="30dvw">
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="members-list">
|
||||||
|
<div class="member-item" v-for="member of members">
|
||||||
|
<img src="~/assets/img/tiger-head.svg" :alt="member.displayName" width="30dvw">
|
||||||
|
<span class="member-display-name">{{ member.displayName }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
|
||||||
|
import pfp from "~/assets/img/tiger-head.svg";
|
||||||
|
|
||||||
|
const servers = [
|
||||||
|
{
|
||||||
|
name: "Test",
|
||||||
|
url: "/servers/284103257435"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Test",
|
||||||
|
url: "/servers/284103257435"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Test",
|
||||||
|
url: "/servers/284103257435"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const members = [
|
||||||
|
{
|
||||||
|
id: "3287484395",
|
||||||
|
displayName: "SauceyRed"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3287484395",
|
||||||
|
displayName: "SauceyRed"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3287484395",
|
||||||
|
displayName: "SauceyRed"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3287484395",
|
||||||
|
displayName: "SauceyRed"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3287484395",
|
||||||
|
displayName: "SauceyRed"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3287484395",
|
||||||
|
displayName: "SauceyRed"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3287484395",
|
||||||
|
displayName: "SauceyRed"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3287484395",
|
||||||
|
displayName: "SauceyRed"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3287484395",
|
||||||
|
displayName: "SauceyRed"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const messages = [
|
||||||
|
{
|
||||||
|
author: {
|
||||||
|
id: "3287484395",
|
||||||
|
username: "SauceyRed",
|
||||||
|
avatar: "~/assets/img/tiger-head.svg"
|
||||||
|
},
|
||||||
|
text: "hello gamers!",
|
||||||
|
timestamp: 1745948498000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
author: {
|
||||||
|
id: "3287484395",
|
||||||
|
username: "SauceyRed",
|
||||||
|
avatar: "~/assets/img/tiger-head.svg"
|
||||||
|
},
|
||||||
|
text: "yo what's up!",
|
||||||
|
timestamp: 1745948498000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
author: {
|
||||||
|
id: "3287484395",
|
||||||
|
username: "SauceyRed",
|
||||||
|
avatar: "~/assets/img/tiger-head.svg"
|
||||||
|
},
|
||||||
|
text: "how are you guys?",
|
||||||
|
timestamp: 1745948498000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
author: {
|
||||||
|
id: "3287484395",
|
||||||
|
username: "SauceyRed",
|
||||||
|
avatar: "~/assets/img/tiger-head.svg"
|
||||||
|
},
|
||||||
|
text: "im doing well",
|
||||||
|
timestamp: 1745948498000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const channels = [
|
||||||
|
{
|
||||||
|
name: "#super-cool-channel",
|
||||||
|
id: "8gh9548rg44"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "#super-lame-channel",
|
||||||
|
id: "hgff45387hy"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "#secret-channel",
|
||||||
|
id: "g8f734h87gt"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#client-root {
|
||||||
|
/* border: 1px solid white; */
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#client-root div {
|
||||||
|
/* border: 1px solid cyan; */
|
||||||
|
}
|
||||||
|
|
||||||
|
#__nuxt {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#grid-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 18fr 4fr;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-column {
|
||||||
|
padding-top: 1dvh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home {
|
||||||
|
margin-bottom: 3dvh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#utilities {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-bottom: 3dvh;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#left-sidebar-container,
|
||||||
|
#right-sidebar-container {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-border {
|
||||||
|
border-bottom: 1px solid rgb(70, 70, 70);
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-border {
|
||||||
|
border-left: 1px solid rgb(70, 70, 70);
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-border {
|
||||||
|
border-right: 1px solid rgb(70, 70, 70);
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 1fr 15fr 30fr 2fr;
|
||||||
|
text-align: center;
|
||||||
|
margin-left: 1dvw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#message-box {
|
||||||
|
border: 1px solid rgb(70, 70, 70);
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 1dvh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#message-box-input {
|
||||||
|
width: 80%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-grid-row {
|
||||||
|
/* border: 1px solid cyan; */
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-bar {
|
||||||
|
margin-bottom: 2dvh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
15
pages/web/test.vue
Normal file
15
pages/web/test.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
definePageMeta({
|
||||||
|
layout: "client"
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
667
pnpm-lock.yaml
generated
667
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,5 +1,4 @@
|
||||||
onlyBuiltDependencies:
|
onlyBuiltDependencies:
|
||||||
- '@parcel/watcher'
|
- '@parcel/watcher'
|
||||||
- esbuild
|
- esbuild
|
||||||
- sharp
|
|
||||||
- unrs-resolver
|
- unrs-resolver
|
||||||
|
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
import { defineStore } from 'pinia'
|
|
||||||
|
|
||||||
export const useAuthStore = defineStore("auth", {
|
|
||||||
state: () => ({
|
|
||||||
accessToken: null as string | null
|
|
||||||
}),
|
|
||||||
getters: {
|
|
||||||
getAccessToken: (state) => {
|
|
||||||
return state.accessToken;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
actions: {
|
|
||||||
setAccessToken(value: string) {
|
|
||||||
this.accessToken = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
export async function hashPassword(password: string) {
|
|
||||||
const encodedPass = new TextEncoder().encode(password);
|
|
||||||
const hashBuffer = await crypto.subtle.digest("SHA-384", encodedPass);
|
|
||||||
const hashArray = Array.from(new Uint8Array(hashBuffer));
|
|
||||||
const hashedPass = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
|
|
||||||
return hashedPass;
|
|
||||||
}
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
export function validateUsername(username: string) {
|
|
||||||
return /^[\w.-]+$/.test(username);
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue