Compare commits
9 commits
d401464353
...
f37280c3f6
| Author | SHA1 | Date | |
|---|---|---|---|
f37280c3f6
|
|||
|
c3e17cb56e
|
|||
|
ef494ee23e
|
|||
|
d62e5ece30
|
|||
|
893b3726bb
|
|||
|
67f98735ee
|
|||
|
8b719a9a63
|
|||
|
a7d6741d64
|
|||
|
80a2c724d8
|
20 changed files with 1261 additions and 345 deletions
18
app.vue
18
app.vue
|
|
@ -1,3 +1,19 @@
|
|||
<template>
|
||||
<NuxtLayout />
|
||||
<NuxtPage />
|
||||
</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>
|
||||
|
|
|
|||
BIN
assets/img/check-mark.png
Normal file
BIN
assets/img/check-mark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
1
assets/img/check-mark.svg
Normal file
1
assets/img/check-mark.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 430 B |
56
layouts/auth.vue
Normal file
56
layouts/auth.vue
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<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,17 +1,18 @@
|
|||
<template>
|
||||
<div id="client-root">
|
||||
<div id="home">
|
||||
<div id="home" class=".homebar-item">
|
||||
<NuxtLink href="/web">
|
||||
<img src="~/assets/img/house.svg" alt="Home">
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div id="current-channel">
|
||||
<div id="current-channel" class=".homebar-item">
|
||||
main bar
|
||||
</div>
|
||||
<div id="test">test</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" width="1%">
|
||||
<img src="~/assets/img/server.svg" :alt="server.name">
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div id="channels-list" class="main-grid-row">
|
||||
|
|
@ -20,6 +21,9 @@
|
|||
<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 id="message-box" class="main-grid-row">
|
||||
<input type="text" name="message-box-input" id="message-box-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="members-list">
|
||||
<div class="member-item" v-for="member of members">
|
||||
|
|
@ -28,6 +32,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NuxtPage />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -149,12 +154,12 @@ const channels = [
|
|||
/* border: 1px solid white; */
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 18fr 4fr;
|
||||
grid-template-columns: 1fr 4fr 18fr 4fr;
|
||||
grid-template-rows: 8dvh auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#client-root > div:nth-child(-n+3) {
|
||||
#client-root>div:nth-child(-n+4) {
|
||||
border-bottom: 1px solid rgb(70, 70, 70);
|
||||
}
|
||||
|
||||
|
|
@ -162,8 +167,7 @@ const channels = [
|
|||
/* border: 1px solid cyan; */
|
||||
}
|
||||
|
||||
#main-bar {
|
||||
}
|
||||
#main-bar {}
|
||||
|
||||
#__nuxt {
|
||||
display: flex;
|
||||
|
|
@ -242,6 +246,12 @@ const channels = [
|
|||
/* border: 1px solid cyan; */
|
||||
}
|
||||
|
||||
#main-bar {
|
||||
#main-bar {}
|
||||
|
||||
#servers-list,
|
||||
#channels-list,
|
||||
#message-history,
|
||||
#members-list {
|
||||
margin-top: 3dvh;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<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,5 +2,18 @@
|
|||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2024-11-01',
|
||||
devtools: { enabled: true },
|
||||
modules: ['@nuxt/eslint']
|
||||
modules: ['@nuxt/eslint', '@nuxt/image', "@pinia/nuxt"],
|
||||
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,13 +11,19 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@nuxt/eslint": "^1.3.0",
|
||||
"@nuxt/image": "1.10.0",
|
||||
"@pinia/nuxt": "0.11.0",
|
||||
"nuxt": "^3.17.0",
|
||||
"pinia": "^3.0.2",
|
||||
"pinia-plugin-persistedstate": "^4.2.0",
|
||||
"typescript": "^5.8.3",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.1"
|
||||
},
|
||||
"packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.15.3",
|
||||
"eslint-config-prettier": "^10.1.2",
|
||||
"eslint-plugin-prettier": "^5.2.6"
|
||||
}
|
||||
|
|
|
|||
260
pages/index.vue
260
pages/index.vue
|
|
@ -1,16 +1,268 @@
|
|||
<template>
|
||||
<div id="main">
|
||||
<h1 class="center">Welcome to Gorb, the best chat app in the WORLD!!!</h1>
|
||||
<a href="/web" class="center">Go to web client</a>
|
||||
<div id="client-root">
|
||||
<div id="home" class=".homebar-item">
|
||||
<NuxtLink href="/web">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
<style>
|
||||
#main {
|
||||
#client-root {
|
||||
/* border: 1px solid white; */
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr 18fr 4fr;
|
||||
grid-template-rows: 8dvh auto;
|
||||
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>
|
||||
84
pages/login.vue
Normal file
84
pages/login.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<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>
|
||||
156
pages/register.vue
Normal file
156
pages/register.vue
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<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>
|
||||
|
|
@ -1,249 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<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,4 +1,5 @@
|
|||
onlyBuiltDependencies:
|
||||
- '@parcel/watcher'
|
||||
- esbuild
|
||||
- sharp
|
||||
- unrs-resolver
|
||||
|
|
|
|||
17
stores/auth.ts
Normal file
17
stores/auth.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
})
|
||||
7
utils/hashing.ts
Normal file
7
utils/hashing.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
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;
|
||||
}
|
||||
3
utils/validation.ts
Normal file
3
utils/validation.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export function validateUsername(username: string) {
|
||||
return /^[\w.-]+$/.test(username);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue