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

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

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

@@ -2,7 +2,8 @@
<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 /> <slot />
</button> </button>
</li> </li>
@@ -10,6 +11,8 @@
<script> <script>
export default { export default {
props: ['danger'] props: {
} danger: Boolean,
},
};
</script> </script>

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

@@ -1,8 +1,11 @@
<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
v-if="opened"
ref="dropdown"
class="z-[2] absolute m-2 bg-[var(--primary-dark)] w-[calc(100%-1rem)] p-3 rounded text-left"
:class="(inverted) ? 'dropdown-inverse' : 'dropdown'" :class="(inverted) ? 'dropdown-inverse' : 'dropdown'"
v-if="opened"> >
<slot /> <slot />
</div> </div>
</Transition> </Transition>
@@ -10,8 +13,11 @@
<script lang="ts"> <script lang="ts">
export default { export default {
props: ['opened', 'inverted'], props: {
} opened: Boolean,
inverted: Boolean,
},
};
</script> </script>
<style> <style>

298
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,164 +35,232 @@ 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 @click="scrollTo('people')" <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('people')"
>
<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" >
<g
fill="none"
stroke="currentColor" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2"> stroke-width="2"
>
<path d="M12 21a9 9 0 1 1 0-18a9 9 0 0 1 0 18z" /> <path d="M12 21a9 9 0 1 1 0-18a9 9 0 0 1 0 18z" />
<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" /> <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" />
</g> </g>
</svg> </svg>
</button> </button>
<button @click="scrollTo('nature')" <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('nature')"
>
<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"
<path fill="none" >
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
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" />
</svg>
</button>
<button @click="scrollTo('food')"
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all">
<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="M12 21.5V17m-4 0h8V7a4 4 0 1 0-8 0v10zm0-6.5L16 7m-8 7.5l8-3.5" />
</svg>
</button>
<button @click="scrollTo('activities')"
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all">
<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">
<path <path
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" /> fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
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"
/>
</svg>
</button>
<button
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
@click="scrollTo('food')"
>
<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="M12 21.5V17m-4 0h8V7a4 4 0 1 0-8 0v10zm0-6.5L16 7m-8 7.5l8-3.5"
/>
</svg>
</button>
<button
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
@click="scrollTo('activities')"
>
<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"
>
<path
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"
/>
<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" /> <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" />
</g> </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('travel')"
>
<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"
<path 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="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" /> 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"
/>
</svg> </svg>
</button> </button>
<button @click="scrollTo('objects')" <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('objects')"
>
<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" >
<g
fill="none"
stroke="currentColor" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2"> stroke-width="2"
>
<path <path
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" /> 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"
/>
<path d="M3 10h14v5a6 6 0 0 1-6 6H9a6 6 0 0 1-6-6v-5z" /> <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" /> <path d="M16.746 16.726a3 3 0 1 0 .252-5.555" />
</g> </g>
</svg> </svg>
</button> </button>
<button @click="scrollTo('symbols')" <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('symbols')"
>
<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" <g
stroke-linecap="round" fill="none"
stroke-linejoin="round"
stroke-width="2">
<circle cx="12"
cy="12"
r="9" />
<path d="M12 7v5l3 3" />
</g>
</svg>
</button>
<button @click="scrollTo('flags')"
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all">
<svg xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24">
<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" /> >
<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> </svg>
</button> </button>
</div> </div>
</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
v-for="category in categories"
:key="category.name"
class="text-black flex flex-col category bg-[var(--primary-dark)]"
>
<h6 class="uppercase text-[var(--primary-text)] sticky top-0 bg-inherit z-10 py-1">
{{
category.name category.name
}}</h6> }}
<div class="flex flex-wrap" </h6>
:id="category.name"> <div
<button v-for="emoji in category.emojis" :id="category.name"
class="flex flex-wrap"
>
<button
v-for="emoji in category.emojis"
: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" class="p-2 rounded bg-inherit hover:backdrop-brightness-[1.45] h-12 transition-all emoji"
@click="$emit('pickedEmoji', emoji.short_name)" @click="$emit('picked-emoji', emoji.short_names[0])"
:aria-label='emoji.name.toLowerCase()'> >
<span :style="emojiStyles(emoji.short_name, 32)" <span
:style="emojiStyles(emoji.short_names[0], 32)"
draggable="false" draggable="false"
class="w-4" /> class="w-4"
/>
</button> </button>
</div> </div>
</div> </div>

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

@@ -1,17 +1,30 @@
<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
server
</p>
<span class="text-xl font-bold capitalize leading-loose">{{ invite.server.name }}</span> <span class="text-xl font-bold capitalize leading-loose">{{ invite.server.name }}</span>
<div class="flex items-center"> <div class="flex flex-row">
<div class="flex items-center mr-4">
<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> 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>{{ invite.server.participants.length }} Members</span> <span>{{ invite.server.participants.length }} Members</span>
</div> </div>
<div class="flex items-center">
<span
class="before:bg-[var(--invite-members)] before:h-2 before:w-2 before:inline-block before:my-auto before:rounded-full before:mr-1"
/>
<span>{{ invite.server.participants.filter((e: IUser) => e.online === true).length }} Online</span>
</div>
</div>
<div class="flex w-full justify-end"> <div class="flex w-full justify-end">
<button @click="joinServer(invite)" <button
class="font-semibold rounded px-4 py-2 transition-colors" 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'"> :class="(userInServer) ? 'bg-green-800 cursor-not-allowed' : 'bg-green-700 hover:bg-green-600'"
@click="joinServer(invite)"
>
<span v-if="userInServer"> <span v-if="userInServer">
Joined Joined
</span> </span>
@@ -24,31 +37,36 @@
</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>

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

@@ -1,105 +1,157 @@
<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
:id="`actions-${message.id}`"
class="relative bg-[var(--primary-400)] rounded-md border border-[rgb(32,34,37)] text-[var(--primary-text)] flex overflow-hidden"
>
<button
class="p-1 hover:backdrop-brightness-125 transition-all flex w-fit h-fit"
@click="openEmojiPicker()"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
height="20" height="20"
viewBox="0 0 24 24"> viewBox="0 0 24 24"
<path 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="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" /> 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"
/>
</svg> </svg>
</button> </button>
<button v-if="!shiftPressed && !overflowShown" <button
v-if="!shiftPressed && !overflowShown"
class="p-1 hover:backdrop-brightness-125 transition-all flex w-fit h-fit"
@click="overflowShown = true" @click="overflowShown = true"
class="p-1 hover:backdrop-brightness-125 transition-all flex w-fit h-fit"> >
<svg xmlns="http://www.w3.org/2000/svg" <svg
xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
height="20" height="20"
viewBox="0 0 24 24"> viewBox="0 0 24 24"
<g fill="none" >
<g
fill="none"
stroke="currentColor" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2"> stroke-width="2"
<circle cx="5" >
<circle
cx="5"
cy="12" cy="12"
r="1" /> r="1"
<circle cx="12" />
<circle
cx="12"
cy="12" cy="12"
r="1" /> r="1"
<circle cx="19" />
<circle
cx="19"
cy="12" cy="12"
r="1" /> r="1"
/>
</g> </g>
</svg> </svg>
</button> </button>
<div v-if="shiftPressed || overflowShown" <div
class="flex"> v-if="shiftPressed || overflowShown"
<button @click="copy(message.id)" class="flex"
class="p-1 hover:backdrop-brightness-125 transition-all flex text-[var(--primary-400)] w-[28px] h-[28px] items-center justify-center"> >
<svg xmlns="http://www.w3.org/2000/svg" <button
class="p-1 hover:backdrop-brightness-125 transition-all flex text-[var(--primary-400)] w-[28px] h-[28px] items-center justify-center"
@click="copy(message.id)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="bg-[var(--primary-text)] rounded" class="bg-[var(--primary-text)] rounded"
width="18" width="18"
height="18" height="18"
viewBox="0 0 24 24"> viewBox="0 0 24 24"
<path fill="currentColor" >
d="M10 7v2H9v6h1v2H6v-2h1V9H6V7h4m6 0a2 2 0 0 1 2 2v6c0 1.11-.89 2-2 2h-4V7m4 2h-2v6h2V9Z" /> <path
fill="currentColor"
d="M10 7v2H9v6h1v2H6v-2h1V9H6V7h4m6 0a2 2 0 0 1 2 2v6c0 1.11-.89 2-2 2h-4V7m4 2h-2v6h2V9Z"
/>
</svg> </svg>
</button> </button>
<button v-if="message.creator.id === user.id" <button
v-if="message.creator.id === user.id"
class="p-1 hover:backdrop-brightness-125 transition-all flex text-[var(--primary-danger)] w-[28px] h-[28px] items-center justify-center"
@click="deleteMessage()" @click="deleteMessage()"
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" <svg
xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
height="20" height="20"
viewBox="0 0 24 24"> viewBox="0 0 24 24"
<path 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="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" /> 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"
/>
</svg> </svg>
</button> </button>
</div> </div>
</div> </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]" <div
:class="classes"> 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-content">
<div class="message-sender-text"> <div class="message-sender-text">
<p class="mb-1 font-semibold w-fit" <p
v-if="showUsername"> v-if="showUsername"
class="mb-1 font-semibold w-fit"
>
{{ message.creator.username }} {{ message.creator.username }}
</p> </p>
<p class="break-words max-w-full" <p
v-html="message.body"></p> class="break-words max-w-full"
v-html="message.body"
/>
</div> </div>
<div v-for="invite in message.invites"> <div
v-for="invite in message.invites"
:key="invite.id"
>
<InviteCard :invite="invite" /> <InviteCard :invite="invite" />
</div> </div>
<div class="flex gap-2 flex-wrap"> <div class="flex gap-2 flex-wrap">
<button @click="toggleReaction(reaction.emoji.name)" <button
v-for="reaction in message.reactions" 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="py-0.5 px-1.5 bg-[var(--primary-500)] border items-center flex rounded-lg border-[var(--primary-500)] hover:border-[var(--reaction-border)] hover:bg-[var(--reaction-hover)] transition-colors shadow-sm max-h-[30px]"
:class="(reaction.users.find((e) => e.id === user.id)) ? '!border-[rgb(88,101,242)] hover:!border-[rgb(88,101,242)]' : ''"> :class="(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"> <div class="flex items-center mr-0.5 w-6 drop-shadow">
<span :style="emojiStyles(reaction.emoji.name, 16)"></span> <span :style="emojiStyles(reaction.emoji, 16)" />
</div> </div>
<div class="relative overflow-hidden ml-1.5"> <div class="relative overflow-hidden ml-1.5">
<div class="min-w-[9px] h-6" <div
:key="reaction.count"> :key="reaction.users.length"
<span class="dropshadow-sm">{{ reaction.count }}</span> class="min-w-[9px] h-6"
>
<span class="dropshadow-sm">{{ reaction.users.length }}</span>
</div> </div>
</div> </div>
</button> </button>
@@ -111,9 +163,8 @@
<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>

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

@@ -1,36 +1,54 @@
<template> <template>
<div class="h-full relative text-white bg-[var(--background-color)] grid grid-rows-[48px_1fr]" @mouseenter="mouseEnter" @mouseleave="mouseLeave"> <div
class="h-full relative text-white bg-[var(--background-color)] grid grid-rows-[48px_1fr]"
@mouseenter="mouseEnter"
@mouseleave="mouseLeave"
>
<div class="w-full px-4 py-3 z-[1]"> <div class="w-full px-4 py-3 z-[1]">
<div v-if="!server.DM" <div
class="flex items-center"> v-if="!server.DM"
class="flex items-center"
>
<span class="mr-1"> <span class="mr-1">
<svg class="text-zinc-300/80 my-auto" <svg
class="text-zinc-300/80 my-auto"
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"
<path fill="currentColor" >
d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z" /> <path
fill="currentColor"
d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z"
/>
</svg> </svg>
</span> </span>
<span class="text-zinc-100 font-semibold">{{ server.name }}</span> <span class="text-zinc-100 font-semibold">{{ server.name }}</span>
</div> </div>
<div v-else <div
class="flex items-center"> v-else
class="flex items-center"
>
<span class="mr-1"> <span class="mr-1">
<svg class="text-zinc-300/80 my-auto" <svg
class="text-zinc-300/80 my-auto"
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" >
<g
fill="none"
stroke="currentColor" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2"> stroke-width="2"
<circle cx="12" >
<circle
cx="12"
cy="12" cy="12"
r="4" /> r="4"
/>
<path d="M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-5.5 8.28" /> <path d="M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-5.5 8.28" />
</g> </g>
</svg> </svg>
@@ -42,69 +60,101 @@
</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
id="conversation-pane"
class="h-full overflow-y-scroll"
>
<div class="w-full pb-1 bg-inherit"> <div class="w-full pb-1 bg-inherit">
<div> <div>
<div v-if="server.messages.length === 0"> <div v-if="server.messages.length === 0">
<p>No messages yet</p> <p>No messages yet</p>
</div> </div>
<Message v-else <Message
v-for="(message, i) in server.messages" v-for="(message, i) in server.messages"
v-else
:key="message.id"
:message="message" :message="message"
:shiftPressed="shiftPressed" :shift-pressed="shiftPressed"
:showUsername="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id" :show-username="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id"
:classes="calculateMessageClasses(message, i)" /> :classes="calculateMessageClasses(message, i)"
/>
</div> </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"> v-if="showSearch"
class="absolute bottom-[calc(75px+0.5rem)] mx-4 w-[calc(100vw-88px-240px-32px)] py-3 px-4 bg-[var(--primary-500)] rounded-lg shadow-md z-5"
>
<div class="relative flex flex-col"> <div class="relative flex flex-col">
<div v-for="user in searchResults" <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" 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)"> @click="completeMention(resultingUser)"
{{ user.username }} >
{{ resultingUser.username }}
</div> </div>
</div> </div>
</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
class="relative px-4 w-full pt-1.5 h-fit pb-1"
@keyup="checkForMentions"
@keypress="typing($event)" @keypress="typing($event)"
@submit.prevent="sendMessage" @submit.prevent="sendMessage"
@keydown.enter.exact.prevent="sendMessage" @keydown.enter.exact.prevent="sendMessage"
class="relative px-4 w-full pt-1.5 h-fit pb-1"> >
<div id="textbox" <div
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"> id="textbox"
<textarea type="text" 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
id="messageBox" id="messageBox"
v-model="messageContent"
maxlength="5000"
type="text"
class="bg-transparent focus:outline-none py-2 w-full resize-none leading-relaxed h-[44px]" class="bg-transparent focus:outline-none py-2 w-full resize-none leading-relaxed h-[44px]"
cols="1" cols="1"
v-model="messageContent" placeholder="Send a Message..."
placeholder="Send a Message..." /> />
<input type="submit" <input
id="submit"
type="submit"
class="absolute -top-full -left-full invisible" class="absolute -top-full -left-full invisible"
id="submit"> >
<label for="submit" <label
for="submit"
class="py-1 px-1.5 h-fit my-auto cursor-pointer" class="py-1 px-1.5 h-fit my-auto cursor-pointer"
role="button"><svg width="32" role="button"
><svg
width="32"
height="26" height="26"
viewBox="0 0 24 24"> viewBox="0 0 24 24"
<path 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="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" /> 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"
/>
</svg></label> </svg></label>
</div> </div>
<div class="w-full h-4"> <div class="w-full h-4">
<p class="text-sm" <p
v-if="usersTyping.length > 0"> v-if="usersTyping.length > 0"
class="text-sm"
>
<span v-if="usersTyping.length < 4"> <span v-if="usersTyping.length < 4">
<span v-for="(username, i) in usersTyping" <span
class="font-semibold"> v-for="(username, i) in usersTyping"
:key="username"
class="font-semibold"
>
<span v-if="i === usersTyping.length - 1 && usersTyping.length > 1">and </span> <span v-if="i === usersTyping.length - 1 && usersTyping.length > 1">and </span>
{{ username }} {{ username }}
<span v-if="i !== usersTyping.length - 1 && usersTyping.length > 1">, </span> <span v-if="i !== usersTyping.length - 1 && usersTyping.length > 1">, </span>
@@ -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>

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

