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

various improvements

Browse Source
This commit is contained in:
Zoe
2023-04-20 21:19:22 -05:00
parent b6d3b045aa
commit 3ea8167569
60 changed files with 12369 additions and 7625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
.eslintrc.json Normal file
View File

@@ -0,0 +1,62 @@
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:vue/recommended",
"plugin:@typescript-eslint/recommended"
],
"overrides": [],
"globals": {
"useCookie": true,
"$fetch": true,
"definePageMeta": true,
"navigateTo": true,
"useRoute": true,
"useRouter": true,
"useRequestHeaders": true,
"parseMessageBody": true,
"storeToRefs": true,
"useNuxtApp": true,
"NodeJS": true
},
"parser": "vue-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"vue",
"@typescript-eslint"
],
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
},
"overrides": [
{
"files": ["*.vue"],
"rules": {
"vue/multi-word-component-names": "off",
"vue/attribute-hyphenation": "off"
}
}
]
}

4
.gitignore vendored
View File

@@ -7,3 +7,7 @@ node_modules
# System files # System files
*.log *.log
# Secret files
.env
.env.local

6
App.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<NuxtLayout> <NuxtLayout>
<NuxtPage /> <NuxtPage />
</NuxtLayout> </NuxtLayout>
</template> </template>

0
README.md Normal file → Executable file
View File

0
assets/css/main.css Normal file → Executable file
View File

2
assets/json/emoji.json
View File

File diff suppressed because one or more lines are too long

21
components/DropdownItem.vue Normal file → Executable file
View File

@@ -1,15 +1,18 @@
<template> <template>
<li> <li>
<button <button
class="w-full cursor-pointer bg-inherit hover:backdrop-brightness-150 text-left px-3 py-1.5 rounded-md flex items-center justify-between transition-all" class="w-full cursor-pointer bg-inherit hover:backdrop-brightness-150 text-left px-3 py-1.5 rounded-md flex items-center justify-between transition-all"
:class="(danger) ? 'hover:bg-[var(--primary-danger)]' : ''"> :class="(danger) ? 'hover:bg-[var(--primary-danger)]' : ''"
<slot /> >
</button> <slot />
</li> </button>
</li>
</template> </template>
<script> <script>
export default { export default {
props: ['danger'] props: {
} danger: Boolean,
},
};
</script> </script>

24
components/DropdownMenu.vue Normal file → Executable file
View File

@@ -1,17 +1,23 @@
<template> <template>
<Transition name="pop-in"> <Transition name="pop-in">
<div ref="dropdown" class="z-[2] absolute m-2 bg-[var(--primary-dark)] w-[calc(100%-1rem)] p-3 rounded text-left" <div
:class="(inverted) ? 'dropdown-inverse' : 'dropdown'" v-if="opened"
v-if="opened"> ref="dropdown"
<slot /> class="z-[2] absolute m-2 bg-[var(--primary-dark)] w-[calc(100%-1rem)] p-3 rounded text-left"
</div> :class="(inverted) ? 'dropdown-inverse' : 'dropdown'"
</Transition> >
<slot />
</div>
</Transition>
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
props: ['opened', 'inverted'], props: {
} opened: Boolean,
inverted: Boolean,
},
};
</script> </script>
<style> <style>

410
components/EmojiPicker.vue Normal file → Executable file
View File

@@ -1,27 +1,31 @@
<script lang="ts"> <script lang="ts">
import emojiJson from '~/assets/json/emoji.json' import emojiJson from '~/assets/json/emoji.json';
export default { export default {
props: ['opened'], props: {
opened: Boolean,
},
emits: ['picked-emoji'],
data() { data() {
return { return {
emojis: emojiJson.filter((e) => e.has_img_twitter), emojis: emojiJson,
categories: [ categories: [
{ name: "people", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('smileys')).concat(emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('people'))) }, { name: 'people', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('smileys')).concat(emojiJson.filter((e) => e.category.toLowerCase().includes('people'))) },
{ name: "nature", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('nature')) }, { name: 'nature', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('nature')) },
{ name: "food", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('food')) }, { name: 'food', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('food')) },
{ name: "activities", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('activities')) }, { name: 'activities', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('activities')) },
{ name: "travel", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('travel')) }, { name: 'travel', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('travel')) },
{ name: "objects", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('objects')) }, { name: 'objects', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('objects')) },
{ name: "symbols", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('symbols')) }, { name: 'symbols', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('symbols')) },
{ name: "flags", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('flags')) } { name: 'flags', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('flags')) }
], ],
} };
}, },
methods: { methods: {
emojiStyles(emojiShortName: string, width: number) { emojiStyles(emojiShortName: string, width: number) {
const emojis = emojiJson.filter((e) => e.has_img_twitter) const emojis = emojiJson;
const emoji = emojis.find((e) => e.short_name === emojiShortName) const emoji = emojis.find((e) => e.short_names[0] === emojiShortName);
if (!emoji) return;
const sheet_x = (emoji.sheet_y * (width + 2)); const sheet_x = (emoji.sheet_y * (width + 2));
const sheet_y = (emoji.sheet_x * (width + 2)); const sheet_y = (emoji.sheet_x * (width + 2));
return { return {
@@ -31,169 +35,237 @@ export default {
display: 'inline-block', display: 'inline-block',
'background-position': `-${sheet_y + 1}px -${sheet_x + 1}px`, 'background-position': `-${sheet_y + 1}px -${sheet_x + 1}px`,
'background-size': '6480% 6480%' 'background-size': '6480% 6480%'
} };
}, },
scrollTo(categoryName: string) { scrollTo(categoryName: string) {
document.getElementById('emoji-pane').scrollTop = document.getElementById(categoryName).offsetTop - 92; const emojiPane = document.getElementById('emojiPane');
const category = document.getElementById(categoryName);
if (!emojiPane || !category) return;
emojiPane.scrollTop = category.offsetTop - 96;
} }
} }
} };
</script> </script>
<template> <template>
<div v-if="opened" <div>
class="rounded-lg shadow-md p-3 z-10 bg-[var(--primary-dark)]"> <div class="py-1.5 flex flex-col">
<div class="py-1.5 flex flex-col"> <div class="flex-row gap-x-2 overflow-x-scroll">
<div class="flex-row gap-x-2 overflow-x-scroll"> <button
<button @click="scrollTo('people')" class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"> @click="scrollTo('people')"
<svg xmlns="http://www.w3.org/2000/svg" >
width="24" <svg
height="24" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"> width="24"
<g fill="none" height="24"
stroke="currentColor" viewBox="0 0 24 24"
stroke-linecap="round" >
stroke-linejoin="round" <g
stroke-width="2"> fill="none"
<path d="M12 21a9 9 0 1 1 0-18a9 9 0 0 1 0 18z" /> stroke="currentColor"
<path d="M10 10c-.5-1-2.5-1-3 0m10 0c-.5-1-2.5-1-3 0m.5 5a3.5 3.5 0 0 1-5 0" /> stroke-linecap="round"
</g> stroke-linejoin="round"
</svg> stroke-width="2"
</button> >
<button @click="scrollTo('nature')" <path d="M12 21a9 9 0 1 1 0-18a9 9 0 0 1 0 18z" />
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"> <path d="M10 10c-.5-1-2.5-1-3 0m10 0c-.5-1-2.5-1-3 0m.5 5a3.5 3.5 0 0 1-5 0" />
<svg xmlns="http://www.w3.org/2000/svg" </g>
width="24" </svg>
height="24" </button>
viewBox="0 0 24 24"> <button
<path fill="none" class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
stroke="currentColor" @click="scrollTo('nature')"
stroke-linecap="round" >
stroke-linejoin="round" <svg
stroke-width="2" xmlns="http://www.w3.org/2000/svg"
d="m16 5l3 3l-2 1l4 4l-3 1l4 4h-9m2 3v-3m-7-5l-2-2m2 1l2-2M8 21V8m-2.176 7.995a3 3 0 0 1-2.743-3.69a2.998 2.998 0 0 1 .304-4.833A3 3 0 0 1 8 3.765a3 3 0 0 1 4.614 3.707a2.997 2.997 0 0 1 .305 4.833A3 3 0 0 1 10 16H6z" /> width="24"
</svg> height="24"
</button> viewBox="0 0 24 24"
<button @click="scrollTo('food')" >
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"> <path
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
width="24" stroke="currentColor"
height="24" stroke-linecap="round"
viewBox="0 0 24 24"> stroke-linejoin="round"
<path fill="none" stroke-width="2"
stroke="currentColor" d="m16 5l3 3l-2 1l4 4l-3 1l4 4h-9m2 3v-3m-7-5l-2-2m2 1l2-2M8 21V8m-2.176 7.995a3 3 0 0 1-2.743-3.69a2.998 2.998 0 0 1 .304-4.833A3 3 0 0 1 8 3.765a3 3 0 0 1 4.614 3.707a2.997 2.997 0 0 1 .305 4.833A3 3 0 0 1 10 16H6z"
stroke-linecap="round" />
stroke-linejoin="round" </svg>
stroke-width="2" </button>
d="M12 21.5V17m-4 0h8V7a4 4 0 1 0-8 0v10zm0-6.5L16 7m-8 7.5l8-3.5" /> <button
</svg> class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
</button> @click="scrollTo('food')"
<button @click="scrollTo('activities')" >
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"> <svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
height="24" height="24"
viewBox="0 0 24 24"> viewBox="0 0 24 24"
<g fill="none" >
stroke="currentColor" <path
stroke-linecap="round" fill="none"
stroke-linejoin="round" stroke="currentColor"
stroke-width="2"> stroke-linecap="round"
<path stroke-linejoin="round"
d="M12 5h3.5a5 5 0 0 1 0 10H10l-4.015 4.227a2.3 2.3 0 0 1-3.923-2.035l1.634-8.173A5 5 0 0 1 8.6 5H12z" /> stroke-width="2"
<path d="m14 15l4.07 4.284a2.3 2.3 0 0 0 3.925-2.023l-1.6-8.232M8 9v2m-1-1h2m5 0h2" /> d="M12 21.5V17m-4 0h8V7a4 4 0 1 0-8 0v10zm0-6.5L16 7m-8 7.5l8-3.5"
</g> />
</svg> </svg>
</button> </button>
<button @click="scrollTo('travel')" <button
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"> class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
<svg xmlns="http://www.w3.org/2000/svg" @click="scrollTo('activities')"
width="24" >
height="24" <svg
viewBox="0 0 24 24"> xmlns="http://www.w3.org/2000/svg"
<path fill="none" width="24"
stroke="currentColor" height="24"
stroke-linecap="round" viewBox="0 0 24 24"
stroke-linejoin="round" >
stroke-width="2" <g
d="m14.5 6.5l3-2.9a2.05 2.05 0 0 1 2.9 2.9l-2.9 3L20 17l-2.5 2.55L14 13l-3 3v3l-2 2l-1.5-4.5L3 15l2-2h3l3-3l-6.5-3.5L7 4l7.5 2.5z" /> fill="none"
</svg> stroke="currentColor"
</button> stroke-linecap="round"
<button @click="scrollTo('objects')" stroke-linejoin="round"
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"> stroke-width="2"
<svg xmlns="http://www.w3.org/2000/svg" >
width="24" <path
height="24" d="M12 5h3.5a5 5 0 0 1 0 10H10l-4.015 4.227a2.3 2.3 0 0 1-3.923-2.035l1.634-8.173A5 5 0 0 1 8.6 5H12z"
viewBox="0 0 24 24"> />
<g fill="none" <path d="m14 15l4.07 4.284a2.3 2.3 0 0 0 3.925-2.023l-1.6-8.232M8 9v2m-1-1h2m5 0h2" />
stroke="currentColor" </g>
stroke-linecap="round" </svg>
stroke-linejoin="round" </button>
stroke-width="2"> <button
<path class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
d="M3 14c.83.642 2.077 1.017 3.5 1c1.423.017 2.67-.358 3.5-1c.83-.642 2.077-1.017 3.5-1c1.423-.017 2.67.358 3.5 1M8 3a2.4 2.4 0 0 0-1 2a2.4 2.4 0 0 0 1 2m4-4a2.4 2.4 0 0 0-1 2a2.4 2.4 0 0 0 1 2" /> @click="scrollTo('travel')"
<path d="M3 10h14v5a6 6 0 0 1-6 6H9a6 6 0 0 1-6-6v-5z" /> >
<path d="M16.746 16.726a3 3 0 1 0 .252-5.555" /> <svg
</g> xmlns="http://www.w3.org/2000/svg"
</svg> width="24"
</button> height="24"
<button @click="scrollTo('symbols')" viewBox="0 0 24 24"
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"> >
<svg xmlns="http://www.w3.org/2000/svg" <path
width="24" fill="none"
height="24" stroke="currentColor"
viewBox="0 0 24 24"> stroke-linecap="round"
<g fill="none" stroke-linejoin="round"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" d="m14.5 6.5l3-2.9a2.05 2.05 0 0 1 2.9 2.9l-2.9 3L20 17l-2.5 2.55L14 13l-3 3v3l-2 2l-1.5-4.5L3 15l2-2h3l3-3l-6.5-3.5L7 4l7.5 2.5z"
stroke-linejoin="round" />
stroke-width="2"> </svg>
<circle cx="12" </button>
cy="12" <button
r="9" /> class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
<path d="M12 7v5l3 3" /> @click="scrollTo('objects')"
</g> >
</svg> <svg
</button> xmlns="http://www.w3.org/2000/svg"
<button @click="scrollTo('flags')" width="24"
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"> height="24"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
width="24" >
height="24" <g
viewBox="0 0 24 24"> fill="none"
<path fill="none" stroke="currentColor"
stroke="currentColor" stroke-linecap="round"
stroke-linecap="round" stroke-linejoin="round"
stroke-linejoin="round" stroke-width="2"
stroke-width="2" >
d="M5 5v16M19 5v9M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0M5 14a5 5 0 0 1 7 0a5 5 0 0 0 7 0" /> <path
</svg> d="M3 14c.83.642 2.077 1.017 3.5 1c1.423.017 2.67-.358 3.5-1c.83-.642 2.077-1.017 3.5-1c1.423-.017 2.67.358 3.5 1M8 3a2.4 2.4 0 0 0-1 2a2.4 2.4 0 0 0 1 2m4-4a2.4 2.4 0 0 0-1 2a2.4 2.4 0 0 0 1 2"
</button> />
</div> <path d="M3 10h14v5a6 6 0 0 1-6 6H9a6 6 0 0 1-6-6v-5z" />
</div> <path d="M16.746 16.726a3 3 0 1 0 .252-5.555" />
</g>
</svg>
</button>
<button
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
@click="scrollTo('symbols')"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<circle
cx="12"
cy="12"
r="9"
/>
<path d="M12 7v5l3 3" />
</g>
</svg>
</button>
<button
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
@click="scrollTo('flags')"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 5v16M19 5v9M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0M5 14a5 5 0 0 1 7 0a5 5 0 0 0 7 0"
/>
</svg>
</button>
</div>
</div>
<div class="max-w-[375px] max-h-[450px] overflow-hidden overflow-y-scroll scroll-smooth EmojiPicker" <div
id="emoji-pane"> id="emoji-pane"
<div class="text-black flex flex-col category bg-[var(--primary-dark)]" class="overflow-hidden overflow-y-scroll scroll-smooth EmojiPicker max-h-[450px]"
v-for="category in categories"> >
<h6 class="uppercase text-[var(--primary-text)] sticky top-0 bg-inherit z-10 py-1">{{ <div
category.name v-for="category in categories"
}}</h6> :key="category.name"
<div class="flex flex-wrap" class="text-black flex flex-col category bg-[var(--primary-dark)]"
:id="category.name"> >
<button v-for="emoji in category.emojis" <h6 class="uppercase text-[var(--primary-text)] sticky top-0 bg-inherit z-10 py-1">
class="p-2 rounded bg-inherit hover:backdrop-brightness-[1.45] h-12 transition-all emoji" {{
@click="$emit('pickedEmoji', emoji.short_name)" category.name
:aria-label='emoji.name.toLowerCase()'> }}
<span :style="emojiStyles(emoji.short_name, 32)" </h6>
draggable="false" <div
class="w-4" /> :id="category.name"
</button> class="flex flex-wrap"
</div> >
</div> <button
</div> v-for="emoji in category.emojis"
</div> :key="emoji.name.toLowerCase()"
:aria-label="emoji.name.toLowerCase()"
class="p-2 rounded bg-inherit hover:backdrop-brightness-[1.45] h-12 transition-all emoji"
@click="$emit('picked-emoji', emoji.short_names[0])"
>
<span
:style="emojiStyles(emoji.short_names[0], 32)"
draggable="false"
class="w-4"
/>
</button>
</div>
</div>
</div>
</div>
</template> </template>
<style> <style>

80
components/InviteCard.vue Normal file → Executable file
View File

