various improvements
This commit is contained in:
62
.eslintrc.json
Normal file
62
.eslintrc.json
Normal 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
4
.gitignore
vendored
@@ -7,3 +7,7 @@ node_modules
|
||||
|
||||
# System files
|
||||
*.log
|
||||
|
||||
# Secret files
|
||||
.env
|
||||
.env.local
|
||||
0
assets/css/main.css
Normal file → Executable file
0
assets/css/main.css
Normal file → Executable file
File diff suppressed because one or more lines are too long
9
components/DropdownItem.vue
Normal file → Executable file
9
components/DropdownItem.vue
Normal file → Executable file
@@ -2,7 +2,8 @@
|
||||
<li>
|
||||
<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="(danger) ? 'hover:bg-[var(--primary-danger)]' : ''">
|
||||
:class="(danger) ? 'hover:bg-[var(--primary-danger)]' : ''"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
</li>
|
||||
@@ -10,6 +11,8 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['danger']
|
||||
}
|
||||
props: {
|
||||
danger: Boolean,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
14
components/DropdownMenu.vue
Normal file → Executable file
14
components/DropdownMenu.vue
Normal file → Executable file
@@ -1,8 +1,11 @@
|
||||
<template>
|
||||
<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'"
|
||||
v-if="opened">
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</Transition>
|
||||
@@ -10,8 +13,11 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
props: ['opened', 'inverted'],
|
||||
}
|
||||
props: {
|
||||
opened: Boolean,
|
||||
inverted: Boolean,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
298
components/EmojiPicker.vue
Normal file → Executable file
298
components/EmojiPicker.vue
Normal file → Executable file
@@ -1,27 +1,31 @@
|
||||
<script lang="ts">
|
||||
import emojiJson from '~/assets/json/emoji.json'
|
||||
import emojiJson from '~/assets/json/emoji.json';
|
||||
|
||||
export default {
|
||||
props: ['opened'],
|
||||
props: {
|
||||
opened: Boolean,
|
||||
},
|
||||
emits: ['picked-emoji'],
|
||||
data() {
|
||||
return {
|
||||
emojis: emojiJson.filter((e) => e.has_img_twitter),
|
||||
emojis: emojiJson,
|
||||
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: "nature", emojis: emojiJson.filter((e) => e.has_img_twitter).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: "activities", emojis: emojiJson.filter((e) => e.has_img_twitter).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: "objects", emojis: emojiJson.filter((e) => e.has_img_twitter).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: "flags", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('flags')) }
|
||||
{ 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.category.toLowerCase().includes('nature')) },
|
||||
{ name: 'food', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('food')) },
|
||||
{ name: 'activities', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('activities')) },
|
||||
{ name: 'travel', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('travel')) },
|
||||
{ name: 'objects', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('objects')) },
|
||||
{ name: 'symbols', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('symbols')) },
|
||||
{ name: 'flags', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('flags')) }
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
emojiStyles(emojiShortName: string, width: number) {
|
||||
const emojis = emojiJson.filter((e) => e.has_img_twitter)
|
||||
const emoji = emojis.find((e) => e.short_name === emojiShortName)
|
||||
const emojis = emojiJson;
|
||||
const emoji = emojis.find((e) => e.short_names[0] === emojiShortName);
|
||||
if (!emoji) return;
|
||||
const sheet_x = (emoji.sheet_y * (width + 2));
|
||||
const sheet_y = (emoji.sheet_x * (width + 2));
|
||||
return {
|
||||
@@ -31,164 +35,232 @@ export default {
|
||||
display: 'inline-block',
|
||||
'background-position': `-${sheet_y + 1}px -${sheet_x + 1}px`,
|
||||
'background-size': '6480% 6480%'
|
||||
}
|
||||
};
|
||||
},
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div v-if="opened"
|
||||
class="rounded-lg shadow-md p-3 z-10 bg-[var(--primary-dark)]">
|
||||
<div>
|
||||
<div class="py-1.5 flex flex-col">
|
||||
<div class="flex-row gap-x-2 overflow-x-scroll">
|
||||
<button @click="scrollTo('people')"
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
<button
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
|
||||
@click="scrollTo('people')"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="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="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>
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="scrollTo('nature')"
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
<button
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
|
||||
@click="scrollTo('nature')"
|
||||
>
|
||||
<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="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">
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<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" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="scrollTo('travel')"
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
<button
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
|
||||
@click="scrollTo('travel')"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
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>
|
||||
</button>
|
||||
<button @click="scrollTo('objects')"
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
<button
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
|
||||
@click="scrollTo('objects')"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
stroke-width="2"
|
||||
>
|
||||
<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="M16.746 16.726a3 3 0 1 0 .252-5.555" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="scrollTo('symbols')"
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
<button
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
|
||||
@click="scrollTo('symbols')"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<circle cx="12"
|
||||
cy="12"
|
||||
r="9" />
|
||||
<path d="M12 7v5l3 3" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<button @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"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
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" />
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="9"
|
||||
/>
|
||||
<path d="M12 7v5l3 3" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
|
||||
@click="scrollTo('flags')"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M5 5v16M19 5v9M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0M5 14a5 5 0 0 1 7 0a5 5 0 0 0 7 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-[375px] max-h-[450px] overflow-hidden overflow-y-scroll scroll-smooth EmojiPicker"
|
||||
id="emoji-pane">
|
||||
<div class="text-black flex flex-col category bg-[var(--primary-dark)]"
|
||||
v-for="category in categories">
|
||||
<h6 class="uppercase text-[var(--primary-text)] sticky top-0 bg-inherit z-10 py-1">{{
|
||||
<div
|
||||
id="emoji-pane"
|
||||
class="overflow-hidden overflow-y-scroll scroll-smooth EmojiPicker max-h-[450px]"
|
||||
>
|
||||
<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
|
||||
}}</h6>
|
||||
<div class="flex flex-wrap"
|
||||
:id="category.name">
|
||||
<button v-for="emoji in category.emojis"
|
||||
}}
|
||||
</h6>
|
||||
<div
|
||||
: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"
|
||||
@click="$emit('pickedEmoji', emoji.short_name)"
|
||||
:aria-label='emoji.name.toLowerCase()'>
|
||||
<span :style="emojiStyles(emoji.short_name, 32)"
|
||||
@click="$emit('picked-emoji', emoji.short_names[0])"
|
||||
>
|
||||
<span
|
||||
:style="emojiStyles(emoji.short_names[0], 32)"
|
||||
draggable="false"
|
||||
class="w-4" />
|
||||
class="w-4"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
48
components/InviteCard.vue
Normal file → Executable file
48
components/InviteCard.vue
Normal file → Executable file
@@ -1,17 +1,30 @@
|
||||
<template>
|
||||
<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
|
||||
server</p>
|
||||
<p class="text-sm font-semibold text-zinc-100">
|
||||
You've been invited to join a
|
||||
server
|
||||
</p>
|
||||
<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
|
||||
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>
|
||||
</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">
|
||||
<button @click="joinServer(invite)"
|
||||
<button
|
||||
class="font-semibold rounded px-4 py-2 transition-colors"
|
||||
:class="(userInServer) ? 'bg-green-800 cursor-not-allowed' : 'bg-green-700 hover:bg-green-600'">
|
||||
:class="(userInServer) ? 'bg-green-800 cursor-not-allowed' : 'bg-green-700 hover:bg-green-600'"
|
||||
@click="joinServer(invite)"
|
||||
>
|
||||
<span v-if="userInServer">
|
||||
Joined
|
||||
</span>
|
||||
@@ -24,31 +37,36 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { useGlobalStore } from '~/stores/store'
|
||||
import { IInviteCode, IUser } from '~/types'
|
||||
import { useGlobalStore } from '~/stores/store';
|
||||
import { IInviteCode, IUser } from '~/types';
|
||||
|
||||
export default {
|
||||
props: ['invite'],
|
||||
props: {
|
||||
invite: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
user: storeToRefs(useGlobalStore()).user,
|
||||
servers: storeToRefs(useGlobalStore()).servers,
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
userInServer(): boolean {
|
||||
return !!this.invite.server.participants.find((e: IUser) => e.id === this.user.id)
|
||||
return !!this.invite.server.participants.find((e: IUser) => e.id === this.user.id);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async joinServer(invite: IInviteCode) {
|
||||
if (this.userInServer) return;
|
||||
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;
|
||||
this.servers?.push(server)
|
||||
this.invite.server.participants.push(this.user)
|
||||
this.servers?.push(server);
|
||||
this.invite.server.participants.push(this.user);
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
207
components/Message.vue
Normal file → Executable file
207
components/Message.vue
Normal file → Executable file
@@ -1,105 +1,157 @@
|
||||
<template>
|
||||
<div class="relative message-wrapper"
|
||||
@mouseleave="overflowShown = false">
|
||||
<div class="absolute right-0 mr-10 -top-[20px] h-fit opacity-0 pointer-events-none action-buttons z-[5]"
|
||||
:class="(emojiPickerOpen) ? 'opacity-100 pointer-events-auto' : ''">
|
||||
<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 @click="openEmojiPicker()"
|
||||
class="p-1 hover:backdrop-brightness-125 transition-all flex w-fit h-fit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
<div
|
||||
class="relative message-wrapper"
|
||||
@mouseleave="overflowShown = false"
|
||||
>
|
||||
<div
|
||||
class="absolute right-0 mr-10 -top-[20px] h-fit opacity-0 pointer-events-none action-buttons z-[5]"
|
||||
:class="(emojiPickerOpen) ? 'opacity-100 pointer-events-auto' : ''"
|
||||
>
|
||||
<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"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
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>
|
||||
</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"
|
||||
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"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<circle cx="5"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="12"
|
||||
r="1" />
|
||||
<circle cx="12"
|
||||
r="1"
|
||||
/>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="1" />
|
||||
<circle cx="19"
|
||||
r="1"
|
||||
/>
|
||||
<circle
|
||||
cx="19"
|
||||
cy="12"
|
||||
r="1" />
|
||||
r="1"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<div v-if="shiftPressed || overflowShown"
|
||||
class="flex">
|
||||
<button @click="copy(message.id)"
|
||||
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"
|
||||
<div
|
||||
v-if="shiftPressed || overflowShown"
|
||||
class="flex"
|
||||
>
|
||||
<button
|
||||
class="p-1 hover:backdrop-brightness-125 transition-all flex text-[var(--primary-400)] w-[28px] h-[28px] items-center justify-center"
|
||||
@click="copy(message.id)"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="bg-[var(--primary-text)] rounded"
|
||||
width="18"
|
||||
height="18"
|
||||
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" />
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
</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()"
|
||||
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"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transition-[backdrop-filter] hover:backdrop-brightness-90 ease-[cubic-bezier(.37,.64,.59,.33)] duration-150 my-4 px-7 py-2 message-wrapper items-center z-[1]"
|
||||
:class="classes">
|
||||
<div
|
||||
class="transition-[backdrop-filter] hover:backdrop-brightness-90 ease-[cubic-bezier(.37,.64,.59,.33)] duration-150 my-4 px-7 py-2 message-wrapper items-center z-[1]"
|
||||
:class="classes"
|
||||
>
|
||||
<div class="message-content">
|
||||
<div class="message-sender-text">
|
||||
<p class="mb-1 font-semibold w-fit"
|
||||
v-if="showUsername">
|
||||
<p
|
||||
v-if="showUsername"
|
||||
class="mb-1 font-semibold w-fit"
|
||||
>
|
||||
{{ message.creator.username }}
|
||||
</p>
|
||||
<p class="break-words max-w-full"
|
||||
v-html="message.body"></p>
|
||||
<p
|
||||
class="break-words max-w-full"
|
||||
v-html="message.body"
|
||||
/>
|
||||
</div>
|
||||
<div v-for="invite in message.invites">
|
||||
<div
|
||||
v-for="invite in message.invites"
|
||||
:key="invite.id"
|
||||
>
|
||||
<InviteCard :invite="invite" />
|
||||
</div>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<button @click="toggleReaction(reaction.emoji.name)"
|
||||
<button
|
||||
v-for="reaction in message.reactions"
|
||||
:key="reaction.emoji"
|
||||
class="py-0.5 px-1.5 bg-[var(--primary-500)] border items-center flex rounded-lg border-[var(--primary-500)] hover:border-[var(--reaction-border)] hover:bg-[var(--reaction-hover)] transition-colors shadow-sm max-h-[30px]"
|
||||
:class="(reaction.users.find((e) => e.id === user.id)) ? '!border-[rgb(88,101,242)] hover:!border-[rgb(88,101,242)]' : ''">
|
||||
:class="(reaction.users.find((e) => e.id === user.id)) ? '!border-[rgb(88,101,242)] hover:!border-[rgb(88,101,242)]' : ''"
|
||||
@click="toggleReaction(reaction.emoji)"
|
||||
>
|
||||
<div class="flex items-center mr-0.5 w-6 drop-shadow">
|
||||
<span :style="emojiStyles(reaction.emoji.name, 16)"></span>
|
||||
<span :style="emojiStyles(reaction.emoji, 16)" />
|
||||
</div>
|
||||
<div class="relative overflow-hidden ml-1.5">
|
||||
<div class="min-w-[9px] h-6"
|
||||
:key="reaction.count">
|
||||
<span class="dropshadow-sm">{{ reaction.count }}</span>
|
||||
<div
|
||||
:key="reaction.users.length"
|
||||
class="min-w-[9px] h-6"
|
||||
>
|
||||
<span class="dropshadow-sm">{{ reaction.users.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
@@ -111,9 +163,8 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { PropType } from 'vue';
|
||||
import { IEmojiPickerData, IMessage } from '~/types';
|
||||
import { IPopupData, IMessage } from '~/types';
|
||||
import { useGlobalStore } from '~/stores/store';
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
import emojiJson from '~/assets/json/emoji.json';
|
||||
|
||||
export default {
|
||||
@@ -140,33 +191,26 @@ export default {
|
||||
user: storeToRefs(useGlobalStore()).user,
|
||||
emojiPickerOpen: false,
|
||||
overflowShown: false
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const { text, copy, copied, isSupported } = useClipboard()
|
||||
|
||||
return {
|
||||
copy
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const { $listen } = useNuxtApp()
|
||||
const { $listen } = useNuxtApp();
|
||||
$listen('pickedEmoji', (emoji) => {
|
||||
if (useGlobalStore().emojiPickerData.openedBy.messageId !== this.message.id) return;
|
||||
const replacementEmoji = emojiJson.find((e) => e.short_name === emoji);
|
||||
if (useGlobalStore().emojiPickerData.openedBy?.messageId !== this.message.id) return;
|
||||
const replacementEmoji = emojiJson.find((e) => e.short_names[0] === emoji);
|
||||
if (!replacementEmoji?.emoji) return;
|
||||
if (this.message.reactions?.find((e) => e.emoji.name === replacementEmoji.emoji)) return
|
||||
this.toggleReaction(replacementEmoji.emoji)
|
||||
if (this.message.reactions?.find((e) => e.emoji === replacementEmoji.emoji)) return;
|
||||
this.toggleReaction(replacementEmoji.emoji);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
async toggleReaction(emoji: string) {
|
||||
const route = useRoute()
|
||||
let { message } = await $fetch(`/api/channels/${route.params.id}/messages/${this.message.id}/reactions/${emoji}`, { method: "POST" }) as { message: IMessage }
|
||||
const route = useRoute();
|
||||
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() {
|
||||
const actionButtons = document.getElementById(`actions-${this.message.id}`);
|
||||
@@ -181,15 +225,15 @@ export default {
|
||||
top,
|
||||
right: actionButtons.clientWidth + 40,
|
||||
openedBy: {
|
||||
type: "message",
|
||||
type: 'message',
|
||||
messageId: this.message.id
|
||||
}
|
||||
} as IEmojiPickerData
|
||||
useGlobalStore().toggleEmojiPicker(payload)
|
||||
} as IPopupData;
|
||||
useGlobalStore().toggleEmojiPicker(payload);
|
||||
},
|
||||
emojiStyles(emoji: string, width: number) {
|
||||
const emojis = emojiJson.filter((e) => e.has_img_twitter)
|
||||
const twemoji = emojis.find((e) => e.emoji === emoji)
|
||||
const emojis = emojiJson;
|
||||
const twemoji = emojis.find((e) => e.emoji === emoji);
|
||||
if (twemoji === undefined || twemoji.sheet_x === undefined || twemoji.sheet_y === undefined) {
|
||||
return {};
|
||||
}
|
||||
@@ -197,19 +241,22 @@ export default {
|
||||
const sheet_y = (twemoji.sheet_x * (32 + 2)) / 2;
|
||||
return {
|
||||
background: 'url(/32.png)',
|
||||
width: `${width + 1}px`,
|
||||
height: `${width + 1}px`,
|
||||
width: `${width}px`,
|
||||
height: `${width}px`,
|
||||
display: 'inline-block',
|
||||
'background-position': `-${sheet_y}px -${sheet_x}px`,
|
||||
'background-size': '1037px 1037px'
|
||||
}
|
||||
};
|
||||
},
|
||||
async deleteMessage() {
|
||||
const route = useRoute()
|
||||
await $fetch(`/api/channels/${route.params.id}/messages/${this.message.id}/delete`, { method: "POST" })
|
||||
const route = useRoute();
|
||||
await $fetch(`/api/channels/${route.params.id}/messages/${this.message.id}/delete`, { method: 'DELETE' });
|
||||
},
|
||||
copy(text: string) {
|
||||
navigator.clipboard.writeText(text);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
244
components/MessagePane.vue
Normal file → Executable file
244
components/MessagePane.vue
Normal file → Executable file
@@ -1,36 +1,54 @@
|
||||
<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 v-if="!server.DM"
|
||||
class="flex items-center">
|
||||
<div
|
||||
v-if="!server.DM"
|
||||
class="flex items-center"
|
||||
>
|
||||
<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"
|
||||
width="24"
|
||||
height="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" />
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="text-zinc-100 font-semibold">{{ server.name }}</span>
|
||||
</div>
|
||||
<div v-else
|
||||
class="flex items-center">
|
||||
<div
|
||||
v-else
|
||||
class="flex items-center"
|
||||
>
|
||||
<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"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<circle cx="12"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle
|
||||
cx="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" />
|
||||
</g>
|
||||
</svg>
|
||||
@@ -42,69 +60,101 @@
|
||||
</div>
|
||||
|
||||
<section
|
||||
class="bg-[var(--foreground-color)] mb-3 mx-1 h-[calc(100%-12px)] overflow-hidden rounded-lg relative grid grid-rows-[1fr_70px]">
|
||||
<div class="h-full overflow-y-scroll" id="conversation-pane">
|
||||
class="bg-[var(--foreground-color)] mb-3 mx-1 h-[calc(100%-12px)] overflow-hidden rounded-lg relative grid grid-rows-[1fr_70px]"
|
||||
>
|
||||
<div
|
||||
id="conversation-pane"
|
||||
class="h-full overflow-y-scroll"
|
||||
>
|
||||
<div class="w-full pb-1 bg-inherit">
|
||||
<div>
|
||||
<div v-if="server.messages.length === 0">
|
||||
<p>No messages yet</p>
|
||||
</div>
|
||||
<Message v-else
|
||||
<Message
|
||||
v-for="(message, i) in server.messages"
|
||||
v-else
|
||||
:key="message.id"
|
||||
:message="message"
|
||||
:shiftPressed="shiftPressed"
|
||||
:showUsername="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id"
|
||||
:classes="calculateMessageClasses(message, i)" />
|
||||
:shift-pressed="shiftPressed"
|
||||
:show-username="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id"
|
||||
:classes="calculateMessageClasses(message, i)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showSearch"
|
||||
class="absolute bottom-[calc(75px+0.5rem)] mx-4 w-[calc(100vw-88px-240px-32px)] py-3 px-4 bg-[var(--primary-500)] rounded-lg shadow-md z-5">
|
||||
<div
|
||||
v-if="showSearch"
|
||||
class="absolute bottom-[calc(75px+0.5rem)] mx-4 w-[calc(100vw-88px-240px-32px)] py-3 px-4 bg-[var(--primary-500)] rounded-lg shadow-md z-5"
|
||||
>
|
||||
<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"
|
||||
@click="completeMention(user)">
|
||||
{{ user.username }}
|
||||
@click="completeMention(resultingUser)"
|
||||
>
|
||||
{{ resultingUser.username }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex absolute flex-row bottom-0 w-full h-fit bg-inherit mb-1">
|
||||
<form @keyup="checkForMentions"
|
||||
<form
|
||||
class="relative px-4 w-full pt-1.5 h-fit pb-1"
|
||||
@keyup="checkForMentions"
|
||||
@keypress="typing($event)"
|
||||
@submit.prevent="sendMessage"
|
||||
@keydown.enter.exact.prevent="sendMessage"
|
||||
class="relative px-4 w-full pt-1.5 h-fit pb-1">
|
||||
<div id="textbox"
|
||||
class="px-4 rounded-md w-full min-h-[44px] h-fit bg-[var(--message-input-color)] placeholder:text-[var(--primary-placeholder)] flex flex-row">
|
||||
<textarea type="text"
|
||||
>
|
||||
<div
|
||||
id="textbox"
|
||||
class="px-4 rounded-md w-full min-h-[44px] h-fit bg-[var(--message-input-color)] placeholder:text-[var(--primary-placeholder)] flex flex-row"
|
||||
>
|
||||
<textarea
|
||||
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]"
|
||||
cols="1"
|
||||
v-model="messageContent"
|
||||
placeholder="Send a Message..." />
|
||||
<input type="submit"
|
||||
placeholder="Send a Message..."
|
||||
/>
|
||||
<input
|
||||
id="submit"
|
||||
type="submit"
|
||||
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"
|
||||
role="button"><svg width="32"
|
||||
role="button"
|
||||
><svg
|
||||
width="32"
|
||||
height="26"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
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>
|
||||
</div>
|
||||
<div class="w-full h-4">
|
||||
<p class="text-sm"
|
||||
v-if="usersTyping.length > 0">
|
||||
<p
|
||||
v-if="usersTyping.length > 0"
|
||||
class="text-sm"
|
||||
>
|
||||
<span v-if="usersTyping.length < 4">
|
||||
<span v-for="(username, i) in usersTyping"
|
||||
class="font-semibold">
|
||||
<span
|
||||
v-for="(username, i) in usersTyping"
|
||||
:key="username"
|
||||
class="font-semibold"
|
||||
>
|
||||
<span v-if="i === usersTyping.length - 1 && usersTyping.length > 1">and </span>
|
||||
{{ username }}
|
||||
<span v-if="i !== usersTyping.length - 1 && usersTyping.length > 1">, </span>
|
||||
@@ -139,42 +189,42 @@ export default {
|
||||
showSearch: false,
|
||||
searchResults: [] as SafeUser[],
|
||||
search: '',
|
||||
}
|
||||
};
|
||||
},
|
||||
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) => {
|
||||
const permission = (result === 'granted') ? true : false
|
||||
this.canSendNotifications = permission
|
||||
const permission = (result === 'granted') ? true : false;
|
||||
this.canSendNotifications = permission;
|
||||
});
|
||||
|
||||
const conversationDiv = document.getElementById('conversation-pane');
|
||||
if (!conversationDiv) throw new Error('conversation div not found')
|
||||
this.scrollToBottom()
|
||||
if (!conversationDiv) throw new Error('conversation div not found');
|
||||
this.scrollToBottom();
|
||||
|
||||
this.listenToWebsocket(conversationDiv)
|
||||
this.listenToWebsocket(conversationDiv);
|
||||
},
|
||||
methods: {
|
||||
async sendMessage() {
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
|
||||
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 (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 = '';
|
||||
const conversationDiv = document.getElementById('conversation-pane');
|
||||
if (!conversationDiv) throw new Error('wtf');
|
||||
|
||||
setTimeout(() => {
|
||||
conversationDiv.scrollTop = conversationDiv.scrollHeight;
|
||||
})
|
||||
});
|
||||
},
|
||||
scrollToBottom() {
|
||||
const conversationDiv = document.getElementById('conversation-pane');
|
||||
@@ -183,38 +233,38 @@ export default {
|
||||
},
|
||||
typing(event: KeyboardEvent) {
|
||||
const specialKeys = [
|
||||
"Backspace",
|
||||
"Enter",
|
||||
"Shift",
|
||||
"Control"
|
||||
]
|
||||
'Backspace',
|
||||
'Enter',
|
||||
'Shift',
|
||||
'Control'
|
||||
];
|
||||
if (specialKeys.indexOf(event.key) !== -1) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.ctrlKey) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
this.socket.emit(`typing`, this.server.id);
|
||||
this.socket.emit('typing', this.server.id);
|
||||
},
|
||||
mouseEnter() {
|
||||
document.body.addEventListener('keydown', this.keyPressed, false);
|
||||
document.body.addEventListener('keyup', this.keyUnpressed, false);
|
||||
},
|
||||
mouseLeave() {
|
||||
this.shiftPressed = false
|
||||
document.body.removeEventListener('keydown', this.keyPressed, false)
|
||||
document.body.removeEventListener('keyup', this.keyUnpressed, false)
|
||||
this.shiftPressed = false;
|
||||
document.body.removeEventListener('keydown', this.keyPressed, false);
|
||||
document.body.removeEventListener('keyup', this.keyUnpressed, false);
|
||||
},
|
||||
keyPressed(ev: KeyboardEvent) {
|
||||
if (ev.key === 'Shift') {
|
||||
this.shiftPressed = true
|
||||
this.shiftPressed = true;
|
||||
}
|
||||
},
|
||||
keyUnpressed(ev: KeyboardEvent) {
|
||||
if (ev.key === 'Shift') {
|
||||
this.shiftPressed = false
|
||||
this.shiftPressed = false;
|
||||
}
|
||||
},
|
||||
calculateMessageClasses(message: IMessage, i: number) {
|
||||
@@ -238,81 +288,81 @@ export default {
|
||||
const endPosition = input.selectionEnd;
|
||||
|
||||
if (startPosition === endPosition && this.inMention(startPosition)) {
|
||||
let participants
|
||||
let participants;
|
||||
if (this.server.DM) {
|
||||
participants = this.server.dmParticipants
|
||||
participants = this.server.dmParticipants;
|
||||
} 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);
|
||||
if (!search) return
|
||||
if (!search) return;
|
||||
|
||||
this.search = search;
|
||||
if (this.search.length === 0) {
|
||||
this.showSearch = false
|
||||
this.showSearch = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const maxResults = Math.floor(document.body.clientHeight / 48 + 8) - 6
|
||||
let results = participants.filter((e: SafeUser) => e.username.includes(this.search))
|
||||
const maxResults = Math.floor(document.body.clientHeight / 48 + 8) - 6;
|
||||
let results = participants.filter((e: SafeUser) => e.username.includes(this.search));
|
||||
|
||||
results.sort((a: SafeUser, b: SafeUser) => {
|
||||
const usernameA = a.username.toLowerCase();
|
||||
const usernameB = b.username.toLowerCase();
|
||||
|
||||
if (usernameA < usernameB) {
|
||||
return -1
|
||||
return -1;
|
||||
} else if (usernameA > usernameB) {
|
||||
return 1
|
||||
return 1;
|
||||
} else {
|
||||
return 0
|
||||
return 0;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
if (results.length > maxResults) {
|
||||
results.length = maxResults
|
||||
results.length = maxResults;
|
||||
}
|
||||
|
||||
if (results.length === 0) {
|
||||
this.showSearch = false;
|
||||
return;
|
||||
}
|
||||
this.searchResults = results
|
||||
this.searchResults = results;
|
||||
this.showSearch = true;
|
||||
} else {
|
||||
this.showSearch = false
|
||||
this.showSearch = false;
|
||||
}
|
||||
},
|
||||
inMention(cursorPos: number): boolean {
|
||||
if (this.messageContent[cursorPos - 1] === '@') return true;
|
||||
if (this.messageContent[cursorPos - 1] === ' ') return false;
|
||||
if (cursorPos === 0) return false;
|
||||
return this.inMention(cursorPos - 1)
|
||||
return this.inMention(cursorPos - 1);
|
||||
},
|
||||
completeMention(user: SafeUser) {
|
||||
this.messageContent = this.messageContent.replace('@' + this.search, `<@${user.id}>`)
|
||||
this.messageContent = this.messageContent.replace('@' + this.search, `<@${user.id}>`);
|
||||
this.showSearch = false;
|
||||
document.getElementById('messageBox')?.focus()
|
||||
document.getElementById('messageBox')?.focus();
|
||||
},
|
||||
listenToWebsocket(conversationDiv: HTMLElement) {
|
||||
this.socket.removeAllListeners();
|
||||
|
||||
this.socket.on(`message-${this.server.id}`, (ev: { message: IMessage, deleted?: boolean }) => {
|
||||
let { message, deleted } = ev
|
||||
let { message, deleted } = ev;
|
||||
|
||||
if (deleted) {
|
||||
useGlobalStore().removeMessage(message.id)
|
||||
useGlobalStore().removeMessage(message.id);
|
||||
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)) {
|
||||
// message is already in the server, replace it with the updated message
|
||||
useGlobalStore().updateMessage(message.id, message)
|
||||
useGlobalStore().updateMessage(message.id, message);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -323,27 +373,27 @@ export default {
|
||||
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;
|
||||
|
||||
setTimeout(() => {
|
||||
if (conversationDiv.scrollTop + 20 < (conversationDiv.scrollHeight - conversationDiv.clientHeight) - lastElementChild.clientHeight) return;
|
||||
conversationDiv.scrollTop = conversationDiv.scrollHeight;
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
let timeout: NodeJS.Timeout;
|
||||
this.socket.on(`typing-${this.server.id}`, (ev: string) => {
|
||||
if (ev === this.user.username) return;
|
||||
clearTimeout(timeout)
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => {
|
||||
this.usersTyping = this.usersTyping.filter(username => username !== ev)
|
||||
this.usersTyping = this.usersTyping.filter(username => username !== ev);
|
||||
}, 750);
|
||||
if (this.usersTyping.includes(ev)) return;
|
||||
this.usersTyping.push(ev);
|
||||
})
|
||||
});
|
||||
},
|
||||
// resizeTextarea() {
|
||||
// const textArea = document.getElementById('messageBox')
|
||||
@@ -357,5 +407,5 @@ export default {
|
||||
// console.log('a')
|
||||
// }
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
149
components/Nav.vue
Normal file → Executable file
149
components/Nav.vue
Normal file → Executable file
@@ -1,32 +1,46 @@
|
||||
<!-- eslint-disable vue/no-multiple-template-root -->
|
||||
<template>
|
||||
<nav
|
||||
class="p-4 bg-[var(--background-color)] grid grid-cols-1 grid-rows-[56px_1fr_56px] h-screen min-w-[88px] text-white relative">
|
||||
class="p-4 bg-[var(--background-color)] grid grid-cols-1 grid-rows-[56px_1fr_56px] h-screen min-w-[88px] text-white relative"
|
||||
>
|
||||
<div>
|
||||
<nuxt-link to="/channel/@me">
|
||||
<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>
|
||||
<svg width="32"
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24">
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="fire"
|
||||
<linearGradient
|
||||
id="fire"
|
||||
x1="-2.778%"
|
||||
x2="100%"
|
||||
y1="24%"
|
||||
y2="48%">
|
||||
<stop offset="0%"
|
||||
stop-color="#ff0c41" />
|
||||
<stop offset="100%"
|
||||
stop-color="#ff6b0c" />
|
||||
y2="48%"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stop-color="#ff0c41"
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stop-color="#ff6b0c"
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path fill="none"
|
||||
<path
|
||||
fill="none"
|
||||
stroke="url(#fire)"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
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>
|
||||
</span>
|
||||
</button>
|
||||
@@ -34,97 +48,130 @@
|
||||
</div>
|
||||
<div class="overflow-y-scroll my-2 flex gap-y-2 flex-col">
|
||||
<div class="w-full flex justify-center">
|
||||
<hr class="border-2 rounded-md border-[var(--primary-300)] w-8/12 my-0.5" />
|
||||
<hr class="border-2 rounded-md border-[var(--primary-300)] w-8/12 my-0.5">
|
||||
</div>
|
||||
<nuxt-link v-for="server in servers"
|
||||
:to="'/channel/' + server.channels[0]?.id">
|
||||
<button :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]">
|
||||
<svg width="32"
|
||||
<nuxt-link
|
||||
v-for="server in servers"
|
||||
:key="server.id"
|
||||
:to="'/channel/' + server.channels[0]?.id"
|
||||
>
|
||||
<button
|
||||
:key="server.id"
|
||||
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300 h-[56px] w-[56px]"
|
||||
:class="(activeServer.id === server.id) ? '!rounded-[1.375rem]' : ''"
|
||||
>
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 256 154">
|
||||
viewBox="0 0 256 154"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="svgIDa"
|
||||
<linearGradient
|
||||
id="svgIDa"
|
||||
x1="-2.778%"
|
||||
x2="100%"
|
||||
y1="32%"
|
||||
y2="67.556%">
|
||||
<stop offset="0%"
|
||||
stop-color="#2298BD" />
|
||||
<stop offset="100%"
|
||||
stop-color="#0ED7B5" />
|
||||
y2="67.556%"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stop-color="#2298BD"
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stop-color="#0ED7B5"
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path fill="url(#svgIDa)"
|
||||
d="M128 0C93.867 0 72.533 17.067 64 51.2C76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0ZM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2c9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8Z" />
|
||||
<path
|
||||
fill="url(#svgIDa)"
|
||||
d="M128 0C93.867 0 72.533 17.067 64 51.2C76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0ZM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2c9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div>
|
||||
<button @click="createServerModelOpen = true"
|
||||
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-[var(--primary-200)] duration-300 text-[var(--primary-accent)] cursor-pointer">
|
||||
<svg width="32"
|
||||
<button
|
||||
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300 text-[var(--primary-accent)] cursor-pointer"
|
||||
@click="createServerModelOpen = true"
|
||||
>
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 5v14m-7-7h14" />
|
||||
d="M12 5v14m-7-7h14"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div v-if="createServerModelOpen"
|
||||
class="absolute z-10 top-0 bottom-0 left-0 right-0">
|
||||
<div
|
||||
class="p-4 z-20 absolute bg-[var(--primary-500)] shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white">
|
||||
v-if="createServerModelOpen"
|
||||
class="absolute z-10 top-0 bottom-0 left-0 right-0"
|
||||
>
|
||||
<div
|
||||
class="p-4 z-20 absolute bg-[var(--primary-500)] shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white"
|
||||
>
|
||||
<h2 class="font-semibold text-xl">
|
||||
Create a server:
|
||||
</h2>
|
||||
<div>
|
||||
<form @submit.prevent="createServer"
|
||||
class="w-3/5">
|
||||
<input v-model="serverName"
|
||||
<form
|
||||
class="w-3/5"
|
||||
@submit.prevent="createServer"
|
||||
>
|
||||
<input
|
||||
v-model="serverName"
|
||||
type="text"
|
||||
class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md placeholder:text-[var(--primary-placeholder)]"
|
||||
placeholder="Server name" />
|
||||
<input type="submit"
|
||||
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md" />
|
||||
placeholder="Server name"
|
||||
>
|
||||
<input
|
||||
type="submit"
|
||||
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md"
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-black/70 w-screen h-screen"
|
||||
@click="createServerModelOpen = false">
|
||||
<div
|
||||
class="bg-black/70 w-screen h-screen"
|
||||
@click="createServerModelOpen = false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { useGlobalStore } from '~/stores/store'
|
||||
import { useGlobalStore } from '~/stores/store';
|
||||
import { IServer } from '~/types';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
servers: storeToRefs(useGlobalStore()).servers,
|
||||
serverType: storeToRefs(useGlobalStore()).activeServerType,
|
||||
activeServer: storeToRefs(useGlobalStore()).activeServer,
|
||||
createServerModelOpen: false,
|
||||
serverName: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async createServer() {
|
||||
const globalStore = useGlobalStore();
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
|
||||
const server: IServer = await $fetch('/api/channels/create', { method: 'post', body: { serverName: this.serverName }, headers })
|
||||
const server: IServer = await $fetch('/api/channels/create', { method: 'post', body: { serverName: this.serverName }, headers });
|
||||
this.createServerModelOpen = false;
|
||||
this.serverName = '';
|
||||
globalStore.addServer(server)
|
||||
globalStore.addServer(server);
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
25
components/Popup.vue
Executable file
25
components/Popup.vue
Executable 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
271
components/Sidebar.vue
Normal file → Executable file
@@ -1,61 +1,86 @@
|
||||
<!-- eslint-disable vue/no-multiple-template-root -->
|
||||
<template>
|
||||
<aside class="bg-[var(--background-color)] min-w-60 w-60 h-screen shadow-sm text-white select-none relative z-[2]">
|
||||
<div v-if="serverType === 'dms' || !server"
|
||||
class="h-full grid grid-rows-[48px_1fr] w-full">
|
||||
<div
|
||||
v-if="serverType === 'dms' || !server"
|
||||
class="h-full grid grid-rows-[48px_1fr] w-full"
|
||||
>
|
||||
<section>
|
||||
<h4 @click="serverDropdownOpen = !serverDropdownOpen"
|
||||
class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center cursor-pointer p-1 bg-inherit transition-all">
|
||||
<h4
|
||||
class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center p-1 bg-inherit transition-all"
|
||||
>
|
||||
<span>Direct messages</span>
|
||||
</h4>
|
||||
</section>
|
||||
|
||||
<div
|
||||
class="h-[calc(100%-12px)] mb-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg">
|
||||
class="h-[calc(100%-12px)] mb-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg"
|
||||
>
|
||||
<div class="h-fit">
|
||||
<nuxt-link v-for="dm in dms"
|
||||
:to="'/channel/@me/' + dm.id">
|
||||
<nuxt-link
|
||||
v-for="dm in dms"
|
||||
:key="dm.id"
|
||||
:to="'/channel/@me/' + dm.id"
|
||||
>
|
||||
<div
|
||||
class="mx-2 my-4 bg-inherit hover:backdrop-brightness-[1.35] px-2 py-2 max-h-10 h-10 overflow-ellipsis rounded-md transition-all">
|
||||
class="mx-2 my-4 bg-inherit hover:backdrop-brightness-[1.35] px-2 py-2 max-h-10 h-10 overflow-ellipsis rounded-md transition-all"
|
||||
>
|
||||
{{ dm.dmParticipants?.find((e) => e.id !== user.id)?.username }}
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else
|
||||
class="w-full h-full max-h-screen grid grid-rows-[48px_1fr]">
|
||||
<div
|
||||
v-else
|
||||
class="w-full h-full max-h-screen grid grid-rows-[48px_1fr]"
|
||||
>
|
||||
<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="(!serverDropdownOpen) ? 'hover:backdrop-brightness-125' : 'backdrop-brightness-125'">
|
||||
:class="(!serverDropdownOpen) ? 'hover:backdrop-brightness-125' : 'backdrop-brightness-125'"
|
||||
@click="serverDropdownOpen = !serverDropdownOpen"
|
||||
>
|
||||
<span>{{ server.name }}</span>
|
||||
<button>
|
||||
<span v-if="!serverDropdownOpen"
|
||||
class="h-fit w-[20px]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
<span
|
||||
v-if="!serverDropdownOpen"
|
||||
class="h-fit w-[20px]"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="m6 9l6 6l6-6" />
|
||||
d="m6 9l6 6l6-6"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="h-fit w-[20px]"
|
||||
v-else>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
<span
|
||||
v-else
|
||||
class="h-fit w-[20px]"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M18 6L6 18M6 6l12 12" />
|
||||
d="M18 6L6 18M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
@@ -64,24 +89,32 @@
|
||||
<DropdownMenu :opened="serverDropdownOpen">
|
||||
<div>
|
||||
<ul class="flex flex-col gap-y-1">
|
||||
<DropdownItem v-if="userIsOwner || userIsAdmin"
|
||||
@click="createInvite">
|
||||
<DropdownItem
|
||||
v-if="userIsOwner || userIsAdmin"
|
||||
@click="createInvite"
|
||||
>
|
||||
<span>
|
||||
Invite a friend
|
||||
</span>
|
||||
<span class="h-fit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<circle cx="9"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle
|
||||
cx="9"
|
||||
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" />
|
||||
</g>
|
||||
</svg>
|
||||
@@ -95,40 +128,52 @@
|
||||
|
||||
|
||||
<div
|
||||
class="h-[calc(100%-12px)] mb-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg">
|
||||
class="h-[calc(100%-12px)] mb-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg"
|
||||
>
|
||||
<div class="flex gap-y-1.5 px-1.5 mt-2 flex-col overflow-x-scroll">
|
||||
<button
|
||||
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"
|
||||
: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)"
|
||||
:key="channel.id">
|
||||
>
|
||||
<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"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="currentColor"
|
||||
d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z" />
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>{{ channel.name }}</span>
|
||||
</button>
|
||||
<button 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"
|
||||
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>
|
||||
<svg class="text-zinc-300/80 my-auto"
|
||||
<svg
|
||||
class="text-zinc-300/80 my-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 5v14m-7-7h14" />
|
||||
d="M12 5v14m-7-7h14"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Add channel</span>
|
||||
@@ -136,51 +181,68 @@
|
||||
</div>
|
||||
|
||||
<div class="relative bottom-0">
|
||||
<DropdownMenu class="bottom-full"
|
||||
<DropdownMenu
|
||||
class="bottom-full"
|
||||
:inverted="true"
|
||||
:opened="userDropdownOpen">
|
||||
:opened="userDropdownOpen"
|
||||
>
|
||||
<div>
|
||||
<ul class="flex flex-col gap-y-1">
|
||||
<DropdownItem v-if="userIsOwner || userIsAdmin"
|
||||
@click="createInvite">
|
||||
<DropdownItem
|
||||
v-if="userIsOwner || userIsAdmin"
|
||||
@click="createInvite"
|
||||
>
|
||||
<span>
|
||||
Invite a friend
|
||||
</span>
|
||||
<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"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<circle cx="9"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle
|
||||
cx="9"
|
||||
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" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</DropdownItem>
|
||||
<DropdownItem @click="logout"
|
||||
danger="true">
|
||||
<DropdownItem
|
||||
danger="true"
|
||||
@click="logout"
|
||||
>
|
||||
<span>
|
||||
Logout
|
||||
</span>
|
||||
<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"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
stroke-width="2"
|
||||
>
|
||||
<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" />
|
||||
</g>
|
||||
</svg>
|
||||
@@ -191,24 +253,33 @@
|
||||
</DropdownMenu>
|
||||
<div class="h-full p-3">
|
||||
<div class="grid grid-cols-[32px_1fr_32px] gap-x-2 items-center">
|
||||
<span class="bg-[hsl(220,calc(1*6.8%),22.6%)] w-[32px] h-[32px] rounded-full"></span>
|
||||
<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>
|
||||
<button @click="userDropdownOpen = !userDropdownOpen"
|
||||
class="text-zinc-300 hover:backdrop-brightness-90 p-1 rounded-md transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
<button
|
||||
class="text-zinc-300 hover:backdrop-brightness-90 p-1 rounded-md transition-all"
|
||||
@click="userDropdownOpen = !userDropdownOpen"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065z" />
|
||||
<circle cx="12"
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065z"
|
||||
/>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="3" />
|
||||
r="3"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
@@ -219,25 +290,35 @@
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div v-if="createChannelModelOpen"
|
||||
class="absolute z-10 top-0 bottom-0 left-0 right-0">
|
||||
<div class="bg-black/70 w-screen h-screen"
|
||||
@click="createChannelModelOpen = false">
|
||||
</div>
|
||||
<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">
|
||||
Create a channel:
|
||||
</h2>
|
||||
<div>
|
||||
<form @submit.prevent="createChannel"
|
||||
class="w-3/5">
|
||||
<input v-model="channelName"
|
||||
<form
|
||||
class="w-3/5"
|
||||
@submit.prevent="createChannel"
|
||||
>
|
||||
<input
|
||||
v-model="channelName"
|
||||
type="text"
|
||||
class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md"
|
||||
placeholder="Channel name" />
|
||||
<input type="submit"
|
||||
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md" />
|
||||
placeholder="Channel name"
|
||||
>
|
||||
<input
|
||||
type="submit"
|
||||
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md"
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -259,14 +340,14 @@ export default {
|
||||
serverDropdownOpen: false,
|
||||
userDropdownOpen: false,
|
||||
channelName: '',
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
userIsOwner() {
|
||||
return this.server && this.serverType === "servers" && this.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user.id))?.owner
|
||||
return this.server && this.serverType === 'servers' && this.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user.id))?.owner;
|
||||
},
|
||||
userIsAdmin() {
|
||||
return this.server && this.serverType === "servers" && this.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user.id))?.administer
|
||||
return this.server && this.serverType === 'servers' && this.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user.id))?.administer;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -275,7 +356,7 @@ export default {
|
||||
},
|
||||
async createChannel() {
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
|
||||
const channel = await $fetch(`/api/guilds/${this.server.id}/addChannel`, { method: 'POST', body: { channelName: this.channelName }, headers }) as IChannel
|
||||
const channel = await $fetch(`/api/guilds/${this.server.id}/addChannel`, { method: 'POST', body: { channelName: this.channelName }, headers }) as IChannel;
|
||||
|
||||
if (!channel) return;
|
||||
|
||||
@@ -283,22 +364,22 @@ export default {
|
||||
this.createChannelModelOpen = false;
|
||||
},
|
||||
openChannel(id: string) {
|
||||
const router = useRouter()
|
||||
const router = useRouter();
|
||||
|
||||
router.push({ params: { id } })
|
||||
router.push({ params: { id } });
|
||||
},
|
||||
async createInvite() {
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>
|
||||
const inviteCode = await $fetch(`/api/guilds/${this.server.id}/createInvite`, { method: 'POST', headers })
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
|
||||
const inviteCode = await $fetch(`/api/guilds/${this.server.id}/createInvite`, { method: 'POST', headers });
|
||||
},
|
||||
async logout() {
|
||||
await $fetch(`/api/user/logout`)
|
||||
await $fetch('/api/user/logout');
|
||||
useCookie('sessionToken').value = null;
|
||||
useCookie('userId').value = null;
|
||||
|
||||
useGlobalStore().logout();
|
||||
navigateTo('/login')
|
||||
navigateTo('/login');
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
16
components/UserProfile.vue
Executable file
16
components/UserProfile.vue
Executable 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
0
layouts/clean.vue
Normal file → Executable file
48
layouts/default.vue
Normal file → Executable file
48
layouts/default.vue
Normal file → Executable file
@@ -6,7 +6,6 @@
|
||||
<div class="w-[calc(100vw-88px-240px)] h-full">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<template #fallback>
|
||||
Loading...
|
||||
@@ -15,49 +14,48 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Nav, Sidebar } from '~/.nuxt/components'
|
||||
import { useGlobalStore } from '~/stores/store'
|
||||
import { SafeUser } from '~/types'
|
||||
import { io } from 'socket.io-client'
|
||||
import { useGlobalStore } from '~/stores/store';
|
||||
import { SafeUser, IChannel, IServer } from '~/types';
|
||||
import { io } from 'socket.io-client';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user: storeToRefs(useGlobalStore()).user,
|
||||
}
|
||||
},
|
||||
async setup() {
|
||||
const globalStore = useGlobalStore()
|
||||
const sessionToken = useCookie('sessionToken')
|
||||
const globalStore = useGlobalStore();
|
||||
const sessionToken = useCookie('sessionToken');
|
||||
if (globalStore.user.id === undefined && sessionToken.value) {
|
||||
const route = useRoute()
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>
|
||||
const route = useRoute();
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
|
||||
const [user, { dms, servers }] = await Promise.all([
|
||||
$fetch('/api/getCurrentUser', { headers }) as unknown as SafeUser,
|
||||
$fetch('/api/user/getServers', { headers })
|
||||
])
|
||||
$fetch('/api/user/getServers', { headers }) as unknown as { dms: IChannel[], servers: IServer[] }
|
||||
]);
|
||||
|
||||
if (!user || !servers || !dms) return;
|
||||
|
||||
globalStore.setUser(user)
|
||||
globalStore.setUser(user);
|
||||
|
||||
globalStore.setServers(servers)
|
||||
globalStore.setDms(dms)
|
||||
globalStore.setServers(servers);
|
||||
globalStore.setDms(dms);
|
||||
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() {
|
||||
const globalStore = useGlobalStore()
|
||||
const sessionToken = useCookie('sessionToken')
|
||||
const globalStore = useGlobalStore();
|
||||
const sessionToken = useCookie('sessionToken');
|
||||
const socket = io({
|
||||
auth: (cb) => {
|
||||
cb({ token: sessionToken.value })
|
||||
cb({ token: sessionToken.value });
|
||||
}
|
||||
});
|
||||
|
||||
globalStore.setSocket(socket)
|
||||
}
|
||||
globalStore.setSocket(socket);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
8
middleware/auth.ts
Normal file → Executable file
8
middleware/auth.ts
Normal file → Executable file
@@ -1,6 +1,6 @@
|
||||
export default defineNuxtRouteMiddleware((to, from) => {
|
||||
// isAuthenticated() is an example method verifying if a user is authenticated
|
||||
export default defineNuxtRouteMiddleware(() => {
|
||||
if (useError().value?.message.trim().split(' ')[0]?.slice(1,4) === '401') return navigateTo('/login');
|
||||
if (!useCookie('sessionToken').value) {
|
||||
return navigateTo('/login')
|
||||
return navigateTo('/login');
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// https://v3.nuxtjs.org/api/configuration/nuxt.config
|
||||
|
||||
export default {
|
||||
export default defineNuxtConfig({
|
||||
ssr: true,
|
||||
app: {
|
||||
head: {
|
||||
@@ -14,12 +14,8 @@ export default {
|
||||
'@/assets/css/main.css'
|
||||
],
|
||||
|
||||
|
||||
postcss: {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
devtools: {
|
||||
enabled: true,
|
||||
},
|
||||
|
||||
modules: [
|
||||
@@ -35,10 +31,13 @@ export default {
|
||||
],
|
||||
},
|
||||
],
|
||||
'@vueuse/nuxt',
|
||||
'@nuxt/devtools',
|
||||
],
|
||||
|
||||
typescript: {
|
||||
strict: true
|
||||
}
|
||||
}
|
||||
postcss: {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
15679
package-lock.json
generated
15679
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
24
package.json
Normal file → Executable file
24
package.json
Normal file → Executable file
@@ -4,16 +4,18 @@
|
||||
"dev": "nuxi dev",
|
||||
"build": "nuxi build",
|
||||
"start": "nuxi start",
|
||||
"prepare": "nuxi prepare"
|
||||
"prepare": "nuxi prepare",
|
||||
"lint": "eslint --ext .js,.vue,.ts ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@pinia/nuxt": "^0.4.6",
|
||||
"@prisma/client": "^4.8.0",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"emoji-datasource-twitter": "^14.0.0",
|
||||
"dotenv": "^16.0.3",
|
||||
"emoji-regex": "^10.2.1",
|
||||
"ioredis": "^5.3.2",
|
||||
"mitt": "^3.0.0",
|
||||
"nuxt": "^3.0.0",
|
||||
"nuxt": "^3.4.1",
|
||||
"pinia": "^2.0.28",
|
||||
"socket.io": "^4.5.4",
|
||||
"socket.io-client": "^4.5.4",
|
||||
@@ -21,16 +23,18 @@
|
||||
"uuid": "^9.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/kit": "^3.0.0",
|
||||
"@nuxt/devtools": "npm:@nuxt/devtools-edge@latest",
|
||||
"@types/bcryptjs": "^2.4.2",
|
||||
"@types/emoji-js": "^3.5.0",
|
||||
"@types/twemoji": "^13.1.2",
|
||||
"@types/node": "^18.15.11",
|
||||
"@types/uuid": "^9.0.0",
|
||||
"@vueuse/core": "^9.10.0",
|
||||
"@vueuse/nuxt": "^9.10.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"postcss": "^8.4.20",
|
||||
"@typescript-eslint/eslint-plugin": "^5.58.0",
|
||||
"@typescript-eslint/parser": "^5.58.0",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"eslint": "^8.38.0",
|
||||
"eslint-plugin-vue": "^9.11.0",
|
||||
"postcss": "^8.4.23",
|
||||
"prisma": "^4.8.0",
|
||||
"tailwindcss": "^3.2.4"
|
||||
"tailwindcss": "^3.3.1"
|
||||
}
|
||||
}
|
||||
|
||||
86
pages/channel/@me/[id].vue
Normal file → Executable file
86
pages/channel/@me/[id].vue
Normal file → Executable file
@@ -1,69 +1,77 @@
|
||||
<!-- eslint-disable vue/no-multiple-template-root -->
|
||||
<template>
|
||||
<MessagePane />
|
||||
<div class="fixed mr-3"
|
||||
:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`">
|
||||
<div
|
||||
class="fixed mr-3"
|
||||
:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"
|
||||
>
|
||||
<Transition>
|
||||
<EmojiPicker v-on:pickedEmoji="pickedEmoji($event)"
|
||||
:opened="emojiPickerData.opened" />
|
||||
<Popup
|
||||
:opened="emojiPickerData.opened"
|
||||
:openedBy="emojiPickerData.type"
|
||||
@picked-emoji="pickedEmoji($event)"
|
||||
/>
|
||||
<!-- <EmojiPicker v-on:pickedEmoji="pickedEmoji($event)"
|
||||
:opened="emojiPickerData.opened" /> -->
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { useGlobalStore } from '~/stores/store'
|
||||
import { IChannel } from '~/types'
|
||||
import { useGlobalStore } from '~/stores/store';
|
||||
import { IChannel } from '~/types';
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth'
|
||||
})
|
||||
});
|
||||
|
||||
export default {
|
||||
async setup() {
|
||||
const route = useRoute();
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
|
||||
const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers });
|
||||
|
||||
if (!server) throw new Error('could not find the dm');
|
||||
|
||||
useGlobalStore().addDM(server);
|
||||
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
|
||||
useGlobalStore().setActiveServer('dms', route.params.id);
|
||||
useGlobalStore().setActiveChannel(server);
|
||||
useGlobalStore().closeEmojiPicker();
|
||||
|
||||
server.messages?.forEach((e) => {
|
||||
e.body = parseMessageBody(e.body, useGlobalStore().activeChannel);
|
||||
});
|
||||
|
||||
return {
|
||||
server
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData,
|
||||
emojiPickerStyles: {
|
||||
top: storeToRefs(useGlobalStore()).emojiPickerData.top + 'px',
|
||||
right: storeToRefs(useGlobalStore()).emojiPickerData.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
|
||||
top: storeToRefs(useGlobalStore()).emojiPickerData.value.top + 'px',
|
||||
right: storeToRefs(useGlobalStore()).emojiPickerData.value.right + 'px',
|
||||
}
|
||||
};
|
||||
},
|
||||
async updated() {
|
||||
const route = useRoute()
|
||||
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?')
|
||||
const route = useRoute();
|
||||
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
|
||||
if (useGlobalStore().activeServer.id !== this.server.id) {
|
||||
useGlobalStore().closeEmojiPicker()
|
||||
useGlobalStore().setActiveServer('dms', route.params.id)
|
||||
useGlobalStore().closeEmojiPicker();
|
||||
useGlobalStore().setActiveServer('dms', route.params.id);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pickedEmoji(emoji: string) {
|
||||
const { $emit } = useNuxtApp()
|
||||
$emit('pickedEmoji', emoji)
|
||||
useGlobalStore().closeEmojiPicker()
|
||||
const { $emit } = useNuxtApp();
|
||||
$emit('pickedEmoji', emoji);
|
||||
useGlobalStore().closeEmojiPicker();
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
24
pages/channel/@me/index.vue
Normal file → Executable file
24
pages/channel/@me/index.vue
Normal file → Executable file
@@ -1,35 +1,35 @@
|
||||
<template>
|
||||
<form @submit.prevent="startDM">
|
||||
<input v-model="userId" />
|
||||
<input type="submit" />
|
||||
<input v-model="userId">
|
||||
<input type="submit">
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { useGlobalStore } from '~/stores/store'
|
||||
import { IChannel } from '~/types'
|
||||
import { useGlobalStore } from '~/stores/store';
|
||||
import { IChannel } from '~/types';
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth'
|
||||
})
|
||||
});
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userId: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
useGlobalStore().setActiveServer('dms', '@me')
|
||||
useGlobalStore().setActiveServer('dms', '@me');
|
||||
},
|
||||
methods: {
|
||||
async startDM() {
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>
|
||||
const server: IChannel = await $fetch('/api/channels/createDM', { method: 'post', body: { partnerId: this.userId }, headers })
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
|
||||
const server: IChannel = await $fetch('/api/channels/createDM', { method: 'post', body: { partnerId: this.userId }, headers });
|
||||
|
||||
useGlobalStore().addDM(server)
|
||||
useRouter().push({ path: '/channel/@me/' + server.id })
|
||||
}
|
||||
useGlobalStore().addDM(server);
|
||||
useRouter().push({ path: '/channel/@me/' + server.id });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
101
pages/channel/[id].vue
Normal file → Executable file
101
pages/channel/[id].vue
Normal file → Executable file
@@ -1,83 +1,84 @@
|
||||
<!-- eslint-disable vue/no-multiple-template-root -->
|
||||
<template>
|
||||
<MessagePane />
|
||||
<div class="fixed mr-3"
|
||||
:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`">
|
||||
<div
|
||||
class="fixed mr-3"
|
||||
:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"
|
||||
>
|
||||
<Transition>
|
||||
<EmojiPicker v-on:pickedEmoji="pickedEmoji($event)"
|
||||
:opened="emojiPickerData.opened" />
|
||||
<Popup
|
||||
:opened="emojiPickerData.opened"
|
||||
:openedBy="emojiPickerData.type"
|
||||
@pickedEmoji="pickedEmoji($event)"
|
||||
/>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Server } from 'socket.io';
|
||||
import { useGlobalStore } from '~/stores/store'
|
||||
import { IChannel } from '~/types'
|
||||
import { useGlobalStore } from '~/stores/store';
|
||||
import { IChannel, IServer } from '~/types';
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth'
|
||||
})
|
||||
});
|
||||
|
||||
export default {
|
||||
async setup() {
|
||||
const route = useRoute();
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
|
||||
const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers });
|
||||
|
||||
// if (!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() {
|
||||
return {
|
||||
socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
|
||||
emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData,
|
||||
emojiPickerStyles: {
|
||||
top: storeToRefs(useGlobalStore()).emojiPickerData.top + 'px',
|
||||
right: storeToRefs(useGlobalStore()).emojiPickerData.right + 'px',
|
||||
}
|
||||
top: storeToRefs(useGlobalStore()).emojiPickerData.value.top + 'px',
|
||||
right: storeToRefs(useGlobalStore()).emojiPickerData.value.right + 'px',
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.socket.on(`addChannel-${this.server.serverId}`, (ev) => {
|
||||
const newChannel = ev as IChannel
|
||||
useGlobalStore().addChannel(this.server.serverId, newChannel)
|
||||
})
|
||||
const newChannel = ev as IChannel;
|
||||
useGlobalStore().addChannel(this.server.serverId, newChannel);
|
||||
});
|
||||
},
|
||||
async updated() {
|
||||
const route = useRoute()
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
|
||||
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?')
|
||||
const route = useRoute();
|
||||
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) {
|
||||
useGlobalStore().closeEmojiPicker()
|
||||
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,
|
||||
useGlobalStore().closeEmojiPicker();
|
||||
useGlobalStore().setActiveServer('servers', route.params.id);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pickedEmoji(emoji: string) {
|
||||
const { $emit } = useNuxtApp()
|
||||
$emit('pickedEmoji', emoji)
|
||||
useGlobalStore().closeEmojiPicker()
|
||||
const { $emit } = useNuxtApp();
|
||||
$emit('pickedEmoji', emoji);
|
||||
useGlobalStore().closeEmojiPicker();
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
10
pages/index.vue
Normal file → Executable file
10
pages/index.vue
Normal file → Executable file
@@ -1,13 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
Hello there traveler
|
||||
<nuxt-link to="/login">Login</nuxt-link>
|
||||
<nuxt-link to="/signup">Signup</nuxt-link>
|
||||
<nuxt-link to="/login">
|
||||
Login
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/signup">
|
||||
Signup
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: 'auth'
|
||||
})
|
||||
});
|
||||
</script>
|
||||
71
pages/login.vue
Normal file → Executable file
71
pages/login.vue
Normal file → Executable file
@@ -1,44 +1,59 @@
|
||||
<template>
|
||||
<div class="w-screen h-screen bg-[hsl(216,calc(1*7.2%),10%)] relative">
|
||||
<div
|
||||
class="-translate-y-1/2 -translate-x-1/2 top-1/2 left-1/2 absolute bg-[hsl(216,calc(1*7.2%),16%)] p-4 rounded-md shadow-lg">
|
||||
<h2 class="text-xl font-semibold text-center">Login</h2>
|
||||
<form class="flex flex-col gap-y-2 my-2"
|
||||
@submit.prevent="signup()">
|
||||
class="-translate-y-1/2 -translate-x-1/2 top-1/2 left-1/2 absolute bg-[hsl(216,calc(1*7.2%),16%)] p-4 rounded-md shadow-lg"
|
||||
>
|
||||
<h2 class="text-xl font-semibold text-center">
|
||||
Login
|
||||
</h2>
|
||||
<form
|
||||
class="flex flex-col gap-y-2 my-2"
|
||||
@submit.prevent="signup()"
|
||||
>
|
||||
<input
|
||||
v-model="username"
|
||||
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
|
||||
name="username"
|
||||
v-model="username"
|
||||
placeholder="username" />
|
||||
placeholder="username"
|
||||
>
|
||||
<input
|
||||
v-model="password"
|
||||
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
|
||||
name="password"
|
||||
type="password"
|
||||
v-model="password"
|
||||
placeholder="password" />
|
||||
<input type="submit"
|
||||
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer" />
|
||||
placeholder="password"
|
||||
>
|
||||
<input
|
||||
type="submit"
|
||||
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer"
|
||||
>
|
||||
</form>
|
||||
<div class="text-center">Or <nuxt-link class="hover:underline text-blue-500"
|
||||
to="/signup">Signup</nuxt-link></div>
|
||||
<div class="text-center">
|
||||
Or <nuxt-link
|
||||
class="hover:underline text-blue-500"
|
||||
to="/signup"
|
||||
>
|
||||
Signup
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { useGlobalStore } from '~/stores/store'
|
||||
import { useGlobalStore } from '~/stores/store';
|
||||
import { SafeUser } from '~/types';
|
||||
|
||||
definePageMeta({
|
||||
layout: 'clean'
|
||||
})
|
||||
});
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async signup() {
|
||||
@@ -49,27 +64,27 @@ export default {
|
||||
username: this.username,
|
||||
password: this.password
|
||||
},
|
||||
}) as { userId: string; token: string; user: SafeUser; }
|
||||
}) as { userId: string; token: string; user: SafeUser; };
|
||||
|
||||
const userId = useCookie('userId')
|
||||
userId.value = user.userId
|
||||
const token = useCookie('sessionToken')
|
||||
token.value = user.token
|
||||
const userId = useCookie('userId');
|
||||
userId.value = user.userId;
|
||||
const token = useCookie('sessionToken');
|
||||
token.value = user.token;
|
||||
|
||||
setTimeout(async () => {
|
||||
const headers = { Cookie: `sessionToken=${token.value}` }
|
||||
const { servers, dms } = await $fetch('/api/user/getServers', { headers })
|
||||
const headers = { Cookie: `sessionToken=${token.value}` };
|
||||
const { servers, dms } = await $fetch('/api/user/getServers', { headers });
|
||||
|
||||
if (!servers || !dms) return;
|
||||
|
||||
globalStore.setServers(servers)
|
||||
globalStore.setDms(dms)
|
||||
globalStore.setServers(servers);
|
||||
globalStore.setDms(dms);
|
||||
|
||||
globalStore.setUser(user.user)
|
||||
globalStore.setUser(user.user);
|
||||
|
||||
navigateTo('/channel/@me')
|
||||
})
|
||||
}
|
||||
navigateTo('/channel/@me');
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
77
pages/signup.vue
Normal file → Executable file
77
pages/signup.vue
Normal file → Executable file
@@ -1,43 +1,58 @@
|
||||
<template>
|
||||
<div class="w-screen h-screen bg-[hsl(216,calc(1*7.2%),10%)] relative">
|
||||
<div
|
||||
class="-translate-y-1/2 -translate-x-1/2 top-1/2 left-1/2 absolute bg-[hsl(216,calc(1*7.2%),16%)] p-4 rounded-md shadow-lg">
|
||||
<h2 class="text-xl font-semibold text-center">Sign up</h2>
|
||||
<form class="flex flex-col gap-y-2 my-2"
|
||||
@submit.prevent="signup()">
|
||||
class="-translate-y-1/2 -translate-x-1/2 top-1/2 left-1/2 absolute bg-[hsl(216,calc(1*7.2%),16%)] p-4 rounded-md shadow-lg"
|
||||
>
|
||||
<h2 class="text-xl font-semibold text-center">
|
||||
Sign up
|
||||
</h2>
|
||||
<form
|
||||
class="flex flex-col gap-y-2 my-2"
|
||||
@submit.prevent="signup()"
|
||||
>
|
||||
<input
|
||||
v-model="username"
|
||||
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
|
||||
name="username"
|
||||
v-model="username"
|
||||
placeholder="username" />
|
||||
placeholder="username"
|
||||
>
|
||||
<input
|
||||
v-model="email"
|
||||
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
|
||||
name="email"
|
||||
v-model="email"
|
||||
placeholder="email" />
|
||||
placeholder="email"
|
||||
>
|
||||
<input
|
||||
v-model="password"
|
||||
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
|
||||
name="password"
|
||||
type="password"
|
||||
v-model="password"
|
||||
placeholder="password" />
|
||||
<input type="submit"
|
||||
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer" />
|
||||
placeholder="password"
|
||||
>
|
||||
<input
|
||||
type="submit"
|
||||
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer"
|
||||
>
|
||||
</form>
|
||||
<div class="text-center">Or <nuxt-link class="hover:underline text-blue-500"
|
||||
to="/login">Login</nuxt-link></div>
|
||||
<div class="text-center">
|
||||
Or <nuxt-link
|
||||
class="hover:underline text-blue-500"
|
||||
to="/login"
|
||||
>
|
||||
Login
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { NuxtLink } from '~/.nuxt/components';
|
||||
import { useGlobalStore } from '~/stores/store'
|
||||
import { useGlobalStore } from '~/stores/store';
|
||||
import { SafeUser } from '~/types';
|
||||
|
||||
definePageMeta({
|
||||
layout: 'clean'
|
||||
})
|
||||
});
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -45,7 +60,7 @@ export default {
|
||||
username: '',
|
||||
email: '',
|
||||
password: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async signup() {
|
||||
@@ -57,27 +72,27 @@ export default {
|
||||
email: this.email,
|
||||
password: this.password
|
||||
},
|
||||
}) as { userId: string; token: string; user: SafeUser; }
|
||||
}) as { userId: string; token: string; user: SafeUser; };
|
||||
|
||||
const userId = useCookie('userId')
|
||||
userId.value = user.userId
|
||||
const token = useCookie('sessionToken')
|
||||
token.value = user.token
|
||||
const userId = useCookie('userId');
|
||||
userId.value = user.userId;
|
||||
const token = useCookie('sessionToken');
|
||||
token.value = user.token;
|
||||
|
||||
setTimeout(async () => {
|
||||
const headers = { Cookie: `sessionToken=${token.value}` }
|
||||
const { servers, dms } = await $fetch('/api/user/getServers', { headers })
|
||||
const headers = { Cookie: `sessionToken=${token.value}` };
|
||||
const { servers, dms } = await $fetch('/api/user/getServers', { headers });
|
||||
|
||||
if (!servers || !dms) return;
|
||||
|
||||
globalStore.setServers(servers)
|
||||
globalStore.setDms(dms)
|
||||
globalStore.setServers(servers);
|
||||
globalStore.setDms(dms);
|
||||
|
||||
globalStore.setUser(user.user)
|
||||
globalStore.setUser(user.user);
|
||||
|
||||
navigateTo('/channel/@me')
|
||||
})
|
||||
}
|
||||
navigateTo('/channel/@me');
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
15
pages/test.vue
Normal file → Executable file
15
pages/test.vue
Normal file → Executable file
@@ -1,14 +1,5 @@
|
||||
<template>
|
||||
<span class="test"></span>
|
||||
<div>
|
||||
<Popup />
|
||||
</div>
|
||||
</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
8
plugins/mitt.ts
Normal file → Executable file
@@ -1,12 +1,12 @@
|
||||
import mitt from 'mitt'
|
||||
import mitt from 'mitt';
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
const emitter = mitt()
|
||||
const emitter = mitt();
|
||||
|
||||
return {
|
||||
provide: {
|
||||
emit: emitter.emit, // Will emit an event
|
||||
listen: emitter.on // Will register a listener for an event
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
});
|
||||
@@ -1,7 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
||||
4
prisma/schema.prisma
Normal file → Executable file
4
prisma/schema.prisma
Normal file → Executable file
@@ -100,8 +100,8 @@ model Session {
|
||||
|
||||
model Reaction {
|
||||
id String @id @default(cuid())
|
||||
emoji Json
|
||||
count Int
|
||||
emoji String
|
||||
// count Int
|
||||
messageId String?
|
||||
Message Message? @relation(fields: [messageId], references: [id])
|
||||
users User[] @relation("ReactionToUser")
|
||||
|
||||
0
public/32.png
Normal file → Executable file
0
public/32.png
Normal file → Executable file
|
Before Width: | Height: | Size: 4.5 MiB After Width: | Height: | Size: 4.5 MiB |
0
public/favicon.ico
Normal file → Executable file
0
public/favicon.ico
Normal file → Executable file
|
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
53
server/api/channels/[id]/index.get.ts
Normal file → Executable file
@@ -1,20 +1,20 @@
|
||||
import { IChannel, IServer, SafeUser } from '../../../../types'
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
const prisma = new PrismaClient()
|
||||
import { IChannel, IServer, SafeUser } from '~/types';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
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 view a channel.'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
statusMessage: 'You must be logged in to view a channel.',
|
||||
});
|
||||
}
|
||||
|
||||
if (!event.context.params.id) {
|
||||
event.node.res.statusCode = 400;
|
||||
return {
|
||||
message: 'A channelId is required'
|
||||
}
|
||||
if (!event.context.params?.id) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'A channelId is required',
|
||||
});
|
||||
}
|
||||
|
||||
const channel = await prisma.channel.findFirst({
|
||||
@@ -58,7 +58,7 @@ export default defineEventHandler(async (event) => {
|
||||
name: true,
|
||||
participants: {
|
||||
select: {
|
||||
id: true
|
||||
id: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -69,7 +69,6 @@ export default defineEventHandler(async (event) => {
|
||||
select: {
|
||||
id: true,
|
||||
emoji: true,
|
||||
count: true,
|
||||
users: {
|
||||
select: {
|
||||
id: true,
|
||||
@@ -114,7 +113,6 @@ export default defineEventHandler(async (event) => {
|
||||
select: {
|
||||
id: true,
|
||||
emoji: true,
|
||||
count: true,
|
||||
users: {
|
||||
select: {
|
||||
id: true,
|
||||
@@ -137,10 +135,10 @@ export default defineEventHandler(async (event) => {
|
||||
}) as IChannel | null;
|
||||
|
||||
if (!channel) {
|
||||
event.node.res.statusCode = 404;
|
||||
return {
|
||||
message: `Channel with id "${event.context.params.id}" not found`
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: `Channel with id "${event.context.params.id}" not found`,
|
||||
});
|
||||
}
|
||||
|
||||
if (channel.serverId && !channel.DM) {
|
||||
@@ -156,15 +154,16 @@ export default defineEventHandler(async (event) => {
|
||||
|
||||
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) {
|
||||
event.node.res.statusCode = 401;
|
||||
return {
|
||||
message: `You must be in the server to access a channel in that server`
|
||||
}
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
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
49
server/api/channels/[id]/messages/[messageId]/delete.delete.ts
Executable 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.'
|
||||
};
|
||||
});
|
||||
@@ -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
97
server/api/channels/[id]/messages/[messageId]/reactions/[name].post.ts
Normal file → Executable file
@@ -1,23 +1,29 @@
|
||||
import { IChannel, IServer, SafeUser } from '~/types'
|
||||
import emojiRegex from 'emoji-regex'
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
const prisma = new PrismaClient()
|
||||
import emojiRegex from 'emoji-regex';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
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.'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
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());
|
||||
if (!match || match.length !== 1) {
|
||||
event.node.res.statusCode = 400;
|
||||
return {
|
||||
message: 'reaction is not an emoji or more than one emoji.'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'reaction is not an emoji or more than one emoji.',
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -30,27 +36,10 @@ export default defineEventHandler(async (event) => {
|
||||
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,
|
||||
@@ -59,31 +48,23 @@ export default defineEventHandler(async (event) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const message = await prisma.message.findFirst({
|
||||
where: {
|
||||
id: event.context.params.messageId
|
||||
},
|
||||
select: messageSelect
|
||||
})
|
||||
});
|
||||
|
||||
if (!message.id) {
|
||||
event.node.res.statusCode = 404;
|
||||
return {
|
||||
message: `message with id "${event.context.params.messageId}" not found.`
|
||||
}
|
||||
if (!message || !message.id) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: `message with id "${event.context.params.messageId}" not found.`,
|
||||
});
|
||||
}
|
||||
|
||||
const reactionInMessage = message.reactions.find((e) => e.emoji.name === emoji)
|
||||
|
||||
let count;
|
||||
|
||||
if (reactionInMessage?.count) {
|
||||
count = reactionInMessage.count + 1;
|
||||
} else {
|
||||
count = 1;
|
||||
}
|
||||
const reactionInMessage = message.reactions.find((e) => e.emoji === emoji);
|
||||
|
||||
if (reactionInMessage && reactionInMessage.users.find((e) => e.id === event.context.user.id)) {
|
||||
// remove reaction
|
||||
@@ -92,23 +73,22 @@ export default defineEventHandler(async (event) => {
|
||||
id: reactionInMessage.id
|
||||
},
|
||||
data: {
|
||||
count: reactionInMessage.count - 1,
|
||||
users: {
|
||||
disconnect: [{ id: event.context.user.id }]
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const updatedMessage = await prisma.message.findFirst({
|
||||
where: {
|
||||
id: event.context.params.messageId
|
||||
},
|
||||
select: messageSelect
|
||||
})
|
||||
});
|
||||
|
||||
global.io.emit(`message-${event.context.params.id}`, { message: updatedMessage });
|
||||
|
||||
return { message: updatedMessage }
|
||||
return { message: updatedMessage };
|
||||
}
|
||||
|
||||
let reaction;
|
||||
@@ -119,22 +99,17 @@ export default defineEventHandler(async (event) => {
|
||||
id: reactionInMessage.id
|
||||
},
|
||||
data: {
|
||||
count,
|
||||
users: {
|
||||
connect: [{
|
||||
id: event.context.user.id,
|
||||
}]
|
||||
},
|
||||
}
|
||||
})
|
||||
});
|
||||
} else {
|
||||
reaction = await prisma.reaction.create({
|
||||
data: {
|
||||
emoji: {
|
||||
name: emoji,
|
||||
id: null
|
||||
},
|
||||
count: count,
|
||||
emoji,
|
||||
users: {
|
||||
connect: [{
|
||||
id: event.context.user.id,
|
||||
@@ -146,7 +121,7 @@ export default defineEventHandler(async (event) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
if (!reaction.messageId) return;
|
||||
@@ -156,9 +131,9 @@ export default defineEventHandler(async (event) => {
|
||||
id: reaction.messageId,
|
||||
},
|
||||
select: messageSelect
|
||||
})
|
||||
});
|
||||
|
||||
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
94
server/api/channels/sendMessage.post.ts → server/api/channels/[id]/sendMessage.post.ts
Normal file → Executable file
@@ -1,28 +1,40 @@
|
||||
import { IChannel, IServer, SafeUser, IMessage } from '~/types'
|
||||
import { Server } from 'socket.io'
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
import { registerRuntimeHelpers } from '@vue/compiler-core'
|
||||
const prisma = new PrismaClient()
|
||||
import { IChannel, IServer, SafeUser, IMessage } from '~/types';
|
||||
import { Server } from 'socket.io';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
declare global {
|
||||
var io: Server
|
||||
let io: Server;
|
||||
}
|
||||
|
||||
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.'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
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) {
|
||||
event.node.res.statusCode = 400;
|
||||
return {
|
||||
message: 'A body or channelId is required to send a message.'
|
||||
const req = await readBody(event);
|
||||
|
||||
const channelId = event.context.params.id;
|
||||
|
||||
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({
|
||||
@@ -34,6 +46,7 @@ export default defineEventHandler(async (event) => {
|
||||
name: true,
|
||||
messages: false,
|
||||
DM: true,
|
||||
serverId: true,
|
||||
dmParticipants: {
|
||||
select: {
|
||||
id: true,
|
||||
@@ -44,10 +57,10 @@ export default defineEventHandler(async (event) => {
|
||||
}) as IChannel | null;
|
||||
|
||||
if (!channel) {
|
||||
event.node.res.statusCode = 404;
|
||||
return {
|
||||
message: `Channel with id "${channelId}" not found.`
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: `Channel with id "${channelId}" not found.`,
|
||||
});
|
||||
}
|
||||
|
||||
if (!channel.DM) {
|
||||
@@ -88,43 +101,44 @@ export default defineEventHandler(async (event) => {
|
||||
}) as IServer | null;
|
||||
|
||||
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) {
|
||||
event.node.res.statusCode = 401;
|
||||
return {
|
||||
message: 'You must be in the server to send a message.'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
statusMessage: 'You must be in the server to send a message.',
|
||||
});
|
||||
}
|
||||
|
||||
if (!server) {
|
||||
event.node.res.statusCode = 404;
|
||||
return {
|
||||
message: 'Server not found'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: 'Server not found',
|
||||
});
|
||||
}
|
||||
} 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) {
|
||||
event.node.res.statusCode = 401;
|
||||
return {
|
||||
message: 'You must be in the DM to send a message.'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
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);
|
||||
|
||||
let invites: { id: string; }[] = [];
|
||||
const invites: { id: string; }[] = [];
|
||||
if (inviteCodes) {
|
||||
inviteCodes.forEach((e: string) => {
|
||||
if (!e) return
|
||||
if (!e) return;
|
||||
const opBody = body;
|
||||
body = body.split(e).join('')
|
||||
body = body.split(e).join('');
|
||||
if (opBody === body) return;
|
||||
const id = e.split('<&')[1]?.split('>')[0];
|
||||
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 });
|
||||
|
||||
return message
|
||||
})
|
||||
return message;
|
||||
});
|
||||
42
server/api/channels/create.post.ts
Normal file → Executable file
42
server/api/channels/create.post.ts
Normal file → Executable file
@@ -1,35 +1,37 @@
|
||||
import { IServer } from '~/types'
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
const prisma = new PrismaClient()
|
||||
import { IServer } from '~/types';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
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 view a channel.'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
statusMessage: 'You must be logged in to view a channel.',
|
||||
});
|
||||
}
|
||||
|
||||
const { serverName } = await readBody(event)
|
||||
const body = await readBody(event);
|
||||
|
||||
if (!serverName) {
|
||||
event.node.res.statusCode = 400;
|
||||
return {
|
||||
message: 'channel name is required to create a channel.'
|
||||
}
|
||||
if (!body) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'Server name is required to create a Server.',
|
||||
});
|
||||
}
|
||||
|
||||
const { serverName } = body;
|
||||
|
||||
const preExistingServer = await prisma.server.findFirst({
|
||||
where: {
|
||||
name: serverName
|
||||
}
|
||||
}) as IServer
|
||||
}) as IServer | null;
|
||||
|
||||
if (preExistingServer) {
|
||||
event.node.res.statusCode = 409;
|
||||
return {
|
||||
message: `Server with name ${serverName} already exists.`
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 409,
|
||||
statusMessage: `Server with name ${serverName} already exists.`,
|
||||
});
|
||||
}
|
||||
|
||||
const server = await prisma.server.create({
|
||||
@@ -87,5 +89,5 @@ export default defineEventHandler(async (event) => {
|
||||
}
|
||||
}) as unknown as IServer;
|
||||
|
||||
return server
|
||||
})
|
||||
return server;
|
||||
});
|
||||
50
server/api/channels/createDM.post.ts
Normal file → Executable file
50
server/api/channels/createDM.post.ts
Normal file → Executable file
@@ -1,22 +1,22 @@
|
||||
import { IChannel, SafeUser } from '~/types'
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
const prisma = new PrismaClient()
|
||||
import { IChannel, SafeUser } from '~/types';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
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 view a channel.'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
statusMessage: 'You must be logged in to view a channel.',
|
||||
});
|
||||
}
|
||||
|
||||
const { partnerId } = await readBody(event)
|
||||
const { partnerId } = await readBody(event);
|
||||
|
||||
if (!partnerId) {
|
||||
event.node.res.statusCode = 400;
|
||||
return {
|
||||
message: 'A friend is required to create a DM.'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'A friend is required to create a DM.',
|
||||
});
|
||||
}
|
||||
|
||||
const partner = await prisma.user.findFirst({
|
||||
@@ -32,14 +32,14 @@ export default defineEventHandler(async (event) => {
|
||||
}) as SafeUser | null;
|
||||
|
||||
if (!partner) {
|
||||
event.node.res.statusCode = 400;
|
||||
return {
|
||||
message: 'No partner found'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'No partner found',
|
||||
});
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
throw new Error('user not found?')
|
||||
throw new Error('user not found?');
|
||||
}
|
||||
|
||||
const preExistingServer = await prisma.channel.findFirst({
|
||||
@@ -47,13 +47,13 @@ export default defineEventHandler(async (event) => {
|
||||
name: `${user.id}-${partner.id}`,
|
||||
DM: true
|
||||
}
|
||||
}) as IChannel
|
||||
}) as IChannel;
|
||||
|
||||
if (preExistingServer) {
|
||||
event.node.res.statusCode = 409;
|
||||
return {
|
||||
message: `DM already exists.`
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 409,
|
||||
statusMessage: 'DM already exists.',
|
||||
});
|
||||
}
|
||||
|
||||
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
18
server/api/getCurrentUser.get.ts
Normal file → Executable file
@@ -1,13 +1,13 @@
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
import { SafeUser } from '../../types'
|
||||
const prisma = new PrismaClient()
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
import { SafeUser } from '~/types';
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
if (!event.context.user.authenticated) {
|
||||
event.node.res.statusCode = 401;
|
||||
return {
|
||||
message: "Unauthenticated"
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
statusMessage: 'Unauthenticated',
|
||||
});
|
||||
}
|
||||
|
||||
const user = await prisma.user.findFirst({
|
||||
@@ -26,5 +26,5 @@ export default defineEventHandler(async (event) => {
|
||||
}
|
||||
}) as SafeUser | null;
|
||||
|
||||
return user
|
||||
})
|
||||
return user;
|
||||
});
|
||||
60
server/api/guilds/[id]/addChannel.post.ts
Normal file → Executable file
60
server/api/guilds/[id]/addChannel.post.ts
Normal file → Executable file
@@ -1,23 +1,23 @@
|
||||
import { IChannel, IServer, SafeUser } from '~/types'
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
const prisma = new PrismaClient()
|
||||
import { IChannel, IServer, SafeUser } from '~/types';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
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 view a channel.'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
statusMessage: 'You must be logged in to view a channel.',
|
||||
});
|
||||
}
|
||||
|
||||
if (!event.context.params.id) {
|
||||
event.node.res.statusCode = 400;
|
||||
return {
|
||||
message: 'A serverId is required'
|
||||
}
|
||||
if (!event.context.params?.id) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'A serverId is required',
|
||||
});
|
||||
}
|
||||
|
||||
const { channelName } = await readBody(event)
|
||||
const { channelName } = await readBody(event);
|
||||
|
||||
const server = await prisma.server.findFirst({
|
||||
where: {
|
||||
@@ -31,26 +31,26 @@ export default defineEventHandler(async (event) => {
|
||||
}) as IServer | null;
|
||||
|
||||
if (!server) {
|
||||
event.node.res.statusCode = 404;
|
||||
return {
|
||||
message: `Server with id "${event.context.params.id}" not found`
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
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) {
|
||||
event.node.res.statusCode = 401;
|
||||
return {
|
||||
message: `You must be in the server to access a channel in that server`
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
statusMessage: 'You must be in the server to access a channel in that server',
|
||||
});
|
||||
}
|
||||
|
||||
if (server.channels?.find((e) => e.name === channelName)) {
|
||||
event.node.res.statusCode = 409;
|
||||
return {
|
||||
message: `Channel with name "${channelName}" already exists in server with id "event.context.user.id"`
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 409,
|
||||
statusMessage: `Channel with name "${channelName}" already exists in server with id "event.context.user.id"`,
|
||||
});
|
||||
}
|
||||
|
||||
const channel = await prisma.channel.create({
|
||||
@@ -121,9 +121,9 @@ export default defineEventHandler(async (event) => {
|
||||
},
|
||||
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
52
server/api/guilds/[id]/createInvite.post.ts
Normal file → Executable file
@@ -1,25 +1,25 @@
|
||||
import { IChannel, IInviteCode, IServer, SafeUser } from '~/types'
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
const prisma = new PrismaClient()
|
||||
import { IInviteCode, IServer, SafeUser } from '~/types';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
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 view a channel.'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
statusMessage: 'You must be logged in to view a channel.',
|
||||
});
|
||||
}
|
||||
|
||||
if (!event.context.params.id) {
|
||||
event.node.res.statusCode = 400;
|
||||
return {
|
||||
message: 'A serverId is required'
|
||||
}
|
||||
if (!event.context.params?.id) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'A serverId is required',
|
||||
});
|
||||
}
|
||||
|
||||
let body = await readBody(event)
|
||||
// const body = await readBody(event);
|
||||
|
||||
let expires = false;
|
||||
// let expires = false;
|
||||
// if (body.expiryDate) {
|
||||
// expires = true;
|
||||
// body.expiryDate = new Date(body.expiryDate).getUTCDate()
|
||||
@@ -37,19 +37,19 @@ export default defineEventHandler(async (event) => {
|
||||
}) as IServer | null;
|
||||
|
||||
if (!server) {
|
||||
event.node.res.statusCode = 404;
|
||||
return {
|
||||
message: `Server with id "${event.context.params.id}" not found`
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
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) {
|
||||
event.node.res.statusCode = 401;
|
||||
return {
|
||||
message: `You must be in the server or an admin/owner of that server to make an invite code`
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
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({
|
||||
@@ -61,7 +61,7 @@ export default defineEventHandler(async (event) => {
|
||||
},
|
||||
maxUses: 0
|
||||
}
|
||||
}) as IInviteCode
|
||||
}) as IInviteCode;
|
||||
|
||||
return inviteCode
|
||||
})
|
||||
return inviteCode;
|
||||
});
|
||||
74
server/api/guilds/[id]/index.get.ts
Normal file → Executable file
74
server/api/guilds/[id]/index.get.ts
Normal file → Executable file
@@ -1,20 +1,20 @@
|
||||
import { IServer } from '~/types'
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
const prisma = new PrismaClient()
|
||||
import { IServer } from '~/types';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
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 view a channel.'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
statusMessage: 'You must be logged in to view a channel.',
|
||||
});
|
||||
}
|
||||
|
||||
if (!event.context.params.id) {
|
||||
event.node.res.statusCode = 400;
|
||||
return {
|
||||
message: 'A channelId is required'
|
||||
}
|
||||
if (!event.context.params?.id) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'A channelId is required',
|
||||
});
|
||||
}
|
||||
|
||||
const server = await prisma.server.findFirst({
|
||||
@@ -35,24 +35,15 @@ export default defineEventHandler(async (event) => {
|
||||
id: true,
|
||||
DM: true,
|
||||
name: true,
|
||||
messages: {
|
||||
select: {
|
||||
id: true,
|
||||
body: true,
|
||||
creator: {
|
||||
select: {
|
||||
id: true,
|
||||
username: true
|
||||
}
|
||||
},
|
||||
invites: {
|
||||
select: {
|
||||
id: true,
|
||||
server: {
|
||||
roles: {
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
participants: {
|
||||
administrator: true,
|
||||
owner: true,
|
||||
users: {
|
||||
select: {
|
||||
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;
|
||||
|
||||
if (!server) {
|
||||
event.node.res.statusCode = 404;
|
||||
return {
|
||||
message: `Channel with id "${event.context.params.id}" not found`
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: `Channel with id "${event.context.params.id}" not found`,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
server
|
||||
}
|
||||
})
|
||||
return server;
|
||||
});
|
||||
52
server/api/guilds/joinGuild.post.ts
Normal file → Executable file
52
server/api/guilds/joinGuild.post.ts
Normal file → Executable file
@@ -1,22 +1,22 @@
|
||||
import { IInviteCode, IServer } from '~/types'
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
const prisma = new PrismaClient()
|
||||
import { IInviteCode, IServer } from '~/types';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
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 view a channel.'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
statusMessage: 'You must be logged in to view a channel.',
|
||||
});
|
||||
}
|
||||
|
||||
const { inviteId } = await readBody(event);
|
||||
|
||||
if (!inviteId) {
|
||||
event.node.res.statusCode = 400;
|
||||
return {
|
||||
message: 'A inviteId is required'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'A inviteId is required',
|
||||
});
|
||||
}
|
||||
|
||||
const invite = await prisma.inviteCode.findFirst({
|
||||
@@ -43,19 +43,19 @@ export default defineEventHandler(async (event) => {
|
||||
}) as IInviteCode | null;
|
||||
|
||||
if (!invite) {
|
||||
event.node.res.statusCode = 404;
|
||||
return {
|
||||
message: `Invite with id "${inviteId}" not found`
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: `Invite with id "${inviteId}" not found`,
|
||||
});
|
||||
}
|
||||
|
||||
const userInServer = invite.server.participants.find((e) => e.id === event.context.user.id);
|
||||
|
||||
if (userInServer) {
|
||||
event.node.res.statusCode = 409;
|
||||
return {
|
||||
message: `You are already in that server.`
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 409,
|
||||
statusMessage: 'You are already in that server.',
|
||||
});
|
||||
}
|
||||
|
||||
// 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) {
|
||||
event.node.res.statusCode = 404;
|
||||
return {
|
||||
message: `Channel with id "${event.context.params.id}" not found`
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: `Channel with id "${event.context.params?.id}" not found`,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
server
|
||||
}
|
||||
})
|
||||
};
|
||||
});
|
||||
49
server/api/login.post.ts
Normal file → Executable file
49
server/api/login.post.ts
Normal file → Executable file
@@ -1,17 +1,22 @@
|
||||
import bcryptjs from "bcryptjs";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
import { IUser, SafeUser } from "../../types";
|
||||
const prisma = new PrismaClient()
|
||||
import bcryptjs from 'bcryptjs';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import * as dotenv from 'dotenv';
|
||||
import crypto from 'node:crypto';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
import { IUser, SafeUser } from '~/types';
|
||||
const prisma = new PrismaClient();
|
||||
dotenv.config();
|
||||
|
||||
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) {
|
||||
event.node.res.statusCode = 400;
|
||||
return {
|
||||
message: 'A username, and a password are required to login'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'A username, and a password are required to login',
|
||||
});
|
||||
}
|
||||
|
||||
let user = await prisma.user.findFirst({
|
||||
@@ -24,31 +29,33 @@ export default defineEventHandler(async (event) => {
|
||||
passwordhash: 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) {
|
||||
event.node.res.statusCode = 401;
|
||||
return {
|
||||
message: 'Incorrect username or password'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
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({
|
||||
data: {
|
||||
token,
|
||||
userId: user.id
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
user = user as SafeUser
|
||||
user = user as SafeUser;
|
||||
|
||||
return {
|
||||
token,
|
||||
userId: user.id,
|
||||
user
|
||||
}
|
||||
})
|
||||
};
|
||||
});
|
||||
51
server/api/signup.post.ts
Normal file → Executable file
51
server/api/signup.post.ts
Normal file → Executable file
@@ -1,17 +1,22 @@
|
||||
import bcryptjs from "bcryptjs";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
import { IUser, SafeUser } from "~/types";
|
||||
const prisma = new PrismaClient()
|
||||
import bcryptjs from 'bcryptjs';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import * as dotenv from 'dotenv';
|
||||
import crypto from 'node:crypto';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
import { IUser, SafeUser } from '~/types';
|
||||
const prisma = new PrismaClient();
|
||||
dotenv.config();
|
||||
|
||||
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) {
|
||||
event.node.res.statusCode = 400;
|
||||
return {
|
||||
message: 'A username, a password, and an email address are required to singup'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'A username, a password, and an email address are required to singup',
|
||||
});
|
||||
}
|
||||
|
||||
const preExistingUser = await prisma.user.findFirst({
|
||||
@@ -25,16 +30,16 @@ export default defineEventHandler(async (event) => {
|
||||
}
|
||||
]
|
||||
}
|
||||
}) as SafeUser
|
||||
}) as SafeUser;
|
||||
|
||||
if (preExistingUser) {
|
||||
event.node.res.statusCode = 409;
|
||||
return {
|
||||
message: `User with username ${body.username} or email ${body.email} already exists`
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 409,
|
||||
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({
|
||||
data: {
|
||||
@@ -46,6 +51,7 @@ export default defineEventHandler(async (event) => {
|
||||
id: true,
|
||||
username: true,
|
||||
servers: {
|
||||
select: {
|
||||
participants: {
|
||||
select: {
|
||||
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({
|
||||
data: {
|
||||
token,
|
||||
userId: user.id
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
return {
|
||||
token,
|
||||
userId: user.id,
|
||||
user
|
||||
}
|
||||
})
|
||||
};
|
||||
});
|
||||
|
||||
100
server/api/user/getServers.get.ts
Normal file → Executable file
100
server/api/user/getServers.get.ts
Normal file → Executable file
@@ -1,13 +1,13 @@
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
import { IChannel, IServer, IUser } from '~/types'
|
||||
const prisma = new PrismaClient()
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
import { IChannel, IServer } from '~/types';
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
if (!event.context.user.authenticated) {
|
||||
event.node.res.statusCode = 401;
|
||||
return {
|
||||
message: "Unauthenticated"
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
statusMessage: 'Unauthenticated',
|
||||
});
|
||||
}
|
||||
|
||||
const servers = await prisma.server.findMany({
|
||||
@@ -24,89 +24,8 @@ export default defineEventHandler(async (event) => {
|
||||
channels: {
|
||||
select: {
|
||||
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;
|
||||
|
||||
@@ -122,7 +41,6 @@ export default defineEventHandler(async (event) => {
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
messages: false,
|
||||
DM: true,
|
||||
dmParticipants: {
|
||||
select: {
|
||||
@@ -135,5 +53,5 @@ export default defineEventHandler(async (event) => {
|
||||
|
||||
return {
|
||||
servers, dms
|
||||
}
|
||||
})
|
||||
};
|
||||
});
|
||||
22
server/api/user/logout.ts
Normal file → Executable file
22
server/api/user/logout.ts
Normal file → Executable file
@@ -1,23 +1,23 @@
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
const prisma = new PrismaClient()
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const { sessionToken } = parseCookies(event)
|
||||
const { sessionToken } = parseCookies(event);
|
||||
|
||||
if (!sessionToken) {
|
||||
event.node.res.statusCode = 400;
|
||||
return {
|
||||
message: 'A session token is required to logout duh'
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'A session token is required to logout duh',
|
||||
});
|
||||
}
|
||||
|
||||
await prisma.session.delete({
|
||||
where: {
|
||||
token: sessionToken
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
return {
|
||||
message: `successfully logged out`
|
||||
}
|
||||
})
|
||||
message: 'successfully logged out'
|
||||
};
|
||||
});
|
||||
14
server/middleware/auth.ts
Normal file → Executable file
14
server/middleware/auth.ts
Normal file → Executable file
@@ -1,11 +1,11 @@
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
const prisma = new PrismaClient()
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const cookies = parseCookies(event)
|
||||
const cookies = parseCookies(event);
|
||||
|
||||
if (!cookies.sessionToken) {
|
||||
event.context.user = { authenticated: false }
|
||||
event.context.user = { authenticated: false };
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -13,12 +13,12 @@ export default defineEventHandler(async (event) => {
|
||||
where: {
|
||||
token: cookies.sessionToken
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
if (!session) {
|
||||
event.context.user = { authenticated: false }
|
||||
event.context.user = { authenticated: false };
|
||||
return;
|
||||
}
|
||||
|
||||
event.context.user = { authenticated: true, id: session.userId };
|
||||
})
|
||||
});
|
||||
28
server/middleware/ratelimit.ts
Normal file
28
server/middleware/ratelimit.ts
Normal 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
30
server/middleware/socket.ts
Normal file → Executable file
@@ -1,11 +1,7 @@
|
||||
import { Server } from 'socket.io'
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
import { IChannel, IServer, IUser, SafeUser } from '~~/types'
|
||||
const prisma = new PrismaClient()
|
||||
|
||||
declare global {
|
||||
let io: Server | undefined
|
||||
}
|
||||
import { Server } from 'socket.io';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
import { IChannel, IServer, IUser, SafeUser } from '~~/types';
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
export default defineEventHandler(({ node }) => {
|
||||
if (!global.io) {
|
||||
@@ -85,7 +81,7 @@ export default defineEventHandler(({ node }) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
}) as { user: IUser } | null;
|
||||
}) as unknown as { user: IUser };
|
||||
|
||||
if (!user) {
|
||||
return;
|
||||
@@ -96,22 +92,22 @@ export default defineEventHandler(({ node }) => {
|
||||
return;
|
||||
}
|
||||
|
||||
let channel = user.channels.find((c: IChannel) => c.id === ev) || user.servers.find((s: IServer) => s.channels.some((c: IChannel) => c.id === ev))
|
||||
if (channel.DM === undefined) {
|
||||
let channel = user.channels?.find((c: IChannel) => c.id === ev) || user.servers?.find((s: IServer) => s.channels.some((c: IChannel) => c.id === ev));
|
||||
if (channel?.DM === undefined) {
|
||||
// assume its a server
|
||||
channel = channel.channels.find((c: IChannel) => c.id === ev)
|
||||
channel = channel?.channels.find((c: IChannel) => c.id === ev);
|
||||
}
|
||||
|
||||
if (!channel) return;
|
||||
|
||||
if (!channel.dmParticipants?.find((e: SafeUser) => e.id === user.id)) {
|
||||
if (!channel.server || !channel.server.participants.find((e: SafeUser) => e.id === user.id)) {
|
||||
return
|
||||
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
99
stores/store.ts
Normal file → Executable file
@@ -1,127 +1,126 @@
|
||||
import { channel } from "diagnostics_channel";
|
||||
import { serve } from "esbuild";
|
||||
import { Socket } from "socket.io-client";
|
||||
import { SafeUser, IServer, IChannel, IMessage, IEmojiPickerData } from "../types";
|
||||
import { Socket } from 'socket.io-client';
|
||||
import { SafeUser, IServer, IChannel, IMessage, IPopupData } from '~/types';
|
||||
|
||||
export const useGlobalStore = defineStore('global', {
|
||||
state: () => ({
|
||||
activeChannel: {} as IChannel,
|
||||
activeServer: {} as IServer | IChannel,
|
||||
activeServerType: '' as "dms" | "servers" | undefined,
|
||||
activeServerType: '' as 'dms' | 'servers' | undefined,
|
||||
user: {} as SafeUser,
|
||||
dms: [] as IChannel[],
|
||||
servers: [] as IServer[],
|
||||
emojiPickerData: {} as IEmojiPickerData,
|
||||
emojiPickerData: {type: 'emojiPicker'} as IPopupData,
|
||||
socket: null as unknown
|
||||
}),
|
||||
actions: {
|
||||
setActiveServer(type: "servers" | "dms", channelId: string) {
|
||||
setActiveServer(type: 'servers' | 'dms', channelId: string) {
|
||||
if (channelId === '@me') {
|
||||
this.activeServer = {} as IServer | IChannel
|
||||
this.activeServerType = 'dms'
|
||||
this.activeServer = {} as IServer | IChannel;
|
||||
this.activeServerType = 'dms';
|
||||
return;
|
||||
}
|
||||
|
||||
this.activeServerType = type
|
||||
this.activeServerType = type;
|
||||
|
||||
const searchableArray: IChannel[] | IServer[] | undefined = this[type]
|
||||
const searchableArray: IChannel[] | IServer[] = this[type];
|
||||
if (!searchableArray) return;
|
||||
let activeServer: number;
|
||||
let activeServer: IServer | IChannel;
|
||||
if (type === 'servers') {
|
||||
activeServer = searchableArray.find((e) => {
|
||||
return e.channels.some((channel: IChannel) => channel.id === channelId)
|
||||
})
|
||||
activeServer = searchableArray.find((e: IServer) => {
|
||||
return e.channels.some((channel: IChannel) => channel.id === channelId);
|
||||
});
|
||||
} else {
|
||||
activeServer = searchableArray.find((e) => {
|
||||
return e.id === channelId
|
||||
})
|
||||
activeServer = searchableArray.find((e: IChannel) => {
|
||||
return e.id === channelId;
|
||||
});
|
||||
}
|
||||
|
||||
this.activeServer = activeServer
|
||||
this.activeServer = activeServer;
|
||||
},
|
||||
setActiveChannel(channel: IChannel) {
|
||||
this.activeChannel = channel;
|
||||
},
|
||||
updateServer(channelId: string, server: IServer) {
|
||||
const serverIndex = this.servers.findIndex(s => s.channels.some((c) => c.id === channelId))
|
||||
this.servers[serverIndex] = server
|
||||
const serverIndex = this.servers.findIndex(s => s.channels.some((c) => c.id === channelId));
|
||||
this.servers[serverIndex] = server;
|
||||
},
|
||||
setServers(servers: Array<IServer>) {
|
||||
this.servers = servers
|
||||
this.servers = servers;
|
||||
},
|
||||
addChannel(serverId: string, channel: IChannel) {
|
||||
const serverIndex = this.servers.findIndex(s => s.id === serverId)
|
||||
const server = this.servers[serverIndex]
|
||||
const serverIndex = this.servers.findIndex(s => s.id === serverId);
|
||||
const server = this.servers[serverIndex];
|
||||
if (serverIndex < 0 || !server) return;
|
||||
if (server.channels.find((c) => c.id === channel.id)) return;
|
||||
server.channels.push(channel)
|
||||
server.channels.push(channel);
|
||||
},
|
||||
addDM(dmChannel: IChannel) {
|
||||
if (this.dms.find((e) => e.id === dmChannel.id)) {
|
||||
const index = this.dms.findIndex((e) => e.id === dmChannel.id)
|
||||
this.dms[index] = dmChannel
|
||||
const index = this.dms.findIndex((e) => e.id === dmChannel.id);
|
||||
this.dms[index] = dmChannel;
|
||||
return;
|
||||
}
|
||||
this.dms.push(dmChannel)
|
||||
this.dms.push(dmChannel);
|
||||
},
|
||||
addServer(server: IServer) {
|
||||
if (this.servers.find((e) => e.id === server.id)) {
|
||||
const index = this.servers.findIndex((e) => e.id === server.id)
|
||||
this.servers[index] = server
|
||||
const index = this.servers.findIndex((e) => e.id === server.id);
|
||||
this.servers[index] = server;
|
||||
return;
|
||||
}
|
||||
this.servers.push(server)
|
||||
this.servers.push(server);
|
||||
},
|
||||
setDms(dms: Array<IChannel>) {
|
||||
this.dms = dms
|
||||
this.dms = dms;
|
||||
},
|
||||
setSocket(socket: Socket) {
|
||||
this.socket = socket
|
||||
this.socket = socket;
|
||||
},
|
||||
setUser(user: SafeUser) {
|
||||
this.user = user;
|
||||
},
|
||||
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;
|
||||
this.activeChannel.messages[messageIndex] = message
|
||||
this.activeChannel.messages[messageIndex] = message;
|
||||
},
|
||||
removeMessage(messageId: string) {
|
||||
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.right = payload.right;
|
||||
this.emojiPickerData.openedBy = payload.openedBy;
|
||||
this.emojiPickerData.opened = true;
|
||||
},
|
||||
toggleEmojiPicker(payload: IEmojiPickerData) {
|
||||
toggleEmojiPicker(payload: IPopupData) {
|
||||
let messageId;
|
||||
if (this.emojiPickerData.openedBy === undefined) {
|
||||
messageId = null
|
||||
messageId = null;
|
||||
} 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) {
|
||||
this.openEmojiPicker(payload)
|
||||
if (!this.emojiPickerData.opened || payload.openedBy?.messageId !== messageId) {
|
||||
this.openEmojiPicker(payload);
|
||||
} else {
|
||||
this.closeEmojiPicker()
|
||||
this.closeEmojiPicker();
|
||||
}
|
||||
},
|
||||
closeEmojiPicker() {
|
||||
console.log('closeEmojiPicker')
|
||||
if (this.emojiPickerData.openedBy) this.emojiPickerData.openedBy.messageId = '';
|
||||
this.emojiPickerData.opened = false;
|
||||
},
|
||||
logout() {
|
||||
this.dms = []
|
||||
this.servers = []
|
||||
this.socket = null
|
||||
this.activeServer = {} as IChannel
|
||||
this.dms = [];
|
||||
this.servers = [];
|
||||
this.socket = null;
|
||||
this.activeServer = {} as IChannel;
|
||||
}
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
3
tailwind.config.js
Normal file → Executable file
3
tailwind.config.js
Normal file → Executable file
@@ -1,4 +1,5 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
// eslint-disable-next-line no-undef
|
||||
module.exports = {
|
||||
content: [
|
||||
'./assets/**/*.{vue,js,css}',
|
||||
@@ -19,4 +20,4 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
};
|
||||
|
||||
2
tsconfig.json
Normal file → Executable file
2
tsconfig.json
Normal file → Executable file
@@ -6,9 +6,9 @@
|
||||
"ESNext.AsyncIterable",
|
||||
"DOM"
|
||||
],
|
||||
"strict": true,
|
||||
"sourceMap": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
@@ -1 +1 @@
|
||||
{"version":"4.7.4"}
|
||||
{"version":"5.0.2"}
|
||||
14
types/index.ts
Normal file → Executable file
14
types/index.ts
Normal file → Executable file
@@ -2,6 +2,7 @@ export interface IUser {
|
||||
id: string;
|
||||
email: string;
|
||||
username: string;
|
||||
online?: boolean;
|
||||
passwordhash: string;
|
||||
servers?: Array<IServer>;
|
||||
channels?: Array<IChannel>;
|
||||
@@ -66,23 +67,20 @@ export interface IRole {
|
||||
|
||||
export interface IReaction {
|
||||
id: string;
|
||||
emoji: {
|
||||
name: string;
|
||||
id?: string;
|
||||
};
|
||||
count: number;
|
||||
emoji: string;
|
||||
previousCount?: number;
|
||||
users: IUser[];
|
||||
Message: IMessage;
|
||||
messageId: string;
|
||||
}
|
||||
|
||||
export interface IEmojiPickerData {
|
||||
export interface IPopupData {
|
||||
opened: boolean;
|
||||
top: number;
|
||||
right: number;
|
||||
openedBy: {
|
||||
type: "message" | "messageInput";
|
||||
type: 'emojiPicker' | 'userInfo';
|
||||
openedBy?: {
|
||||
type: 'message' | 'messageInput';
|
||||
messageId?: string;
|
||||
};
|
||||
}
|
||||
37
utils/parseMessageBody.ts
Normal file → Executable file
37
utils/parseMessageBody.ts
Normal file → Executable file
@@ -1,45 +1,50 @@
|
||||
import { IChannel } from "~/types";
|
||||
import { IChannel } from '~/types';
|
||||
|
||||
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);
|
||||
const rules = [
|
||||
//bold, italics and paragragh rules
|
||||
[/\*\*\s?([^\n]+)\*\*/g, "<b>$1</b>"],
|
||||
[/\*\s?([^\n]+)\*/g, "<i>$1</i>"],
|
||||
[/\_\_\s?([^\n]+)\_\_/g, "<u>$1</u>"],
|
||||
[/\~\~\s?([^\n]+)\~\~/g, "<s>$1</s>"],
|
||||
[/**\s?([^\n]+)**/g, '<b>$1</b>'],
|
||||
[/*\s?([^\n]+)*/g, '<i>$1</i>'],
|
||||
[/__\s?([^\n]+)__/g, '<u>$1</u>'],
|
||||
[/~~\s?([^\n]+)~~/g, '<s>$1</s>'],
|
||||
|
||||
// code lines and blocks
|
||||
[/```(.+?)```/g, "<pre class='codeblock'><code>$1</code></pre>"],
|
||||
[/(?<!`)`(.+?)`(?!`)/g, "<code class='inline-code'>$1</code>"],
|
||||
[/```(.+?)```/g, '<pre class=\'codeblock\'><code>$1</code></pre>'],
|
||||
[/(?<!`)`(.+?)`(?!`)/g, '<code class=\'inline-code\'>$1</code>'],
|
||||
];
|
||||
|
||||
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);
|
||||
})
|
||||
});
|
||||
|
||||
const mentions = body.match(/<@([a-z]|[0-9]){25}>/g);
|
||||
/*
|
||||
* Matches string in the format of: <@[cuid]>
|
||||
* for example: "<@clfhiwt920003fb4jd5dbo2sy>", "<@clfhiwiah0000fb4jenr3j6l1>", and "<@clfhizvyt000nfb4j16kjnell>" would all be matched
|
||||
*/
|
||||
const mentionRegex = /<@(([a-z]|[0-9]){25})>/g;
|
||||
const mentions = body.match(mentionRegex);
|
||||
|
||||
if (mentions) {
|
||||
const participants = (activeChannel.DM) ? activeChannel.dmParticipants : activeChannel.server.participants;
|
||||
if (!participants) throw new Error(`participants in channel "${activeChannel.id}" not found"`)
|
||||
if (!participants) throw new Error(`participants in channel "${activeChannel.id}" not found"`);
|
||||
mentions.forEach((e: string) => {
|
||||
if (!e) return
|
||||
const id = e.split('<@')[1]?.split('>')[0];
|
||||
if (!id) return;
|
||||
const user = participants.find((e) => e.id === id)
|
||||
const user = participants.find((e) => e.id === id);
|
||||
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) {
|
||||
return s.replace(
|
||||
/[^0-9A-Za-z ]/g,
|
||||
c => "&#" + c.charCodeAt(0) + ";"
|
||||
c => '&#' + c.charCodeAt(0) + ';'
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user