@@ -1,32 +1,46 @@
<!-- 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> <div>
<nuxt-link to="/channel/@me"> <nuxt-link to="/channel/@me">
<button <button
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-[var(--primary-200)] duration-300"> class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300"
:class="(serverType === 'dms') ? '!rounded-[1.375rem]' : ''"
>
<span> <span>
<svg width="32" <svg
width="32"
height="32" height="32"
viewBox="0 0 24 24"> viewBox="0 0 24 24"
>
<defs> <defs>
<linearGradient id="fire" <linearGradient
id="fire"
x1="-2.778%" x1="-2.778%"
x2="100%" x2="100%"
y1="24%" y1="24%"
y2="48%"> y2="48%"
<stop offset="0%" >
stop-color="#ff0c41" /> <stop
<stop offset="100%" offset="0%"
stop-color="#ff6b0c" /> stop-color="#ff0c41"
/>
<stop
offset="100%"
stop-color="#ff6b0c"
/>
</linearGradient> </linearGradient>
</defs> </defs>
<path fill="none" <path
fill="none"
stroke="url(#fire)" stroke="url(#fire)"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2" 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" /> 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"
/>
</svg> </svg>
</span> </span>
</button> </button>
@@ -34,97 +48,130 @@
</div> </div>
<div class="overflow-y-scroll my-2 flex gap-y-2 flex-col"> <div class="overflow-y-scroll my-2 flex gap-y-2 flex-col">
<div class="w-full flex justify-center"> <div class="w-full flex justify-center">
<hr class="border-2 rounded-md border-[var(--primary-300)] w-8/12 my-0.5" /> <hr class="border-2 rounded-md border-[var(--primary-300)] w-8/12 my-0.5">
</div> </div>
<nuxt-link v-for="server in servers" <nuxt-link
:to="'/channel/' + server.channels[0]?.id"> v-for="server in servers"
<button :key="server.id" :key="server.id"
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]"> :to="'/channel/' + server.channels[0]?.id"
<svg width="32" >
<button
:key="server.id"
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300 h-[56px] w-[56px]"
:class="(activeServer.id === server.id) ? '!rounded-[1.375rem]' : ''"
>
<svg
width="32"
height="32" height="32"
viewBox="0 0 256 154"> viewBox="0 0 256 154"
>
<defs> <defs>
<linearGradient id="svgIDa" <linearGradient
id="svgIDa"
x1="-2.778%" x1="-2.778%"
x2="100%" x2="100%"
y1="32%" y1="32%"
y2="67.556%"> y2="67.556%"
<stop offset="0%" >
stop-color="#2298BD" /> <stop
<stop offset="100%" offset="0%"
stop-color="#0ED7B5" /> stop-color="#2298BD"
/>
<stop
offset="100%"
stop-color="#0ED7B5"
/>
</linearGradient> </linearGradient>
</defs> </defs>
<path fill="url(#svgIDa)" <path
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" /> fill="url(#svgIDa)"
d="M128 0C93.867 0 72.533 17.067 64 51.2C76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0ZM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2c9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8Z"
/>
</svg> </svg>
</button> </button>
</nuxt-link> </nuxt-link>
</div> </div>
<div> <div>
<button @click="createServerModelOpen = true" <button
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"> 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"
<svg width="32" @click="createServerModelOpen = true"
>
<svg
width="32"
height="32" height="32"
viewBox="0 0 24 24"> viewBox="0 0 24 24"
<path 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="M12 5v14m-7-7h14" /> d="M12 5v14m-7-7h14"
/>
</svg> </svg>
</button> </button>
</div> </div>
</nav> </nav>
<div v-if="createServerModelOpen"
class="absolute z-10 top-0 bottom-0 left-0 right-0">
<div <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"> 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"> <h2 class="font-semibold text-xl">
Create a server: Create a server:
</h2> </h2>
<div> <div>
<form @submit.prevent="createServer" <form
class="w-3/5"> class="w-3/5"
<input v-model="serverName" @submit.prevent="createServer"
>
<input
v-model="serverName"
type="text" type="text"
class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md placeholder:text-[var(--primary-placeholder)]" class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md placeholder:text-[var(--primary-placeholder)]"
placeholder="Server name" /> placeholder="Server name"
<input type="submit" >
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md" /> <input
type="submit"
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md"
>
</form> </form>
</div> </div>
</div> </div>
<div class="bg-black/70 w-screen h-screen" <div
@click="createServerModelOpen = false"> class="bg-black/70 w-screen h-screen"
@click="createServerModelOpen = false"
/>
</div> </div>
</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>

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

@@ -1,61 +1,86 @@
<!-- 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"
class="h-full grid grid-rows-[48px_1fr] w-full"
>
<section> <section>
<h4 @click="serverDropdownOpen = !serverDropdownOpen" <h4
class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center cursor-pointer p-1 bg-inherit transition-all"> class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center p-1 bg-inherit transition-all"
>
<span>Direct messages</span> <span>Direct messages</span>
</h4> </h4>
</section> </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"> <div class="h-fit">
<nuxt-link v-for="dm in dms" <nuxt-link
:to="'/channel/@me/' + dm.id"> v-for="dm in dms"
:key="dm.id"
:to="'/channel/@me/' + dm.id"
>
<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"> 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"
>
{{ dm.dmParticipants?.find((e) => e.id !== user.id)?.username }} {{ dm.dmParticipants?.find((e) => e.id !== user.id)?.username }}
</div> </div>
</nuxt-link> </nuxt-link>
</div> </div>
</div> </div>
</div> </div>
<div v-else <div
class="w-full h-full max-h-screen grid grid-rows-[48px_1fr]"> v-else
class="w-full h-full max-h-screen grid grid-rows-[48px_1fr]"
>
<section> <section>
<h4 @click="serverDropdownOpen = !serverDropdownOpen" <h4
class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center cursor-pointer p-1 bg-inherit transition-all rounded-lg" class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center cursor-pointer p-1 bg-inherit transition-all rounded-lg"
:class="(!serverDropdownOpen) ? 'hover:backdrop-brightness-125' : 'backdrop-brightness-125'"> :class="(!serverDropdownOpen) ? 'hover:backdrop-brightness-125' : 'backdrop-brightness-125'"
@click="serverDropdownOpen = !serverDropdownOpen"
>
<span>{{ server.name }}</span> <span>{{ server.name }}</span>
<button> <button>
<span v-if="!serverDropdownOpen" <span
class="h-fit w-[20px]"> v-if="!serverDropdownOpen"
<svg xmlns="http://www.w3.org/2000/svg" class="h-fit w-[20px]"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
height="20" height="20"
viewBox="0 0 24 24"> viewBox="0 0 24 24"
<path 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="m6 9l6 6l6-6" /> d="m6 9l6 6l6-6"
/>
</svg> </svg>
</span> </span>
<span class="h-fit w-[20px]" <span
v-else> v-else
<svg xmlns="http://www.w3.org/2000/svg" class="h-fit w-[20px]"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
height="20" height="20"
viewBox="0 0 24 24"> viewBox="0 0 24 24"
<path 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="M18 6L6 18M6 6l12 12" /> d="M18 6L6 18M6 6l12 12"
/>
</svg> </svg>
</span> </span>
</button> </button>
@@ -64,24 +89,32 @@
<DropdownMenu :opened="serverDropdownOpen"> <DropdownMenu :opened="serverDropdownOpen">
<div> <div>
<ul class="flex flex-col gap-y-1"> <ul class="flex flex-col gap-y-1">
<DropdownItem v-if="userIsOwner || userIsAdmin" <DropdownItem
@click="createInvite"> v-if="userIsOwner || userIsAdmin"
@click="createInvite"
>
<span> <span>
Invite a friend Invite a friend
</span> </span>
<span class="h-fit"> <span class="h-fit">
<svg xmlns="http://www.w3.org/2000/svg" <svg
xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
height="20" height="20"
viewBox="0 0 24 24"> viewBox="0 0 24 24"
<g fill="none" >
<g
fill="none"
stroke="currentColor" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2"> stroke-width="2"
<circle cx="9" >
<circle
cx="9"
cy="7" cy="7"
r="4" /> r="4"
/>
<path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-10h6m-3-3v6" /> <path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-10h6m-3-3v6" />
</g> </g>
</svg> </svg>
@@ -95,40 +128,52 @@
<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"> <div class="flex gap-y-1.5 px-1.5 mt-2 flex-col overflow-x-scroll">
<button <button
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"
v-for="channel in server.channels" v-for="channel in server.channels"
: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"
@click="openChannel(channel.id)" @click="openChannel(channel.id)"
:key="channel.id"> >
<span class="h-fit"> <span class="h-fit">
<svg class="text-zinc-300/80 my-auto" <svg
class="text-zinc-300/80 my-auto"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
height="20" height="20"
viewBox="0 0 24 24"> viewBox="0 0 24 24"
<path fill="currentColor" >
d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z" /> <path
fill="currentColor"
d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z"
/>
</svg> </svg>
</span> </span>
<span>{{ channel.name }}</span> <span>{{ channel.name }}</span>
</button> </button>
<button v-if="userIsOwner || userIsAdmin" <button
v-if="userIsOwner || userIsAdmin"
class="flex text-center bg-inherit hover:backdrop-brightness-[1.45] px-2 py-1.5 w-full transition-all rounded drop-shadow-sm cursor-pointer items-center"
@click="openCreateChannelModel" @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"> >
<span> <span>
<svg class="text-zinc-300/80 my-auto" <svg
class="text-zinc-300/80 my-auto"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
height="20" height="20"
viewBox="0 0 24 24"> viewBox="0 0 24 24"
<path 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="M12 5v14m-7-7h14" /> d="M12 5v14m-7-7h14"
/>
</svg> </svg>
</span> </span>
<span>Add channel</span> <span>Add channel</span>
@@ -136,51 +181,68 @@
</div> </div>
<div class="relative bottom-0"> <div class="relative bottom-0">
<DropdownMenu class="bottom-full" <DropdownMenu
class="bottom-full"
:inverted="true" :inverted="true"
:opened="userDropdownOpen"> :opened="userDropdownOpen"
>
<div> <div>
<ul class="flex flex-col gap-y-1"> <ul class="flex flex-col gap-y-1">
<DropdownItem v-if="userIsOwner || userIsAdmin" <DropdownItem
@click="createInvite"> v-if="userIsOwner || userIsAdmin"
@click="createInvite"
>
<span> <span>
Invite a friend Invite a friend
</span> </span>
<span class="mr-1.5 h-fit"> <span class="mr-1.5 h-fit">
<svg xmlns="http://www.w3.org/2000/svg" <svg
xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
height="20" height="20"
viewBox="0 0 24 24"> viewBox="0 0 24 24"
<g fill="none" >
<g
fill="none"
stroke="currentColor" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2"> stroke-width="2"
<circle cx="9" >
<circle
cx="9"
cy="7" cy="7"
r="4" /> r="4"
/>
<path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-10h6m-3-3v6" /> <path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-10h6m-3-3v6" />
</g> </g>
</svg> </svg>
</span> </span>
</DropdownItem> </DropdownItem>
<DropdownItem @click="logout" <DropdownItem
danger="true"> danger="true"
@click="logout"
>
<span> <span>
Logout Logout
</span> </span>
<span class="mr-1.5 h-fit"> <span class="mr-1.5 h-fit">
<svg xmlns="http://www.w3.org/2000/svg" <svg
xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
height="20" height="20"
viewBox="0 0 24 24"> viewBox="0 0 24 24"
<g fill="none" >
<g
fill="none"
stroke="currentColor" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2"> stroke-width="2"
>
<path <path
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" /> 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"
/>
<path d="M7 12h14l-3-3m0 6l3-3" /> <path d="M7 12h14l-3-3m0 6l3-3" />
</g> </g>
</svg> </svg>
@@ -191,24 +253,33 @@
</DropdownMenu> </DropdownMenu>
<div class="h-full p-3"> <div class="h-full p-3">
<div class="grid grid-cols-[32px_1fr_32px] gap-x-2 items-center"> <div class="grid grid-cols-[32px_1fr_32px] gap-x-2 items-center">
<span class="bg-[hsl(220,calc(1*6.8%),22.6%)] w-[32px] h-[32px] rounded-full"></span> <span class="bg-[hsl(220,calc(1*6.8%),22.6%)] w-[32px] h-[32px] rounded-full" />
<span class="h-fit w-fit overflow-ellipsis">{{ user.username }}</span> <span class="h-fit w-fit overflow-ellipsis">{{ user.username }}</span>
<button @click="userDropdownOpen = !userDropdownOpen" <button
class="text-zinc-300 hover:backdrop-brightness-90 p-1 rounded-md transition-all"> class="text-zinc-300 hover:backdrop-brightness-90 p-1 rounded-md transition-all"
<svg xmlns="http://www.w3.org/2000/svg" @click="userDropdownOpen = !userDropdownOpen"
>
<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" >
<g
fill="none"
stroke="currentColor" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2"> stroke-width="2"
>
<path <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" /> 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" />
<circle
cx="12"
cy="12" cy="12"
r="3" /> r="3"
/>
</g> </g>
</svg> </svg>
</button> </button>
@@ -219,25 +290,35 @@
</div> </div>
</aside> </aside>
<div v-if="createChannelModelOpen"
class="absolute z-10 top-0 bottom-0 left-0 right-0">
<div class="bg-black/70 w-screen h-screen"
@click="createChannelModelOpen = false">
</div>
<div <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"> v-if="createChannelModelOpen"
class="absolute z-10 top-0 bottom-0 left-0 right-0"
>
<div
class="bg-black/70 w-screen h-screen"
@click="createChannelModelOpen = false"
/>
<div
class="p-4 z-20 absolute bg-[var(--primary-500)] shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white"
>
<h2 class="font-semibold text-xl"> <h2 class="font-semibold text-xl">
Create a channel: Create a channel:
</h2> </h2>
<div> <div>
<form @submit.prevent="createChannel" <form
class="w-3/5"> class="w-3/5"
<input v-model="channelName" @submit.prevent="createChannel"
>
<input
v-model="channelName"
type="text" type="text"
class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md" class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md"
placeholder="Channel name" /> placeholder="Channel name"
<input type="submit" >
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md" /> <input
type="submit"
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md"
>
</form> </form>
</div> </div>
</div> </div>
@@ -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>

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

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

@@ -6,7 +6,6 @@
<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...
@@ -15,49 +14,48 @@
</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');
} }
}) });