@@ -1,54 +1,72 @@
<template> <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(--primary-500)] 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 <p class="text-sm font-semibold text-zinc-100">
server</p> You've been invited to join a
<span class="text-xl font-bold capitalize leading-loose">{{ invite.server.name }}</span> server
<div class="flex items-center"> </p>
<span <span class="text-xl font-bold capitalize leading-loose">{{ invite.server.name }}</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"></span> <div class="flex flex-row">
<span>{{ invite.server.participants.length }} Members</span> <div class="flex items-center mr-4">
</div> <span
<div class="flex w-full justify-end"> class="before:bg-[var(--invite-members)] before:h-2 before:w-2 before:inline-block before:my-auto before:rounded-full before:mr-1"
<button @click="joinServer(invite)" />
class="font-semibold rounded px-4 py-2 transition-colors" <span>{{ invite.server.participants.length }} Members</span>
:class="(userInServer) ? 'bg-green-800 cursor-not-allowed' : 'bg-green-700 hover:bg-green-600'"> </div>
<span v-if="userInServer"> <div class="flex items-center">
Joined <span
</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"
<span v-else> />
Join <span>{{ invite.server.participants.filter((e: IUser) => e.online === true).length }} Online</span>
</span> </div>
</button> </div>
</div> <div class="flex w-full justify-end">
</div> <button
class="font-semibold rounded px-4 py-2 transition-colors"
:class="(userInServer) ? 'bg-green-800 cursor-not-allowed' : 'bg-green-700 hover:bg-green-600'"
@click="joinServer(invite)"
>
<span v-if="userInServer">
Joined
</span>
<span v-else>
Join
</span>
</button>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { useGlobalStore } from '~/stores/store' import { useGlobalStore } from '~/stores/store';
import { IInviteCode, IUser } from '~/types' import { IInviteCode, IUser } from '~/types';
export default { export default {
props: ['invite'], props: {
invite: {
type: Object,
required: true
}
},
data() { data() {
return { return {
user: storeToRefs(useGlobalStore()).user, user: storeToRefs(useGlobalStore()).user,
servers: storeToRefs(useGlobalStore()).servers, servers: storeToRefs(useGlobalStore()).servers,
} };
}, },
computed: { computed: {
userInServer(): boolean { 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: { methods: {
async joinServer(invite: IInviteCode) { async joinServer(invite: IInviteCode) {
if (this.userInServer) return; if (this.userInServer) return;
const headers = useRequestHeaders(['cookie']) as Record<string, string>; const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const { server } = await $fetch('/api/guilds/joinGuild', { method: 'POST', body: { inviteId: invite.id }, headers }) const { server } = await $fetch('/api/guilds/joinGuild', { method: 'POST', body: { inviteId: invite.id }, headers });
if (!server) return; if (!server) return;
this.servers?.push(server) this.servers?.push(server);
this.invite.server.participants.push(this.user) this.invite.server.participants.push(this.user);
}, },
} }
} };
</script> </script>

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

@@ -1,119 +1,170 @@
<template> <template>
<div class="relative message-wrapper" <div
@mouseleave="overflowShown = false"> class="relative message-wrapper"
<div class="absolute right-0 mr-10 -top-[20px] h-fit opacity-0 pointer-events-none action-buttons z-[5]" @mouseleave="overflowShown = false"
:class="(emojiPickerOpen) ? 'opacity-100 pointer-events-auto' : ''"> >
<div :id="`actions-${message.id}`" <div
class="relative bg-[var(--primary-400)] rounded-md border border-[rgb(32,34,37)] text-[var(--primary-text)] flex overflow-hidden"> class="absolute right-0 mr-10 -top-[20px] h-fit opacity-0 pointer-events-none action-buttons z-[5]"
<button @click="openEmojiPicker()" :class="(emojiPickerOpen) ? 'opacity-100 pointer-events-auto' : ''"
class="p-1 hover:backdrop-brightness-125 transition-all flex w-fit h-fit"> >
<svg xmlns="http://www.w3.org/2000/svg" <div
width="20" :id="`actions-${message.id}`"
height="20" class="relative bg-[var(--primary-400)] rounded-md border border-[rgb(32,34,37)] text-[var(--primary-text)] flex overflow-hidden"
viewBox="0 0 24 24"> >
<path fill="none" <button
stroke="currentColor" class="p-1 hover:backdrop-brightness-125 transition-all flex w-fit h-fit"
stroke-linecap="round" @click="openEmojiPicker()"
stroke-linejoin="round" >
stroke-width="2" <svg
d="m13 19l-1 1l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 0 1 8.003 5.996M14 16h6m-3-3v6" /> xmlns="http://www.w3.org/2000/svg"
</svg> width="20"
</button> height="20"
<button v-if="!shiftPressed && !overflowShown" viewBox="0 0 24 24"
@click="overflowShown = true" >
class="p-1 hover:backdrop-brightness-125 transition-all flex w-fit h-fit"> <path
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
width="20" stroke="currentColor"
height="20" stroke-linecap="round"
viewBox="0 0 24 24"> stroke-linejoin="round"
<g fill="none" stroke-width="2"
stroke="currentColor" d="m13 19l-1 1l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 0 1 8.003 5.996M14 16h6m-3-3v6"
stroke-linecap="round" />
stroke-linejoin="round" </svg>
stroke-width="2"> </button>
<circle cx="5" <button
cy="12" v-if="!shiftPressed && !overflowShown"
r="1" /> class="p-1 hover:backdrop-brightness-125 transition-all flex w-fit h-fit"
<circle cx="12" @click="overflowShown = true"
cy="12" >
r="1" /> <svg
<circle cx="19" xmlns="http://www.w3.org/2000/svg"
cy="12" width="20"
r="1" /> height="20"
</g> viewBox="0 0 24 24"
</svg> >
</button> <g
<div v-if="shiftPressed || overflowShown" fill="none"
class="flex"> stroke="currentColor"
<button @click="copy(message.id)" stroke-linecap="round"
class="p-1 hover:backdrop-brightness-125 transition-all flex text-[var(--primary-400)] w-[28px] h-[28px] items-center justify-center"> stroke-linejoin="round"
<svg xmlns="http://www.w3.org/2000/svg" stroke-width="2"
class="bg-[var(--primary-text)] rounded" >
width="18" <circle
height="18" cx="5"
viewBox="0 0 24 24"> cy="12"
<path fill="currentColor" r="1"
d="M10 7v2H9v6h1v2H6v-2h1V9H6V7h4m6 0a2 2 0 0 1 2 2v6c0 1.11-.89 2-2 2h-4V7m4 2h-2v6h2V9Z" /> />
</svg> <circle
</button> cx="12"
<button v-if="message.creator.id === user.id" cy="12"
@click="deleteMessage()" r="1"
class="p-1 hover:backdrop-brightness-125 transition-all flex text-[var(--primary-danger)] w-[28px] h-[28px] items-center justify-center"> />
<svg xmlns="http://www.w3.org/2000/svg" <circle
width="20" cx="19"
height="20" cy="12"
viewBox="0 0 24 24"> r="1"
<path fill="none" />
stroke="currentColor" </g>
stroke-linecap="round" </svg>
stroke-linejoin="round" </button>
stroke-width="2" <div
d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" /> v-if="shiftPressed || overflowShown"
</svg> class="flex"
</button> >
</div> <button
</div> class="p-1 hover:backdrop-brightness-125 transition-all flex text-[var(--primary-400)] w-[28px] h-[28px] items-center justify-center"
</div> @click="copy(message.id)"
<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="classes"> <svg
<div class="message-content"> xmlns="http://www.w3.org/2000/svg"
<div class="message-sender-text"> class="bg-[var(--primary-text)] rounded"
<p class="mb-1 font-semibold w-fit" width="18"
v-if="showUsername"> height="18"
{{ message.creator.username }} viewBox="0 0 24 24"
</p> >
<p class="break-words max-w-full" <path
v-html="message.body"></p> fill="currentColor"
</div> d="M10 7v2H9v6h1v2H6v-2h1V9H6V7h4m6 0a2 2 0 0 1 2 2v6c0 1.11-.89 2-2 2h-4V7m4 2h-2v6h2V9Z"
<div v-for="invite in message.invites"> />
<InviteCard :invite="invite" /> </svg>
</div> </button>
<div class="flex gap-2 flex-wrap"> <button
<button @click="toggleReaction(reaction.emoji.name)" v-if="message.creator.id === user.id"
v-for="reaction in message.reactions" class="p-1 hover:backdrop-brightness-125 transition-all flex text-[var(--primary-danger)] w-[28px] h-[28px] items-center justify-center"
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]" @click="deleteMessage()"
:class="(reaction.users.find((e) => e.id === user.id)) ? '!border-[rgb(88,101,242)] hover:!border-[rgb(88,101,242)]' : ''"> >
<div class="flex items-center mr-0.5 w-6 drop-shadow"> <svg
<span :style="emojiStyles(reaction.emoji.name, 16)"></span> xmlns="http://www.w3.org/2000/svg"
</div> width="20"
<div class="relative overflow-hidden ml-1.5"> height="20"
<div class="min-w-[9px] h-6" viewBox="0 0 24 24"
:key="reaction.count"> >
<span class="dropshadow-sm">{{ reaction.count }}</span> <path
</div> fill="none"
</div> stroke="currentColor"
</button> stroke-linecap="round"
</div> stroke-linejoin="round"
</div> stroke-width="2"
</div> d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"
</div> />
</svg>
</button>
</div>
</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="classes"
>
<div class="message-content">
<div class="message-sender-text">
<p
v-if="showUsername"
class="mb-1 font-semibold w-fit"
>
{{ message.creator.username }}
</p>
<p
class="break-words max-w-full"
v-html="message.body"
/>
</div>
<div
v-for="invite in message.invites"
:key="invite.id"
>
<InviteCard :invite="invite" />
</div>
<div class="flex gap-2 flex-wrap">
<button
v-for="reaction in message.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)]' : ''"
@click="toggleReaction(reaction.emoji)"
>
<div class="flex items-center mr-0.5 w-6 drop-shadow">
<span :style="emojiStyles(reaction.emoji, 16)" />
</div>
<div class="relative overflow-hidden ml-1.5">
<div
:key="reaction.users.length"
class="min-w-[9px] h-6"
>
<span class="dropshadow-sm">{{ reaction.users.length }}</span>
</div>
</div>
</button>
</div>
</div>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { PropType } from 'vue'; import { PropType } from 'vue';
import { IEmojiPickerData, IMessage } from '~/types'; import { IPopupData, IMessage } from '~/types';
import { useGlobalStore } from '~/stores/store'; import { useGlobalStore } from '~/stores/store';
import { useClipboard } from '@vueuse/core'
import emojiJson from '~/assets/json/emoji.json'; import emojiJson from '~/assets/json/emoji.json';
export default { export default {
@@ -140,33 +191,26 @@ export default {
user: storeToRefs(useGlobalStore()).user, user: storeToRefs(useGlobalStore()).user,
emojiPickerOpen: false, emojiPickerOpen: false,
overflowShown: false overflowShown: false
} };
},
setup() {
const { text, copy, copied, isSupported } = useClipboard()
return {
copy
}
}, },
mounted() { mounted() {
const { $listen } = useNuxtApp() const { $listen } = useNuxtApp();
$listen('pickedEmoji', (emoji) => { $listen('pickedEmoji', (emoji) => {
if (useGlobalStore().emojiPickerData.openedBy.messageId !== this.message.id) return; if (useGlobalStore().emojiPickerData.openedBy?.messageId !== this.message.id) return;
const replacementEmoji = emojiJson.find((e) => e.short_name === emoji); const replacementEmoji = emojiJson.find((e) => e.short_names[0] === emoji);
if (!replacementEmoji?.emoji) return; if (!replacementEmoji?.emoji) return;
if (this.message.reactions?.find((e) => e.emoji.name === replacementEmoji.emoji)) return if (this.message.reactions?.find((e) => e.emoji === replacementEmoji.emoji)) return;
this.toggleReaction(replacementEmoji.emoji) this.toggleReaction(replacementEmoji.emoji);
}); });
}, },
methods: { methods: {
async toggleReaction(emoji: string) { async toggleReaction(emoji: string) {
const route = useRoute() 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/${route.params.id}/messages/${this.message.id}/reactions/${emoji}`, { method: 'POST' }) as { message: IMessage };
message.body = parseMessageBody(message.body, useGlobalStore().activeChannel) message.body = parseMessageBody(message.body, useGlobalStore().activeChannel);
useGlobalStore().updateMessage(this.message.id, message) useGlobalStore().updateMessage(this.message.id, message);
}, },
openEmojiPicker() { openEmojiPicker() {
const actionButtons = document.getElementById(`actions-${this.message.id}`); const actionButtons = document.getElementById(`actions-${this.message.id}`);
@@ -181,15 +225,15 @@ export default {
top, top,
right: actionButtons.clientWidth + 40, right: actionButtons.clientWidth + 40,
openedBy: { openedBy: {
type: "message", type: 'message',
messageId: this.message.id messageId: this.message.id
} }
} as IEmojiPickerData } as IPopupData;
useGlobalStore().toggleEmojiPicker(payload) useGlobalStore().toggleEmojiPicker(payload);
}, },
emojiStyles(emoji: string, width: number) { emojiStyles(emoji: string, width: number) {
const emojis = emojiJson.filter((e) => e.has_img_twitter) const emojis = emojiJson;
const twemoji = emojis.find((e) => e.emoji === emoji) const twemoji = emojis.find((e) => e.emoji === emoji);
if (twemoji === undefined || twemoji.sheet_x === undefined || twemoji.sheet_y === undefined) { if (twemoji === undefined || twemoji.sheet_x === undefined || twemoji.sheet_y === undefined) {
return {}; return {};
} }
@@ -197,19 +241,22 @@ export default {
const sheet_y = (twemoji.sheet_x * (32 + 2)) / 2; const sheet_y = (twemoji.sheet_x * (32 + 2)) / 2;
return { return {
background: 'url(/32.png)', background: 'url(/32.png)',
width: `${width + 1}px`, width: `${width}px`,
height: `${width + 1}px`, height: `${width}px`,
display: 'inline-block', display: 'inline-block',
'background-position': `-${sheet_y}px -${sheet_x}px`, 'background-position': `-${sheet_y}px -${sheet_x}px`,
'background-size': '1037px 1037px' 'background-size': '1037px 1037px'
} };
}, },
async deleteMessage() { async deleteMessage() {
const route = useRoute() const route = useRoute();
await $fetch(`/api/channels/${route.params.id}/messages/${this.message.id}/delete`, { method: "POST" }) await $fetch(`/api/channels/${route.params.id}/messages/${this.message.id}/delete`, { method: 'DELETE' });
}, },
copy(text: string) {
navigator.clipboard.writeText(text);
}
} }
} };
</script> </script>
<style> <style>

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

@@ -1,123 +1,173 @@
<template> <template>
<div class="h-full relative text-white bg-[var(--background-color)] grid grid-rows-[48px_1fr]" @mouseenter="mouseEnter" @mouseleave="mouseLeave"> <div
<div class="w-full px-4 py-3 z-[1]"> class="h-full relative text-white bg-[var(--background-color)] grid grid-rows-[48px_1fr]"
<div v-if="!server.DM" @mouseenter="mouseEnter"
class="flex items-center"> @mouseleave="mouseLeave"
<span class="mr-1"> >
<svg class="text-zinc-300/80 my-auto" <div class="w-full px-4 py-3 z-[1]">
xmlns="http://www.w3.org/2000/svg" <div
width="24" v-if="!server.DM"
height="24" class="flex items-center"
viewBox="0 0 24 24"> >
<path fill="currentColor" <span class="mr-1">
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
</svg> class="text-zinc-300/80 my-auto"
</span> xmlns="http://www.w3.org/2000/svg"
<span class="text-zinc-100 font-semibold">{{ server.name }}</span> width="24"
</div> height="24"
<div v-else viewBox="0 0 24 24"
class="flex items-center"> >
<span class="mr-1"> <path
<svg class="text-zinc-300/80 my-auto" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" 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"
width="24" />
height="24" </svg>
viewBox="0 0 24 24"> </span>
<g fill="none" <span class="text-zinc-100 font-semibold">{{ server.name }}</span>
stroke="currentColor" </div>
stroke-linecap="round" <div
stroke-linejoin="round" v-else
stroke-width="2"> class="flex items-center"
<circle cx="12" >
cy="12" <span class="mr-1">
r="4" /> <svg
<path d="M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-5.5 8.28" /> class="text-zinc-300/80 my-auto"
</g> xmlns="http://www.w3.org/2000/svg"
</svg> width="24"
</span> height="24"
<span class="text-zinc-100 font-semibold">{{ viewBox="0 0 24 24"
server.dmParticipants?.find((e: SafeUser) => e.id !== user.id)?.username >
}}</span> <g
</div> fill="none"
</div> stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<circle
cx="12"
cy="12"
r="4"
/>
<path d="M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-5.5 8.28" />
</g>
</svg>
</span>
<span class="text-zinc-100 font-semibold">{{
server.dmParticipants?.find((e: SafeUser) => e.id !== user.id)?.username
}}</span>
</div>
</div>
<section <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="bg-[var(--foreground-color)] mb-3 mx-1 h-[calc(100%-12px)] overflow-hidden rounded-lg relative grid grid-rows-[1fr_70px]"
<div class="h-full overflow-y-scroll" id="conversation-pane"> >
<div class="w-full pb-1 bg-inherit"> <div
<div> id="conversation-pane"
<div v-if="server.messages.length === 0"> class="h-full overflow-y-scroll"
<p>No messages yet</p> >
</div> <div class="w-full pb-1 bg-inherit">
<Message v-else <div>
v-for="(message, i) in server.messages" <div v-if="server.messages.length === 0">
:message="message" <p>No messages yet</p>
:shiftPressed="shiftPressed" </div>
:showUsername="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id" <Message
:classes="calculateMessageClasses(message, i)" /> v-for="(message, i) in server.messages"
</div> v-else
</div> :key="message.id"
<div v-if="showSearch" :message="message"
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"> :shift-pressed="shiftPressed"
<div class="relative flex flex-col"> :show-username="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id"
<div v-for="user in searchResults" :classes="calculateMessageClasses(message, i)"
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(user)"> </div>
{{ user.username }} </div>
</div> <div
</div> v-if="showSearch"
</div> 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"
</div> >
<div class="relative flex flex-col">
<div
v-for="resultingUser in searchResults"
: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)"
>
{{ resultingUser.username }}
</div>
</div>
</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 mb-1">
<form @keyup="checkForMentions" <form
@keypress="typing($event)" class="relative px-4 w-full pt-1.5 h-fit pb-1"
@submit.prevent="sendMessage" @keyup="checkForMentions"
@keydown.enter.exact.prevent="sendMessage" @keypress="typing($event)"
class="relative px-4 w-full pt-1.5 h-fit pb-1"> @submit.prevent="sendMessage"
<div id="textbox" @keydown.enter.exact.prevent="sendMessage"
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"> >
<textarea type="text" <div
id="messageBox" id="textbox"
class="bg-transparent focus:outline-none py-2 w-full resize-none leading-relaxed h-[44px]" 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"
cols="1" >
v-model="messageContent" <textarea
placeholder="Send a Message..." /> id="messageBox"
<input type="submit" v-model="messageContent"
class="absolute -top-full -left-full invisible" maxlength="5000"
id="submit"> type="text"
<label for="submit" class="bg-transparent focus:outline-none py-2 w-full resize-none leading-relaxed h-[44px]"
class="py-1 px-1.5 h-fit my-auto cursor-pointer" cols="1"
role="button"><svg width="32" placeholder="Send a Message..."
height="26" />
viewBox="0 0 24 24"> <input
<path fill="none" id="submit"
stroke="currentColor" type="submit"
stroke-linecap="round" class="absolute -top-full -left-full invisible"
stroke-linejoin="round" >
stroke-width="2" <label
d="M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1L21 3" /> for="submit"
</svg></label> class="py-1 px-1.5 h-fit my-auto cursor-pointer"
</div> role="button"
<div class="w-full h-4"> ><svg
<p class="text-sm" width="32"
v-if="usersTyping.length > 0"> height="26"
<span v-if="usersTyping.length < 4"> viewBox="0 0 24 24"
<span v-for="(username, i) in usersTyping" >
class="font-semibold"> <path
<span v-if="i === usersTyping.length - 1 && usersTyping.length > 1">and </span> fill="none"
{{ username }} stroke="currentColor"
<span v-if="i !== usersTyping.length - 1 && usersTyping.length > 1">, </span> stroke-linecap="round"
</span> stroke-linejoin="round"
is typing stroke-width="2"
</span> d="M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1L21 3"
<span v-else>Several users are typing</span> />
</p> </svg></label>
</div> </div>
</form> <div class="w-full h-4">
</div> <p
</section> v-if="usersTyping.length > 0"
</div> class="text-sm"
>
<span v-if="usersTyping.length < 4">
<span
v-for="(username, i) in usersTyping"
:key="username"
class="font-semibold"
>
<span v-if="i === usersTyping.length - 1 && usersTyping.length > 1">and </span>
{{ username }}
<span v-if="i !== usersTyping.length - 1 && usersTyping.length > 1">, </span>
</span>
is typing
</span>
<span v-else>Several users are typing</span>
</p>
</div>
</form>
</div>
</section>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -139,42 +189,42 @@ export default {
showSearch: false, showSearch: false,
searchResults: [] as SafeUser[], searchResults: [] as SafeUser[],
search: '', search: '',
} };
}, },
mounted() { mounted() {
if (!this.user) throw new Error('User not found, but sessionToken cookie is set') if (!this.user) throw new Error('User not found, but sessionToken cookie is set');
Notification.requestPermission().then((result) => { Notification.requestPermission().then((result) => {
const permission = (result === 'granted') ? true : false const permission = (result === 'granted') ? true : false;
this.canSendNotifications = permission this.canSendNotifications = permission;
}); });
const conversationDiv = document.getElementById('conversation-pane'); const conversationDiv = document.getElementById('conversation-pane');
if (!conversationDiv) throw new Error('conversation div not found') if (!conversationDiv) throw new Error('conversation div not found');
this.scrollToBottom() this.scrollToBottom();
this.listenToWebsocket(conversationDiv) this.listenToWebsocket(conversationDiv);
}, },
methods: { methods: {
async sendMessage() { async sendMessage() {
const headers = useRequestHeaders(['cookie']) as Record<string, string>; const headers = useRequestHeaders(['cookie']) as Record<string, string>;
if (!this.messageContent) return; if (!this.messageContent) return;
let message: IMessage = await $fetch(`/api/channels/sendMessage`, { method: 'post', body: { body: this.messageContent, channelId: this.server.id }, headers }) let message: IMessage = await $fetch(`/api/channels/${this.server.id}/sendMessage`, { method: 'post', body: { body: this.messageContent }, headers });
if (!message) return; if (!message) return;
if (this.server.messages.includes(message)) return; if (this.server.messages.includes(message)) return;
message.body = parseMessageBody(message.body, useGlobalStore().activeChannel) message.body = parseMessageBody(message.body, useGlobalStore().activeChannel);
this.server.messages.push(message) this.server.messages.push(message);
this.messageContent = ''; this.messageContent = '';
const conversationDiv = document.getElementById('conversation-pane'); const conversationDiv = document.getElementById('conversation-pane');
if (!conversationDiv) throw new Error('wtf'); if (!conversationDiv) throw new Error('wtf');
setTimeout(() => { setTimeout(() => {
conversationDiv.scrollTop = conversationDiv.scrollHeight; conversationDiv.scrollTop = conversationDiv.scrollHeight;
}) });
}, },
scrollToBottom() { scrollToBottom() {
const conversationDiv = document.getElementById('conversation-pane'); const conversationDiv = document.getElementById('conversation-pane');
@@ -183,38 +233,38 @@ export default {
}, },
typing(event: KeyboardEvent) { typing(event: KeyboardEvent) {
const specialKeys = [ const specialKeys = [
"Backspace", 'Backspace',
"Enter", 'Enter',
"Shift", 'Shift',
"Control" 'Control'
] ];
if (specialKeys.indexOf(event.key) !== -1) { if (specialKeys.indexOf(event.key) !== -1) {
return return;
} }
if (event.ctrlKey) { if (event.ctrlKey) {
return return;
} }
this.socket.emit(`typing`, this.server.id); this.socket.emit('typing', this.server.id);
}, },
mouseEnter() { mouseEnter() {
document.body.addEventListener('keydown', this.keyPressed, false); document.body.addEventListener('keydown', this.keyPressed, false);
document.body.addEventListener('keyup', this.keyUnpressed, false); document.body.addEventListener('keyup', this.keyUnpressed, false);
}, },
mouseLeave() { mouseLeave() {
this.shiftPressed = false this.shiftPressed = false;
document.body.removeEventListener('keydown', this.keyPressed, false) document.body.removeEventListener('keydown', this.keyPressed, false);
document.body.removeEventListener('keyup', this.keyUnpressed, false) document.body.removeEventListener('keyup', this.keyUnpressed, false);
}, },
keyPressed(ev: KeyboardEvent) { keyPressed(ev: KeyboardEvent) {
if (ev.key === 'Shift') { if (ev.key === 'Shift') {
this.shiftPressed = true this.shiftPressed = true;
} }
}, },
keyUnpressed(ev: KeyboardEvent) { keyUnpressed(ev: KeyboardEvent) {
if (ev.key === 'Shift') { if (ev.key === 'Shift') {
this.shiftPressed = false this.shiftPressed = false;
} }
}, },
calculateMessageClasses(message: IMessage, i: number) { calculateMessageClasses(message: IMessage, i: number) {
@@ -238,81 +288,81 @@ export default {
const endPosition = input.selectionEnd; const endPosition = input.selectionEnd;
if (startPosition === endPosition && this.inMention(startPosition)) { if (startPosition === endPosition && this.inMention(startPosition)) {
let participants let participants;
if (this.server.DM) { if (this.server.DM) {
participants = this.server.dmParticipants participants = this.server.dmParticipants;
} else { } else {
participants = this.server.server.participants participants = this.server.server.participants;
} }
if (!participants) throw new Error(`participants in channel "${this.server.id}" not found"`) 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); const search = this.messageContent.split(' ')[this.messageContent.substring(0, startPosition).split(' ').length - 1]?.slice(1);
if (!search) return if (!search) return;
this.search = search; this.search = search;
if (this.search.length === 0) { if (this.search.length === 0) {
this.showSearch = false this.showSearch = false;
return; return;
} }
const maxResults = Math.floor(document.body.clientHeight / 48 + 8) - 6 const maxResults = Math.floor(document.body.clientHeight / 48 + 8) - 6;
let results = participants.filter((e: SafeUser) => e.username.includes(this.search)) let results = participants.filter((e: SafeUser) => e.username.includes(this.search));
results.sort((a: SafeUser, b: SafeUser) => { results.sort((a: SafeUser, b: SafeUser) => {
const usernameA = a.username.toLowerCase(); const usernameA = a.username.toLowerCase();
const usernameB = b.username.toLowerCase(); const usernameB = b.username.toLowerCase();
if (usernameA < usernameB) { if (usernameA < usernameB) {
return -1 return -1;
} else if (usernameA > usernameB) { } else if (usernameA > usernameB) {
return 1 return 1;
} else { } else {
return 0 return 0;
} }
}) });
if (results.length > maxResults) { if (results.length > maxResults) {
results.length = maxResults results.length = maxResults;
} }
if (results.length === 0) { if (results.length === 0) {
this.showSearch = false; this.showSearch = false;
return; return;
} }
this.searchResults = results this.searchResults = results;
this.showSearch = true; this.showSearch = true;
} else { } else {
this.showSearch = false this.showSearch = false;
} }
}, },
inMention(cursorPos: number): boolean { inMention(cursorPos: number): boolean {
if (this.messageContent[cursorPos - 1] === '@') return true; if (this.messageContent[cursorPos - 1] === '@') return true;
if (this.messageContent[cursorPos - 1] === ' ') return false; if (this.messageContent[cursorPos - 1] === ' ') return false;
if (cursorPos === 0) return false; if (cursorPos === 0) return false;
return this.inMention(cursorPos - 1) return this.inMention(cursorPos - 1);
}, },
completeMention(user: SafeUser) { completeMention(user: SafeUser) {
this.messageContent = this.messageContent.replace('@' + this.search, `<@${user.id}>`) this.messageContent = this.messageContent.replace('@' + this.search, `<@${user.id}>`);
this.showSearch = false; this.showSearch = false;
document.getElementById('messageBox')?.focus() document.getElementById('messageBox')?.focus();
}, },
listenToWebsocket(conversationDiv: HTMLElement) { listenToWebsocket(conversationDiv: HTMLElement) {
this.socket.removeAllListeners(); this.socket.removeAllListeners();
this.socket.on(`message-${this.server.id}`, (ev: { message: IMessage, deleted?: boolean }) => { this.socket.on(`message-${this.server.id}`, (ev: { message: IMessage, deleted?: boolean }) => {
let { message, deleted } = ev let { message, deleted } = ev;
if (deleted) { if (deleted) {
useGlobalStore().removeMessage(message.id) useGlobalStore().removeMessage(message.id);
return; return;
} }
message.body = parseMessageBody(message.body, useGlobalStore().activeChannel) message.body = parseMessageBody(message.body, useGlobalStore().activeChannel);
if (this.server.messages.find((e) => e.id === message.id)) { if (this.server.messages.find((e) => e.id === message.id)) {
// message is already in the server, replace it with the updated message // message is already in the server, replace it with the updated message
useGlobalStore().updateMessage(message.id, message) useGlobalStore().updateMessage(message.id, message);
return; return;
} }
@@ -323,27 +373,27 @@ export default {
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.server.id.toString() });
} }
this.server.messages.push(message) this.server.messages.push(message);
const lastElementChild = conversationDiv.children[0]?.lastElementChild const lastElementChild = conversationDiv.children[0]?.lastElementChild;
if (!lastElementChild) return; if (!lastElementChild) return;
setTimeout(() => { setTimeout(() => {
if (conversationDiv.scrollTop + 20 < (conversationDiv.scrollHeight - conversationDiv.clientHeight) - lastElementChild.clientHeight) return; if (conversationDiv.scrollTop + 20 < (conversationDiv.scrollHeight - conversationDiv.clientHeight) - lastElementChild.clientHeight) return;
conversationDiv.scrollTop = conversationDiv.scrollHeight; conversationDiv.scrollTop = conversationDiv.scrollHeight;
}) });
}); });
let timeout: NodeJS.Timeout; let timeout: NodeJS.Timeout;
this.socket.on(`typing-${this.server.id}`, (ev: string) => { this.socket.on(`typing-${this.server.id}`, (ev: string) => {
if (ev === this.user.username) return; if (ev === this.user.username) return;
clearTimeout(timeout) clearTimeout(timeout);
timeout = setTimeout(() => { timeout = setTimeout(() => {
this.usersTyping = this.usersTyping.filter(username => username !== ev) this.usersTyping = this.usersTyping.filter(username => username !== ev);
}, 750); }, 750);
if (this.usersTyping.includes(ev)) return; if (this.usersTyping.includes(ev)) return;
this.usersTyping.push(ev); this.usersTyping.push(ev);
}) });
}, },
// resizeTextarea() { // resizeTextarea() {
// const textArea = document.getElementById('messageBox') // const textArea = document.getElementById('messageBox')
@@ -357,5 +407,5 @@ export default {
// console.log('a') // console.log('a')
// } // }
}, },
} };
</script> </script>

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

