zoeissleeping/discord-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

small frontend rewrite

Browse Source
This commit is contained in:
Zoe
2023-04-24 20:12:36 -05:00
parent 4890d657b5
commit 5743ae664e
40 changed files with 2630 additions and 2569 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintrc.json
View File

@@ -8,7 +8,6 @@
"plugin:vue/recommended",
"plugin:@typescript-eslint/recommended"
],
"overrides": [],
"globals": {
"useCookie": true,
"$fetch": true,
@@ -56,7 +55,8 @@
"files": ["*.vue"],
"rules": {
"vue/multi-word-component-names": "off",
"vue/attribute-hyphenation": "off"
"vue/attribute-hyphenation": "off",
"vue/html-self-closing": "off"
}
}
]

71
assets/css/main.css
View File

@@ -3,23 +3,58 @@
@tailwind utilities;
:root {
--background-color: hsl(230,28%,7.3%);
--foreground-color: hsl(230,26%,13%);
--primary-accent: hsl(180,55%,45%);
--message-input-color: hsl(228,27.3%,25%);
--primary-placeholder: hsl(218,11%,65%);
--primary-dark: hsl(225, 7.7%, 10.2%); /* dropdown and emoji picker bg */
--primary-700: hsl(230,31.2%,6.3%); /* code block border */
--primary-600: hsl(220, 6.8%, 17.3%); /* modal bg */
--primary-500: hsl(230,28.7%,9.8%); /* reaction button bg, code block, and inline code bg */
--primary-400: hsl(230, 12%, 19.2%); /* action buttons */
--primary-300: hsl(230,26%,15%); /* nav button bg */
--primary-200: hsl(230,26%,21.3%); /* nav button hover bg */
--primary-text: hsl(216, 3.7%, 73.5%); /* main text color (duh) */
--reaction-border: hsl(230,33.4%,18.7%); /* reaction border on hover */
--reaction-hover: hsl(230,31.2%,12.5%); /* reaction bg on hover */
--invite-members: var(--primary-accent); /* color of dot next to server members count on invites */
--primary-bg: hsl(240, 5%, 4%);
--secondary-bg: hsl(240, 9%, 7%);
--tertiary-bg: hsl(240, 13%, 10%);
--tertiary-lightened-bg: hsl(240, 13%, 16%);
--primary-input: hsl(240, 8%, 12%);
--primary-accent: hsl(342, 75%, 55%);
--primary-text: hsl(0, 0%, 97%);
--primary-placeholder: hsl(0, 0%, 80%);
--reaction-hover-border: hsl(230, 33.4%, 18.7%);
--reaction-hover: hsl(230, 31.2%, 12.5%);
--reaction-active-border: rgb(88,101,242);
--primary-danger: hsl(359, 66.7%, 54.1%);
/*
--background-color: hsl(230, 28%, 7.3%);
--foreground-color: hsl(230, 26%, 13%);
--primary-accent: hsl(180, 55%, 45%);
--message-input-color: hsl(228, 27.3%, 25%);
--primary-placeholder: hsl(218, 11%, 65%);
--primary-dark: hsl(225, 7.7%, 10.2%);
/* dropdown and emoji picker bg
--primary-700: hsl(230, 31.2%, 6.3%);
/* code block border
--primary-600: hsl(220, 6.8%, 17.3%);
/* modal bg
--primary-500: hsl(230, 28.7%, 9.8%);
/* reaction button bg, code block, and inline code bg
--primary-400: hsl(230, 12%, 19.2%);
/* action buttons
--primary-300: hsl(230, 26%, 15%);
/* nav button bg
--primary-200: hsl(230, 26%, 21.3%);
/* nav button hover bg
--primary-text: hsl(216, 3.7%, 73.5%);
/* main text color (duh)
--reaction-border: hsl(230, 33.4%, 18.7%);
/* reaction border on hover
--reaction-hover: hsl(230, 31.2%, 12.5%);
/* reaction bg on hover
--invite-members: var(--primary-accent);
/* color of dot next to server members count on invites
--primary-danger: hsl(359, 66.7%, 54.1%);
*/
}
* {
color: var(--primary-text);
scrollbar-width: none;
}
*::-webkit-scrollbar {
display: none;
}

2
components/DropdownMenu.vue
View File

@@ -3,7 +3,7 @@
<div
v-if="opened"
ref="dropdown"
class="z-[2] absolute m-2 bg-[var(--primary-dark)] w-[calc(100%-1rem)] p-3 rounded text-left"
class="z-[2] absolute m-2 bg-[var(--tertiary-bg)] w-[calc(100%-1rem)] p-3 rounded text-left"
:class="(inverted) ? 'dropdown-inverse' : 'dropdown'"
>
<slot />