23
nuxt.config.ts
View File

@@ -1,6 +1,6 @@
// 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: {
@@ -14,12 +14,8 @@ export default {
'@/assets/css/main.css' '@/assets/css/main.css'
], ],
devtools: {
postcss: { enabled: true,
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}, },
modules: [ modules: [
@@ -35,10 +31,13 @@ export default {
], ],
}, },
], ],
'@vueuse/nuxt', '@nuxt/devtools',
], ],
typescript: { postcss: {
strict: true plugins: {
} tailwindcss: {},
} autoprefixer: {},
},
},
});

15679
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"
} }
} }

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

@@ -1,69 +1,77 @@
<!-- 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"
:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"
>
<Transition> <Transition>
<EmojiPicker v-on:pickedEmoji="pickedEmoji($event)" <Popup
:opened="emojiPickerData.opened" /> :opened="emojiPickerData.opened"
:openedBy="emojiPickerData.type"
@picked-emoji="pickedEmoji($event)"
/>
<!-- <EmojiPicker v-on:pickedEmoji="pickedEmoji($event)"
:opened="emojiPickerData.opened" /> -->
</Transition> </Transition>
</div> </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>

24
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>

101
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"
:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"
>
<Transition> <Transition>
<EmojiPicker v-on:pickedEmoji="pickedEmoji($event)" <Popup
:opened="emojiPickerData.opened" /> :opened="emojiPickerData.opened"
:openedBy="emojiPickerData.type"
@pickedEmoji="pickedEmoji($event)"
/>
</Transition> </Transition>
</div> </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>