@@ -1,130 +1,177 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<template> <template>
<nav <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"> class="p-4 bg-[var(--background-color)] grid grid-cols-1 grid-rows-[56px_1fr_56px] h-screen min-w-[88px] text-white relative"
<div> >
<nuxt-link to="/channel/@me"> <div>
<button <nuxt-link to="/channel/@me">
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-[var(--primary-200)] duration-300"> <button
<span> 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"
<svg width="32" :class="(serverType === 'dms') ? '!rounded-[1.375rem]' : ''"
height="32" >
viewBox="0 0 24 24"> <span>
<defs> <svg
<linearGradient id="fire" width="32"
x1="-2.778%" height="32"
x2="100%" viewBox="0 0 24 24"
y1="24%" >
y2="48%"> <defs>
<stop offset="0%" <linearGradient
stop-color="#ff0c41" /> id="fire"
<stop offset="100%" x1="-2.778%"
stop-color="#ff6b0c" /> x2="100%"
</linearGradient> y1="24%"
</defs> y2="48%"
<path fill="none" >
stroke="url(#fire)" <stop
stroke-linecap="round" offset="0%"
stroke-linejoin="round" stop-color="#ff0c41"
stroke-width="2" />
d="M12 12c2-2.96 0-7-1-8c0 3.038-1.773 4.741-3 6c-1.226 1.26-2 3.24-2 5a6 6 0 1 0 12 0c0-1.532-1.056-3.94-2-5c-1.786 3-2.791 3-4 2z" /> <stop
</svg> offset="100%"
</span> stop-color="#ff6b0c"
</button> />
</nuxt-link> </linearGradient>
</div> </defs>
<div class="overflow-y-scroll my-2 flex gap-y-2 flex-col"> <path
<div class="w-full flex justify-center"> fill="none"
<hr class="border-2 rounded-md border-[var(--primary-300)] w-8/12 my-0.5" /> stroke="url(#fire)"
</div> stroke-linecap="round"
<nuxt-link v-for="server in servers" stroke-linejoin="round"
:to="'/channel/' + server.channels[0]?.id"> stroke-width="2"
<button :key="server.id" d="M12 12c2-2.96 0-7-1-8c0 3.038-1.773 4.741-3 6c-1.226 1.26-2 3.24-2 5a6 6 0 1 0 12 0c0-1.532-1.056-3.94-2-5c-1.786 3-2.791 3-4 2z"
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-[var(--primary-200)] duration-300 h-[56px] w-[56px]"> />
<svg width="32" </svg>
height="32" </span>
viewBox="0 0 256 154"> </button>
<defs> </nuxt-link>
<linearGradient id="svgIDa" </div>
x1="-2.778%" <div class="overflow-y-scroll my-2 flex gap-y-2 flex-col">
x2="100%" <div class="w-full flex justify-center">
y1="32%" <hr class="border-2 rounded-md border-[var(--primary-300)] w-8/12 my-0.5">
y2="67.556%"> </div>
<stop offset="0%" <nuxt-link
stop-color="#2298BD" /> v-for="server in servers"
<stop offset="100%" :key="server.id"
stop-color="#0ED7B5" /> :to="'/channel/' + server.channels[0]?.id"
</linearGradient> >
</defs> <button
<path fill="url(#svgIDa)" :key="server.id"
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" /> 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]"
</svg> :class="(activeServer.id === server.id) ? '!rounded-[1.375rem]' : ''"
</button> >
</nuxt-link> <svg
</div> width="32"
<div> height="32"
<button @click="createServerModelOpen = true" viewBox="0 0 256 154"
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-[var(--primary-200)] duration-300 text-[var(--primary-accent)] cursor-pointer"> >
<svg width="32" <defs>
height="32" <linearGradient
viewBox="0 0 24 24"> id="svgIDa"
<path fill="none" x1="-2.778%"
stroke="currentColor" x2="100%"
stroke-linecap="round" y1="32%"
stroke-linejoin="round" y2="67.556%"
stroke-width="2" >
d="M12 5v14m-7-7h14" /> <stop
</svg> offset="0%"
</button> stop-color="#2298BD"
</div> />
</nav> <stop
offset="100%"
<div v-if="createServerModelOpen" stop-color="#0ED7B5"
class="absolute z-10 top-0 bottom-0 left-0 right-0"> />
<div </linearGradient>
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"> </defs>
<h2 class="font-semibold text-xl"> <path
Create a server: fill="url(#svgIDa)"
</h2> 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"
<div> />
<form @submit.prevent="createServer" </svg>
class="w-3/5"> </button>
<input v-model="serverName" </nuxt-link>
type="text" </div>
class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md placeholder:text-[var(--primary-placeholder)]" <div>
placeholder="Server name" /> <button
<input type="submit" 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"
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md" /> @click="createServerModelOpen = true"
</form> >
</div> <svg
</div> width="32"
<div class="bg-black/70 w-screen h-screen" height="32"
@click="createServerModelOpen = false"> viewBox="0 0 24 24"
</div> >
</div> <path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 5v14m-7-7h14"
/>
</svg>
</button>
</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"
>
<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>
</template> </template>
<script lang="ts"> <script lang="ts">
import { useGlobalStore } from '~/stores/store' import { useGlobalStore } from '~/stores/store';
import { IServer } from '~/types'; import { IServer } from '~/types';
export default { export default {
data() { data() {
return { return {
servers: storeToRefs(useGlobalStore()).servers, servers: storeToRefs(useGlobalStore()).servers,
serverType: storeToRefs(useGlobalStore()).activeServerType,
activeServer: storeToRefs(useGlobalStore()).activeServer,
createServerModelOpen: false, createServerModelOpen: false,
serverName: '' serverName: ''
} };
}, },
methods: { methods: {
async createServer() { async createServer() {
const globalStore = useGlobalStore(); const globalStore = useGlobalStore();
const headers = useRequestHeaders(['cookie']) as Record<string, string>; const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const server: IServer = await $fetch('/api/channels/create', { method: 'post', body: { serverName: this.serverName }, headers }) const server: IServer = await $fetch('/api/channels/create', { method: 'post', body: { serverName: this.serverName }, headers });
this.createServerModelOpen = false; this.createServerModelOpen = false;
this.serverName = ''; this.serverName = '';
globalStore.addServer(server) globalStore.addServer(server);
}, },
}, },
} };
</script> </script>