18
components/InviteCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="w-6/12 bg-[var(--primary-500)] mb-1 mt-0.5 p-4 rounded-md shadow-md mr-2">
<div class="w-6/12 bg-[var(--secondary-bg)] mb-1 mt-0.5 p-4 rounded-md shadow-md mr-2">
<p class="text-sm font-semibold text-zinc-100">
You've been invited to join a
server
@@ -8,13 +8,13 @@
<div class="flex flex-row">
<div class="flex items-center mr-4">
<span
class="before:bg-[var(--invite-members)] before:h-2 before:w-2 before:inline-block before:my-auto before:rounded-full before:mr-1"
class="before:bg-[var(--primary-accent)] before:h-2 before:w-2 before:inline-block before:my-auto before:rounded-full before:mr-1"
/>
<span>{{ invite.server.participants.length }} Members</span>
</div>
<div class="flex items-center">
<span
class="before:bg-[var(--invite-members)] before:h-2 before:w-2 before:inline-block before:my-auto before:rounded-full before:mr-1"
class="before:bg-[var(--primary-accent)] before:h-2 before:w-2 before:inline-block before:my-auto before:rounded-full before:mr-1"
/>
<span>{{ invite.server.participants.filter((e: IUser) => e.online === true).length }} Online</span>
</div>
@@ -37,25 +37,27 @@
</template>
<script lang="ts">
import { useGlobalStore } from '~/stores/store';
import { PropType } from 'vue';
import { useServerStore } from '~/stores/serverStore';
import { useUserStore } from '~/stores/userStore';
import { IInviteCode, IUser } from '~/types';
export default {
props: {
invite: {
type: Object,
type: Object as PropType<IInviteCode>,
required: true
}
},
data() {
return {
user: storeToRefs(useGlobalStore()).user,
servers: storeToRefs(useGlobalStore()).servers,
user: storeToRefs(useUserStore()).user,
servers: storeToRefs(useServerStore()).servers,
};
},
computed: {
userInServer(): boolean {
return !!this.invite.server.participants.find((e: IUser) => e.id === this.user.id);
return !!this.invite.server.participants.find((e: IUser) => e.id === this.user?.id);
}
},
methods: {

67
components/Message.vue Executable file → Normal file
View File

@@ -9,7 +9,7 @@
>
<div
:id="`actions-${message.id}`"
class="relative bg-[var(--primary-400)] rounded-md border border-[rgb(32,34,37)] text-[var(--primary-text)] flex overflow-hidden"
class="relative bg-[var(--tertiary-bg)] rounded-md border border-[rgb(32,34,37)] text-[var(--primary-text)] flex overflow-hidden"
>
<button
class="p-1 hover:backdrop-brightness-125 transition-all flex w-fit h-fit"
@@ -72,7 +72,7 @@
class="flex"
>
<button
class="p-1 hover:backdrop-brightness-125 transition-all flex text-[var(--primary-400)] w-[28px] h-[28px] items-center justify-center"
class="p-1 hover:backdrop-brightness-125 transition-all flex w-[28px] h-[28px] items-center justify-center"
@click="copy(message.id)"
>
<svg
@@ -83,14 +83,14 @@
viewBox="0 0 24 24"
>
<path
fill="currentColor"
fill="var(--tertiary-bg)"
d="M10 7v2H9v6h1v2H6v-2h1V9H6V7h4m6 0a2 2 0 0 1 2 2v6c0 1.11-.89 2-2 2h-4V7m4 2h-2v6h2V9Z"
/>
</svg>
</button>
<button
v-if="message.creator.id === user.id"
class="p-1 hover:backdrop-brightness-125 transition-all flex text-[var(--primary-danger)] w-[28px] h-[28px] items-center justify-center"
v-if="message.creator.id === user?.id"
class="p-1 hover:backdrop-brightness-125 transition-all flex w-[28px] h-[28px] items-center justify-center"
@click="deleteMessage()"
>
<svg
@@ -101,7 +101,7 @@
>
<path
fill="none"
stroke="currentColor"
stroke="var(--primary-danger)"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
@@ -113,7 +113,7 @@
</div>
</div>
<div
class="transition-[backdrop-filter] hover:backdrop-brightness-90 ease-[cubic-bezier(.37,.64,.59,.33)] duration-150 my-4 px-7 py-2 message-wrapper items-center z-[1]"
class="transition-[backdrop-filter] hover:backdrop-brightness-125 ease-[cubic-bezier(.37,.64,.59,.33)] duration-150 my-4 px-7 py-2 message-wrapper items-center z-[1]"
:class="classes"
>
<div class="message-content">
@@ -137,14 +137,14 @@
</div>
<div class="flex gap-2 flex-wrap">
<button
v-for="reaction in message.reactions"
v-for="reaction in reactions"
:key="reaction.emoji"
class="py-0.5 px-1.5 bg-[var(--primary-500)] border items-center flex rounded-lg border-[var(--primary-500)] hover:border-[var(--reaction-border)] hover:bg-[var(--reaction-hover)] transition-colors shadow-sm max-h-[30px]"
:class="(reaction.users.find((e) => e.id === user.id)) ? '!border-[rgb(88,101,242)] hover:!border-[rgb(88,101,242)]' : ''"
class="py-0.5 px-1.5 bg-[var(--secondary-bg)] border items-center flex rounded-lg border-[var(--tertiary-bg)] hover:border-[var(--reaction-hover-border)] hover:bg-[var(--reaction-hover)] transition-colors shadow-sm max-h-[30px]"
:class="(reaction.users.find((e) => e.id === user?.id)) ? '!border-[var(--reaction-active-border)] hover:!border-[var(--reaction-active-border)]' : ''"
@click="toggleReaction(reaction.emoji)"
>
<div class="flex items-center mr-0.5 w-6 drop-shadow">
<span :style="emojiStyles(reaction.emoji, 16)" />
<span :style="emojiStyles(reaction.emoji, 17)" />
</div>
<div class="relative overflow-hidden ml-1.5">
<div
@@ -163,9 +163,11 @@
<script lang="ts">
import { PropType } from 'vue';
import { IPopupData, IMessage } from '~/types';
import { useGlobalStore } from '~/stores/store';
import { IPopupData, IMessage, SafeUser, IReaction } from '~/types';
import emojiJson from '~/assets/json/emoji.json';
import { useActiveStore } from '~/stores/activeStore';
import { useUserStore } from '~/stores/userStore';
import { useEmojiPickerStore } from '~/stores/emojiPickerStore';
export default {
props: {
@@ -184,19 +186,32 @@ export default {
classes: {
type: String,
required: true
},
channelId: {
type: String,
required: true
},
participants: {
type: Array as PropType<SafeUser[]>,
required: true
}
},
data() {
return {
user: storeToRefs(useGlobalStore()).user,
user: storeToRefs(useUserStore()).user,
emojiPickerOpen: false,
overflowShown: false
};
},
computed: {
reactions(): IReaction[] {
return this.message.reactions?.filter((e) => e.users.length > 0) || [];
}
},
mounted() {
const { $listen } = useNuxtApp();
$listen('pickedEmoji', (emoji) => {
if (useGlobalStore().emojiPickerData.openedBy?.messageId !== this.message.id) return;
if (useEmojiPickerStore().emojiPickerData.openedBy?.messageId !== this.message.id) return;
const replacementEmoji = emojiJson.find((e) => e.short_names[0] === emoji);
if (!replacementEmoji?.emoji) return;
if (this.message.reactions?.find((e) => e.emoji === replacementEmoji.emoji)) return;
@@ -205,12 +220,11 @@ export default {
},
methods: {
async toggleReaction(emoji: string) {
const route = useRoute();
let { message } = await $fetch(`/api/channels/${route.params.id}/messages/${this.message.id}/reactions/${emoji}`, { method: 'POST' }) as { message: IMessage };
let { message } = await $fetch(`/api/channels/${this.channelId}/messages/${this.message.id}/reactions/${emoji}`, { method: 'POST' }) as { message: IMessage };
message.body = parseMessageBody(message.body, useGlobalStore().activeChannel);
message.body = parseMessageBody(message.body, this.participants);
useGlobalStore().updateMessage(this.message.id, message);
useActiveStore().updateMessage(message);
},
openEmojiPicker() {
const actionButtons = document.getElementById(`actions-${this.message.id}`);
@@ -218,7 +232,6 @@ export default {
const elementRect = actionButtons.getBoundingClientRect();
let top = elementRect.top + window.pageYOffset;
if (top + 522 > window.innerHeight) top = window.innerHeight - 522;
const payload = {
@@ -229,7 +242,8 @@ export default {
messageId: this.message.id
}
} as IPopupData;
useGlobalStore().toggleEmojiPicker(payload);
useEmojiPickerStore().toggleEmojiPicker(payload);
},
emojiStyles(emoji: string, width: number) {
const emojis = emojiJson;
@@ -249,8 +263,7 @@ export default {
};
},
async deleteMessage() {
const route = useRoute();
await $fetch(`/api/channels/${route.params.id}/messages/${this.message.id}/delete`, { method: 'DELETE' });
await $fetch(`/api/channels/${this.channelId}/messages/${this.message.id}/delete`, { method: 'DELETE' });
},
copy(text: string) {
navigator.clipboard.writeText(text);
@@ -266,10 +279,10 @@ export default {
}
pre.codeblock {
background-color: var(--primary-500);
border: 1px solid var(--primary-700);
background-color: var(--secondary-bg);
border: 1px solid var(--tertiary-bg);
border-radius: 0.375rem;
white-space: prewrap;
white-space: pre-wrap;
margin-top: 4px;
margin-bottom: 0;
display: flex;
@@ -285,7 +298,7 @@ pre.codeblock code {
}
code.inline-code {
background-color: var(--primary-500);
background-color: var(--secondary-bg);
padding: 0.2rem;
font-size: 85%;
border-radius: 4px;

173
components/MessagePane.vue Executable file → Normal file
View File

@@ -1,12 +1,12 @@
<template>
<div
class="h-full relative text-white bg-[var(--background-color)] grid grid-rows-[48px_1fr]"
class="h-full relative bg-[var(--primary-bg)] flex flex-col"
@mouseenter="mouseEnter"
@mouseleave="mouseLeave"
>
<div class="w-full px-4 py-3 z-[1]">
<div class="px-4 py-3">
<div
v-if="!server.DM"
v-if="!channel.DM"
class="flex items-center"
>
<span class="mr-1">
@@ -23,7 +23,7 @@
/>
</svg>
</span>
<span class="text-zinc-100 font-semibold">{{ server.name }}</span>
<span class="font-semibold">{{ channel.name }}</span>
</div>
<div
v-else
@@ -53,42 +53,44 @@
</g>
</svg>
</span>
<span class="text-zinc-100 font-semibold">{{
server.dmParticipants?.find((e: SafeUser) => e.id !== user.id)?.username
<span class="font-semibold">{{
participants.find((e: SafeUser) => e.id !== user?.id)?.username
}}</span>
</div>
</div>
<section
class="bg-[var(--foreground-color)] mb-3 mx-1 h-[calc(100%-12px)] overflow-hidden rounded-lg relative grid grid-rows-[1fr_70px]"
class="h-full overflow-hidden rounded-lg relative flex flex-col"
>
<div
id="conversation-pane"
class="h-full overflow-y-scroll"
ref="conversationPane"
class="h-[calc(100%-70px)] overflow-y-scroll"
>
<div class="w-full pb-1 bg-inherit">
<div>
<div v-if="server.messages.length === 0">
<div v-if="channel.messages.length === 0">
<p>No messages yet</p>
</div>
<Message
v-for="(message, i) in server.messages"
v-for="(message, i) in channel.messages"
v-else
:key="message.id"
:message="message"
:shift-pressed="shiftPressed"
:show-username="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id"
:show-username="i === 0 || channel.messages[i - 1]?.creator.id !== message.creator.id"
:classes="calculateMessageClasses(message, i)"
:channel-id="channel.id"
:participants="participants"
/>
</div>
</div>
<div
v-if="showSearch"
class="absolute bottom-[calc(75px+0.5rem)] mx-4 w-[calc(100vw-88px-240px-32px)] py-3 px-4 bg-[var(--primary-500)] rounded-lg shadow-md z-5"
v-if="search.show"
class="absolute bottom-[calc(75px+0.5rem)] mx-4 w-[calc(100vw-88px-240px-32px)] py-3 px-4 bg-[var(--secondary-bg)] rounded-lg shadow-md z-5"
>
<div class="relative flex flex-col">
<div
v-for="resultingUser in searchResults"
v-for="resultingUser in search.results"
:key="resultingUser.id"
class="mx-2 my-1 w-[calc(100vw-88px-240px-64px-16px)] px-4 py-3 hover:backdrop-brightness-125 select-none rounded-md transition-all"
@click="completeMention(resultingUser)"
@@ -99,7 +101,7 @@
</div>
</div>
<div class="flex absolute flex-row bottom-0 w-full h-fit bg-inherit mb-1">
<div class="flex absolute flex-row bottom-0 w-full h-fit bg-inherit">
<form
class="relative px-4 w-full pt-1.5 h-fit pb-1"
@keyup="checkForMentions"
@@ -109,10 +111,10 @@
>
<div
id="textbox"
class="px-4 rounded-md w-full min-h-[44px] h-fit bg-[var(--message-input-color)] placeholder:text-[var(--primary-placeholder)] flex flex-row"
class="px-4 rounded-md w-full min-h-[44px] h-fit bg-[var(--secondary-bg)] placeholder:text-[var(--primary-placeholder)] flex flex-row"
>
<textarea
id="messageBox"
ref="messageBox"
v-model="messageContent"
maxlength="5000"
type="text"
@@ -171,35 +173,39 @@
</template>
<script lang="ts">
import { Server } from 'socket.io';
import { useGlobalStore } from '~/stores/store';
import { IMessage, SafeUser } from '~/types';
import { PropType } from 'vue';
import { useActiveStore } from '~/stores/activeStore';
import { useUserStore } from '~/stores/userStore';
import { IChannel, IMessage, SafeUser } from '~/types';
export default {
props: {
channel: {
type: Object as PropType<IChannel>,
required: true
},
participants: {
type: Array as PropType<SafeUser[]>,
required: true
}
},
data() {
return {
user: storeToRefs(useGlobalStore()).user,
server: storeToRefs(useGlobalStore()).activeChannel,
user: storeToRefs(useUserStore()).user,
messageContent: '',
canSendNotifications: false,
shiftPressed: false,
servers: storeToRefs(useGlobalStore()).servers,
usersTyping: [] as string[],
socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
showSearch: false,
searchResults: [] as SafeUser[],
search: '',
search: {
content: '',
show: false,
results: [] as SafeUser[],
}
};
},
mounted() {
if (!this.user) throw new Error('User not found, but sessionToken cookie is set');
Notification.requestPermission();
Notification.requestPermission().then((result) => {
const permission = (result === 'granted') ? true : false;
this.canSendNotifications = permission;
});
const conversationDiv = document.getElementById('conversation-pane');
const conversationDiv = this.$refs.conversationPane as HTMLDivElement;
if (!conversationDiv) throw new Error('conversation div not found');
this.scrollToBottom();
@@ -210,28 +216,28 @@ export default {
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
if (!this.messageContent) return;
let message: IMessage = await $fetch(`/api/channels/${this.server.id}/sendMessage`, { method: 'post', body: { body: this.messageContent }, headers });
let message: IMessage = await $fetch(`/api/channels/${this.channel.id}/sendMessage`, { method: 'post', body: { body: this.messageContent }, headers });
if (!message) return;
if (this.server.messages.includes(message)) return;
if (this.channel.messages.includes(message)) return;
message.body = parseMessageBody(message.body, useGlobalStore().activeChannel);
message.body = parseMessageBody(message.body, this.participants);
this.server.messages.push(message);
this.channel.messages.push(message);
this.messageContent = '';
const conversationDiv = document.getElementById('conversation-pane');
const conversationDiv = this.$refs.conversationPane as HTMLDivElement;
if (!conversationDiv) throw new Error('wtf');
setTimeout(() => {
conversationDiv.scrollTop = conversationDiv.scrollHeight;
});
this.scrollToBottom();
},
scrollToBottom() {
const conversationDiv = document.getElementById('conversation-pane');
const conversationDiv = this.$refs.conversationPane as HTMLDivElement;
if (!conversationDiv) throw new Error('wtf');
conversationDiv.scrollTo(0, conversationDiv.scrollHeight);
},
typing(event: KeyboardEvent) {
const { $io } = useNuxtApp();
const specialKeys = [
'Backspace',
'Enter',
@@ -246,7 +252,7 @@ export default {
return;
}
this.socket.emit('typing', this.server.id);
$io.emit('typing', this.channel.id);
},
mouseEnter() {
document.body.addEventListener('keydown', this.keyPressed, false);
@@ -268,12 +274,12 @@ export default {
}
},
calculateMessageClasses(message: IMessage, i: number) {
if (i === 0 || this.server.messages[i - 1]?.creator.id !== message.creator.id) {
if (i !== this.server.messages.length - 1 || this.server.messages[i + 1]?.creator.id === message.creator.id) {
if (i === 0 || this.channel.messages[i - 1]?.creator.id !== message.creator.id) {
if (i !== this.channel.messages.length - 1 || this.channel.messages[i + 1]?.creator.id === message.creator.id) {
return 'mb-0 pb-0.5';
}
} else {
if (i !== this.server.messages.length - 1 || this.server.messages[i + 1]?.creator.id === message.creator.id) {
if (i !== this.channel.messages.length - 1 || this.channel.messages[i + 1]?.creator.id === message.creator.id) {
return 'mt-0 mb-0 !py-0.5';
} else {
return 'mt-0 pt-0.5 pb-1';
@@ -283,31 +289,22 @@ export default {
return '';
},
checkForMentions() {
const input = document.getElementById('messageBox') as HTMLTextAreaElement;
const input = this.$refs.messageBox as HTMLTextAreaElement;
const startPosition = input.selectionStart;
const endPosition = input.selectionEnd;
if (startPosition === endPosition && this.inMention(startPosition)) {
let participants;
if (this.server.DM) {
participants = this.server.dmParticipants;
} else {
participants = this.server.server.participants;
}
if (!participants) throw new Error(`participants in channel "${this.server.id}" not found"`);
const search = this.messageContent.split(' ')[this.messageContent.substring(0, startPosition).split(' ').length - 1]?.slice(1);
if (!search) return;
this.search = search;
if (this.search.length === 0) {
this.showSearch = false;
this.search.content = search;
if (this.search.content.length === 0) {
this.search.show = false;
return;
}
const maxResults = Math.floor(document.body.clientHeight / 48 + 8) - 6;
let results = participants.filter((e: SafeUser) => e.username.includes(this.search));
let results = this.participants.filter((e: SafeUser) => e.username.includes(this.search.content));
results.sort((a: SafeUser, b: SafeUser) => {
const usernameA = a.username.toLowerCase();
@@ -327,13 +324,13 @@ export default {
}
if (results.length === 0) {
this.showSearch = false;
this.search.show = false;
return;
}
this.searchResults = results;
this.showSearch = true;
this.search.results = results;
this.search.show = true;
} else {
this.showSearch = false;
this.search.show = false;
}
},
inMention(cursorPos: number): boolean {
@@ -343,37 +340,39 @@ export default {
return this.inMention(cursorPos - 1);
},
completeMention(user: SafeUser) {
this.messageContent = this.messageContent.replace('@' + this.search, `<@${user.id}>`);
this.showSearch = false;
document.getElementById('messageBox')?.focus();
this.messageContent = this.messageContent.replace('@' + this.search.content, `<@${user.id}>`);
this.search.show = false;
this.$refs.messageBox.focus();
},
listenToWebsocket(conversationDiv: HTMLElement) {
this.socket.removeAllListeners();
const { $io } = useNuxtApp();
this.socket.on(`message-${this.server.id}`, (ev: { message: IMessage, deleted?: boolean }) => {
$io.removeAllListeners();
$io.on(`message-${this.channel.id}`, (ev: { message: IMessage, deleted?: boolean }) => {
let { message, deleted } = ev;
if (deleted) {
useGlobalStore().removeMessage(message.id);
useActiveStore().removeMessage(message.id);
return;
}
message.body = parseMessageBody(message.body, useGlobalStore().activeChannel);
message.body = parseMessageBody(message.body, this.participants);
if (this.server.messages.find((e) => e.id === message.id)) {
if (this.channel.messages.find((e) => e.id === message.id)) {
// message is already in the server, replace it with the updated message
useGlobalStore().updateMessage(message.id, message);
useActiveStore().updateMessage(message);
return;
}
if (message.creator.id === this.user.id) return;
if (message.creator.id === this.user?.id) return;
if (!document.hasFocus()) {
new Notification(`Message from @${message.creator.username}`, { body: message.body, tag: this.server.id.toString() });
new Notification(`Message from @${message.creator.username}`, { body: message.body, tag: this.channel.id.toString() });
}
this.server.messages.push(message);
useActiveStore().addMessage(message);
const lastElementChild = conversationDiv.children[0]?.lastElementChild;
if (!lastElementChild) return;
@@ -385,8 +384,8 @@ export default {
});
let timeout: NodeJS.Timeout;
this.socket.on(`typing-${this.server.id}`, (ev: string) => {
if (ev === this.user.username) return;
$io.on(`typing-${this.channel.id}`, (ev: string) => {
if (ev === this.user?.username) return;
clearTimeout(timeout);
timeout = setTimeout(() => {
this.usersTyping = this.usersTyping.filter(username => username !== ev);
@@ -395,17 +394,7 @@ export default {
this.usersTyping.push(ev);
});
},
// resizeTextarea() {
// const textArea = document.getElementById('messageBox')
// const textBox = document.getElementById('textBox')
// const taLineHeight = 26; // This should match the line-height in the CSS
// const taHeight = textArea.scrollHeight; // Get the scroll height of the textarea
// if (!taHeight) taHeight = 44;
// textArea.style.height = taHeight + 'px'; // This line is optional, I included it so you can more easily count the lines in an expanded textarea
// const numberOfLines = Math.floor(taHeight / taLineHeight);
// console.log("there are " + numberOfLines + " lines in the text area");
// console.log('a')
// }
},
};
</script>

140
components/Nav.vue Executable file → Normal file
View File

@@ -1,13 +1,9 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<template>
<nav
class="p-4 bg-[var(--background-color)] grid grid-cols-1 grid-rows-[56px_1fr_56px] h-screen min-w-[88px] text-white relative"
>
<nav class="bg-[var(--primary-bg)] h-screen p-4 grid grid-cols-1 grid-rows-[56px_1fr_56px] shadow shadow-black/80">
<div>
<nuxt-link to="/channel/@me">
<button
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300"
:class="(serverType === 'dms') ? '!rounded-[1.375rem]' : ''"
class="bg-[var(--tertiary-bg)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--tertiary-lightened-bg)] duration-300"
>
<span>
<svg
@@ -46,132 +42,64 @@
</button>
</nuxt-link>
</div>
<div class="overflow-y-scroll my-2 flex gap-y-2 flex-col">
<div class="overflow-y-auto overflow-x-hidden my-2 flex gap-y-2 flex-col">
<div class="w-full flex justify-center">
<hr class="border-2 rounded-md border-[var(--primary-300)] w-8/12 my-0.5">
<hr class="border-2 rounded-md border-[var(--tertiary-bg)] w-8/12 my-0.5">
</div>
<nuxt-link
v-for="server in servers"
:key="server.id"
:to="'/channel/' + server.channels[0]?.id"
>
<button
:key="server.id"
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300 h-[56px] w-[56px]"
:class="(activeServer.id === server.id) ? '!rounded-[1.375rem]' : ''"
class="bg-[var(--tertiary-bg)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--tertiary-lightened-bg)] duration-300 h-[56px] w-[56px]"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 256 154"
>
<defs>
<linearGradient
id="svgIDa"
x1="-2.778%"
x2="100%"
y1="32%"
y2="67.556%"
>
<stop
offset="0%"
stop-color="#2298BD"
/>
<stop
offset="100%"
stop-color="#0ED7B5"
/>
</linearGradient>
</defs>
<path
fill="url(#svgIDa)"
d="M128 0C93.867 0 72.533 17.067 64 51.2C76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0ZM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2c9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8Z"
/>
</svg>
</button>
</nuxt-link>
</div>
<div>
<button
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300 text-[var(--primary-accent)] cursor-pointer"
@click="createServerModelOpen = true"
>
<svg
width="32"
height="32"
viewBox="0 0 24 24"
>
<path
viewBox="0 0 24 24"
><g
fill="none"
stroke="currentColor"
stroke="var(--primary-placeholder)"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 5v14m-7-7h14"
/>
</svg>
</button>
><path d="m8 9l3 3l-3 3m5 0h3" /><path d="M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /></g></svg>
</button>
</nuxt-link>
</div>
</nav>
<div
v-if="createServerModelOpen"
class="absolute z-10 top-0 bottom-0 left-0 right-0"
>
<div
class="p-4 z-20 absolute bg-[var(--primary-500)] shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white"
<button
class="p-3 rounded-full transition-colors ease-in-out hover:bg-[var(--tertiary-lightened-bg)] duration-300 cursor-pointer"
>
<h2 class="font-semibold text-xl">
Create a server:
</h2>
<div>
<form
class="w-3/5"
@submit.prevent="createServer"
>
<input
v-model="serverName"
type="text"
class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md placeholder:text-[var(--primary-placeholder)]"
placeholder="Server name"
>
<input
type="submit"
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md"
>
</form>
</div>
</div>
<div
class="bg-black/70 w-screen h-screen"
@click="createServerModelOpen = false"
/>
</div>
<svg
width="32"
height="32"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="var(--primary-accent)"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 5v14m-7-7h14"
/>
</svg>
</button>
</nav>
</template>
<script lang="ts">
import { useGlobalStore } from '~/stores/store';
import { IServer } from '~/types';
import { useServerStore } from '~/stores/serverStore';
export default {
data() {
return {
servers: storeToRefs(useGlobalStore()).servers,
serverType: storeToRefs(useGlobalStore()).activeServerType,
activeServer: storeToRefs(useGlobalStore()).activeServer,
createServerModelOpen: false,
serverName: ''
servers: storeToRefs(useServerStore()).servers
};
},
methods: {
async createServer() {
const globalStore = useGlobalStore();
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const server: IServer = await $fetch('/api/channels/create', { method: 'post', body: { serverName: this.serverName }, headers });
this.createServerModelOpen = false;
this.serverName = '';
globalStore.addServer(server);
},
},
}
};
</script>

146
components/Sidebar.vue Executable file → Normal file
View File

@@ -1,8 +1,7 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<template>
<aside class="bg-[var(--background-color)] min-w-60 w-60 h-screen shadow-sm text-white select-none relative z-[2]">
<aside class="bg-[var(--secondary-bg)] min-w-60 w-60 h-screen shadow-sm text-white select-none relative z-[2]">
<div
v-if="serverType === 'dms' || !server"
v-if="activeServer.type === 'dm' || !activeServer.data.server"
class="h-full grid grid-rows-[48px_1fr] w-full"
>
<section>
@@ -14,18 +13,19 @@
</section>
<div
class="h-[calc(100%-12px)] mb-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg"
class="h-[calc(100%-12px)] grid grid-rows-[1fr_56px] bg-[var(--foreground-color)]"
>
<div class="h-fit">
<nuxt-link
v-for="dm in dms"
:key="dm.id"
class="hover:no-underline"
:to="'/channel/@me/' + dm.id"
>
<div
class="mx-2 my-4 bg-inherit hover:backdrop-brightness-[1.35] px-2 py-2 max-h-10 h-10 overflow-ellipsis rounded-md transition-all"
class="mx-2 my-4 bg-inherit hover:backdrop-brightness-[1.35] px-2 py-2 max-h-10 h-10 overflow-ellipsis transition-all"
>
{{ dm.dmParticipants?.find((e) => e.id !== user.id)?.username }}
{{ dm.dmParticipants?.find((e) => e.id !== user?.id)?.username }}
</div>
</nuxt-link>
</div>
@@ -37,11 +37,11 @@
>
<section>
<h4
class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center cursor-pointer p-1 bg-inherit transition-all rounded-lg"
class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center cursor-pointer p-1 bg-inherit transition-all"
:class="(!serverDropdownOpen) ? 'hover:backdrop-brightness-125' : 'backdrop-brightness-125'"
@click="serverDropdownOpen = !serverDropdownOpen"
>
<span>{{ server.name }}</span>
<span>{{ activeServer.data.server.name }}</span>
<button>
<span
v-if="!serverDropdownOpen"
@@ -128,32 +128,35 @@
<div
class="h-[calc(100%-12px)] mb-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg"
class="h-[calc(100%-12px)] grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg"
>
<div class="flex gap-y-1.5 px-1.5 mt-2 flex-col overflow-x-scroll">
<button
v-for="channel in server.channels"
<div class="flex gap-y-1.5 px-1.5 mt-2 flex-col overflow-y-auto overflow-x-hidden">
<nuxt-link
v-for="channel in activeServer.data.server.channels"
:key="channel.id"
:class="(activeChannel.id === channel.id) ? 'backdrop-brightness-[1.35]' : 'hover:backdrop-brightness-[1.35]'"
class="flex text-center bg-inherit px-2 py-1.5 w-full transition-all rounded drop-shadow-sm gap-1/5 cursor-pointer items-center"
@click="openChannel(channel.id)"
:to="'/channel/' + channel.id"
>
<span class="h-fit">
<svg
class="text-zinc-300/80 my-auto"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z"
/>
</svg>
</span>
<span>{{ channel.name }}</span>
</button>
<button
:class="(activeServer.data.channel.id === channel.id) ? 'backdrop-brightness-[1.35]' : 'hover:backdrop-brightness-[1.35]'"
class="flex text-center bg-inherit px-2 py-1.5 w-full transition-all rounded drop-shadow-sm gap-1/5 cursor-pointer items-center"
>
<span class="h-fit">
<svg
class="text-zinc-300/80 my-auto"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z"
/>
</svg>
</span>
<span class="text-ellipsis w-fit whitespace-nowrap overflow-hidden">{{ channel.name }}</span>
</button>
</nuxt-link>
<button
v-if="userIsOwner || userIsAdmin"
class="flex text-center bg-inherit hover:backdrop-brightness-[1.45] px-2 py-1.5 w-full transition-all rounded drop-shadow-sm cursor-pointer items-center"
@@ -255,7 +258,7 @@
<div class="h-full p-3">
<div class="grid grid-cols-[32px_1fr_32px] gap-x-2 items-center">
<span class="bg-[hsl(220,calc(1*6.8%),22.6%)] w-[32px] h-[32px] rounded-full" />
<span class="h-fit w-fit overflow-ellipsis">{{ user.username }}</span>
<span class="h-fit w-fit overflow-ellipsis">{{ user?.username }}</span>
<button
class="text-zinc-300 hover:backdrop-brightness-90 p-1 rounded-md transition-all"
@click="userDropdownOpen = !userDropdownOpen"
@@ -290,69 +293,36 @@
</div>
</div>
</aside>
<div
v-if="createChannelModelOpen"
class="absolute z-10 top-0 bottom-0 left-0 right-0"
>
<div
class="bg-black/70 w-screen h-screen"
@click="createChannelModelOpen = false"
/>
<div
class="p-4 z-20 absolute bg-[var(--primary-500)] shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white"
>
<h2 class="font-semibold text-xl">
Create a channel:
</h2>
<div>
<form
class="w-3/5"
@submit.prevent="createChannel"
>
<input
v-model="channelName"
type="text"
class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md"
placeholder="Channel name"
>
<input
type="submit"
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md"
>
</form>
</div>
</div>
</div>
</template>
<script lang="ts">
import { useGlobalStore } from '~/stores/store';
import { useActiveStore } from '~/stores/activeStore';
import { useDmStore } from '~/stores/dmStore';
import { useServerStore } from '~/stores/serverStore';
import { useUserStore } from '~/stores/userStore';
import { IChannel, IRole } from '~/types';
export default {
setup() {
console.log('sidebar', useGlobalStore().activeServer.channels);
},
data() {
return {
server: storeToRefs(useGlobalStore()).activeServer,
serverType: storeToRefs(useGlobalStore()).activeServerType,
activeChannel: storeToRefs(useGlobalStore()).activeChannel,
user: storeToRefs(useGlobalStore()).user,
dms: storeToRefs(useGlobalStore()).dms,
activeServer: {
type: storeToRefs(useActiveStore()).type,
data: storeToRefs(useActiveStore()).server,
},
user: storeToRefs(useUserStore()).user,
dms: storeToRefs(useDmStore()).dms,
channelName: '',
createChannelModelOpen: false,
serverDropdownOpen: false,
userDropdownOpen: false,
channelName: '',
};
},
computed: {
userIsOwner() {
return this.server && this.serverType === 'servers' && this.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user.id))?.owner;
return this.activeServer.data.server && this.activeServer.type === 'server' && this.activeServer.data.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user?.id))?.owner;
},
userIsAdmin() {
return this.server && this.serverType === 'servers' && this.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user.id))?.administer;
return this.activeServer.data.server && this.activeServer.type === 'server' && this.activeServer.data.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user?.id))?.administer;
}
},
methods: {
@@ -361,30 +331,20 @@ export default {
},
async createChannel() {
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const channel = await $fetch(`/api/guilds/${this.server.id}/addChannel`, { method: 'POST', body: { channelName: this.channelName }, headers }) as IChannel;
const channel = await $fetch(`/api/guilds/${this.activeServer.data.server.id}/addChannel`, { method: 'POST', body: { channelName: this.channelName }, headers }) as IChannel;
if (!channel) return;
useGlobalStore().addChannel(this.server.id, channel);
useServerStore().addChannel(this.activeServer.data.server.id, channel);
this.createChannelModelOpen = false;
},
openChannel(id: string) {
const router = useRouter();
router.push({ params: { id } });
},
async createInvite() {
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const inviteCode = await $fetch(`/api/guilds/${this.server.id}/createInvite`, { method: 'POST', headers });
const inviteCode = await $fetch(`/api/guilds/${this.activeServer.data.server.id}/createInvite`, { method: 'POST', headers });
},
async logout() {
await $fetch('/api/user/logout');
useCookie('sessionToken').value = null;
useCookie('userId').value = null;
useGlobalStore().logout();
navigateTo('/login');
useUserStore().logout();
}
},
}
};
</script>

4
components/UserProfile.vue
View File

@@ -1,7 +1,7 @@
<template>
<div />
</template>
<!--
<script>
import { IUser } from '~/types';
@@ -13,4 +13,4 @@ export default {
}
}
};
</script>
</script> -->

4
layouts/clean.vue Executable file → Normal file
View File

@@ -1,5 +1,3 @@
<template>
<div class="flex h-screen max-h-screen text-white">
<slot />
</div>
<slot />
</template>

104
layouts/default.vue Executable file → Normal file
View File

@@ -1,61 +1,75 @@
<template>
<div class="flex h-screen max-h-screen text-white">
<Nav />
<Sidebar />
<div class="w-[calc(100vw-88px-240px)] h-full">
<slot />
</div>
</div>
<div class="flex h-screen max-h-screen">
<Nav />
<Sidebar />
<div class="w-[calc(100vw-88px-240px)] h-full">
<slot />
</div>
</div>
</template>
<script lang="ts">
import { useGlobalStore } from '~/stores/store';
import { SafeUser, IChannel, IServer } from '~/types';
import { io } from 'socket.io-client';
import { useUserStore } from '~/stores/userStore';
import { useServerStore } from '~/stores/serverStore';
import { useDmStore } from '~/stores/dmStore';
import { useActiveStore } from '~/stores/activeStore';
import { IChannel } from '~/types';
export default {
async setup() {
const globalStore = useGlobalStore();
if (globalStore.user.id === undefined) {
const route = useRoute();
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const [user, { dms, servers }] = await Promise.all([
$fetch('/api/getCurrentUser', { headers }) as unknown as SafeUser,
$fetch('/api/user/getServers', { headers }) as unknown as { dms: IChannel[], servers: IServer[] }
const userStore = useUserStore();
const serverStore = useServerStore();
const dmStore = useDmStore();
const route = useRoute();
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
if (!userStore.isLoggedIn) {
const [userData, serverData] = await Promise.all([
$fetch('/api/getCurrentUser', { headers }),
$fetch('/api/user/getServers', { headers })
]);
if (!user || !servers || !dms) return;
if (!userData || !serverData) throw new Error('No user data or server data');
globalStore.setUser(user);
const { dms, servers } = serverData;
globalStore.setServers(servers);
globalStore.setDms(dms);
if (route.params.id && typeof route.params.id === 'string') {
if (!globalStore.getServerByChannelId(route.params.id)) {
navigateTo('/');
return;
}
globalStore.setActiveServer(route.path.includes('@me') ? 'dms' : 'servers', route.params.id);
} else {
globalStore.setActiveServerType(route.path.includes('@me') ? 'dms' : 'servers');
}
userStore.setUser(userData);
serverStore.setServers(servers);
dmStore.setDms(dms);
}
},
data() {
return {
user: storeToRefs(useGlobalStore()).user,
};
},
mounted() {
const globalStore = useGlobalStore();
const sessionToken = useCookie('sessionToken');
const socket = io({
auth: (cb) => {
cb({ token: sessionToken.value });
}
});
globalStore.setSocket(socket);
const isDm = route.path.includes('@me');
if (isDm && route.params.dmId) {
const dmData: IChannel = await $fetch(`/api/channels/${route.params.dmId}`, { headers });
if (!dmData) throw new Error('Could not find dm.');
useDmStore().addDM(dmData);
useActiveStore().setActiveDM(dmData);
}
if (!isDm && route.params.channelId) {
const [channel, server] = await Promise.all([
$fetch(`/api/channels/${route.params.channelId}`, { headers }) as unknown as IChannel,
$fetch(`/api/channels/${route.params.channelId}/guild`, { headers })
]);
if (!server) throw new Error('Could not find server.');
useServerStore().addServer(server);
useActiveStore().setActiveServer(channel, useServerStore().servers);
}
if (isDm && !route.params.dmId) {
// on '/@me'
useActiveStore().type = 'dm';
}
// const socket = ref(null);
// socket.value = io('127.0.0.1:3000', {
// auth: (cb) => cb({ token: useCookie('sessionToken').value })
// });
}
};
</script>

4
middleware/auth.ts Executable file → Normal file
View File

@@ -1,6 +1,6 @@
export default defineNuxtRouteMiddleware(() => {
if (useError().value?.message.trim().split(' ')[0]?.slice(1,4) === '401') return navigateTo('/login');
if (useError().value?.message.trim().split(' ')[0]?.slice(1,4) === '401') return '/login';
if (!useCookie('sessionToken').value) {
return navigateTo('/login');
return '/login';
}
});

14
nuxt.config.ts
View File

@@ -1,7 +1,8 @@
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
ssr: false,
ssr: true,
app: {
head: {
meta: [
@@ -15,7 +16,7 @@ export default defineNuxtConfig({
],
devtools: {
enabled: true,
enabled: false
},
modules: [
@@ -23,15 +24,14 @@ export default defineNuxtConfig({
'@pinia/nuxt',
{
autoImports: [
// automatically imports `defineStore`
'defineStore', // import { defineStore } from 'pinia'
'acceptHMRUpdate',
'defineStore',
'storeToRefs',
// automatically imports `defineStore` as `definePiniaStore`
['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
['defineStore', 'definePiniaStore'],
],
},
],
'@nuxt/devtools',
'@nuxt/devtools'
],
postcss: {

3332
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@@ -15,15 +15,15 @@
"emoji-regex": "^10.2.1",
"ioredis": "^5.3.2",
"mitt": "^3.0.0",
"nuxt": "^3.4.1",
"nuxt": "^3.0.0",
"pinia": "^2.0.28",
"socket.io": "^4.5.4",
"socket.io-client": "^4.5.4",
"socket.io-client": "^4.6.1",
"twemoji": "^14.0.2",
"uuid": "^9.0.0"
},
"devDependencies": {
"@nuxt/devtools": "npm:@nuxt/devtools-edge@latest",
"@nuxt/devtools": "^0.4.1",
"@types/bcryptjs": "^2.4.2",
"@types/emoji-js": "^3.5.0",
"@types/node": "^18.15.11",

89
pages/channel/@me/[dmId].vue Normal file
View File

@@ -0,0 +1,89 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<template>
<MessagePane
:channel="channel"
:participants="participants"
/>
<div
class="fixed mr-3"
:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"
>
<Transition>
<Popup
:opened="emojiPickerData.opened"
:openedBy="emojiPickerData.type"
@pickedEmoji="pickedEmoji($event)"
/>
</Transition>
</div>
</template>
<script lang="ts">
import { useActiveStore } from '~/stores/activeStore';
import { useDmStore } from '~/stores/dmStore';
import { useEmojiPickerStore } from '~/stores/emojiPickerStore';
import { useServerStore } from '~/stores/serverStore';
import { useUserStore } from '~/stores/userStore';
import { IChannel, IMessage, IServer, SafeUser } from '~/types';
definePageMeta({
middleware: 'auth'
});
export default {
async setup() {
const route = useRoute();
if (useDmStore().dms.find((e) => { return e.id === route.params.dmId; } ) == undefined) navigateTo('/');
if (useActiveStore().server.channel.id !== route.params.dmId) {
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const dm: IChannel = await $fetch(`/api/channels/${route.params.dmId}`, { headers });
if (!dm) throw new Error('couldnt find dm.');
useDmStore().addDM(dm);
if (typeof route.params.dmId !== 'string') throw new Error('route.params.dmId must be a string, but got an array presumably?');
useActiveStore().setActiveDM(dm);
useEmojiPickerStore().closeEmojiPicker();
}
const participants: SafeUser[] | undefined = useActiveStore().dm.dmParticipants;
if (!participants) throw new Error('no one is in this dm?');
const channel = useActiveStore().dm;
channel.messages?.forEach((e: IMessage) => {
e.body = parseMessageBody(e.body, participants);
});
const friend = participants.find((e) => e.id !== useUserStore().user?.id)?.username;
useHeadSafe({
title: `@${friend} - Blop`
});
return {
channel,
participants
};
},
data() {
return {
// socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
emojiPickerData: storeToRefs(useEmojiPickerStore()).emojiPickerData,
emojiPickerStyles: {
top: storeToRefs(useEmojiPickerStore()).emojiPickerData.value.top + 'px',
right: storeToRefs(useEmojiPickerStore()).emojiPickerData.value.right + 'px',
}
};
},
methods: {
pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp();
$emit('pickedEmoji', emoji);
useEmojiPickerStore().closeEmojiPicker();
},
}
};
</script>

93
pages/channel/@me/[id].vue
View File

@@ -1,93 +0,0 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<template>
<MessagePane />
<div
class="fixed mr-3"
:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"
>
<Transition>
<Popup
:opened="emojiPickerData.opened"
:openedBy="emojiPickerData.type"
@picked-emoji="pickedEmoji($event)"
/>
<!-- <EmojiPicker v-on:pickedEmoji="pickedEmoji($event)"
:opened="emojiPickerData.opened" /> -->
</Transition>
</div>
</template>
<script lang="ts">
import { useGlobalStore } from '~/stores/store';
import { IChannel } from '~/types';
definePageMeta({
middleware: 'auth'
});
export default {
async setup() {
const route = useRoute();
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers });
if (!server) throw new Error('could not find the dm');
useGlobalStore().addDM(server);
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
useGlobalStore().setActiveServer('dms', route.params.id);
useGlobalStore().setActiveChannel(server);
useGlobalStore().closeEmojiPicker();
server.messages?.forEach((e) => {
e.body = parseMessageBody(e.body, useGlobalStore().activeChannel);
});
const friend = server.dmParticipants?.find((e) => e.id !== useGlobalStore().user.id)?.username;
useHeadSafe({
title: `@${friend} - Blop`
});
return {
server
};
},
data() {
return {
emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData,
emojiPickerStyles: {
top: storeToRefs(useGlobalStore()).emojiPickerData.value.top + 'px',
right: storeToRefs(useGlobalStore()).emojiPickerData.value.right + 'px',
}
};
},
async updated() {
const route = useRoute();
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
if (useGlobalStore().activeServer.id !== this.server.id) {
useGlobalStore().closeEmojiPicker();
useGlobalStore().setActiveServer('dms', route.params.id);
}
},
methods: {
pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp();
$emit('pickedEmoji', emoji);
useGlobalStore().closeEmojiPicker();
},
}
};
</script>
<style>
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>

7
pages/channel/@me/index.vue Executable file → Normal file
View File

@@ -6,7 +6,8 @@
</template>
<script lang="ts">
import { useGlobalStore } from '~/stores/store';
import { useActiveStore } from '~/stores/activeStore';
import { useDmStore } from '~/stores/dmStore';
import { IChannel } from '~/types';
definePageMeta({
@@ -20,14 +21,14 @@ export default {
};
},
mounted() {
useGlobalStore().setActiveServer('dms', '@me');
useActiveStore().type = 'dm';
},
methods: {
async startDM() {
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const server: IChannel = await $fetch('/api/channels/createDM', { method: 'post', body: { partnerId: this.userId }, headers });
useGlobalStore().addDM(server);
useDmStore().addDM(server);
useRouter().push({ path: '/channel/@me/' + server.id });
}
}

94
pages/channel/[channelId].vue Normal file
View File

@@ -0,0 +1,94 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<template>
<MessagePane
:channel="channel"
:participants="server.participants"
/>
<div
class="fixed mr-3"
:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"
>
<Transition>
<Popup
:opened="emojiPickerData.opened"
:openedBy="emojiPickerData.type"
@pickedEmoji="pickedEmoji($event)"
/>
</Transition>
</div>
</template>
<script lang="ts">
import { useActiveStore } from '~/stores/activeStore';
import { useEmojiPickerStore } from '~/stores/emojiPickerStore';
import { useServerStore } from '~/stores/serverStore';
import { IChannel, IMessage, IServer } from '~/types';
definePageMeta({
middleware: 'auth'
});
export default {
async setup() {
const route = useRoute();
if (useServerStore().servers.find((e) => { return e.channels.some((e) => e.id === route.params.channelId); } ) == undefined) navigateTo('/');
if (useActiveStore().server.channel.id !== route.params.channelId) {
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const [channel, server] = await Promise.all([
await $fetch(`/api/channels/${route.params.channelId}`, { headers }) as IChannel,
await $fetch(`/api/channels/${route.params.channelId}/guild`, { headers }) as IServer,
]);
if (!server) throw new Error('server not found, this means that the channel is serverless but not a dm????');
useServerStore().addServer(server);
if (typeof route.params.channelId !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
useActiveStore().setActiveServer(channel, useServerStore().servers);
useEmojiPickerStore().closeEmojiPicker();
}
useEmojiPickerStore().closeEmojiPicker();
const channel = useActiveStore().server.channel;
const server = useActiveStore().server.server;
channel.messages?.forEach((e: IMessage) => {
e.body = parseMessageBody(e.body, server.participants);
});
useHeadSafe({
title: `#${channel.name} | ${server.name} - Blop`
});
return {
channel,
server
};
},
data() {
return {
// socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
emojiPickerData: storeToRefs(useEmojiPickerStore()).emojiPickerData,
emojiPickerStyles: {
top: storeToRefs(useEmojiPickerStore()).emojiPickerData.value.top + 'px',
right: storeToRefs(useEmojiPickerStore()).emojiPickerData.value.right + 'px',
}
};
},
mounted() {
const { $io } = useNuxtApp();
$io.on(`addChannel-${this.server.id}`, (ev) => {
const newChannel = ev as IChannel;
useServerStore().addChannel(this.server.id, newChannel);
});
},
methods: {
pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp();
$emit('pickedEmoji', emoji);
useEmojiPickerStore().closeEmojiPicker();
},
}
};
</script>

82
pages/channel/[id].vue
View File

@@ -1,82 +0,0 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<template>
<MessagePane />
<div class="fixed mr-3" :style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`">
<Transition>
<Popup :opened="emojiPickerData.opened" :openedBy="emojiPickerData.type" @pickedEmoji="pickedEmoji($event)" />
</Transition>
</div>
</template>
<script lang="ts">
import { Server } from 'socket.io';
import { useGlobalStore } from '~/stores/store';
import { IChannel, IServer } from '~/types';
definePageMeta({
middleware: 'auth'
});
export default {
async setup() {
const route = useRoute();
if (useGlobalStore().servers.find((e) => { return e.channels.some((e) => e.id === route.params.id); } ) == undefined) navigateTo('/');
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const [server, realServer] = await Promise.all([
await $fetch(`/api/channels/${route.params.id}`, { headers }) as IChannel,
await $fetch(`/api/channels/${route.params.id}/guild`, { headers }) as IServer,
]);
if (!realServer) throw new Error('realServer not found, this means that the channel is serverless but not a dm????');
useGlobalStore().addServer(realServer);
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
useGlobalStore().setActiveServer('servers', route.params.id);
useGlobalStore().setActiveChannel(server);
useGlobalStore().closeEmojiPicker();
server.messages?.forEach((e) => {
e.body = parseMessageBody(e.body, useGlobalStore().activeChannel);
});
useHeadSafe({
title: `#${server.name} | ${realServer.name} - Blop`
});
return {
server,
};
},
data() {
return {
socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData,
emojiPickerStyles: {
top: storeToRefs(useGlobalStore()).emojiPickerData.value.top + 'px',
right: storeToRefs(useGlobalStore()).emojiPickerData.value.right + 'px',
}
};
},
mounted() {
this.socket.on(`addChannel-${this.server.serverId}`, (ev) => {
const newChannel = ev as IChannel;
useGlobalStore().addChannel(this.server.serverId, newChannel);
});
},
async updated() {
const route = useRoute();
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
if (useGlobalStore().activeChannel.id !== this.server.id) {
useGlobalStore().closeEmojiPicker();
useGlobalStore().setActiveServer('servers', route.params.id);
}
},
methods: {
pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp();
$emit('pickedEmoji', emoji);
useGlobalStore().closeEmojiPicker();
},
}
};
</script>

22
pages/index.vue Executable file → Normal file
View File

@@ -1,17 +1,31 @@
<template>
<div>
Hello there traveler
<div v-if="user.isLoggedIn">
Hello, {{ user.user?.username }}
<button @click="user.logout">
Logout
</button>
</div>
<div v-else>
<nuxt-link to="/login">
Login
</nuxt-link>
or
<nuxt-link to="/signup">
Signup
Sign Up
</nuxt-link>
</div>
</template>
<script setup>
<script lang="ts">
import { useUserStore } from '~/stores/userStore';
definePageMeta({
middleware: 'auth'
});
export default {
setup() {
return { user: useUserStore() };
}
};
</script>

103
pages/login.vue Executable file → Normal file
View File

@@ -1,47 +1,52 @@
<template>
<div class="w-screen h-screen bg-[hsl(216,calc(1*7.2%),10%)] relative">
<div
class="-translate-y-1/2 -translate-x-1/2 top-1/2 left-1/2 absolute bg-[hsl(216,calc(1*7.2%),16%)] p-4 rounded-md shadow-lg"
>
<h2 class="text-xl font-semibold text-center">
Login
</h2>
<form
class="flex flex-col gap-y-2 my-2"
@submit.prevent="signup()"
>
<input
v-model="username"
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="username"
placeholder="username"
<div class="w-screen h-screen flex justify-center items-center bg-[var(--primary-bg)]">
<div class="bg-[var(--secondary-bg)] rounded-xl shadow-2xl flex flex-row overflow-hidden">
<img
src="/plants.jpg"
class="h-96 w-64 object-cover"
/>
<div class="p-4 flex flex-col text-center">
<h1 class="font-semibold text-2xl">
Login
</h1>
<form
class="flex flex-col gap-y-3 my-2"
@submit.prevent="login"
>
<input
v-model="password"
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="password"
type="password"
placeholder="password"
>
<input
type="submit"
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer"
>
</form>
<div class="text-center">
Or <nuxt-link
class="hover:underline text-blue-500"
to="/signup"
>
Signup
</nuxt-link>
<input
v-model="username"
class="px-4 py-2 rounded-md w-full bg-[var(--primary-input)] shadow-2xl placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="username"
placeholder="username"
/>
<input
v-model="password"
class="px-4 py-2 rounded-md w-full bg-[var(--primary-input)] shadow-2xl placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="password"
type="password"
placeholder="password"
/>
<input
type="submit"
value="Submit"
class="w-full bg-[#5865F2] py-2 px-4 rounded-md cursor-pointer"
/>
</form>
<p>
or
<nuxt-link to="/signup">
Sign Up
</nuxt-link>
</p>
</div>
</div>
</div>
</template>
<script lang="ts">
import { useGlobalStore } from '~/stores/store';
import { useDmStore } from '~/stores/dmStore';
import { useServerStore } from '~/stores/serverStore';
import { useUserStore } from '~/stores/userStore';
import { SafeUser } from '~/types';
definePageMeta({
@@ -56,34 +61,26 @@ export default {
};
},
methods: {
async signup() {
const globalStore = useGlobalStore();
async login() {
if (!this.username || !this.password) return;
const user = await $fetch('/api/login', {
const loginData = await $fetch('/api/login', {
method: 'post', body: {
username: this.username,
password: this.password
},
}) as { userId: string; token: string; user: SafeUser; };
}) as { token: string; user: SafeUser; };
const userId = useCookie('userId');
userId.value = user.userId;
userId.value = loginData.user.id;
const token = useCookie('sessionToken');
token.value = user.token;
token.value = loginData.token;
setTimeout(async () => {
const headers = { Cookie: `sessionToken=${token.value}` };
const { servers, dms } = await $fetch('/api/user/getServers', { headers });
useUserStore().setUser(loginData.user);
if (!servers || !dms) return;
useServerStore().setServers(loginData.user.servers);
useDmStore().setDms(loginData.user.channels);
globalStore.setServers(servers);
globalStore.setDms(dms);
globalStore.setUser(user.user);
navigateTo('/channel/@me');
});
return navigateTo('/');
}
}
};

114
pages/signup.vue Executable file → Normal file
View File

@@ -1,53 +1,59 @@
<template>
<div class="w-screen h-screen bg-[hsl(216,calc(1*7.2%),10%)] relative">
<div
class="-translate-y-1/2 -translate-x-1/2 top-1/2 left-1/2 absolute bg-[hsl(216,calc(1*7.2%),16%)] p-4 rounded-md shadow-lg"
>
<h2 class="text-xl font-semibold text-center">
Sign up
</h2>
<form
class="flex flex-col gap-y-2 my-2"
@submit.prevent="signup()"
>
<input
v-model="username"
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="username"
placeholder="username"
<div class="w-screen h-screen flex justify-center items-center bg-[var(--primary-bg)]">
<div class="bg-[var(--secondary-bg)] rounded-xl shadow-2xl flex flex-row overflow-hidden">
<img
src="/flowery-plants.jpg"
class="h-96 w-64 object-cover filter brightness-95"
/>
<div class="p-4 flex flex-col text-center">
<h1 class="font-semibold text-2xl">
Sign Up
</h1>
<form
class="flex flex-col gap-y-3 my-2"
@submit.prevent="signup"
>
<input
v-model="email"
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="email"
placeholder="email"
>
<input
v-model="password"
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="password"
type="password"
placeholder="password"
>
<input
type="submit"
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer"
>
</form>
<div class="text-center">
Or <nuxt-link
class="hover:underline text-blue-500"
to="/login"
>
Login
</nuxt-link>
<input
v-model="username"
class="px-4 py-2 rounded-md w-full bg-[var(--primary-input)] shadow-2xl placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="username"
placeholder="username"
/>
<input
v-model="email"
class="px-4 py-2 rounded-md w-full bg-[var(--primary-input)] shadow-2xl placeholder:text-[var(--primary-placeholder)] focus:outline-none"
type="email"
name="email"
placeholder="email"
/>
<input
v-model="password"
class="px-4 py-2 rounded-md w-full bg-[var(--primary-input)] shadow-2xl placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="password"
type="password"
placeholder="password"
/>
<input
type="submit"
value="Submit"
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer"
/>
</form>
<p>
or
<nuxt-link to="/login">
Login
</nuxt-link>
</p>
</div>
</div>
</div>
</template>
<script lang="ts">
import { useGlobalStore } from '~/stores/store';
import { useDmStore } from '~/stores/dmStore';
import { useServerStore } from '~/stores/serverStore';
import { useUserStore } from '~/stores/userStore';
import { SafeUser } from '~/types';
definePageMeta({
@@ -64,34 +70,26 @@ export default {
},
methods: {
async signup() {
const globalStore = useGlobalStore();
if (!this.username || !this.password || !this.email) return;
const user = await $fetch('/api/signup', {
const signupData = await $fetch('/api/signup', {
method: 'post', body: {
username: this.username,
email: this.email,
password: this.password
},
}) as { userId: string; token: string; user: SafeUser; };
}) as { token: string; user: SafeUser; };
const userId = useCookie('userId');
userId.value = user.userId;
userId.value = signupData.user.id;
const token = useCookie('sessionToken');
token.value = user.token;
token.value = signupData.token;
setTimeout(async () => {
const headers = { Cookie: `sessionToken=${token.value}` };
const { servers, dms } = await $fetch('/api/user/getServers', { headers });
useUserStore().setUser(signupData.user);
if (!servers || !dms) return;
useServerStore().setServers(signupData.user.servers);
useDmStore().setDms(signupData.user.channels);
globalStore.setServers(servers);
globalStore.setDms(dms);
globalStore.setUser(user.user);
navigateTo('/channel/@me');
});
return navigateTo('/');
}
}
};

2
pages/test.vue Executable file → Normal file
View File

@@ -1,3 +1,3 @@
<template>
<div>lorem ipsum</div>
<p>hey</p>
</template>

13
plugins/socket.client.ts Normal file
View File

@@ -0,0 +1,13 @@
import io from 'socket.io-client';
export default defineNuxtPlugin(() => {
const socket = io('http://localhost:3000', {
auth: (cb) => cb({ token: useCookie('sessionToken').value })
});
return {
provide: {
io: socket
}
};
});

BIN
public/flowery-plants.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 216 KiB

BIN
public/plants.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

41
server/api/channels/[id]/index.get.ts
View File

@@ -39,46 +39,6 @@ export default defineEventHandler(async (event) => {
id: true,
DM: true,
name: true,
messages: {
select: {
id: true,
body: true,
creator: {
select: {
id: true,
username: true
}
},
invites: {
select: {
id: true,
server: {
select: {
id: true,
name: true,
participants: {
select: {
id: true,
}
}
}
}
}
},
reactions: {
select: {
id: true,
emoji: true,
users: {
select: {
id: true,
username: true
}
}
}
}
}
}
}
},
}
@@ -87,6 +47,7 @@ export default defineEventHandler(async (event) => {
select: {
id: true,
body: true,
createdAt: true,
creator: {
select: {
id: true,

18
server/api/channels/[id]/messages/[messageId]/reactions/[name].post.ts
View File

@@ -47,7 +47,23 @@ export default defineEventHandler(async (event) => {
}
}
}
}
},
invites: {
select: {
id: true,
server: {
select: {
id: true,
name: true,
participants: {
select: {
id: true
}
}
}
}
}
},
};
const message = await prisma.message.findFirst({

1
server/api/guilds/[id]/addChannel.post.ts
View File

@@ -88,6 +88,7 @@ export default defineEventHandler(async (event) => {
select: {
id: true,
body: true,
createdAt: true,
creator: {
select: {
id: true,

25
server/api/login.post.ts
View File

@@ -3,7 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
import * as dotenv from 'dotenv';
import crypto from 'node:crypto';
import { PrismaClient } from '@prisma/client';
import { IUser, SafeUser } from '~/types';
import { IUser } from '~/types';
const prisma = new PrismaClient();
dotenv.config();
@@ -27,7 +27,25 @@ export default defineEventHandler(async (event) => {
id: true,
username: true,
passwordhash: true,
email: true,
servers: {
select: {
id: true,
name: true,
channels: true,
}
},
channels: {
select: {
id: true,
DM: true,
dmParticipants: {
select: {
id: true,
username: true,
}
}
}
}
},
}) as unknown as IUser;
@@ -51,11 +69,10 @@ export default defineEventHandler(async (event) => {
}
});
user = user as SafeUser;
user.passwordhash = undefined;
return {
token,
userId: user.id,
user
};
});

23
server/api/signup.post.ts
View File

@@ -52,19 +52,21 @@ export default defineEventHandler(async (event) => {
username: true,
servers: {
select: {
participants: {
id: true,
name: true,
channels: true,
}
},
channels: {
select: {
id: true,
DM: true,
dmParticipants: {
select: {
id: true,
username: true
username: true,
}
},
channels: {
select: {
id: true,
DM: true,
name: true,
}
},
}
}
}
},
@@ -83,7 +85,6 @@ export default defineEventHandler(async (event) => {
return {
token,
userId: user.id,
user
};
});

172
server/middleware/socket.ts
View File

@@ -1,113 +1,117 @@
import { Server } from 'socket.io';
import { PrismaClient } from '@prisma/client';
import { IChannel, IServer, IUser, SafeUser } from '~~/types';
import { Socket } from 'socket.io';
const prisma = new PrismaClient();
export default defineEventHandler(({ node }) => {
if (!global.io) {
global.io = new Server(node.res.socket?.server);
if (global.io) return;
global.io.on('connection', async (socket) => {
const token = socket.handshake.auth.token;
if (!token) {
return;
}
global.io = new Server(node.res.socket?.server);
const { user } = await prisma.session.findFirst({
where: {
token
},
select: {
user: {
select: {
id: true,
username: true,
servers: {
select: {
id: true,
name: true,
participants: {
select: {
id: true,
username: true,
roles: {
select: {
id: true,
administrator: true,
owner: true
}
global.io.on('connection', async (socket: Socket) => {
const token = socket.handshake.auth.token;
if (!token) {
socket.disconnect();
return;
}
const { user } = await prisma.session.findFirst({
where: {
token
},
select: {
user: {
select: {
id: true,
username: true,
servers: {
select: {
id: true,
name: true,
participants: {
select: {
id: true,
username: true,
roles: {
select: {
id: true,
administrator: true,
owner: true
}
}
},
channels: {
select: {
id: true,
DM: true,
server: {
select: {
id: true,
name: true,
participants: {
select: {
id: true,
username: true,
roles: {
select: {
id: true,
administrator: true,
owner: true
}
}
},
channels: {
select: {
id: true,
DM: true,
server: {
select: {
id: true,
name: true,
participants: {
select: {
id: true,
username: true,
roles: {
select: {
id: true,
administrator: true,
owner: true
}
}
},
}
}
},
}
}
}
}
},
channels: {
select: {
id: true,
DM: true,
dmParticipants: {
select: {
id: true,
username: true
}
},
}
}
},
channels: {
select: {
id: true,
DM: true,
dmParticipants: {
select: {
id: true,
username: true
}
},
}
}
}
}
}) as unknown as { user: IUser };
}
}) as unknown as { user: IUser };
if (!user) {
if (!user) {
socket.disconnect();
return;
}
socket.on('typing', async (ev) => {
if (!ev) {
return;
}
socket.on('typing', async (ev) => {
if (!ev) {
let channel = user.channels?.find((c: IChannel) => c.id === ev) || user.servers?.find((s: IServer) => s.channels.some((c: IChannel) => c.id === ev));
if (channel?.DM === undefined) {
// assume its a server
channel = channel?.channels.find((c: IChannel) => c.id === ev);
}
if (!channel) return;
if (!channel.dmParticipants?.find((e: SafeUser) => e.id === user.id)) {
if (!channel.server || !channel.server.participants.find((e: SafeUser) => e.id === user.id)) {
return;
}
}
let channel = user.channels?.find((c: IChannel) => c.id === ev) || user.servers?.find((s: IServer) => s.channels.some((c: IChannel) => c.id === ev));
if (channel?.DM === undefined) {
// assume its a server
channel = channel?.channels.find((c: IChannel) => c.id === ev);
}
if (!channel) return;
if (!channel.dmParticipants?.find((e: SafeUser) => e.id === user.id)) {
if (!channel.server || !channel.server.participants.find((e: SafeUser) => e.id === user.id)) {
return;
}
}
global.io.emit(`typing-${channel.id}`, user.username);
});
global.io.emit(`typing-${channel.id}`, user.username);
});
}
});
});

2
stores/store.ts → stores.bak/store.ts
View File

@@ -82,7 +82,7 @@ export const useGlobalStore = defineStore('global', {
setDms(dms: Array<IChannel>) {
this.dms = dms;
},
setSocket(socket: Socket) {
setSocket(socket: Socket | null) {
this.socket = socket;
},
setUser(user: SafeUser) {

66
stores/activeStore.ts Normal file
View File

@@ -0,0 +1,66 @@
import { IChannel, IMessage, IServer } from '~/types';
import { useServerStore } from './serverStore';
export const useActiveStore = defineStore('activeStore', {
state: () => ({
type: '' as 'dm' | 'server',
dm: {} as IChannel,
server: {
server: {} as IServer,
channel: {} as IChannel
}
}),
actions: {
setActiveDM(dm: IChannel) {
this.type = 'dm';
this.dm = dm;
},
setActiveServer(channel: IChannel, servers: IServer[]) {
this.type = 'server';
const activeServer = servers.find((e: IServer) => {
return e.channels.some((c: IChannel) => c.id === channel.id);
});
if (!activeServer) return;
const activeChannelIndex = activeServer.channels.findIndex((e: IChannel) => e.id === channel.id);
if (activeChannelIndex < 0) return;
activeServer.channels[activeChannelIndex] = channel;
const activeChannel = activeServer.channels[activeChannelIndex];
if (!activeChannel) return;
this.server.server = activeServer;
this.server.channel = activeChannel;
},
addMessage(message: IMessage) {
const channel = (this.type === 'server') ? this.server.channel : this.dm;
channel.messages.push(message);
},
updateMessage(message: IMessage) {
const channel = (this.type === 'server') ? this.server.channel : this.dm;
const messageIndex = channel.messages.findIndex((e: IMessage) => e.id === message.id);
if (messageIndex == -1) return;
channel.messages[messageIndex] = message;
},
removeMessage(messageId: string) {
const channel = (this.type === 'server') ? this.server.channel : this.dm;
const messageIndex = channel.messages.findIndex((e: IMessage) => e.id === messageId);
if (messageIndex == -1) return;
delete(channel.messages[messageIndex]);
}
}
});
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useActiveStore, import.meta.hot));
}

27
stores/dmStore.ts Normal file
View File

@@ -0,0 +1,27 @@
import { IChannel } from '~/types';
export const useDmStore = defineStore('dmStore', {
state: () => ({
dms: [] as IChannel[]
}),
actions: {
setDms(dms: IChannel[]) {
this.dms = dms;
},
addDM(dmChannel: IChannel) {
if (this.dms.find((e) => e.id === dmChannel.id)) {
const index = this.dms.findIndex((e) => e.id === dmChannel.id);
this.dms[index] = dmChannel;
return;
}
this.dms.push(dmChannel);
},
getById(id: string) {
return this.dms.find((e) => e.id === id);
}
}
});
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useDmStore, import.meta.hot));
}

41
stores/emojiPickerStore.ts Normal file
View File

@@ -0,0 +1,41 @@
import { IPopupData } from '~/types';
export const useEmojiPickerStore = defineStore('emojiPickerStore', {
state: () => ({
emojiPickerData: {type: 'emojiPicker'} as IPopupData,
}),
actions: {
openEmojiPicker(payload: IPopupData) {
this.emojiPickerData.type = 'emojiPicker';
this.emojiPickerData.top = payload.top;
this.emojiPickerData.right = payload.right;
this.emojiPickerData.openedBy = payload.openedBy;
this.emojiPickerData.opened = true;
},
toggleEmojiPicker(payload: IPopupData) {
let messageId;
if (this.emojiPickerData.openedBy === undefined) {
messageId = null;
} else {
messageId = this.emojiPickerData.openedBy.messageId || null;
}
console.log(new Date().getTime());
console.log(!this.emojiPickerData.opened || payload.openedBy?.messageId !== messageId, this.emojiPickerData.opened, payload.openedBy?.messageId, messageId);
if (!this.emojiPickerData.opened || payload.openedBy?.messageId !== messageId) {
this.openEmojiPicker(payload);
} else {
this.closeEmojiPicker();
}
},
closeEmojiPicker() {
if (this.emojiPickerData.openedBy) this.emojiPickerData.openedBy.messageId = '';
this.emojiPickerData.opened = false;
},
}
});
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useEmojiPickerStore, import.meta.hot));
}

34
stores/serverStore.ts Normal file
View File

@@ -0,0 +1,34 @@
import { IChannel, IServer } from '~/types';
export const useServerStore = defineStore('serverStore', {
state: () => ({
servers: [] as IServer[]
}),
actions: {
setServers(servers: IServer[]) {
this.servers = servers;
},
addServer(server: IServer) {
if (this.servers.find((e) => e.id === server.id)) {
const index = this.servers.findIndex((e) => e.id === server.id);
this.servers[index] = server;
return;
}
this.servers.push(server);
},
addChannel(serverId: string, channel: IChannel) {
const serverIndex = this.servers.findIndex(s => s.id === serverId);
const server = this.servers[serverIndex];
if (serverIndex < 0 || !server) return;
if (server.channels.find((c) => c.id === channel.id)) return;
server.channels.push(channel);
},
getByChannelId(channelId: string) {
return this.servers.find((e: IServer) => e.channels.some((c: IChannel) => c.id === channelId));
}
}
});
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useServerStore, import.meta.hot));
}

27
stores/userStore.ts Normal file
View File

@@ -0,0 +1,27 @@
import { SafeUser } from '~/types';
export const useUserStore = defineStore('userStore', {
state: () => ({
user: null as SafeUser | null,
isLoggedIn: false,
}),
actions: {
setUser(user: SafeUser) {
this.user = user;
this.isLoggedIn = true;
},
async logout() {
await $fetch('/api/user/logout');
useCookie('sessionToken').value = null;
useCookie('userId').value = null;
this.user = null;
this.isLoggedIn = false;
return navigateTo('/login');
}
}
});
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot));
}

10
utils/parseMessageBody.ts
View File

@@ -1,10 +1,9 @@
import { IChannel } from '~/types';
import { SafeUser } from '~/types';
export default function parseBody(body: string, activeChannel: IChannel) {
if (!activeChannel.id) throw new Error('No active channel');
export default function parseBody(body: string, participants: SafeUser[]) {
body = escape(body);
const rules = [
//bold, italics and paragragh rules
//bold, italics and paragraph rules
[/&#42;&#42;\s?([^\n]+)&#42;&#42;/g, '<b>$1</b>'],
[/&#42;\s?([^\n]+)&#42;/g, '<i>$1</i>'],
[/&#95;&#95;\s?([^\n]+)&#95;&#95;/g, '<u>$1</u>'],
@@ -28,8 +27,7 @@ export default function parseBody(body: string, activeChannel: IChannel) {
const mentions = body.match(mentionRegex);
if (mentions) {
const participants = (activeChannel.DM) ? activeChannel.dmParticipants : activeChannel.server.participants;
if (!participants) throw new Error(`participants in channel "${activeChannel.id}" not found"`);
if (!participants) throw new Error('participants in channel not found');
mentions.forEach((e: string) => {
const id = e.split('&#60;&#64;')[1]?.split('&#62;')[0];
if (!id) return;