10
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>

71
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
</h2>
<form
class="flex flex-col gap-y-2 my-2"
@submit.prevent="signup()"
>
<input <input
v-model="username"
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none" class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="username" name="username"
v-model="username" placeholder="username"
placeholder="username" /> >
<input <input
v-model="password"
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none" class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="password" name="password"
type="password" type="password"
v-model="password" placeholder="password"
placeholder="password" /> >
<input type="submit" <input
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer" /> type="submit"
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer"
>
</form> </form>
<div class="text-center">Or <nuxt-link class="hover:underline text-blue-500" <div class="text-center">
to="/signup">Signup</nuxt-link></div> Or <nuxt-link
class="hover:underline text-blue-500"
to="/signup"
>
Signup
</nuxt-link>
</div>
</div> </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>

77
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
</h2>
<form
class="flex flex-col gap-y-2 my-2"
@submit.prevent="signup()"
>
<input <input
v-model="username"
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none" class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="username" name="username"
v-model="username" placeholder="username"
placeholder="username" /> >
<input <input
v-model="email"
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none" class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="email" name="email"
v-model="email" placeholder="email"
placeholder="email" /> >
<input <input
v-model="password"
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none" class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="password" name="password"
type="password" type="password"
v-model="password" placeholder="password"
placeholder="password" /> >
<input type="submit" <input
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer" /> type="submit"
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer"
>
</form> </form>
<div class="text-center">Or <nuxt-link class="hover:underline text-blue-500" <div class="text-center">
to="/login">Login</nuxt-link></div> Or <nuxt-link
class="hover:underline text-blue-500"
to="/login"
>
Login
</nuxt-link>
</div>
</div> </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>