25
components/Popup.vue Executable file
View File

@@ -0,0 +1,25 @@
<template>
<div
v-if="opened"
class="z-10 bg-[var(--primary-dark)] w-fit rounded-md shadow-md p-3"
>
<div class="max-w-[350px] max-h-[450px] overflow-hidden">
<EmojiPicker
v-if="openedBy === 'emojiPicker'"
@picked-emoji="$emit('picked-emoji', $event)"
/>
</div>
</div>
</template>
<script>
export default {
props: {
openedBy: {
type: String,
required: true
},
opened: Boolean
}
};
</script>

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

@@ -1,247 +1,328 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<template> <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(--background-color)] min-w-60 w-60 h-screen shadow-sm text-white select-none relative z-[2]">
<div v-if="serverType === 'dms' || !server" <div
class="h-full grid grid-rows-[48px_1fr] w-full"> v-if="serverType === 'dms' || !server"
<section> class="h-full grid grid-rows-[48px_1fr] w-full"
<h4 @click="serverDropdownOpen = !serverDropdownOpen" >
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"> <section>
<span>Direct messages</span> <h4
</h4> class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center p-1 bg-inherit transition-all"
</section> >
<span>Direct messages</span>
</h4>
</section>
<div <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)] mb-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg"
<div class="h-fit"> >
<nuxt-link v-for="dm in dms" <div class="h-fit">
:to="'/channel/@me/' + dm.id"> <nuxt-link
<div v-for="dm in dms"
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"> :key="dm.id"
{{ dm.dmParticipants?.find((e) => e.id !== user.id)?.username }} :to="'/channel/@me/' + dm.id"
</div> >
</nuxt-link> <div
</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"
</div> >
</div> {{ dm.dmParticipants?.find((e) => e.id !== user.id)?.username }}
<div v-else </div>
class="w-full h-full max-h-screen grid grid-rows-[48px_1fr]"> </nuxt-link>
<section> </div>
<h4 @click="serverDropdownOpen = !serverDropdownOpen" </div>
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" </div>
:class="(!serverDropdownOpen) ? 'hover:backdrop-brightness-125' : 'backdrop-brightness-125'"> <div
<span>{{ server.name }}</span> v-else
<button> class="w-full h-full max-h-screen grid grid-rows-[48px_1fr]"
<span v-if="!serverDropdownOpen" >
class="h-fit w-[20px]"> <section>
<svg xmlns="http://www.w3.org/2000/svg" <h4
width="20" 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"
height="20" :class="(!serverDropdownOpen) ? 'hover:backdrop-brightness-125' : 'backdrop-brightness-125'"
viewBox="0 0 24 24"> @click="serverDropdownOpen = !serverDropdownOpen"
<path fill="none" >
stroke="currentColor" <span>{{ server.name }}</span>
stroke-linecap="round" <button>
stroke-linejoin="round" <span
stroke-width="2" v-if="!serverDropdownOpen"
d="m6 9l6 6l6-6" /> class="h-fit w-[20px]"
</svg> >
</span> <svg
<span class="h-fit w-[20px]" xmlns="http://www.w3.org/2000/svg"
v-else> width="20"
<svg xmlns="http://www.w3.org/2000/svg" height="20"
width="20" viewBox="0 0 24 24"
height="20" >
viewBox="0 0 24 24"> <path
<path fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2" stroke-width="2"
d="M18 6L6 18M6 6l12 12" /> d="m6 9l6 6l6-6"
</svg> />
</span> </svg>
</button> </span>
</h4> <span
<div> v-else
<DropdownMenu :opened="serverDropdownOpen"> class="h-fit w-[20px]"
<div> >
<ul class="flex flex-col gap-y-1"> <svg
<DropdownItem v-if="userIsOwner || userIsAdmin" xmlns="http://www.w3.org/2000/svg"
@click="createInvite"> width="20"
<span> height="20"
Invite a friend viewBox="0 0 24 24"
</span> >
<span class="h-fit"> <path
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
width="20" stroke="currentColor"
height="20" stroke-linecap="round"
viewBox="0 0 24 24"> stroke-linejoin="round"
<g fill="none" stroke-width="2"
stroke="currentColor" d="M18 6L6 18M6 6l12 12"
stroke-linecap="round" />
stroke-linejoin="round" </svg>
stroke-width="2"> </span>
<circle cx="9" </button>
cy="7" </h4>
r="4" /> <div>
<path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-10h6m-3-3v6" /> <DropdownMenu :opened="serverDropdownOpen">
</g> <div>
</svg> <ul class="flex flex-col gap-y-1">
</span> <DropdownItem
</DropdownItem> v-if="userIsOwner || userIsAdmin"
</ul> @click="createInvite"
</div> >
</DropdownMenu> <span>
</div> Invite a friend
</section> </span>
<span class="h-fit">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<circle
cx="9"
cy="7"
r="4"
/>
<path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-10h6m-3-3v6" />
</g>
</svg>
</span>
</DropdownItem>
</ul>
</div>
</DropdownMenu>
</div>
</section>
<div <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)] mb-3 mx-1 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 <div class="flex gap-y-1.5 px-1.5 mt-2 flex-col overflow-x-scroll">
class="flex text-center bg-inherit hover:backdrop-brightness-[1.35] px-2 py-1.5 w-full transition-all rounded drop-shadow-sm gap-1/5 cursor-pointer items-center" <button
v-for="channel in server.channels" v-for="channel in server.channels"
@click="openChannel(channel.id)" :key="channel.id"
:key="channel.id"> class="flex text-center bg-inherit hover:backdrop-brightness-[1.35] px-2 py-1.5 w-full transition-all rounded drop-shadow-sm gap-1/5 cursor-pointer items-center"
<span class="h-fit"> @click="openChannel(channel.id)"
<svg class="text-zinc-300/80 my-auto" >
xmlns="http://www.w3.org/2000/svg" <span class="h-fit">
width="20" <svg
height="20" class="text-zinc-300/80 my-auto"
viewBox="0 0 24 24"> xmlns="http://www.w3.org/2000/svg"
<path fill="currentColor" width="20"
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" /> height="20"
</svg> viewBox="0 0 24 24"
</span> >
<span>{{ channel.name }}</span> <path
</button> fill="currentColor"
<button v-if="userIsOwner || userIsAdmin" 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"
@click="openCreateChannelModel" />
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"> </svg>
<span> </span>
<svg class="text-zinc-300/80 my-auto" <span>{{ channel.name }}</span>
xmlns="http://www.w3.org/2000/svg" </button>
width="20" <button
height="20" v-if="userIsOwner || userIsAdmin"
viewBox="0 0 24 24"> 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"
<path fill="none" @click="openCreateChannelModel"
stroke="currentColor" >
stroke-linecap="round" <span>
stroke-linejoin="round" <svg
stroke-width="2" class="text-zinc-300/80 my-auto"
d="M12 5v14m-7-7h14" /> xmlns="http://www.w3.org/2000/svg"
</svg> width="20"
</span> height="20"
<span>Add channel</span> viewBox="0 0 24 24"
</button> >
</div> <path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 5v14m-7-7h14"
/>
</svg>
</span>
<span>Add channel</span>
</button>
</div>
<div class="relative bottom-0"> <div class="relative bottom-0">
<DropdownMenu class="bottom-full" <DropdownMenu
:inverted="true" class="bottom-full"
:opened="userDropdownOpen"> :inverted="true"
<div> :opened="userDropdownOpen"
<ul class="flex flex-col gap-y-1"> >
<DropdownItem v-if="userIsOwner || userIsAdmin" <div>
@click="createInvite"> <ul class="flex flex-col gap-y-1">
<span> <DropdownItem
Invite a friend v-if="userIsOwner || userIsAdmin"
</span> @click="createInvite"
<span class="mr-1.5 h-fit"> >
<svg xmlns="http://www.w3.org/2000/svg" <span>
width="20" Invite a friend
height="20" </span>
viewBox="0 0 24 24"> <span class="mr-1.5 h-fit">
<g fill="none" <svg
stroke="currentColor" xmlns="http://www.w3.org/2000/svg"
stroke-linecap="round" width="20"
stroke-linejoin="round" height="20"
stroke-width="2"> viewBox="0 0 24 24"
<circle cx="9" >
cy="7" <g
r="4" /> fill="none"
<path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-10h6m-3-3v6" /> stroke="currentColor"
</g> stroke-linecap="round"
</svg> stroke-linejoin="round"
</span> stroke-width="2"
</DropdownItem> >
<DropdownItem @click="logout" <circle
danger="true"> cx="9"
<span> cy="7"
Logout r="4"
</span> />
<span class="mr-1.5 h-fit"> <path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-10h6m-3-3v6" />
<svg xmlns="http://www.w3.org/2000/svg" </g>
width="20" </svg>
height="20" </span>
viewBox="0 0 24 24"> </DropdownItem>
<g fill="none" <DropdownItem
stroke="currentColor" danger="true"
stroke-linecap="round" @click="logout"
stroke-linejoin="round" >
stroke-width="2"> <span>
<path Logout
d="M14 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2" /> </span>
<path d="M7 12h14l-3-3m0 6l3-3" /> <span class="mr-1.5 h-fit">
</g> <svg
</svg> xmlns="http://www.w3.org/2000/svg"
</span> width="20"
</DropdownItem> height="20"
</ul> viewBox="0 0 24 24"
</div> >
</DropdownMenu> <g
<div class="h-full p-3"> fill="none"
<div class="grid grid-cols-[32px_1fr_32px] gap-x-2 items-center"> stroke="currentColor"
<span class="bg-[hsl(220,calc(1*6.8%),22.6%)] w-[32px] h-[32px] rounded-full"></span> stroke-linecap="round"
<span class="h-fit w-fit overflow-ellipsis">{{ user.username }}</span> stroke-linejoin="round"
<button @click="userDropdownOpen = !userDropdownOpen" stroke-width="2"
class="text-zinc-300 hover:backdrop-brightness-90 p-1 rounded-md transition-all"> >
<svg xmlns="http://www.w3.org/2000/svg" <path
width="24" d="M14 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2"
height="24" />
viewBox="0 0 24 24"> <path d="M7 12h14l-3-3m0 6l3-3" />
<g fill="none" </g>
stroke="currentColor" </svg>
stroke-linecap="round" </span>
stroke-linejoin="round" </DropdownItem>
stroke-width="2"> </ul>
<path </div>
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065z" /> </DropdownMenu>
<circle cx="12" <div class="h-full p-3">
cy="12" <div class="grid grid-cols-[32px_1fr_32px] gap-x-2 items-center">
r="3" /> <span class="bg-[hsl(220,calc(1*6.8%),22.6%)] w-[32px] h-[32px] rounded-full" />
</g> <span class="h-fit w-fit overflow-ellipsis">{{ user.username }}</span>
</svg> <button
</button> class="text-zinc-300 hover:backdrop-brightness-90 p-1 rounded-md transition-all"
</div> @click="userDropdownOpen = !userDropdownOpen"
</div> >
</div> <svg
</div> xmlns="http://www.w3.org/2000/svg"
</div> width="24"
</aside> height="24"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065z"
/>
<circle
cx="12"
cy="12"
r="3"
/>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</aside>
<div v-if="createChannelModelOpen" <div
class="absolute z-10 top-0 bottom-0 left-0 right-0"> v-if="createChannelModelOpen"
<div class="bg-black/70 w-screen h-screen" class="absolute z-10 top-0 bottom-0 left-0 right-0"
@click="createChannelModelOpen = false"> >
</div> <div
<div class="bg-black/70 w-screen h-screen"
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"> @click="createChannelModelOpen = false"
<h2 class="font-semibold text-xl"> />
Create a channel: <div
</h2> 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"
<div> >
<form @submit.prevent="createChannel" <h2 class="font-semibold text-xl">
class="w-3/5"> Create a channel:
<input v-model="channelName" </h2>
type="text" <div>
class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md" <form
placeholder="Channel name" /> class="w-3/5"
<input type="submit" @submit.prevent="createChannel"
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md" /> >
</form> <input
</div> v-model="channelName"
</div> type="text"
</div> 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> </template>
<script lang="ts"> <script lang="ts">
@@ -259,14 +340,14 @@ export default {
serverDropdownOpen: false, serverDropdownOpen: false,
userDropdownOpen: false, userDropdownOpen: false,
channelName: '', channelName: '',
} };
}, },
computed: { computed: {
userIsOwner() { 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.server && this.serverType === 'servers' && this.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user.id))?.owner;
}, },
userIsAdmin() { 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.server && this.serverType === 'servers' && this.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user.id))?.administer;
} }
}, },
methods: { methods: {
@@ -275,7 +356,7 @@ export default {
}, },
async createChannel() { async createChannel() {
const headers = useRequestHeaders(['cookie']) as Record<string, string>; 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.server.id}/addChannel`, { method: 'POST', body: { channelName: this.channelName }, headers }) as IChannel;
if (!channel) return; if (!channel) return;
@@ -283,22 +364,22 @@ export default {
this.createChannelModelOpen = false; this.createChannelModelOpen = false;
}, },
openChannel(id: string) { openChannel(id: string) {
const router = useRouter() const router = useRouter();
router.push({ params: { id } }) router.push({ params: { id } });
}, },
async createInvite() { async createInvite() {
const headers = useRequestHeaders(['cookie']) as Record<string, string> 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.server.id}/createInvite`, { method: 'POST', headers });
}, },
async logout() { async logout() {
await $fetch(`/api/user/logout`) await $fetch('/api/user/logout');
useCookie('sessionToken').value = null; useCookie('sessionToken').value = null;
useCookie('userId').value = null; useCookie('userId').value = null;
useGlobalStore().logout(); useGlobalStore().logout();
navigateTo('/login') navigateTo('/login');
} }
}, },
} };
</script> </script>

16
components/UserProfile.vue Executable file
View File

@@ -0,0 +1,16 @@
<template>
<div />
</template>
<script>
import { IUser } from '~/types';
export default {
props: {
user: {
type: IUser,
required: true
}
}
};
</script>

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

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

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

@@ -1,63 +1,61 @@
<template> <template>
<Suspense> <Suspense>
<div class="flex h-screen max-h-screen text-white"> <div class="flex h-screen max-h-screen text-white">
<Nav /> <Nav />
<Sidebar /> <Sidebar />
<div class="w-[calc(100vw-88px-240px)] h-full"> <div class="w-[calc(100vw-88px-240px)] h-full">
<slot /> <slot />
</div> </div>
</div>
</div> <template #fallback>
<template #fallback> Loading...
Loading... </template>
</template> </Suspense>
</Suspense>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Nav, Sidebar } from '~/.nuxt/components' import { useGlobalStore } from '~/stores/store';
import { useGlobalStore } from '~/stores/store' import { SafeUser, IChannel, IServer } from '~/types';
import { SafeUser } from '~/types' import { io } from 'socket.io-client';
import { io } from 'socket.io-client'
export default { export default {
data() {
return {
user: storeToRefs(useGlobalStore()).user,
}
},
async setup() { async setup() {
const globalStore = useGlobalStore() const globalStore = useGlobalStore();
const sessionToken = useCookie('sessionToken') const sessionToken = useCookie('sessionToken');
if (globalStore.user.id === undefined && sessionToken.value) { if (globalStore.user.id === undefined && sessionToken.value) {
const route = useRoute() const route = useRoute();
const headers = useRequestHeaders(['cookie']) as Record<string, string> const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const [user, { dms, servers }] = await Promise.all([ const [user, { dms, servers }] = await Promise.all([
$fetch('/api/getCurrentUser', { headers }) as unknown as SafeUser, $fetch('/api/getCurrentUser', { headers }) as unknown as SafeUser,
$fetch('/api/user/getServers', { headers }) $fetch('/api/user/getServers', { headers }) as unknown as { dms: IChannel[], servers: IServer[] }
]) ]);
if (!user || !servers || !dms) return; if (!user || !servers || !dms) return;
globalStore.setUser(user) globalStore.setUser(user);
globalStore.setServers(servers) globalStore.setServers(servers);
globalStore.setDms(dms) globalStore.setDms(dms);
if (route.params.id && typeof route.params.id === 'string') { if (route.params.id && typeof route.params.id === 'string') {
globalStore.setActiveServer(route.path.includes('@me') ? 'dms' : 'servers', route.params.id) globalStore.setActiveServer(route.path.includes('@me') ? 'dms' : 'servers', route.params.id);
} }
} }
}, },
data() {
return {
user: storeToRefs(useGlobalStore()).user,
};
},
mounted() { mounted() {
const globalStore = useGlobalStore() const globalStore = useGlobalStore();
const sessionToken = useCookie('sessionToken') const sessionToken = useCookie('sessionToken');
const socket = io({ const socket = io({
auth: (cb) => { auth: (cb) => {
cb({ token: sessionToken.value }) cb({ token: sessionToken.value });
} }
}); });
globalStore.setSocket(socket) globalStore.setSocket(socket);
} }
} };
</script> </script>

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

@@ -1,6 +1,6 @@
export default defineNuxtRouteMiddleware((to, from) => { export default defineNuxtRouteMiddleware(() => {
// isAuthenticated() is an example method verifying if a user is authenticated if (useError().value?.message.trim().split(' ')[0]?.slice(1,4) === '401') return navigateTo('/login');
if (!useCookie('sessionToken').value) { if (!useCookie('sessionToken').value) {
return navigateTo('/login') return navigateTo('/login');
} }
}) });

75
nuxt.config.ts
View File

@@ -1,44 +1,43 @@
// https://v3.nuxtjs.org/api/configuration/nuxt.config // https://v3.nuxtjs.org/api/configuration/nuxt.config
export default { export default defineNuxtConfig({
ssr: true, ssr: true,
app: { app: {
head: { head: {
meta: [ meta: [
{ name: 'viewport', content: 'width=device-width, initial-scale=1' } { name: 'viewport', content: 'width=device-width, initial-scale=1' }
], ],
} }
}, },
css: [ css: [
'@/assets/css/main.css' '@/assets/css/main.css'
], ],
devtools: {
enabled: true,
},
postcss: { modules: [
plugins: { [
tailwindcss: {}, '@pinia/nuxt',
autoprefixer: {}, {
}, autoImports: [
}, // automatically imports `defineStore`
'defineStore', // import { defineStore } from 'pinia'
'storeToRefs',
// automatically imports `defineStore` as `definePiniaStore`
['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
],
},
],
'@nuxt/devtools',
],
modules: [ postcss: {
[ plugins: {
'@pinia/nuxt', tailwindcss: {},
{ autoprefixer: {},
autoImports: [ },
// automatically imports `defineStore` },
'defineStore', // import { defineStore } from 'pinia' });
'storeToRefs',
// automatically imports `defineStore` as `definePiniaStore`
['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
],
},
],
'@vueuse/nuxt',
],
typescript: {
strict: true
}
}

15665
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

24
package.json Normal file → Executable file
View File

@@ -4,16 +4,18 @@
"dev": "nuxi dev", "dev": "nuxi dev",
"build": "nuxi build", "build": "nuxi build",
"start": "nuxi start", "start": "nuxi start",
"prepare": "nuxi prepare" "prepare": "nuxi prepare",
"lint": "eslint --ext .js,.vue,.ts ."
}, },
"dependencies": { "dependencies": {
"@pinia/nuxt": "^0.4.6", "@pinia/nuxt": "^0.4.6",
"@prisma/client": "^4.8.0", "@prisma/client": "^4.8.0",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"emoji-datasource-twitter": "^14.0.0", "dotenv": "^16.0.3",
"emoji-regex": "^10.2.1", "emoji-regex": "^10.2.1",
"ioredis": "^5.3.2",
"mitt": "^3.0.0", "mitt": "^3.0.0",
"nuxt": "^3.0.0", "nuxt": "^3.4.1",
"pinia": "^2.0.28", "pinia": "^2.0.28",
"socket.io": "^4.5.4", "socket.io": "^4.5.4",
"socket.io-client": "^4.5.4", "socket.io-client": "^4.5.4",
@@ -21,16 +23,18 @@
"uuid": "^9.0.0" "uuid": "^9.0.0"
}, },
"devDependencies": { "devDependencies": {
"@nuxt/kit": "^3.0.0", "@nuxt/devtools": "npm:@nuxt/devtools-edge@latest",
"@types/bcryptjs": "^2.4.2", "@types/bcryptjs": "^2.4.2",
"@types/emoji-js": "^3.5.0", "@types/emoji-js": "^3.5.0",
"@types/twemoji": "^13.1.2", "@types/node": "^18.15.11",
"@types/uuid": "^9.0.0", "@types/uuid": "^9.0.0",
"@vueuse/core": "^9.10.0", "@typescript-eslint/eslint-plugin": "^5.58.0",
"@vueuse/nuxt": "^9.10.0", "@typescript-eslint/parser": "^5.58.0",
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.14",
"postcss": "^8.4.20", "eslint": "^8.38.0",
"eslint-plugin-vue": "^9.11.0",
"postcss": "^8.4.23",
"prisma": "^4.8.0", "prisma": "^4.8.0",
"tailwindcss": "^3.2.4" "tailwindcss": "^3.3.1"
} }
} }

98
pages/channel/@me/[id].vue Normal file → Executable file
View File

@@ -1,79 +1,87 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<template> <template>
<MessagePane /> <MessagePane />
<div class="fixed mr-3" <div
:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"> class="fixed mr-3"
<Transition> :style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"
<EmojiPicker v-on:pickedEmoji="pickedEmoji($event)" >
:opened="emojiPickerData.opened" /> <Transition>
</Transition> <Popup
</div> :opened="emojiPickerData.opened"
:openedBy="emojiPickerData.type"
@picked-emoji="pickedEmoji($event)"
/>
<!-- <EmojiPicker v-on:pickedEmoji="pickedEmoji($event)"
:opened="emojiPickerData.opened" /> -->
</Transition>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { useGlobalStore } from '~/stores/store' import { useGlobalStore } from '~/stores/store';
import { IChannel } from '~/types' import { IChannel } from '~/types';
definePageMeta({ definePageMeta({
middleware: 'auth' middleware: 'auth'
}) });
export default { 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);
});
return {
server
};
},
data() { data() {
return { return {
emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData, emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData,
emojiPickerStyles: { emojiPickerStyles: {
top: storeToRefs(useGlobalStore()).emojiPickerData.top + 'px', top: storeToRefs(useGlobalStore()).emojiPickerData.value.top + 'px',
right: storeToRefs(useGlobalStore()).emojiPickerData.right + 'px', right: storeToRefs(useGlobalStore()).emojiPickerData.value.right + 'px',
} }
} };
},
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)
})
return {
server
}
}, },
async updated() { async updated() {
const route = useRoute() 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 (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) { if (useGlobalStore().activeServer.id !== this.server.id) {
useGlobalStore().closeEmojiPicker() useGlobalStore().closeEmojiPicker();
useGlobalStore().setActiveServer('dms', route.params.id) useGlobalStore().setActiveServer('dms', route.params.id);
} }
}, },
methods: { methods: {
pickedEmoji(emoji: string) { pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp() const { $emit } = useNuxtApp();
$emit('pickedEmoji', emoji) $emit('pickedEmoji', emoji);
useGlobalStore().closeEmojiPicker() useGlobalStore().closeEmojiPicker();
}, },
} }
} };
</script> </script>
<style> <style>
.v-enter-active, .v-enter-active,
.v-leave-active { .v-leave-active {
transition: opacity 0.5s ease; transition: opacity 0.5s ease;
} }
.v-enter-from, .v-enter-from,
.v-leave-to { .v-leave-to {
opacity: 0; opacity: 0;
} }
</style> </style>

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

@@ -1,35 +1,35 @@
<template> <template>
<form @submit.prevent="startDM"> <form @submit.prevent="startDM">
<input v-model="userId" /> <input v-model="userId">
<input type="submit" /> <input type="submit">
</form> </form>
</template> </template>
<script lang="ts"> <script lang="ts">
import { useGlobalStore } from '~/stores/store' import { useGlobalStore } from '~/stores/store';
import { IChannel } from '~/types' import { IChannel } from '~/types';
definePageMeta({ definePageMeta({
middleware: 'auth' middleware: 'auth'
}) });
export default { export default {
data() { data() {
return { return {
userId: '' userId: ''
} };
}, },
mounted() { mounted() {
useGlobalStore().setActiveServer('dms', '@me') useGlobalStore().setActiveServer('dms', '@me');
}, },
methods: { methods: {
async startDM() { async startDM() {
const headers = useRequestHeaders(['cookie']) as Record<string, string> const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const server: IChannel = await $fetch('/api/channels/createDM', { method: 'post', body: { partnerId: this.userId }, headers }) const server: IChannel = await $fetch('/api/channels/createDM', { method: 'post', body: { partnerId: this.userId }, headers });
useGlobalStore().addDM(server) useGlobalStore().addDM(server);
useRouter().push({ path: '/channel/@me/' + server.id }) useRouter().push({ path: '/channel/@me/' + server.id });
} }
} }
} };
</script> </script>

109
pages/channel/[id].vue Normal file → Executable file
View File

@@ -1,83 +1,84 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<template> <template>
<MessagePane /> <MessagePane />
<div class="fixed mr-3" <div
:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"> class="fixed mr-3"
<Transition> :style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"
<EmojiPicker v-on:pickedEmoji="pickedEmoji($event)" >
:opened="emojiPickerData.opened" /> <Transition>
</Transition> <Popup
</div> :opened="emojiPickerData.opened"
:openedBy="emojiPickerData.type"
@pickedEmoji="pickedEmoji($event)"
/>
</Transition>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Server } from 'socket.io'; import { Server } from 'socket.io';
import { useGlobalStore } from '~/stores/store' import { useGlobalStore } from '~/stores/store';
import { IChannel } from '~/types' import { IChannel, IServer } from '~/types';
definePageMeta({ definePageMeta({
middleware: 'auth' middleware: 'auth'
}) });
export default { 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 (!useGlobalStore().servers.find((e) => e.id == server.serverId)?.participants) {
const realServer: IServer = await $fetch(`/api/guilds/${server.serverId}`, { headers });
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);
});
return {
server,
};
},
data() { data() {
return { return {
socket: storeToRefs(useGlobalStore()).socket as unknown as Server, socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData, emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData,
emojiPickerStyles: { emojiPickerStyles: {
top: storeToRefs(useGlobalStore()).emojiPickerData.top + 'px', top: storeToRefs(useGlobalStore()).emojiPickerData.value.top + 'px',
right: storeToRefs(useGlobalStore()).emojiPickerData.right + 'px', right: storeToRefs(useGlobalStore()).emojiPickerData.value.right + 'px',
} }
} };
}, },
mounted() { mounted() {
this.socket.on(`addChannel-${this.server.serverId}`, (ev) => { this.socket.on(`addChannel-${this.server.serverId}`, (ev) => {
const newChannel = ev as IChannel const newChannel = ev as IChannel;
useGlobalStore().addChannel(this.server.serverId, newChannel) useGlobalStore().addChannel(this.server.serverId, newChannel);
}) });
}, },
async updated() { async updated() {
const route = useRoute() const route = useRoute();
const headers = useRequestHeaders(['cookie']) as Record<string, string>; if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumiably?');
if (!this.server) return;
this.server = await $fetch(`/api/channels/${route.params.id}`, { headers });
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumiably?')
if (useGlobalStore().activeChannel.id !== this.server.id) { if (useGlobalStore().activeChannel.id !== this.server.id) {
useGlobalStore().closeEmojiPicker() useGlobalStore().closeEmojiPicker();
useGlobalStore().setActiveServer('servers', route.params.id) useGlobalStore().setActiveServer('servers', route.params.id);
// update the server with the refreshed data
useGlobalStore().updateServer(route.params.id, this.server.server)
}
},
async setup() {
const route = useRoute()
const headers = useRequestHeaders(['cookie']) as Record<string, string>
const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers })
const realServer = useGlobalStore().servers?.find((e) => e.channels.some((el) => el.id == route.params.id))
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 presumiably?')
useGlobalStore().setActiveServer('servers', route.params.id)
useGlobalStore().setActiveChannel(server)
useGlobalStore().closeEmojiPicker()
server.messages?.forEach((e) => {
e.body = parseMessageBody(e.body, useGlobalStore().activeChannel)
})
return {
server,
} }
}, },
methods: { methods: {
pickedEmoji(emoji: string) { pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp() const { $emit } = useNuxtApp();
$emit('pickedEmoji', emoji) $emit('pickedEmoji', emoji);
useGlobalStore().closeEmojiPicker() useGlobalStore().closeEmojiPicker();
}, },
} }
} };
</script> </script>

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

@@ -1,13 +1,17 @@
<template> <template>
<div> <div>
Hello there traveler Hello there traveler
<nuxt-link to="/login">Login</nuxt-link> <nuxt-link to="/login">
<nuxt-link to="/signup">Signup</nuxt-link> Login
</nuxt-link>
<nuxt-link to="/signup">
Signup
</nuxt-link>
</div> </div>
</template> </template>
<script setup> <script setup>
definePageMeta({ definePageMeta({
middleware: 'auth' middleware: 'auth'
}) });
</script> </script>

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

@@ -1,44 +1,59 @@
<template> <template>
<div class="w-screen h-screen bg-[hsl(216,calc(1*7.2%),10%)] relative"> <div class="w-screen h-screen bg-[hsl(216,calc(1*7.2%),10%)] relative">
<div <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"> 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" <h2 class="text-xl font-semibold text-center">
@submit.prevent="signup()"> Login
<input </h2>
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" <form
name="username" class="flex flex-col gap-y-2 my-2"
v-model="username" @submit.prevent="signup()"
placeholder="username" /> >
<input <input
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" v-model="username"
name="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"
type="password" name="username"
v-model="password" placeholder="username"
placeholder="password" /> >
<input type="submit" <input
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer" /> v-model="password"
</form> 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"
<div class="text-center">Or <nuxt-link class="hover:underline text-blue-500" name="password"
to="/signup">Signup</nuxt-link></div> type="password"
</div> placeholder="password"
</div> >
<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>
</div>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { useGlobalStore } from '~/stores/store' import { useGlobalStore } from '~/stores/store';
import { SafeUser } from '~/types'; import { SafeUser } from '~/types';
definePageMeta({ definePageMeta({
layout: 'clean' layout: 'clean'
}) });
export default { export default {
data() { data() {
return { return {
username: '', username: '',
password: '' password: ''
} };
}, },
methods: { methods: {
async signup() { async signup() {
@@ -49,27 +64,27 @@ export default {
username: this.username, username: this.username,
password: this.password password: this.password
}, },
}) as { userId: string; token: string; user: SafeUser; } }) as { userId: string; token: string; user: SafeUser; };
const userId = useCookie('userId') const userId = useCookie('userId');
userId.value = user.userId userId.value = user.userId;
const token = useCookie('sessionToken') const token = useCookie('sessionToken');
token.value = user.token token.value = user.token;
setTimeout(async () => { setTimeout(async () => {
const headers = { Cookie: `sessionToken=${token.value}` } const headers = { Cookie: `sessionToken=${token.value}` };
const { servers, dms } = await $fetch('/api/user/getServers', { headers }) const { servers, dms } = await $fetch('/api/user/getServers', { headers });
if (!servers || !dms) return; if (!servers || !dms) return;
globalStore.setServers(servers) globalStore.setServers(servers);
globalStore.setDms(dms) globalStore.setDms(dms);
globalStore.setUser(user.user) globalStore.setUser(user.user);
navigateTo('/channel/@me') navigateTo('/channel/@me');
}) });
} }
} }
} };
</script> </script>

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

@@ -1,43 +1,58 @@
<template> <template>
<div class="w-screen h-screen bg-[hsl(216,calc(1*7.2%),10%)] relative"> <div class="w-screen h-screen bg-[hsl(216,calc(1*7.2%),10%)] relative">
<div <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"> 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" <h2 class="text-xl font-semibold text-center">
@submit.prevent="signup()"> Sign up
<input </h2>
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" <form
name="username" class="flex flex-col gap-y-2 my-2"
v-model="username" @submit.prevent="signup()"
placeholder="username" /> >
<input <input
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" v-model="username"
name="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"
v-model="email" name="username"
placeholder="email" /> placeholder="username"
<input >
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" <input
name="password" v-model="email"
type="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"
v-model="password" name="email"
placeholder="password" /> placeholder="email"
<input type="submit" >
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer" /> <input
</form> v-model="password"
<div class="text-center">Or <nuxt-link class="hover:underline text-blue-500" 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"
to="/login">Login</nuxt-link></div> name="password"
</div> type="password"
</div> 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>
</div>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { NuxtLink } from '~/.nuxt/components'; import { useGlobalStore } from '~/stores/store';
import { useGlobalStore } from '~/stores/store'
import { SafeUser } from '~/types'; import { SafeUser } from '~/types';
definePageMeta({ definePageMeta({
layout: 'clean' layout: 'clean'
}) });
export default { export default {
data() { data() {
@@ -45,7 +60,7 @@ export default {
username: '', username: '',
email: '', email: '',
password: '' password: ''
} };
}, },
methods: { methods: {
async signup() { async signup() {
@@ -57,27 +72,27 @@ export default {
email: this.email, email: this.email,
password: this.password password: this.password
}, },
}) as { userId: string; token: string; user: SafeUser; } }) as { userId: string; token: string; user: SafeUser; };
const userId = useCookie('userId') const userId = useCookie('userId');
userId.value = user.userId userId.value = user.userId;
const token = useCookie('sessionToken') const token = useCookie('sessionToken');
token.value = user.token token.value = user.token;
setTimeout(async () => { setTimeout(async () => {
const headers = { Cookie: `sessionToken=${token.value}` } const headers = { Cookie: `sessionToken=${token.value}` };
const { servers, dms } = await $fetch('/api/user/getServers', { headers }) const { servers, dms } = await $fetch('/api/user/getServers', { headers });
if (!servers || !dms) return; if (!servers || !dms) return;
globalStore.setServers(servers) globalStore.setServers(servers);
globalStore.setDms(dms) globalStore.setDms(dms);
globalStore.setUser(user.user) globalStore.setUser(user.user);
navigateTo('/channel/@me') navigateTo('/channel/@me');
}) });
} }
} }
} };
</script> </script>

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

@@ -1,14 +1,5 @@
<template> <template>
<span class="test"></span> <div>
<Popup />
</div>
</template> </template>
<style>
.test {
background: url(/32.png);
width: 16px;
height: 16px;
display: inline-block;
background-position: -544px -510px;
background-size: 6480% 6480%;
}
</style>