8
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

53
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 };
}) });

94
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;
}) });

74
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,24 +35,15 @@ export default defineEventHandler(async (event) => {
id: true, id: true,
DM: true, DM: true,
name: true, name: true,
messages: {
select: {
id: true,
body: true,
creator: {
select: {
id: true,
username: true
} }
}, },
invites: { roles: {
select: {
id: true,
server: {
select: { select: {
id: true, id: true,
name: true, name: true,
participants: { administrator: true,
owner: true,
users: {
select: { select: {
id: true id: true
} }
@@ -60,35 +51,14 @@ export default defineEventHandler(async (event) => {
} }
} }
} }
},
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
} };
}) });

51
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,6 +51,7 @@ export default defineEventHandler(async (event) => {
id: true, id: true,
username: true, username: true,
servers: { servers: {
select: {
participants: { participants: {
select: { select: {
id: true, id: true,
@@ -60,21 +66,24 @@ export default defineEventHandler(async (event) => {
} }
}, },
} }
}
}, },
}) 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`);
}
});

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

@@ -1,11 +1,7 @@
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) {
@@ -85,7 +81,7 @@ export default defineEventHandler(({ node }) => {
} }
} }
} }
}) as { user: IUser } | null; }) as unknown as { user: IUser };
if (!user) { if (!user) {
return; return;
@@ -96,22 +92,22 @@ export default defineEventHandler(({ node }) => {
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;
} }
}, },
}) });

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

@@ -1,4 +1,5 @@
/** @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}',
@@ -19,4 +20,4 @@ module.exports = {
}, },
}, },
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;
}; };
} }

37
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) + ';'
); );
} }