18
plugins/mitt.ts Normal file → Executable file
View File

@@ -1,12 +1,12 @@
import mitt from 'mitt' import mitt from 'mitt';
export default defineNuxtPlugin(() => { export default defineNuxtPlugin(() => {
const emitter = mitt() const emitter = mitt();
return { return {
provide: { provide: {
emit: emitter.emit, // Will emit an event emit: emitter.emit, // Will emit an event
listen: emitter.on // Will register a listener for an event listen: emitter.on // Will register a listener for an event
} }
} };
}) });

7
postcss.config.js
View File

@@ -1,7 +0,0 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

4
prisma/schema.prisma Normal file → Executable file
View File

@@ -100,8 +100,8 @@ model Session {
model Reaction { model Reaction {
id String @id @default(cuid()) id String @id @default(cuid())
emoji Json emoji String
count Int // count Int
messageId String? messageId String?
Message Message? @relation(fields: [messageId], references: [id]) Message Message? @relation(fields: [messageId], references: [id])
users User[] @relation("ReactionToUser") users User[] @relation("ReactionToUser")

0
public/32.png Normal file → Executable file
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 MiB

After

Width:  |  Height:  |  Size: 4.5 MiB

0
public/favicon.ico Normal file → Executable file
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

51
server/api/channels/[id]/index.get.ts Normal file → Executable file
View File

@@ -1,20 +1,20 @@
import { IChannel, IServer, SafeUser } from '../../../../types' import { IChannel, IServer, SafeUser } from '~/types';
import { PrismaClient } from '@prisma/client' import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient() const prisma = new PrismaClient();
export default defineEventHandler(async (event) => { export default defineEventHandler(async (event) => {
if (!event.context.user.authenticated) { if (!event.context.user.authenticated) {
event.node.res.statusCode = 401; throw createError({
return { statusCode: 401,
message: 'You must be logged in to view a channel.' statusMessage: 'You must be logged in to view a channel.',
} });
} }
if (!event.context.params.id) { if (!event.context.params?.id) {
event.node.res.statusCode = 400; throw createError({
return { statusCode: 400,
message: 'A channelId is required' statusMessage: 'A channelId is required',
} });
} }
const channel = await prisma.channel.findFirst({ const channel = await prisma.channel.findFirst({
@@ -58,7 +58,7 @@ export default defineEventHandler(async (event) => {
name: true, name: true,
participants: { participants: {
select: { select: {
id: true id: true,
} }
} }
} }
@@ -69,7 +69,6 @@ export default defineEventHandler(async (event) => {
select: { select: {
id: true, id: true,
emoji: true, emoji: true,
count: true,
users: { users: {
select: { select: {
id: true, id: true,
@@ -114,7 +113,6 @@ export default defineEventHandler(async (event) => {
select: { select: {
id: true, id: true,
emoji: true, emoji: true,
count: true,
users: { users: {
select: { select: {
id: true, id: true,
@@ -137,10 +135,10 @@ export default defineEventHandler(async (event) => {
}) as IChannel | null; }) as IChannel | null;
if (!channel) { if (!channel) {
event.node.res.statusCode = 404; throw createError({
return { statusCode: 404,
message: `Channel with id "${event.context.params.id}" not found` statusMessage: `Channel with id "${event.context.params.id}" not found`,
} });
} }
if (channel.serverId && !channel.DM) { if (channel.serverId && !channel.DM) {
@@ -156,15 +154,16 @@ export default defineEventHandler(async (event) => {
if (!server) return; if (!server) return;
const userInServer: Array<SafeUser> | undefined = server?.participants.filter((e: SafeUser) => e.id === event.context.user.id) const userInServer: Array<SafeUser> | undefined = server.participants.filter((e: SafeUser) => e.id === event.context.user.id);
if (!userInServer) { if (!userInServer) {
event.node.res.statusCode = 401; throw createError({
return { statusCode: 401,
message: `You must be in the server to access a channel in that server` statusMessage: 'You must be in the server to access a channel in that server',
} });
} }
} }
return channel return channel;
}) });

49
server/api/channels/[id]/messages/[messageId]/delete.delete.ts Executable file
View File

@@ -0,0 +1,49 @@
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export default defineEventHandler(async (event) => {
if (!event.context.user.authenticated) {
throw createError({
statusCode: 401,
statusMessage: 'You must be logged in to send a message.',
});
}
const { id: channelId, messageId } = event.context.params;
const message = await prisma.message.findFirst({
where: {
id: messageId,
channelId: channelId,
},
include: {
creator: true
}
});
if (!message) {
throw createError({
statusCode: 404,
statusMessage: `message in channel ${channelId} with id ${messageId} is not found.`,
});
}
if (event.context.user.id !== message.creator.id) {
throw createError({
statusCode: 401,
statusMessage: 'you are not allowed to delete that message.',
});
}
await prisma.message.delete({
where: {
id: message.id
}
});
global.io.emit(`message-${event.context.params?.id}`, { message: { id: message.id }, deleted: true });
return {
message: 'message successfully deleted.'
};
});

52
server/api/channels/[id]/messages/[messageId]/delete.post.ts
View File

@@ -1,52 +0,0 @@
import { IChannel, IServer, SafeUser } from '~/types'
import emojiRegex from 'emoji-regex'
import { PrismaClient } from '@prisma/client'
import parseBody from '~~/utils/parseMessageBody'
const prisma = new PrismaClient()
export default defineEventHandler(async (event) => {
if (!event.context.user.authenticated) {
event.node.res.statusCode = 401;
return {
message: 'You must be logged in to send a message.'
}
}
const { id: channelId, messageId } = event.context.params
const message = await prisma.message.findFirst({
where: {
id: messageId,
channelId: channelId,
},
include: {
creator: true
}
})
if (!message) {
event.node.res.statusCode = 404;
return {
message: `message in channel ${channelId} with id ${messageId} is not found.`
}
}
if (event.context.user.id !== message.creator.id) {
event.node.res.statusCode = 401;
return {
message: 'you are not allowed to delete that message.'
}
}
await prisma.message.delete({
where: {
id: message.id
}
})
global.io.emit(`message-${event.context.params.id}`, { message: { id: message.id }, deleted: true });
return {
message: 'message successfully deleted.'
}
})

97
server/api/channels/[id]/messages/[messageId]/reactions/[name].post.ts Normal file → Executable file
View File

@@ -1,23 +1,29 @@
import { IChannel, IServer, SafeUser } from '~/types' import emojiRegex from 'emoji-regex';
import emojiRegex from 'emoji-regex' import { PrismaClient } from '@prisma/client';
import { PrismaClient } from '@prisma/client' const prisma = new PrismaClient();
const prisma = new PrismaClient()
export default defineEventHandler(async (event) => { export default defineEventHandler(async (event) => {
if (!event.context.user.authenticated) { if (!event.context.user.authenticated) {
event.node.res.statusCode = 401; throw createError({
return { statusCode: 401,
message: 'You must be logged in to send a message.' statusMessage: 'You must be logged in to send a message.',
} });
} }
const emoji = decodeURIComponent(event.context.params.name) if (!event.context.params?.name) {
throw createError({
statusCode: 400,
statusMessage: 'Reaction must be defined.',
});
}
const emoji = decodeURIComponent(event.context.params.name);
const match = emoji.match(emojiRegex()); const match = emoji.match(emojiRegex());
if (!match || match.length !== 1) { if (!match || match.length !== 1) {
event.node.res.statusCode = 400; throw createError({
return { statusCode: 400,
message: 'reaction is not an emoji or more than one emoji.' statusMessage: 'reaction is not an emoji or more than one emoji.',
} });
} }
@@ -30,27 +36,10 @@ export default defineEventHandler(async (event) => {
username: true username: true
} }
}, },
invites: {
select: {
id: true,
server: {
select: {
id: true,
name: true,
participants: {
select: {
id: true
}
}
}
}
}
},
reactions: { reactions: {
select: { select: {
id: true, id: true,
emoji: true, emoji: true,
count: true,
users: { users: {
select: { select: {
id: true, id: true,
@@ -59,31 +48,23 @@ export default defineEventHandler(async (event) => {
} }
} }
} }
} };
const message = await prisma.message.findFirst({ const message = await prisma.message.findFirst({
where: { where: {
id: event.context.params.messageId id: event.context.params.messageId
}, },
select: messageSelect select: messageSelect
}) });
if (!message.id) { if (!message || !message.id) {
event.node.res.statusCode = 404; throw createError({
return { statusCode: 404,
message: `message with id "${event.context.params.messageId}" not found.` statusMessage: `message with id "${event.context.params.messageId}" not found.`,
} });
} }
const reactionInMessage = message.reactions.find((e) => e.emoji.name === emoji) const reactionInMessage = message.reactions.find((e) => e.emoji === emoji);
let count;
if (reactionInMessage?.count) {
count = reactionInMessage.count + 1;
} else {
count = 1;
}
if (reactionInMessage && reactionInMessage.users.find((e) => e.id === event.context.user.id)) { if (reactionInMessage && reactionInMessage.users.find((e) => e.id === event.context.user.id)) {
// remove reaction // remove reaction
@@ -92,23 +73,22 @@ export default defineEventHandler(async (event) => {
id: reactionInMessage.id id: reactionInMessage.id
}, },
data: { data: {
count: reactionInMessage.count - 1,
users: { users: {
disconnect: [{ id: event.context.user.id }] disconnect: [{ id: event.context.user.id }]
} }
} }
}) });
const updatedMessage = await prisma.message.findFirst({ const updatedMessage = await prisma.message.findFirst({
where: { where: {
id: event.context.params.messageId id: event.context.params.messageId
}, },
select: messageSelect select: messageSelect
}) });
global.io.emit(`message-${event.context.params.id}`, { message: updatedMessage }); global.io.emit(`message-${event.context.params.id}`, { message: updatedMessage });
return { message: updatedMessage } return { message: updatedMessage };
} }
let reaction; let reaction;
@@ -119,22 +99,17 @@ export default defineEventHandler(async (event) => {
id: reactionInMessage.id id: reactionInMessage.id
}, },
data: { data: {
count,
users: { users: {
connect: [{ connect: [{
id: event.context.user.id, id: event.context.user.id,
}] }]
}, },
} }
}) });
} else { } else {
reaction = await prisma.reaction.create({ reaction = await prisma.reaction.create({
data: { data: {
emoji: { emoji,
name: emoji,
id: null
},
count: count,
users: { users: {
connect: [{ connect: [{
id: event.context.user.id, id: event.context.user.id,
@@ -146,7 +121,7 @@ export default defineEventHandler(async (event) => {
} }
} }
} }
}) });
} }
if (!reaction.messageId) return; if (!reaction.messageId) return;
@@ -156,9 +131,9 @@ export default defineEventHandler(async (event) => {
id: reaction.messageId, id: reaction.messageId,
}, },
select: messageSelect select: messageSelect
}) });
global.io.emit(`message-${event.context.params.id}`, { message: updatedMessage }); global.io.emit(`message-${event.context.params.id}`, { message: updatedMessage });
return { message: updatedMessage } return { message: updatedMessage };
}) });

96
server/api/channels/sendMessage.post.ts → server/api/channels/[id]/sendMessage.post.ts Normal file → Executable file
View File

@@ -1,28 +1,40 @@
import { IChannel, IServer, SafeUser, IMessage } from '~/types' import { IChannel, IServer, SafeUser, IMessage } from '~/types';
import { Server } from 'socket.io' import { Server } from 'socket.io';
import { PrismaClient } from '@prisma/client' import { PrismaClient } from '@prisma/client';
import { registerRuntimeHelpers } from '@vue/compiler-core' const prisma = new PrismaClient();
const prisma = new PrismaClient()
declare global { declare global {
var io: Server let io: Server;
} }
export default defineEventHandler(async (event) => { export default defineEventHandler(async (event) => {
if (!event.context.user.authenticated) { if (!event.context.user.authenticated) {
event.node.res.statusCode = 401; throw createError({
return { statusCode: 401,
message: 'You must be logged in to send a message.' statusMessage: 'You must be logged in to send a message.',
} });
} }
let { body, channelId } = await readBody(event) if (!event.context.params?.id) return;
if (!body || !channelId) { const req = await readBody(event);
event.node.res.statusCode = 400;
return { const channelId = event.context.params.id;
message: 'A body or channelId is required to send a message.'
} if (!req || !channelId) {
throw createError({
statusCode: 400,
statusMessage: 'A body is required to send a message.',
});
}
let { body } = req;
if (body.length > 5000) {
throw createError({
statusCode: 400,
statusMessage: 'Message is larger than 5000 characters.'
});
} }
const channel = await prisma.channel.findFirst({ const channel = await prisma.channel.findFirst({
@@ -34,6 +46,7 @@ export default defineEventHandler(async (event) => {
name: true, name: true,
messages: false, messages: false,
DM: true, DM: true,
serverId: true,
dmParticipants: { dmParticipants: {
select: { select: {
id: true, id: true,
@@ -44,10 +57,10 @@ export default defineEventHandler(async (event) => {
}) as IChannel | null; }) as IChannel | null;
if (!channel) { if (!channel) {
event.node.res.statusCode = 404; throw createError({
return { statusCode: 404,
message: `Channel with id "${channelId}" not found.` statusMessage: `Channel with id "${channelId}" not found.`,
} });
} }
if (!channel.DM) { if (!channel.DM) {
@@ -88,43 +101,44 @@ export default defineEventHandler(async (event) => {
}) as IServer | null; }) as IServer | null;
if (!server) { if (!server) {
throw new Error(`server with id "${channel.serverId}" is not found but channel with id "${channel.id}" is not a dm?`) throw new Error(`server with id "${channel.serverId}" is not found but channel with id "${channel.id}" is not a dm?`);
} }
const userInServer: SafeUser | undefined = server.participants.find((e: SafeUser) => e.id === event.context.user.id) const userInServer: SafeUser | undefined = server.participants.find((e: SafeUser) => e.id === event.context.user.id);
if (!userInServer) { if (!userInServer) {
event.node.res.statusCode = 401; throw createError({
return { statusCode: 401,
message: 'You must be in the server to send a message.' statusMessage: 'You must be in the server to send a message.',
} });
} }
if (!server) { if (!server) {
event.node.res.statusCode = 404; throw createError({
return { statusCode: 404,
message: 'Server not found' statusMessage: 'Server not found',
} });
} }
} else { } else {
const userInDM: SafeUser | undefined = channel.dmParticipants?.find((e) => e.id === event.context.user.id) const userInDM: SafeUser | undefined = channel.dmParticipants?.find((e) => e.id === event.context.user.id);
if (!userInDM) { if (!userInDM) {
event.node.res.statusCode = 401; throw createError({
return { statusCode: 401,
message: 'You must be in the DM to send a message.' statusMessage: 'You must be in the DM to send a message.',
} });
} }
} }
// TODO: make this client side or something because it's bug ridden right now lmao
const inviteCodes = body.match(/<&([a-z]|[0-9]){25}>/g); const inviteCodes = body.match(/<&([a-z]|[0-9]){25}>/g);
let invites: { id: string; }[] = []; const invites: { id: string; }[] = [];
if (inviteCodes) { if (inviteCodes) {
inviteCodes.forEach((e: string) => { inviteCodes.forEach((e: string) => {
if (!e) return if (!e) return;
const opBody = body; const opBody = body;
body = body.split(e).join('') body = body.split(e).join('');
if (opBody === body) return; if (opBody === body) return;
const id = e.split('<&')[1]?.split('>')[0]; const id = e.split('<&')[1]?.split('>')[0];
if (!id) return; if (!id) return;
@@ -174,10 +188,10 @@ export default defineEventHandler(async (event) => {
} }
} }
} }
}) as unknown as IMessage }) as unknown as IMessage;
global.io.emit(`message-${channel.id}`, { message }); global.io.emit(`message-${channel.id}`, { message });
return message return message;
}) });

42
server/api/channels/create.post.ts Normal file → Executable file
View File

@@ -1,35 +1,37 @@
import { IServer } from '~/types' import { IServer } from '~/types';
import { PrismaClient } from '@prisma/client' import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient() const prisma = new PrismaClient();
export default defineEventHandler(async (event) => { export default defineEventHandler(async (event) => {
if (!event.context.user.authenticated) { if (!event.context.user.authenticated) {
event.node.res.statusCode = 401; throw createError({
return { statusCode: 401,
message: 'You must be logged in to view a channel.' statusMessage: 'You must be logged in to view a channel.',
} });
} }
const { serverName } = await readBody(event) const body = await readBody(event);
if (!serverName) { if (!body) {
event.node.res.statusCode = 400; throw createError({
return { statusCode: 400,
message: 'channel name is required to create a channel.' statusMessage: 'Server name is required to create a Server.',
} });
} }
const { serverName } = body;
const preExistingServer = await prisma.server.findFirst({ const preExistingServer = await prisma.server.findFirst({
where: { where: {
name: serverName name: serverName
} }
}) as IServer }) as IServer | null;
if (preExistingServer) { if (preExistingServer) {
event.node.res.statusCode = 409; throw createError({
return { statusCode: 409,
message: `Server with name ${serverName} already exists.` statusMessage: `Server with name ${serverName} already exists.`,
} });
} }
const server = await prisma.server.create({ const server = await prisma.server.create({
@@ -87,5 +89,5 @@ export default defineEventHandler(async (event) => {
} }
}) as unknown as IServer; }) as unknown as IServer;
return server return server;
}) });

50
server/api/channels/createDM.post.ts Normal file → Executable file
View File

@@ -1,22 +1,22 @@
import { IChannel, SafeUser } from '~/types' import { IChannel, SafeUser } from '~/types';
import { PrismaClient } from '@prisma/client' import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient() const prisma = new PrismaClient();
export default defineEventHandler(async (event) => { export default defineEventHandler(async (event) => {
if (!event.context.user.authenticated) { if (!event.context.user.authenticated) {
event.node.res.statusCode = 401; throw createError({
return { statusCode: 401,
message: 'You must be logged in to view a channel.' statusMessage: 'You must be logged in to view a channel.',
} });
} }
const { partnerId } = await readBody(event) const { partnerId } = await readBody(event);
if (!partnerId) { if (!partnerId) {
event.node.res.statusCode = 400; throw createError({
return { statusCode: 400,
message: 'A friend is required to create a DM.' statusMessage: 'A friend is required to create a DM.',
} });
} }
const partner = await prisma.user.findFirst({ const partner = await prisma.user.findFirst({
@@ -32,14 +32,14 @@ export default defineEventHandler(async (event) => {
}) as SafeUser | null; }) as SafeUser | null;
if (!partner) { if (!partner) {
event.node.res.statusCode = 400; throw createError({
return { statusCode: 400,
message: 'No partner found' statusMessage: 'No partner found',
} });
} }
if (!user) { if (!user) {
throw new Error('user not found?') throw new Error('user not found?');
} }
const preExistingServer = await prisma.channel.findFirst({ const preExistingServer = await prisma.channel.findFirst({
@@ -47,13 +47,13 @@ export default defineEventHandler(async (event) => {
name: `${user.id}-${partner.id}`, name: `${user.id}-${partner.id}`,
DM: true DM: true
} }
}) as IChannel }) as IChannel;
if (preExistingServer) { if (preExistingServer) {
event.node.res.statusCode = 409; throw createError({
return { statusCode: 409,
message: `DM already exists.` statusMessage: 'DM already exists.',
} });
} }
const server = await prisma.channel.create({ const server = await prisma.channel.create({
@@ -74,7 +74,7 @@ export default defineEventHandler(async (event) => {
} }
} }
} }
}) as IChannel }) as IChannel;
return server return server;
}) });

18
server/api/getCurrentUser.get.ts Normal file → Executable file
View File

@@ -1,13 +1,13 @@
import { PrismaClient } from '@prisma/client' import { PrismaClient } from '@prisma/client';
import { SafeUser } from '../../types' import { SafeUser } from '~/types';
const prisma = new PrismaClient() const prisma = new PrismaClient();
export default defineEventHandler(async (event) => { export default defineEventHandler(async (event) => {
if (!event.context.user.authenticated) { if (!event.context.user.authenticated) {
event.node.res.statusCode = 401; throw createError({
return { statusCode: 401,
message: "Unauthenticated" statusMessage: 'Unauthenticated',
} });
} }
const user = await prisma.user.findFirst({ const user = await prisma.user.findFirst({
@@ -26,5 +26,5 @@ export default defineEventHandler(async (event) => {
} }
}) as SafeUser | null; }) as SafeUser | null;
return user return user;
}) });

60
server/api/guilds/[id]/addChannel.post.ts Normal file → Executable file
View File

@@ -1,23 +1,23 @@
import { IChannel, IServer, SafeUser } from '~/types' import { IChannel, IServer, SafeUser } from '~/types';
import { PrismaClient } from '@prisma/client' import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient() const prisma = new PrismaClient();
export default defineEventHandler(async (event) => { export default defineEventHandler(async (event) => {
if (!event.context.user.authenticated) { if (!event.context.user.authenticated) {
event.node.res.statusCode = 401; throw createError({
return { statusCode: 401,
message: 'You must be logged in to view a channel.' statusMessage: 'You must be logged in to view a channel.',
} });
} }
if (!event.context.params.id) { if (!event.context.params?.id) {
event.node.res.statusCode = 400; throw createError({
return { statusCode: 400,
message: 'A serverId is required' statusMessage: 'A serverId is required',
} });
} }
const { channelName } = await readBody(event) const { channelName } = await readBody(event);
const server = await prisma.server.findFirst({ const server = await prisma.server.findFirst({
where: { where: {
@@ -31,26 +31,26 @@ export default defineEventHandler(async (event) => {
}) as IServer | null; }) as IServer | null;
if (!server) { if (!server) {
event.node.res.statusCode = 404; throw createError({
return { statusCode: 404,
message: `Server with id "${event.context.params.id}" not found` statusMessage: `Server with id "${event.context.params.id}" not found`,
} });
} }
const userInServer: Array<SafeUser> = server.participants.filter((e: SafeUser) => e.id === event.context.user.id) const userInServer: Array<SafeUser> = server.participants.filter((e: SafeUser) => e.id === event.context.user.id);
if (!userInServer) { if (!userInServer) {
event.node.res.statusCode = 401; throw createError({
return { statusCode: 401,
message: `You must be in the server to access a channel in that server` statusMessage: 'You must be in the server to access a channel in that server',
} });
} }
if (server.channels?.find((e) => e.name === channelName)) { if (server.channels?.find((e) => e.name === channelName)) {
event.node.res.statusCode = 409; throw createError({
return { statusCode: 409,
message: `Channel with name "${channelName}" already exists in server with id "event.context.user.id"` statusMessage: `Channel with name "${channelName}" already exists in server with id "event.context.user.id"`,
} });
} }
const channel = await prisma.channel.create({ const channel = await prisma.channel.create({
@@ -121,9 +121,9 @@ export default defineEventHandler(async (event) => {
}, },
serverId: true, serverId: true,
} }
}) as IChannel }) as IChannel;
global.io.emit(`addChannel-${server.id}`, channel) global.io.emit(`addChannel-${server.id}`, channel);
return channel return channel;
}) });

52
server/api/guilds/[id]/createInvite.post.ts Normal file → Executable file
View File

@@ -1,25 +1,25 @@
import { IChannel, IInviteCode, IServer, SafeUser } from '~/types' import { IInviteCode, IServer, SafeUser } from '~/types';
import { PrismaClient } from '@prisma/client' import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient() const prisma = new PrismaClient();
export default defineEventHandler(async (event) => { export default defineEventHandler(async (event) => {
if (!event.context.user.authenticated) { if (!event.context.user.authenticated) {
event.node.res.statusCode = 401; throw createError({
return { statusCode: 401,
message: 'You must be logged in to view a channel.' statusMessage: 'You must be logged in to view a channel.',
} });
} }
if (!event.context.params.id) { if (!event.context.params?.id) {
event.node.res.statusCode = 400; throw createError({
return { statusCode: 400,
message: 'A serverId is required' statusMessage: 'A serverId is required',
} });
} }
let body = await readBody(event) // const body = await readBody(event);
let expires = false; // let expires = false;
// if (body.expiryDate) { // if (body.expiryDate) {
// expires = true; // expires = true;
// body.expiryDate = new Date(body.expiryDate).getUTCDate() // body.expiryDate = new Date(body.expiryDate).getUTCDate()
@@ -37,19 +37,19 @@ export default defineEventHandler(async (event) => {
}) as IServer | null; }) as IServer | null;
if (!server) { if (!server) {
event.node.res.statusCode = 404; throw createError({
return { statusCode: 404,
message: `Server with id "${event.context.params.id}" not found` statusMessage: `Server with id "${event.context.params.id}" not found`,
} });
} }
const userInServerAndPermited: Array<SafeUser> = server.participants.filter((e: SafeUser) => e.id === event.context.user.id && e.roles?.some((el) => el.administer === true || el.owner === false)) const userInServerAndPermited: Array<SafeUser> = server.participants.filter((e: SafeUser) => e.id === event.context.user.id && e.roles?.some((el) => el.administer === true || el.owner === false));
if (!userInServerAndPermited) { if (!userInServerAndPermited) {
event.node.res.statusCode = 401; throw createError({
return { statusCode: 401,
message: `You must be in the server or an admin/owner of that server to make an invite code` statusMessage: 'You must be in the server or an admin/owner of that server to make an invite code',
} });
} }
const inviteCode = await prisma.inviteCode.create({ const inviteCode = await prisma.inviteCode.create({
@@ -61,7 +61,7 @@ export default defineEventHandler(async (event) => {
}, },
maxUses: 0 maxUses: 0
} }
}) as IInviteCode }) as IInviteCode;
return inviteCode return inviteCode;
}) });

88
server/api/guilds/[id]/index.get.ts Normal file → Executable file
View File

@@ -1,20 +1,20 @@
import { IServer } from '~/types' import { IServer } from '~/types';
import { PrismaClient } from '@prisma/client' import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient() const prisma = new PrismaClient();
export default defineEventHandler(async (event) => { export default defineEventHandler(async (event) => {
if (!event.context.user.authenticated) { if (!event.context.user.authenticated) {
event.node.res.statusCode = 401; throw createError({
return { statusCode: 401,
message: 'You must be logged in to view a channel.' statusMessage: 'You must be logged in to view a channel.',
} });
} }
if (!event.context.params.id) { if (!event.context.params?.id) {
event.node.res.statusCode = 400; throw createError({
return { statusCode: 400,
message: 'A channelId is required' statusMessage: 'A channelId is required',
} });
} }
const server = await prisma.server.findFirst({ const server = await prisma.server.findFirst({
@@ -35,60 +35,30 @@ export default defineEventHandler(async (event) => {
id: true, id: true,
DM: true, DM: true,
name: true, name: true,
messages: { }
},
roles: {
select: {
id: true,
name: true,
administrator: true,
owner: true,
users: {
select: { select: {
id: true, 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,
count: true,
users: {
select: {
id: true,
username: true
}
}
}
}
} }
} }
} }
}, }
} }
}) as IServer | null; }) as IServer | null;
if (!server) { if (!server) {
event.node.res.statusCode = 404; throw createError({
return { statusCode: 404,
message: `Channel with id "${event.context.params.id}" not found` statusMessage: `Channel with id "${event.context.params.id}" not found`,
} });
} }
return { return server;
server });
}
})

52
server/api/guilds/joinGuild.post.ts Normal file → Executable file
View File

@@ -1,22 +1,22 @@
import { IInviteCode, IServer } from '~/types' import { IInviteCode, IServer } from '~/types';
import { PrismaClient } from '@prisma/client' import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient() const prisma = new PrismaClient();
export default defineEventHandler(async (event) => { export default defineEventHandler(async (event) => {
if (!event.context.user.authenticated) { if (!event.context.user.authenticated) {
event.node.res.statusCode = 401; throw createError({
return { statusCode: 401,
message: 'You must be logged in to view a channel.' statusMessage: 'You must be logged in to view a channel.',
} });
} }
const { inviteId } = await readBody(event); const { inviteId } = await readBody(event);
if (!inviteId) { if (!inviteId) {
event.node.res.statusCode = 400; throw createError({
return { statusCode: 400,
message: 'A inviteId is required' statusMessage: 'A inviteId is required',
} });
} }
const invite = await prisma.inviteCode.findFirst({ const invite = await prisma.inviteCode.findFirst({
@@ -43,19 +43,19 @@ export default defineEventHandler(async (event) => {
}) as IInviteCode | null; }) as IInviteCode | null;
if (!invite) { if (!invite) {
event.node.res.statusCode = 404; throw createError({
return { statusCode: 404,
message: `Invite with id "${inviteId}" not found` statusMessage: `Invite with id "${inviteId}" not found`,
} });
} }
const userInServer = invite.server.participants.find((e) => e.id === event.context.user.id); const userInServer = invite.server.participants.find((e) => e.id === event.context.user.id);
if (userInServer) { if (userInServer) {
event.node.res.statusCode = 409; throw createError({
return { statusCode: 409,
message: `You are already in that server.` statusMessage: 'You are already in that server.',
} });
} }
// TODO: check if invite is valid // TODO: check if invite is valid
@@ -101,16 +101,16 @@ export default defineEventHandler(async (event) => {
} }
} }
} }
}) as unknown as IServer }) as unknown as IServer;
if (!server) { if (!server) {
event.node.res.statusCode = 404; throw createError({
return { statusCode: 404,
message: `Channel with id "${event.context.params.id}" not found` statusMessage: `Channel with id "${event.context.params?.id}" not found`,
} });
} }
return { return {
server server
} };
}) });

49
server/api/login.post.ts Normal file → Executable file
View File

@@ -1,17 +1,22 @@
import bcryptjs from "bcryptjs"; import bcryptjs from 'bcryptjs';
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from 'uuid';
import { PrismaClient } from '@prisma/client' import * as dotenv from 'dotenv';
import { IUser, SafeUser } from "../../types"; import crypto from 'node:crypto';
const prisma = new PrismaClient() import { PrismaClient } from '@prisma/client';
import { IUser, SafeUser } from '~/types';
const prisma = new PrismaClient();
dotenv.config();
export default defineEventHandler(async (event) => { export default defineEventHandler(async (event) => {
const body = await readBody(event) if (!process.env.SESSION_SECRET_KEY) throw new Error('Session secret missing');
const body = await readBody(event);
if (!body.username || !body.password) { if (!body.username || !body.password) {
event.node.res.statusCode = 400; throw createError({
return { statusCode: 400,
message: 'A username, and a password are required to login' statusMessage: 'A username, and a password are required to login',
} });
} }
let user = await prisma.user.findFirst({ let user = await prisma.user.findFirst({
@@ -24,31 +29,33 @@ export default defineEventHandler(async (event) => {
passwordhash: true, passwordhash: true,
email: true, email: true,
}, },
}) as unknown as IUser }) as unknown as IUser;
const isCorrect = await bcryptjs.compare(body.password, user.passwordhash) const isCorrect = await bcryptjs.compare(body.password, user.passwordhash);
if (!isCorrect) { if (!isCorrect) {
event.node.res.statusCode = 401; throw createError({
return { statusCode: 401,
message: 'Incorrect username or password' statusMessage: 'Incorrect username or password',
} });
} }
const token = uuidv4() const token = crypto.createHmac('sha1', process.env.SESSION_SECRET_KEY)
.update(uuidv4())
.digest('hex');
await prisma.session.create({ await prisma.session.create({
data: { data: {
token, token,
userId: user.id userId: user.id
} }
}) });
user = user as SafeUser user = user as SafeUser;
return { return {
token, token,
userId: user.id, userId: user.id,
user user
} };
}) });

77
server/api/signup.post.ts Normal file → Executable file
View File

@@ -1,17 +1,22 @@
import bcryptjs from "bcryptjs"; import bcryptjs from 'bcryptjs';
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from 'uuid';
import { PrismaClient } from '@prisma/client' import * as dotenv from 'dotenv';
import { IUser, SafeUser } from "~/types"; import crypto from 'node:crypto';
const prisma = new PrismaClient() import { PrismaClient } from '@prisma/client';
import { IUser, SafeUser } from '~/types';
const prisma = new PrismaClient();
dotenv.config();
export default defineEventHandler(async (event) => { export default defineEventHandler(async (event) => {
const body = await readBody(event) if (!process.env.SESSION_SECRET_KEY) throw new Error('Session secret missing');
const body = await readBody(event);
if (!body.username || !body.password || !body.email) { if (!body.username || !body.password || !body.email) {
event.node.res.statusCode = 400; throw createError({
return { statusCode: 400,
message: 'A username, a password, and an email address are required to singup' statusMessage: 'A username, a password, and an email address are required to singup',
} });
} }
const preExistingUser = await prisma.user.findFirst({ const preExistingUser = await prisma.user.findFirst({
@@ -25,16 +30,16 @@ export default defineEventHandler(async (event) => {
} }
] ]
} }
}) as SafeUser }) as SafeUser;
if (preExistingUser) { if (preExistingUser) {
event.node.res.statusCode = 409; throw createError({
return { statusCode: 409,
message: `User with username ${body.username} or email ${body.email} already exists` statusMessage: `User with username ${body.username} or email ${body.email} already exists`,
} });
} }
const passwordhash = await bcryptjs.hash(body.password, 10) const passwordhash = await bcryptjs.hash(body.password, 10);
const user = await prisma.user.create({ const user = await prisma.user.create({
data: { data: {
@@ -46,35 +51,39 @@ export default defineEventHandler(async (event) => {
id: true, id: true,
username: true, username: true,
servers: { servers: {
participants: { select: {
select: { participants: {
id: true, select: {
username: true id: true,
} username: true
}, }
channels: { },
select: { channels: {
id: true, select: {
DM: true, id: true,
name: true, DM: true,
} name: true,
}, }
},
}
} }
}, },
}) as unknown as IUser }) as unknown as IUser;
const token = uuidv4() const token = crypto.createHmac('sha1', process.env.SESSION_SECRET_KEY)
.update(uuidv4())
.digest('hex');
await prisma.session.create({ await prisma.session.create({
data: { data: {
token, token,
userId: user.id userId: user.id
} }
}) });
return { return {
token, token,
userId: user.id, userId: user.id,
user user
} };
}) });

100
server/api/user/getServers.get.ts Normal file → Executable file
View File

@@ -1,13 +1,13 @@
import { PrismaClient } from '@prisma/client' import { PrismaClient } from '@prisma/client';
import { IChannel, IServer, IUser } from '~/types' import { IChannel, IServer } from '~/types';
const prisma = new PrismaClient() const prisma = new PrismaClient();
export default defineEventHandler(async (event) => { export default defineEventHandler(async (event) => {
if (!event.context.user.authenticated) { if (!event.context.user.authenticated) {
event.node.res.statusCode = 401; throw createError({
return { statusCode: 401,
message: "Unauthenticated" statusMessage: 'Unauthenticated',
} });
} }
const servers = await prisma.server.findMany({ const servers = await prisma.server.findMany({
@@ -24,89 +24,8 @@ export default defineEventHandler(async (event) => {
channels: { channels: {
select: { select: {
id: true, id: true,
DM: true,
name: true,
server: {
select: {
id: true,
name: true,
participants: {
select: {
id: true,
username: true
}
},
channels: {
select: {
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,
count: true,
users: {
select: {
id: true,
username: true
}
}
}
}
}
}
}
},
}
},
},
},
participants: {
select: {
id: true,
username: true
} }
}, },
roles: {
select: {
id: true,
name: true,
administrator: true,
owner: true,
users: {
select: {
id: true
}
}
}
}
} }
}) as unknown as IServer[] | null; }) as unknown as IServer[] | null;
@@ -122,7 +41,6 @@ export default defineEventHandler(async (event) => {
select: { select: {
id: true, id: true,
name: true, name: true,
messages: false,
DM: true, DM: true,
dmParticipants: { dmParticipants: {
select: { select: {
@@ -135,5 +53,5 @@ export default defineEventHandler(async (event) => {
return { return {
servers, dms servers, dms
} };
}) });

22
server/api/user/logout.ts Normal file → Executable file
View File

@@ -1,23 +1,23 @@
import { PrismaClient } from '@prisma/client' import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient() const prisma = new PrismaClient();
export default defineEventHandler(async (event) => { export default defineEventHandler(async (event) => {
const { sessionToken } = parseCookies(event) const { sessionToken } = parseCookies(event);
if (!sessionToken) { if (!sessionToken) {
event.node.res.statusCode = 400; throw createError({
return { statusCode: 400,
message: 'A session token is required to logout duh' statusMessage: 'A session token is required to logout duh',
} });
} }
await prisma.session.delete({ await prisma.session.delete({
where: { where: {
token: sessionToken token: sessionToken
}, },
}) });
return { return {
message: `successfully logged out` message: 'successfully logged out'
} };
}) });

14
server/middleware/auth.ts Normal file → Executable file
View File

@@ -1,11 +1,11 @@
import { PrismaClient } from '@prisma/client' import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient() const prisma = new PrismaClient();
export default defineEventHandler(async (event) => { export default defineEventHandler(async (event) => {
const cookies = parseCookies(event) const cookies = parseCookies(event);
if (!cookies.sessionToken) { if (!cookies.sessionToken) {
event.context.user = { authenticated: false } event.context.user = { authenticated: false };
return; return;
} }
@@ -13,12 +13,12 @@ export default defineEventHandler(async (event) => {
where: { where: {
token: cookies.sessionToken token: cookies.sessionToken
} }
}) });
if (!session) { if (!session) {
event.context.user = { authenticated: false } event.context.user = { authenticated: false };
return; return;
} }
event.context.user = { authenticated: true, id: session.userId }; event.context.user = { authenticated: true, id: session.userId };
}) });

28
server/middleware/ratelimit.ts Normal file
View File

@@ -0,0 +1,28 @@
import Redis from 'ioredis';
const redis = new Redis();
const INCREMENT_LIMIT = 5;
const LIMIT_TIME = 700; // milliseconds
export default defineEventHandler(async (event) => {
if (event.node.req.method === 'HEAD' || event.node.req.method === 'OPTIONS' || event.node.req.method === 'GET') return;
const cookies = parseCookies(event);
// if there is no session token in the cookie the request doesn't need a cookie or they just don't have a session token and it will error appropriately.
if (!cookies.sessionToken) return;
const date = new Date().getTime();
const lastRequestData = await redis.get(`request-${cookies.sessionToken}`);
redis.set(`request-${cookies.sessionToken}`, `${new Date().getTime()} ${(parseInt(lastRequestData?.split(' ')[1] || '0') + 1)}`);
if (!lastRequestData) return;
const [lastRequestDate, increment] = lastRequestData.split(' ');
if (lastRequestDate && +lastRequestDate + LIMIT_TIME >= date) {
if (increment && +increment < INCREMENT_LIMIT) return;
throw createError({
statusCode: 429,
});
} else {
redis.set(`request-${cookies.sessionToken}`, `${new Date().getTime()} 0`);
}
});

210
server/middleware/socket.ts Normal file → Executable file
View File

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

99
stores/store.ts Normal file → Executable file
View File

@@ -1,127 +1,126 @@
import { channel } from "diagnostics_channel"; import { Socket } from 'socket.io-client';
import { serve } from "esbuild"; import { SafeUser, IServer, IChannel, IMessage, IPopupData } from '~/types';
import { Socket } from "socket.io-client";
import { SafeUser, IServer, IChannel, IMessage, IEmojiPickerData } from "../types";
export const useGlobalStore = defineStore('global', { export const useGlobalStore = defineStore('global', {
state: () => ({ state: () => ({
activeChannel: {} as IChannel, activeChannel: {} as IChannel,
activeServer: {} as IServer | IChannel, activeServer: {} as IServer | IChannel,
activeServerType: '' as "dms" | "servers" | undefined, activeServerType: '' as 'dms' | 'servers' | undefined,
user: {} as SafeUser, user: {} as SafeUser,
dms: [] as IChannel[], dms: [] as IChannel[],
servers: [] as IServer[], servers: [] as IServer[],
emojiPickerData: {} as IEmojiPickerData, emojiPickerData: {type: 'emojiPicker'} as IPopupData,
socket: null as unknown socket: null as unknown
}), }),
actions: { actions: {
setActiveServer(type: "servers" | "dms", channelId: string) { setActiveServer(type: 'servers' | 'dms', channelId: string) {
if (channelId === '@me') { if (channelId === '@me') {
this.activeServer = {} as IServer | IChannel this.activeServer = {} as IServer | IChannel;
this.activeServerType = 'dms' this.activeServerType = 'dms';
return; return;
} }
this.activeServerType = type this.activeServerType = type;
const searchableArray: IChannel[] | IServer[] | undefined = this[type] const searchableArray: IChannel[] | IServer[] = this[type];
if (!searchableArray) return; if (!searchableArray) return;
let activeServer: number; let activeServer: IServer | IChannel;
if (type === 'servers') { if (type === 'servers') {
activeServer = searchableArray.find((e) => { activeServer = searchableArray.find((e: IServer) => {
return e.channels.some((channel: IChannel) => channel.id === channelId) return e.channels.some((channel: IChannel) => channel.id === channelId);
}) });
} else { } else {
activeServer = searchableArray.find((e) => { activeServer = searchableArray.find((e: IChannel) => {
return e.id === channelId return e.id === channelId;
}) });
} }
this.activeServer = activeServer this.activeServer = activeServer;
}, },
setActiveChannel(channel: IChannel) { setActiveChannel(channel: IChannel) {
this.activeChannel = channel; this.activeChannel = channel;
}, },
updateServer(channelId: string, server: IServer) { updateServer(channelId: string, server: IServer) {
const serverIndex = this.servers.findIndex(s => s.channels.some((c) => c.id === channelId)) const serverIndex = this.servers.findIndex(s => s.channels.some((c) => c.id === channelId));
this.servers[serverIndex] = server this.servers[serverIndex] = server;
}, },
setServers(servers: Array<IServer>) { setServers(servers: Array<IServer>) {
this.servers = servers this.servers = servers;
}, },
addChannel(serverId: string, channel: IChannel) { addChannel(serverId: string, channel: IChannel) {
const serverIndex = this.servers.findIndex(s => s.id === serverId) const serverIndex = this.servers.findIndex(s => s.id === serverId);
const server = this.servers[serverIndex] const server = this.servers[serverIndex];
if (serverIndex < 0 || !server) return; if (serverIndex < 0 || !server) return;
if (server.channels.find((c) => c.id === channel.id)) return; if (server.channels.find((c) => c.id === channel.id)) return;
server.channels.push(channel) server.channels.push(channel);
}, },
addDM(dmChannel: IChannel) { addDM(dmChannel: IChannel) {
if (this.dms.find((e) => e.id === dmChannel.id)) { if (this.dms.find((e) => e.id === dmChannel.id)) {
const index = this.dms.findIndex((e) => e.id === dmChannel.id) const index = this.dms.findIndex((e) => e.id === dmChannel.id);
this.dms[index] = dmChannel this.dms[index] = dmChannel;
return; return;
} }
this.dms.push(dmChannel) this.dms.push(dmChannel);
}, },
addServer(server: IServer) { addServer(server: IServer) {
if (this.servers.find((e) => e.id === server.id)) { if (this.servers.find((e) => e.id === server.id)) {
const index = this.servers.findIndex((e) => e.id === server.id) const index = this.servers.findIndex((e) => e.id === server.id);
this.servers[index] = server this.servers[index] = server;
return; return;
} }
this.servers.push(server) this.servers.push(server);
}, },
setDms(dms: Array<IChannel>) { setDms(dms: Array<IChannel>) {
this.dms = dms this.dms = dms;
}, },
setSocket(socket: Socket) { setSocket(socket: Socket) {
this.socket = socket this.socket = socket;
}, },
setUser(user: SafeUser) { setUser(user: SafeUser) {
this.user = user; this.user = user;
}, },
updateMessage(messageId: string, message: IMessage) { updateMessage(messageId: string, message: IMessage) {
const messageIndex = this.activeChannel.messages.findIndex((e) => e.id === messageId) const messageIndex = this.activeChannel.messages.findIndex((e) => e.id === messageId);
if (messageIndex < 0) return; if (messageIndex < 0) return;
this.activeChannel.messages[messageIndex] = message this.activeChannel.messages[messageIndex] = message;
}, },
removeMessage(messageId: string) { removeMessage(messageId: string) {
if (!this.activeChannel.messages.find(m => m.id === messageId)) return; if (!this.activeChannel.messages.find(m => m.id === messageId)) return;
this.activeChannel.messages = this.activeChannel.messages.filter(m => m.id !== messageId) this.activeChannel.messages = this.activeChannel.messages.filter(m => m.id !== messageId);
}, },
openEmojiPicker(payload: IEmojiPickerData) { openEmojiPicker(payload: IPopupData) {
this.emojiPickerData.type = 'emojiPicker';
this.emojiPickerData.top = payload.top; this.emojiPickerData.top = payload.top;
this.emojiPickerData.right = payload.right; this.emojiPickerData.right = payload.right;
this.emojiPickerData.openedBy = payload.openedBy; this.emojiPickerData.openedBy = payload.openedBy;
this.emojiPickerData.opened = true; this.emojiPickerData.opened = true;
}, },
toggleEmojiPicker(payload: IEmojiPickerData) { toggleEmojiPicker(payload: IPopupData) {
let messageId; let messageId;
if (this.emojiPickerData.openedBy === undefined) { if (this.emojiPickerData.openedBy === undefined) {
messageId = null messageId = null;
} else { } else {
messageId = this.emojiPickerData.openedBy.messageId || null messageId = this.emojiPickerData.openedBy.messageId || null;
} }
console.log(!this.emojiPickerData.opened || payload.openedBy.messageId !== messageId, this.emojiPickerData.opened, payload.openedBy.messageId, messageId) 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) { if (!this.emojiPickerData.opened || payload.openedBy?.messageId !== messageId) {
this.openEmojiPicker(payload) this.openEmojiPicker(payload);
} else { } else {
this.closeEmojiPicker() this.closeEmojiPicker();
} }
}, },
closeEmojiPicker() { closeEmojiPicker() {
console.log('closeEmojiPicker')
if (this.emojiPickerData.openedBy) this.emojiPickerData.openedBy.messageId = ''; if (this.emojiPickerData.openedBy) this.emojiPickerData.openedBy.messageId = '';
this.emojiPickerData.opened = false; this.emojiPickerData.opened = false;
}, },
logout() { logout() {
this.dms = [] this.dms = [];
this.servers = [] this.servers = [];
this.socket = null this.socket = null;
this.activeServer = {} as IChannel this.activeServer = {} as IChannel;
} }
}, },
}) });

41
tailwind.config.js Normal file → Executable file
View File

@@ -1,22 +1,23 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
// eslint-disable-next-line no-undef
module.exports = { module.exports = {
content: [ content: [
'./assets/**/*.{vue,js,css}', './assets/**/*.{vue,js,css}',
'./components/**/*.{vue,js}', './components/**/*.{vue,js}',
'./layouts/**/*.vue', './layouts/**/*.vue',
'./pages/**/*.vue', './pages/**/*.vue',
'./plugins/**/*.{js,ts}', './plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}', './nuxt.config.{js,ts}',
], ],
theme: { theme: {
extend: { extend: {
colors: { colors: {
'primary': { 'primary': {
'dark-bg': '#181624', 'dark-bg': '#181624',
DEFAULT: '#282a36' DEFAULT: '#282a36'
} }
} }
}, },
}, },
plugins: [], plugins: [],
} };

2
tsconfig.json Normal file → Executable file
View File

@@ -6,9 +6,9 @@
"ESNext.AsyncIterable", "ESNext.AsyncIterable",
"DOM" "DOM"
], ],
"strict": true,
"sourceMap": true, "sourceMap": true,
"skipLibCheck": true, "skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noEmit": true, "noEmit": true,
"esModuleInterop": true, "esModuleInterop": true,

30
tsconfig.json.bak
View File

@@ -1,30 +0,0 @@
{
"compilerOptions": {
"target": "ES2020",
"lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
"allowJs": true,
"sourceMap": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"incremental": true,
"jsx": "preserve",
"noUncheckedIndexedAccess": true,
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
]
},
},
"extends": "./.nuxt/tsconfig.json"
}

2
tsconfig.tsbuildinfo
View File

@@ -1 +1 @@
{"version":"4.7.4"} {"version":"5.0.2"}

14
types/index.ts Normal file → Executable file
View File

@@ -2,6 +2,7 @@ export interface IUser {
id: string; id: string;
email: string; email: string;
username: string; username: string;
online?: boolean;
passwordhash: string; passwordhash: string;
servers?: Array<IServer>; servers?: Array<IServer>;
channels?: Array<IChannel>; channels?: Array<IChannel>;
@@ -66,23 +67,20 @@ export interface IRole {
export interface IReaction { export interface IReaction {
id: string; id: string;
emoji: { emoji: string;
name: string;
id?: string;
};
count: number;
previousCount?: number; previousCount?: number;
users: IUser[]; users: IUser[];
Message: IMessage; Message: IMessage;
messageId: string; messageId: string;
} }
export interface IEmojiPickerData { export interface IPopupData {
opened: boolean; opened: boolean;
top: number; top: number;
right: number; right: number;
openedBy: { type: 'emojiPicker' | 'userInfo';
type: "message" | "messageInput"; openedBy?: {
type: 'message' | 'messageInput';
messageId?: string; messageId?: string;
}; };
} }

45
utils/parseMessageBody.ts Normal file → Executable file
View File

@@ -1,45 +1,50 @@
import { IChannel } from "~/types"; import { IChannel } from '~/types';
export default function parseBody(body: string, activeChannel: IChannel) { export default function parseBody(body: string, activeChannel: IChannel) {
if (!activeChannel.id) throw new Error("No active channel") if (!activeChannel.id) throw new Error('No active channel');
body = escape(body); body = escape(body);
const rules = [ const rules = [
//bold, italics and paragragh rules //bold, italics and paragragh rules
[/\&#42;\&#42;\s?([^\n]+)\&#42;\&#42;/g, "<b>$1</b>"], [/&#42;&#42;\s?([^\n]+)&#42;&#42;/g, '<b>$1</b>'],
[/\&#42;\s?([^\n]+)\&#42;/g, "<i>$1</i>"], [/&#42;\s?([^\n]+)&#42;/g, '<i>$1</i>'],
[/\&#95;\&#95;\s?([^\n]+)\&#95;\&#95;/g, "<u>$1</u>"], [/&#95;&#95;\s?([^\n]+)&#95;&#95;/g, '<u>$1</u>'],
[/\&#126;\&#126;\s?([^\n]+)\&#126;\&#126;/g, "<s>$1</s>"], [/&#126;&#126;\s?([^\n]+)&#126;&#126;/g, '<s>$1</s>'],
// code lines and blocks // code lines and blocks
[/&#96;&#96;&#96;(.+?)&#96;&#96;&#96;/g, "<pre class='codeblock'><code>$1</code></pre>"], [/&#96;&#96;&#96;(.+?)&#96;&#96;&#96;/g, '<pre class=\'codeblock\'><code>$1</code></pre>'],
[/(?<!&#96;)&#96;(.+?)&#96;(?!&#96;)/g, "<code class='inline-code'>$1</code>"], [/(?<!&#96;)&#96;(.+?)&#96;(?!&#96;)/g, '<code class=\'inline-code\'>$1</code>'],
]; ];
rules.forEach(([rule, template]) => { rules.forEach(([rule, template]) => {
if (!rule || !template || typeof template !== 'string') throw new Error('Rule or template is undefined or a regexp (how the actual)');
body = body.replace(rule, template); body = body.replace(rule, template);
}) });
const mentions = body.match(/&#60;&#64;([a-z]|[0-9]){25}&#62;/g); /*
* Matches string in the format of: <@[cuid]>
* for example: "<@clfhiwt920003fb4jd5dbo2sy>", "<@clfhiwiah0000fb4jenr3j6l1>", and "<@clfhizvyt000nfb4j16kjnell>" would all be matched
*/
const mentionRegex = /&#60;&#64;(([a-z]|[0-9]){25})&#62;/g;
const mentions = body.match(mentionRegex);
if (mentions) { if (mentions) {
const participants = (activeChannel.DM) ? activeChannel.dmParticipants : activeChannel.server.participants; 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 "${activeChannel.id}" not found"`);
mentions.forEach((e: string) => { mentions.forEach((e: string) => {
if (!e) return
const id = e.split('&#60;&#64;')[1]?.split('&#62;')[0]; const id = e.split('&#60;&#64;')[1]?.split('&#62;')[0];
if (!id) return; if (!id) return;
const user = participants.find((e) => e.id === id) const user = participants.find((e) => e.id === id);
if (!user) return; if (!user) return;
body = body.split(e).join(`@${user.username}`) body = body.split(e).join(`@${user.username}`);
}); });
} }
return body return body;
} }
function escape(s: string) { function escape(s: string) {
return s.replace( return s.replace(
/[^0-9A-Za-z ]/g, /[^0-9A-Za-z ]/g,
c => "&#" + c.charCodeAt(0) + ";" c => '&#' + c.charCodeAt(0) + ';'
); );
} }