Merge branch 'guild-settings' into guild-joining
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
This commit is contained in:
commit
cf32b62ae7
GPG key ID:
270B096EF6E9A462
67 changed files with 2621 additions and 255 deletions
44
components/ContextMenu.vue
Normal file
44
components/ContextMenu.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<div v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { ContextMenuItem } from '~/types/interfaces';
|
||||
|
||||
const props = defineProps<{ menuItems: ContextMenuItem[], cursorX: number, cursorY: number }>();
|
||||
|
||||
onMounted(() => {
|
||||
const contextMenu = document.getElementById("context-menu");
|
||||
if (contextMenu) {
|
||||
contextMenu.style.left = props.cursorX.toString() + "px";
|
||||
contextMenu.style.top = props.cursorY.toString() + "px";
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function runCallback(item: ContextMenuItem) {
|
||||
removeContextMenu();
|
||||
item.callback();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
#context-menu {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 10dvw;
|
||||
border: .15rem solid cyan;
|
||||
background-color: var(--background-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.context-menu-item:hover {
|
||||
background-color: rgb(50, 50, 50);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -23,19 +23,19 @@ const isCurrentChannel = props.uuid == props.currentUuid;
|
|||
.channel-list-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
padding-left: .5dvw;
|
||||
padding-right: .5dvw;
|
||||
padding-left: .25em;
|
||||
padding-right: .25em;
|
||||
}
|
||||
|
||||
.channel-list-link-container {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
height: 4dvh;
|
||||
height: 1.5em;
|
||||
white-space: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.current-channel {
|
||||
background-color: rgb(70, 70, 70);
|
||||
background-color: var(--sidebar-highlighted-background-color);
|
||||
}
|
||||
</style>
|
||||
63
components/Me/AddFriend.vue
Normal file
63
components/Me/AddFriend.vue
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<div style="text-align: left;">
|
||||
<h3>Add a Friend</h3>
|
||||
Enter a friend's Gorb username to send them a friend request.
|
||||
</div>
|
||||
|
||||
<div id="add-friend-search-bar">
|
||||
<input id="add-friend-search-input" ref="inputField"
|
||||
placeholder="blahaj.enjoyer" maxlength="32" @keypress.enter="sendRequest"/> <!-- REMEMBER TO CHANGE THIS WHEN WE ADD FEDERATION-->
|
||||
<Button id="friend-request-button" :callback="sendRequest" text="Send Friend Request"></Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Button from '../UserInterface/Button.vue';
|
||||
|
||||
const inputField = ref<HTMLInputElement>();
|
||||
const { addFriend } = useApi();
|
||||
|
||||
|
||||
async function sendRequest() {
|
||||
if (inputField.value) {
|
||||
try {
|
||||
await addFriend(inputField.value.value)
|
||||
alert("Friend request sent!")
|
||||
} catch {
|
||||
alert("Request failed :(")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
#add-friend-search-bar {
|
||||
display: flex;
|
||||
|
||||
text-align: left;
|
||||
margin-top: .8em;
|
||||
padding: .3em .3em;
|
||||
|
||||
border-radius: 1em;
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
|
||||
#add-friend-search-input {
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
margin: 0 .2em;
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
color: inherit;
|
||||
background-color: unset;
|
||||
font-weight: medium;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
#add-friend-search-input:empty:before {
|
||||
content: attr(placeholder);
|
||||
color: gray;
|
||||
}
|
||||
</style>
|
||||
41
components/Me/DirectMessagesSidebar.vue
Normal file
41
components/Me/DirectMessagesSidebar.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div id="middle-left-column">
|
||||
<div id="friend-sidebar">
|
||||
<div>
|
||||
<h3>Direct Messages</h3>
|
||||
</div>
|
||||
<VerticalSpacer />
|
||||
|
||||
<NuxtLink class="user-item" :href="`/me/friends`" tabindex="0">
|
||||
<Icon class="user-avatar" name="lucide:user" />
|
||||
<span class="user-display-name">Friends</span>
|
||||
</NuxtLink>
|
||||
<VerticalSpacer />
|
||||
|
||||
<div id="direct-message-list">
|
||||
<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
|
||||
:href="`/me/${user.uuid}`"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
|
||||
|
||||
const { fetchFriends } = useApi();
|
||||
|
||||
const friends = await fetchFriends()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#middle-left-column {
|
||||
background: var(--optional-channel-list-background);
|
||||
background-color: var(--sidebar-background-color);
|
||||
}
|
||||
|
||||
#friend-sidebar {
|
||||
padding-left: .5em;
|
||||
padding-right: .5em;
|
||||
}
|
||||
</style>
|
||||
58
components/Me/FriendsList.vue
Normal file
58
components/Me/FriendsList.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<input id="search-friend-bar" placeholder="search"/>
|
||||
|
||||
<!-- we aren't checking for the "all" variant, since this is the default and fallback one -->
|
||||
|
||||
<p v-if="props.variant === 'online'" style="text-align: left;">Online – 0</p>
|
||||
<p v-else-if="props.variant === 'pending'" style="text-align: left;">Friend Requests – 0</p>
|
||||
<p v-else style="text-align: left;">Friends – {{ friends?.length || 0 }}</p>
|
||||
|
||||
<div id="friends-list">
|
||||
<div v-if="props.variant === 'online'">
|
||||
Not Implemented
|
||||
</div>
|
||||
|
||||
<div v-else-if="props.variant === 'pending'">
|
||||
Not Implemented
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
|
||||
:href="`/me/${user.uuid}`"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const { fetchFriends } = useApi();
|
||||
|
||||
const friends = await fetchFriends()
|
||||
|
||||
const props = defineProps<{
|
||||
variant: string
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#search-friend-bar {
|
||||
text-align: left;
|
||||
margin-top: .8em;
|
||||
padding: .3em .5em;
|
||||
width: 100%;
|
||||
|
||||
border-radius: 1em;
|
||||
border: 1px solid var(--accent-color);
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
color: inherit;
|
||||
background-color: unset;
|
||||
font-weight: medium;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
#search-friend-bar:empty:before {
|
||||
content: attr(placeholder);
|
||||
color: gray;
|
||||
}
|
||||
</style>
|
||||
34
components/Member/MemberEntry.vue
Normal file
34
components/Member/MemberEntry.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
|
||||
<img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
|
||||
<Icon v-else class="member-avatar" name="lucide:user" />
|
||||
<span class="member-display-name">{{ props.member.user.display_name || props.member.user.username }}</span>
|
||||
<UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import type { GuildMemberResponse } from '~/types/interfaces';
|
||||
|
||||
const props = defineProps<{
|
||||
member: GuildMemberResponse
|
||||
}>();
|
||||
|
||||
const isPopupVisible = ref(false);
|
||||
|
||||
const togglePopup = () => {
|
||||
isPopupVisible.value = false;
|
||||
// isPopupVisible.value = !isPopupVisible.value;
|
||||
};
|
||||
|
||||
const hidePopup = () => {
|
||||
isPopupVisible.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.member-item {
|
||||
position: relative; /* Set the position to relative for absolute positioning of the popup */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,22 +1,61 @@
|
|||
<template>
|
||||
<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message">
|
||||
<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
|
||||
class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.user.uuid != props.me.uuid && props.replyMessage?.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
|
||||
:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
|
||||
<div v-if="props.replyMessage" class="message-reply-svg">
|
||||
<svg
|
||||
width="1.5em"
|
||||
height="1.5em"
|
||||
viewBox="0 0 151.14355 87.562065"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
style="overflow: visible;">
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
id="layer1"
|
||||
transform="translate(40,-35)">
|
||||
<g
|
||||
id="g3"
|
||||
transform="translate(-35,-20)">
|
||||
<path
|
||||
style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
|
||||
d="m 120.02168,87.850978 100.76157,2.4e-5"
|
||||
id="path3-5" />
|
||||
<path
|
||||
style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
|
||||
d="M 69.899501,174.963 120.2803,87.700931"
|
||||
id="path3-5-2" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<MessageReply v-if="props.replyMessage" :author="props.replyMessage.user.display_name || props.replyMessage.user.username" :text="props.replyMessage?.message"
|
||||
:id="props.message.uuid" :reply-id="props.replyMessage.uuid" max-width="reply" />
|
||||
<div class="left-column">
|
||||
<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username" />
|
||||
<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="author?.display_name || author?.username" />
|
||||
<Icon v-else name="lucide:user" class="message-author-avatar" />
|
||||
</div>
|
||||
<div class="message-data">
|
||||
<div class="message-metadata">
|
||||
<span class="message-author-username" tabindex="0">
|
||||
{{ username }}
|
||||
{{ author?.display_name || author?.username }}
|
||||
</span>
|
||||
<span class="message-date" :title="date.toString()">
|
||||
{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
|
||||
<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
|
||||
<span v-else-if="getDayDifference(date, currentDate) > 1 ">{{ date.toLocaleDateString(undefined) }},</span>
|
||||
|
||||
{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="message-text" v-html="sanitized" tabindex="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }">
|
||||
<div v-else ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
|
||||
class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }"
|
||||
:data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
|
||||
<div class="left-column">
|
||||
<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
|
||||
{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
|
||||
|
|
@ -31,49 +70,73 @@
|
|||
<script lang="ts" setup>
|
||||
import DOMPurify from 'dompurify';
|
||||
import { parse } from 'marked';
|
||||
import type { MessageProps } from '~/types/props';
|
||||
|
||||
const props = defineProps<{
|
||||
class?: string,
|
||||
img?: string | null,
|
||||
username: string,
|
||||
text: string,
|
||||
timestamp: number,
|
||||
format: "12" | "24",
|
||||
type: "normal" | "grouped",
|
||||
marginBottom: boolean,
|
||||
last: boolean
|
||||
}>();
|
||||
const props = defineProps<MessageProps>();
|
||||
|
||||
const messageElement = ref<HTMLDivElement>();
|
||||
|
||||
const dateHidden = ref<boolean>(true);
|
||||
|
||||
const date = new Date(props.timestamp);
|
||||
const currentDate: Date = new Date()
|
||||
|
||||
console.log("message:", props.text);
|
||||
console.log("author:", props.username);
|
||||
console.log("[MSG] message to render:", props.message);
|
||||
console.log("author:", props.author);
|
||||
console.log("[MSG] reply message:", props.replyMessage);
|
||||
|
||||
const sanitized = ref<string>();
|
||||
|
||||
onMounted(async () => {
|
||||
const parsed = await parse(props.text, { gfm: true });
|
||||
sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: ["strong", "em", "br", "blockquote", "code", "ul", "ol", "li", "a", "h1", "h2", "h3", "h4", "h5", "h6"] });
|
||||
sanitized.value = DOMPurify.sanitize(parsed, {
|
||||
ALLOWED_TAGS: [
|
||||
"strong", "em", "br", "blockquote",
|
||||
"code", "ul", "ol", "li", "a", "h1",
|
||||
"h2", "h3", "h4", "h5", "h6"
|
||||
],
|
||||
ALLOW_DATA_ATTR: false,
|
||||
ALLOW_SELF_CLOSE_IN_ATTR: false,
|
||||
ALLOWED_ATTR: []
|
||||
});
|
||||
console.log("adding listeners")
|
||||
await nextTick();
|
||||
messageElement.value?.addEventListener("mouseenter", (e: Event) => {
|
||||
dateHidden.value = false;
|
||||
});
|
||||
|
||||
messageElement.value?.addEventListener("mouseleave", (e: Event) => {
|
||||
dateHidden.value = true;
|
||||
});
|
||||
console.log("added listeners");
|
||||
if (messageElement.value?.classList.contains("grouped-message")) {
|
||||
messageElement.value?.addEventListener("mouseenter", (e: Event) => {
|
||||
dateHidden.value = false;
|
||||
});
|
||||
|
||||
messageElement.value?.addEventListener("mouseleave", (e: Event) => {
|
||||
dateHidden.value = true;
|
||||
});
|
||||
console.log("added listeners");
|
||||
}
|
||||
});
|
||||
|
||||
//function toggleTooltip(e: Event) {
|
||||
// showHover.value = !showHover.value;
|
||||
//}
|
||||
|
||||
const menuItems = [
|
||||
{ name: "Reply", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
|
||||
]
|
||||
|
||||
console.log("me:", props.me);
|
||||
if (props.author?.uuid == props.me.uuid) {
|
||||
menuItems.push({ name: "Edit", callback: () => { if (messageElement.value) editMessage(messageElement.value, props) } });
|
||||
}
|
||||
|
||||
function getDayDifference(date1: Date, date2: Date) {
|
||||
const midnight1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
|
||||
const midnight2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
|
||||
|
||||
const timeDifference = midnight2.getTime() - midnight1.getTime();
|
||||
|
||||
const dayDifference = timeDifference / (1000 * 60 * 60 * 24);
|
||||
|
||||
return Math.round(dayDifference);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -81,14 +144,20 @@ onMounted(async () => {
|
|||
text-align: left;
|
||||
/* border: 1px solid lightcoral; */
|
||||
display: grid;
|
||||
grid-template-columns: 2dvw 1fr;
|
||||
grid-template-columns: 2rem 1fr;
|
||||
align-items: center;
|
||||
column-gap: 1dvw;
|
||||
width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.message-reply-preview {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.message:hover {
|
||||
background-color: rgb(20, 20, 20);
|
||||
background-color: var(--chat-highlighted-background-color);
|
||||
}
|
||||
|
||||
.normal-message {
|
||||
|
|
@ -116,6 +185,8 @@ onMounted(async () => {
|
|||
flex-direction: column;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.message-author {
|
||||
|
|
@ -129,10 +200,13 @@ onMounted(async () => {
|
|||
}
|
||||
|
||||
.left-column {
|
||||
min-width: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.author-username {
|
||||
|
|
@ -142,7 +216,7 @@ onMounted(async () => {
|
|||
|
||||
.message-date {
|
||||
font-size: .7em;
|
||||
color: rgb(150, 150, 150);
|
||||
color: var(--secondary-text-color);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
|
@ -159,16 +233,30 @@ onMounted(async () => {
|
|||
width: 20px;
|
||||
}
|
||||
*/
|
||||
|
||||
.mentioned {
|
||||
background-color: rgba(0, 255, 166, 0.123);
|
||||
}
|
||||
|
||||
.mentioned:hover {
|
||||
background-color: rgba(90, 255, 200, 0.233);
|
||||
}
|
||||
|
||||
.message-reply-svg {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style module>
|
||||
.message-text ul, h1, h2, h3, h4, h5, h6 {
|
||||
padding-top: 1dvh;
|
||||
padding-bottom: 1dvh;
|
||||
padding-top: .5em;
|
||||
padding-bottom: .5em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.message-text ul {
|
||||
padding-left: 2dvw;
|
||||
padding-left: 1em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,31 +3,53 @@
|
|||
<div id="messages" ref="messagesElement">
|
||||
<Message v-for="(message, i) of messages" :username="message.user.display_name ?? message.user.username"
|
||||
:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
|
||||
format="12" :type="messagesType[message.uuid]"
|
||||
:format="timeFormat" :type="messagesType[message.uuid]"
|
||||
:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
|
||||
:last="i == messages.length - 1" />
|
||||
:last="i == messages.length - 1" :message-id="message.uuid" :author="message.user" :me="me"
|
||||
:message="message" :is-reply="message.reply_to"
|
||||
:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
|
||||
</div>
|
||||
<div id="message-box" class="rounded-corners">
|
||||
<form id="message-form" @submit="sendMessage">
|
||||
<input v-model="messageInput" id="message-box-input" class="rounded-corners" type="text"
|
||||
name="message-input" autocomplete="off">
|
||||
<button id="submit-button" type="submit">
|
||||
<Icon name="lucide:send" />
|
||||
</button>
|
||||
<div id="message-box-left-elements">
|
||||
<span class="message-box-button">
|
||||
<Icon name="lucide:file-plus-2" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="message-textarea">
|
||||
<div id="message-textbox-input"
|
||||
role="textbox" ref="messageTextboxInput"
|
||||
autocorrect="off" spellcheck="true" contenteditable="true"
|
||||
@keydown="handleTextboxKeyDown" @input="handleTextboxInput">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="message-box-right-elements">
|
||||
<button class="message-box-button" type="submit">
|
||||
<Icon name="lucide:send" />
|
||||
</button>
|
||||
<span class="message-box-button">
|
||||
<Icon name="lucide:image-play" />
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { MessageResponse, ScrollPosition } from '~/types/interfaces';
|
||||
import type { MessageResponse, ScrollPosition, UserResponse } from '~/types/interfaces';
|
||||
import scrollToBottom from '~/utils/scrollToBottom';
|
||||
|
||||
const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
|
||||
|
||||
const me = await fetchWithApi("/me") as UserResponse;
|
||||
|
||||
const messageTimestamps = ref<Record<string, number>>({});
|
||||
const messagesType = ref<Record<string, "normal" | "grouped">>({});
|
||||
const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference
|
||||
const timeFormat = getPreferredTimeFormat()
|
||||
|
||||
const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
|
||||
`${props.channelUrl}/messages`,
|
||||
|
|
@ -97,6 +119,7 @@ if (messagesRes) {
|
|||
messagesRes.reverse();
|
||||
console.log("messages res:", messagesRes.map(msg => msg.message));
|
||||
for (const message of messagesRes) {
|
||||
console.log("[MSG] processing message:", message);
|
||||
groupMessage(message);
|
||||
}
|
||||
}
|
||||
|
|
@ -106,11 +129,38 @@ function pushMessage(message: MessageResponse) {
|
|||
messages.value.push(message);
|
||||
}
|
||||
|
||||
function handleTextboxKeyDown(event: KeyboardEvent) {
|
||||
if (event.key === "Enter" && event.shiftKey && messageTextboxInput.value) {
|
||||
// this enters a newline, due to not preventing default
|
||||
} else if (event.key === "Enter") {
|
||||
event.preventDefault()
|
||||
sendMessage(event)
|
||||
}
|
||||
|
||||
adjustTextboxHeight()
|
||||
}
|
||||
|
||||
function handleTextboxInput() {
|
||||
if (messageTextboxInput.value) {
|
||||
messageInput.value = messageTextboxInput.value.innerText;
|
||||
}
|
||||
|
||||
adjustTextboxHeight()
|
||||
}
|
||||
|
||||
// this technically uses pixel units, but it's still set using dynamic units
|
||||
function adjustTextboxHeight() {
|
||||
if (messageTextboxInput.value && messageTextboxDisplay.value) {
|
||||
messageTextboxInput.value.style.height = "auto"
|
||||
messageTextboxInput.value.style.height = `${messageTextboxInput.value.scrollHeight}px`
|
||||
}
|
||||
}
|
||||
|
||||
const messages = ref<MessageResponse[]>([]);
|
||||
|
||||
const messageInput = ref<string>();
|
||||
|
||||
const messageInput = ref<string>("");
|
||||
const messagesElement = ref<HTMLDivElement>();
|
||||
const messageTextboxInput = ref<HTMLDivElement>();
|
||||
const messageTextboxDisplay = ref<HTMLDivElement>();
|
||||
|
||||
if (messagesRes) messages.value = messagesRes;
|
||||
|
||||
|
|
@ -141,6 +191,7 @@ if (accessToken && apiBase) {
|
|||
console.log("event data:", event.data);
|
||||
console.log("message uuid:", event.data.uuid);
|
||||
const parsedData = JSON.parse(event.data);
|
||||
console.log("[MSG] parsed message:", parsedData);
|
||||
|
||||
console.log("parsed message type:", messagesType.value[parsedData.uuid]);
|
||||
console.log("parsed message timestamp:", messageTimestamps.value[parsedData.uuid]);
|
||||
|
|
@ -158,12 +209,39 @@ if (accessToken && apiBase) {
|
|||
|
||||
function sendMessage(e: Event) {
|
||||
e.preventDefault();
|
||||
const text = messageInput.value;
|
||||
console.log("text:", text);
|
||||
if (text) {
|
||||
ws.send(text);
|
||||
messageInput.value = "";
|
||||
console.log("MESSAGE SENT!!!");
|
||||
if (messageInput.value && messageInput.value.trim() !== "") {
|
||||
const message: Record<string, string> = {
|
||||
message: messageInput.value.trim().replace(/\n/g, "<br>") // trim, and replace \n with <br>
|
||||
}
|
||||
|
||||
const messageReply = document.getElementById("message-reply") as HTMLDivElement;
|
||||
console.log("[MSG] message reply:", messageReply);
|
||||
if (messageReply && messageReply.dataset.messageId) {
|
||||
console.log("[MSG] message is a reply");
|
||||
message.reply_to = messageReply.dataset.messageId;
|
||||
}
|
||||
|
||||
console.log("[MSG] sent message:", message);
|
||||
ws.send(JSON.stringify(message));
|
||||
|
||||
// reset input field
|
||||
messageInput.value = ""
|
||||
if (messageTextboxInput.value) {
|
||||
messageTextboxInput.value.innerText = ""
|
||||
}
|
||||
|
||||
adjustTextboxHeight()
|
||||
}
|
||||
}
|
||||
|
||||
function getReplyMessage(id: string) {
|
||||
console.log("[REPLYMSG] id:", id);
|
||||
const messagesValues = Object.values(messages.value);
|
||||
console.log("[REPLYMSG] messages values:", messagesValues);
|
||||
for (const message of messagesValues) {
|
||||
console.log("[REPLYMSG] message:", message);
|
||||
console.log("[REPLYMSG] IDs match?", message.uuid == id);
|
||||
if (message.uuid == id) return message;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -171,6 +249,7 @@ const route = useRoute();
|
|||
|
||||
onMounted(async () => {
|
||||
if (import.meta.server) return;
|
||||
console.log("[MSG] messages keys:", Object.values(messages.value));
|
||||
if (messagesElement.value) {
|
||||
scrollToBottom(messagesElement.value);
|
||||
let fetched = false;
|
||||
|
|
@ -239,38 +318,64 @@ router.beforeEach((to, from, next) => {
|
|||
|
||||
<style scoped>
|
||||
#message-area {
|
||||
display: grid;
|
||||
grid-template-rows: 8fr 1fr;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 1dvw;
|
||||
padding-right: 1dvw;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#message-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
border: 1px solid rgb(70, 70, 70);
|
||||
padding-bottom: 1dvh;
|
||||
padding-top: 1dvh;
|
||||
margin-bottom: 1dvh;
|
||||
margin-top: auto; /* force it to the bottom of the screen */
|
||||
margin-bottom: 2dvh;
|
||||
margin-left: 1dvw;
|
||||
margin-right: 1dvw;
|
||||
|
||||
padding-left: 2%;
|
||||
padding-right: 2%;
|
||||
|
||||
align-items: center;
|
||||
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--padding-color);
|
||||
background-color: var(--chatbox-background-color);
|
||||
}
|
||||
|
||||
#message-form {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
gap: .55em;
|
||||
}
|
||||
|
||||
#message-box-input {
|
||||
width: 80%;
|
||||
background-color: rgb(50, 50, 50);
|
||||
#message-textarea {
|
||||
flex-grow: 1;
|
||||
min-height: 2.35em;
|
||||
}
|
||||
|
||||
#message-textbox-input {
|
||||
width: 100%;
|
||||
max-height: 50dvh;
|
||||
|
||||
padding: 0.5em 0;
|
||||
user-select: text;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: normal;
|
||||
border: none;
|
||||
color: inherit;
|
||||
padding-left: 1dvw;
|
||||
padding-right: 1dvw;
|
||||
background-color: #40404000; /* completely transparent colour */
|
||||
|
||||
text-align: left;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#message-box-left-elements, #message-box-right-elements {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
#messages {
|
||||
|
|
@ -281,14 +386,16 @@ router.beforeEach((to, from, next) => {
|
|||
padding-right: 1dvw;
|
||||
}
|
||||
|
||||
#submit-button {
|
||||
.message-box-button {
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
color: rgb(200, 200, 200);
|
||||
color: var(--primary-color);
|
||||
transition: color 100ms;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
#submit-button:hover {
|
||||
color: rgb(255, 255, 255);
|
||||
.message-box-button:hover {
|
||||
color: var(--primary-highlighted-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
92
components/MessageReply.vue
Normal file
92
components/MessageReply.vue
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<div :id="props.maxWidth == 'full' ? 'message-reply' : undefined" :class="{ 'message-reply-preview' : props.maxWidth == 'reply' }"
|
||||
:data-message-id="props.id" @click="scrollToReply">
|
||||
<span id="reply-text">Replying to <span id="reply-author-field">{{ props.author }}:</span> <span v-html="sanitized"></span></span>
|
||||
<!-- <span id="message-reply-cancel"><Icon name="lucide:x" /></span> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import DOMPurify from "dompurify";
|
||||
import { parse } from "marked";
|
||||
|
||||
const props = defineProps<{ author: string, text: string, id: string, replyId: string, maxWidth: "full" | "reply" }>();
|
||||
|
||||
const existingReply = document.getElementById("message-reply");
|
||||
|
||||
if (existingReply) {
|
||||
existingReply.remove();
|
||||
}
|
||||
|
||||
console.log("text:", props.text);
|
||||
|
||||
const sanitized = ref<string>();
|
||||
|
||||
onMounted(async () => {
|
||||
|
||||
const parsed = await parse(props.text.trim().replaceAll("<br>", " "), { gfm: true });
|
||||
|
||||
sanitized.value = DOMPurify.sanitize(parsed, {
|
||||
ALLOWED_TAGS: [],
|
||||
ALLOW_DATA_ATTR: false,
|
||||
ALLOW_SELF_CLOSE_IN_ATTR: false,
|
||||
ALLOWED_ATTR: [],
|
||||
KEEP_CONTENT: true
|
||||
});
|
||||
|
||||
console.log("sanitized:", sanitized.value);
|
||||
|
||||
const messageBoxInput = document.getElementById("message-textbox-input") as HTMLDivElement;
|
||||
if (messageBoxInput) {
|
||||
messageBoxInput.focus();
|
||||
}
|
||||
});
|
||||
|
||||
function scrollToReply(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
console.log("clicked on reply box");
|
||||
const reply = document.querySelector(`.message[data-message-id="${props.replyId}"]`);
|
||||
if (reply) {
|
||||
console.log("reply:", reply);
|
||||
console.log("scrolling into view");
|
||||
reply.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
#message-reply, .message-reply-preview {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
margin-bottom: .5rem;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#message-reply {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.message-reply-preview {
|
||||
margin-left: .5dvw;
|
||||
}
|
||||
|
||||
#reply-text {
|
||||
color: var(--reply-text-color);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0;
|
||||
margin-top: .2rem;
|
||||
border-bottom: 1px solid var(--padding-color);
|
||||
|
||||
}
|
||||
|
||||
#reply-author-field {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
</style>
|
||||
93
components/Popups/CropPopup.vue
Normal file
93
components/Popups/CropPopup.vue
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<div id="fullscreen-container">
|
||||
<div id="crop-preview">
|
||||
<img ref="image" :src="imageSrc" style="min-height: 35dvh;">
|
||||
<Button text="Crop" :callback="cropImage"></Button>
|
||||
<Button text="Cancel" :callback="closePopup"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Cropper from 'cropperjs';
|
||||
|
||||
const props = defineProps({
|
||||
imageSrc: String,
|
||||
onCrop: Function,
|
||||
onClose: Function,
|
||||
});
|
||||
|
||||
const image = ref<HTMLImageElement | null>(null);
|
||||
const cropper = ref<Cropper | null>(null);
|
||||
|
||||
watch(image, (newValue) => {
|
||||
if (newValue) {
|
||||
cropper.value = new Cropper(newValue)
|
||||
const cropperCanvas = cropper.value.getCropperCanvas()
|
||||
const cropperSelection = cropper.value.getCropperSelection()
|
||||
|
||||
if (cropperCanvas) {
|
||||
cropperCanvas.background = false
|
||||
}
|
||||
|
||||
if (cropperSelection) {
|
||||
cropperSelection.precise = true
|
||||
cropperSelection.aspectRatio = 1
|
||||
cropperSelection.initialCoverage = 1
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
async function cropImage() {
|
||||
if (cropper) {
|
||||
const selection = cropper.value?.getCropperSelection();
|
||||
if (selection) {
|
||||
const canvas = await selection.$toCanvas({width: 256, height: 256})
|
||||
|
||||
canvas.toBlob((blob) => {
|
||||
if (blob && props.onCrop) {
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener("load", () => {
|
||||
if (reader.result && typeof reader.result === 'string') {
|
||||
if (props.onCrop) {
|
||||
props.onCrop(blob, reader.result)
|
||||
}
|
||||
}
|
||||
});
|
||||
const file = new File([blob], 'preview.png', { type: 'image/png' })
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function closePopup() {
|
||||
if (props.onClose) {
|
||||
props.onClose();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button {
|
||||
margin: 0.2em
|
||||
}
|
||||
|
||||
#fullscreen-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#crop-preview {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
124
components/Settings/AppSettings/Appearance.vue
Normal file
124
components/Settings/AppSettings/Appearance.vue
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Appearance</h1>
|
||||
|
||||
<p class="subtitle">THEMES</p>
|
||||
<div class="themes">
|
||||
<div v-for="theme of themes" class="theme-preview-container">
|
||||
<span class="theme-preview"
|
||||
:title="theme.displayName"
|
||||
:style="{background:`linear-gradient(${theme.previewGradient})`}"
|
||||
@click="changeTheme(theme.id, theme.themeUrl)"
|
||||
>
|
||||
<span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
|
||||
{{ theme.displayName }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <p class="subtitle">Icons</p>
|
||||
<div class="icons">
|
||||
</div> -->
|
||||
|
||||
<p class="subtitle">TIME FORMAT</p>
|
||||
<div class="icons">
|
||||
<RadioButtons :button-count="3" :text-strings="timeFormatTextStrings"
|
||||
:default-button-index="settingsLoad().timeFormat?.index ?? 0" :callback="onTimeFormatClicked"></RadioButtons>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
|
||||
import type { TimeFormat } from '~/types/settings';
|
||||
import settingSave from '~/utils/settingSave';
|
||||
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
const defaultThemes = runtimeConfig.public.defaultThemes
|
||||
const baseURL = runtimeConfig.app.baseURL;
|
||||
const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"]
|
||||
let themeLinkElement: HTMLLinkElement | null = null;
|
||||
|
||||
const themes: Array<Theme> = []
|
||||
|
||||
interface Theme {
|
||||
id: string
|
||||
displayName: string
|
||||
previewGradient: string
|
||||
complementaryColor: string
|
||||
themeUrl: string
|
||||
}
|
||||
|
||||
function changeTheme(id: string, url: string) {
|
||||
if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${url}`) {
|
||||
return;
|
||||
}
|
||||
|
||||
settingSave("selectedThemeId", id)
|
||||
|
||||
// if the theme didn't originally load for some reason, create it
|
||||
if (!themeLinkElement) {
|
||||
themeLinkElement = document.createElement('link');
|
||||
themeLinkElement.rel = 'stylesheet';
|
||||
document.head.appendChild(themeLinkElement);
|
||||
}
|
||||
|
||||
themeLinkElement.href = `${baseURL}themes/${url}`;
|
||||
}
|
||||
|
||||
async function fetchThemes() {
|
||||
for (const theme of defaultThemes) {
|
||||
const themeConfig = await $fetch(`${baseURL}themes/${theme}.json`) as Theme
|
||||
themeConfig.id = theme
|
||||
|
||||
themes.push(themeConfig)
|
||||
}
|
||||
}
|
||||
|
||||
await fetchThemes()
|
||||
|
||||
async function onTimeFormatClicked(index: number) {
|
||||
let format: "auto" | "12" | "24" = "auto"
|
||||
|
||||
if (index == 0) {
|
||||
format = "auto"
|
||||
} else if (index == 1) {
|
||||
format = "12"
|
||||
} else if (index == 2) {
|
||||
format = "24"
|
||||
}
|
||||
|
||||
const timeFormat: TimeFormat = {index, format}
|
||||
settingSave("timeFormat", timeFormat)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.themes {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.theme-preview-container {
|
||||
margin: .5em;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
.theme-preview {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
border-radius: 100%;
|
||||
border: .1em solid var(--primary-color);
|
||||
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.theme-title {
|
||||
font-size: .8em;
|
||||
line-height: 5em; /* same height as the parent to centre it vertically */
|
||||
}
|
||||
</style>
|
||||
12
components/Settings/AppSettings/Keybinds.vue
Normal file
12
components/Settings/AppSettings/Keybinds.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Keybinds (TBA)</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
12
components/Settings/AppSettings/Language.vue
Normal file
12
components/Settings/AppSettings/Language.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Language (TBA)</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
12
components/Settings/AppSettings/Notifications.vue
Normal file
12
components/Settings/AppSettings/Notifications.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Notifications (TBA)</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
97
components/Settings/UserSettings/Account.vue
Normal file
97
components/Settings/UserSettings/Account.vue
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<div v-if="user">
|
||||
<h1>Account</h1>
|
||||
|
||||
<p class="subtitle">E-MAIL</p>
|
||||
<input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.email" placeholder="john@example.org" />
|
||||
<br>
|
||||
<Button text="Submit" :callback=changeEmail style="margin-top: .4em"></Button>
|
||||
|
||||
<p class="subtitle">PASSWORD</p>
|
||||
<Button text="Reset Password" :callback=resetPassword></Button>
|
||||
|
||||
<p class="subtitle">ACCOUNT DELETION</p>
|
||||
<Button text="Delete Account (tbd)" :callback=deleteAccount variant="scary"></Button>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Button from '~/components/UserInterface/Button.vue';
|
||||
import type { UserResponse } from '~/types/interfaces';
|
||||
|
||||
const { fetchUser } = useAuth();
|
||||
|
||||
const user: UserResponse | undefined = await fetchUser()
|
||||
if (!user) {
|
||||
alert("could not fetch user info, aborting :(")
|
||||
}
|
||||
|
||||
async function changeEmail() {
|
||||
if (!user) return;
|
||||
|
||||
|
||||
const formData = new FormData()
|
||||
const bytes = new TextEncoder().encode(JSON.stringify({
|
||||
email: user.email,
|
||||
}));
|
||||
formData.append('json', new Blob([bytes], { type: 'application/json' }));
|
||||
|
||||
try {
|
||||
await fetchWithApi('/me', {
|
||||
method: 'PATCH',
|
||||
body: formData
|
||||
})
|
||||
|
||||
const apiBase = useCookie("api_base").value;
|
||||
|
||||
if (apiBase) {
|
||||
const stats = await useApi().fetchInstanceStats(apiBase);
|
||||
if (stats.email_verification_required) {
|
||||
return window.location.reload();
|
||||
}
|
||||
}
|
||||
alert('success!!')
|
||||
} catch (error: any) {
|
||||
if (error?.response?.status !== 200) {
|
||||
alert(`error ${error?.response?.status} met whilst trying to update profile info`)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
async function resetPassword () {
|
||||
await fetchWithApi("/auth/reset-password", {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
query: {
|
||||
identifier: user?.username
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteAccount() {
|
||||
alert("TBD")
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-data-fields {
|
||||
min-width: 35dvw;
|
||||
max-width: 35dvw;
|
||||
}
|
||||
|
||||
.profile-data-input {
|
||||
min-width: 30dvw;
|
||||
margin: 0.07dvh;
|
||||
padding: 0.1dvh 0.7dvw;
|
||||
height: 2.5em;
|
||||
font-size: 1em;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
</style>
|
||||
12
components/Settings/UserSettings/Connections.vue
Normal file
12
components/Settings/UserSettings/Connections.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Connections (TBA)</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
12
components/Settings/UserSettings/Devices.vue
Normal file
12
components/Settings/UserSettings/Devices.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Devices (TBA)</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
12
components/Settings/UserSettings/Privacy.vue
Normal file
12
components/Settings/UserSettings/Privacy.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Privacy (TBA)</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
154
components/Settings/UserSettings/Profile.vue
Normal file
154
components/Settings/UserSettings/Profile.vue
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Profile</h1>
|
||||
|
||||
<div class="profile-container">
|
||||
<div class="user-data-fields" v-if="user">
|
||||
<p class="subtitle">AVATAR</p>
|
||||
<Button text="Change Avatar" :callback="changeAvatar" style="margin-right: 0.8dvw;"></Button>
|
||||
<Button text="Remove Avatar" :callback="removeAvatar" variant="neutral"></Button>
|
||||
|
||||
<label for="profile-display-name-input" class="subtitle">DISPLAY NAME</label>
|
||||
<input id="profile-display-name-input" class="profile-data-input" type="text" v-model="user.display_name" placeholder="Enter display name" />
|
||||
<label for="profile-username-input" class="subtitle">USERNAME</label>
|
||||
<input id="profile-username-input" class="profile-data-input" type="text" v-model="user.username" placeholder="Enter username" />
|
||||
<label for="profile-pronouns-input" class="subtitle">PRONOUNS</label>
|
||||
<input id="profile-pronouns-input" class="profile-data-input" type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
|
||||
<label for="profile-about-me-input" class="subtitle">ABOUT ME</label>
|
||||
<input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.about" placeholder="About me" />
|
||||
|
||||
<Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
|
||||
</div>
|
||||
|
||||
<UserPopup v-if="user" :user="user" id="profile-popup"></UserPopup>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<CropPopup
|
||||
v-if="isCropPopupVisible"
|
||||
:imageSrc="cropImageSrc"
|
||||
:onCrop="handleCrop"
|
||||
:onClose="closeCropPopup"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import UserPopup from '~/components/User/UserPopup.vue';
|
||||
import Button from '~/components/UserInterface/Button.vue';
|
||||
|
||||
import type { UserResponse } from '~/types/interfaces';
|
||||
|
||||
let newPfpFile: File;
|
||||
const isCropPopupVisible = ref(false);
|
||||
const cropImageSrc = ref("")
|
||||
;
|
||||
const { fetchUser } = useAuth();
|
||||
|
||||
const user: UserResponse | undefined = await fetchUser()
|
||||
if (!user) {
|
||||
alert("could not fetch user info, aborting :(")
|
||||
}
|
||||
|
||||
async function saveChanges() {
|
||||
if (!user) return;
|
||||
|
||||
const formData = new FormData()
|
||||
|
||||
if (newPfpFile) {
|
||||
formData.append("avatar", newPfpFile)
|
||||
}
|
||||
|
||||
const bytes = new TextEncoder().encode(JSON.stringify({
|
||||
display_name: user.display_name,
|
||||
username: user.username,
|
||||
pronouns: user.pronouns,
|
||||
about: user.about,
|
||||
}));
|
||||
formData.append('json', new Blob([bytes], { type: 'application/json' }));
|
||||
|
||||
try {
|
||||
await fetchWithApi('/me', {
|
||||
method: 'PATCH',
|
||||
body: formData
|
||||
})
|
||||
|
||||
alert('success!!')
|
||||
} catch (error: any) {
|
||||
if (error?.response?.status !== 200) {
|
||||
alert(`error ${error?.response?.status} met whilst trying to update profile info\n"${error?.response._data?.message}"`)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
async function removeAvatar() {
|
||||
alert("TBD")
|
||||
// await fetchWithApi(`/auth/reset-password`);
|
||||
}
|
||||
|
||||
async function changeAvatar() {
|
||||
if (!user) return;
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = 'image/*';
|
||||
|
||||
input.addEventListener("change", (e: Event) => {
|
||||
if (input.files?.length && input.files.length > 0) {
|
||||
const file = input.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener("load", () => {
|
||||
if (reader.result && typeof reader.result === 'string') {
|
||||
cropImageSrc.value = reader.result;
|
||||
isCropPopupVisible.value = true;
|
||||
}
|
||||
});
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
})
|
||||
|
||||
input.click()
|
||||
}
|
||||
|
||||
|
||||
function handleCrop(blob: Blob, url: string) {
|
||||
if (!user) return;
|
||||
|
||||
user.avatar = url;
|
||||
newPfpFile = new File([blob], 'avatar.png', { type: 'image/png' })
|
||||
closeCropPopup()
|
||||
}
|
||||
|
||||
function closeCropPopup() {
|
||||
isCropPopupVisible.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.user-data-fields {
|
||||
min-width: 35dvw;
|
||||
max-width: 35dvw;
|
||||
}
|
||||
|
||||
.profile-data-input {
|
||||
min-width: 30dvw;
|
||||
margin: 0.07dvh;
|
||||
padding: 0.1dvh 0.7dvw;
|
||||
height: 2.5em;
|
||||
font-size: 1em;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
#profile-popup {
|
||||
margin-left: 2dvw;
|
||||
}
|
||||
</style>
|
||||
40
components/User/UserEntry.vue
Normal file
40
components/User/UserEntry.vue
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
|
||||
<img v-if="props.user.avatar" class="user-avatar" :src="props.user.avatar" :alt="props.user.display_name ?? props.user.username" />
|
||||
<Icon v-else class="user-avatar" name="lucide:user" />
|
||||
<span class="user-display-name">{{ props.user.display_name || props.user.username }}</span>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { UserResponse } from '~/types/interfaces';
|
||||
|
||||
const props = defineProps<{
|
||||
user: UserResponse
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.user-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
|
||||
margin-top: .5em;
|
||||
margin-bottom: .5em;
|
||||
gap: .5em;
|
||||
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.user-item:hover {
|
||||
background-color: #00000020
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 2.3em;
|
||||
height: 2.3em;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
89
components/User/UserPopup.vue
Normal file
89
components/User/UserPopup.vue
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<div id="profile-popup">
|
||||
<img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
|
||||
<Icon v-else id="avatar" name="lucide:user" />
|
||||
|
||||
<div id="cover-color"></div>
|
||||
<div id="main-body">
|
||||
<p id="display-name">
|
||||
<strong>{{ props.user.display_name }}</strong>
|
||||
</p>
|
||||
<p id="username-and-pronouns">
|
||||
{{ props.user.username }}
|
||||
<span v-if="props.user.pronouns"> - {{ props.user.pronouns }}</span>
|
||||
</p>
|
||||
<div id="about-me" v-if="props.user.about">
|
||||
{{ props.user.about }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { UserResponse } from '~/types/interfaces';
|
||||
|
||||
const { fetchMembers } = useApi();
|
||||
|
||||
const props = defineProps<{
|
||||
user: UserResponse
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#profile-popup {
|
||||
min-width: 300px;
|
||||
max-width: 300px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#cover-color {
|
||||
border-radius: 12px 12px 0 0;
|
||||
min-height: 60px;
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
#main-body {
|
||||
border-radius: 0 0 12px 12px;
|
||||
padding: 12px;
|
||||
min-height: 280px;
|
||||
background-color: var(--accent-color);
|
||||
overflow-wrap: break-word;
|
||||
hyphens: manual;
|
||||
}
|
||||
|
||||
#avatar {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border: 5px solid #4b3018;
|
||||
background-color: var(--secondary-color);
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
|
||||
#display-name {
|
||||
margin-top: 60px;
|
||||
margin-bottom: 0;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
#username-and-pronouns {
|
||||
margin: 2px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#about-me {
|
||||
background-color: var(--secondary-color);
|
||||
border-radius: 12px;
|
||||
|
||||
margin-top: 32px;
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
51
components/UserInterface/Button.vue
Normal file
51
components/UserInterface/Button.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div @click="props.callback()" class="button" :class="props.variant + '-button'">
|
||||
{{ props.text }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
const props = defineProps<{
|
||||
text: string,
|
||||
callback: CallableFunction,
|
||||
variant?: "normal" | "scary" | "neutral",
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button {
|
||||
cursor: pointer;
|
||||
|
||||
background-color: var(--primary-color);
|
||||
color: var(--text-color);
|
||||
|
||||
padding: 0.4em 0.75em;
|
||||
font-size: 1.1em;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
border-radius: 0.7rem;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--primary-highlighted-color);
|
||||
}
|
||||
|
||||
.scary-button {
|
||||
background-color: red;
|
||||
}
|
||||
.scary-button:hover {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.neutral-button {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
.neutral-button:hover {
|
||||
background-color: var(--accent-highlighted-color);
|
||||
}
|
||||
|
||||
</style>
|
||||
111
components/UserInterface/RadioButtons.vue
Normal file
111
components/UserInterface/RadioButtons.vue
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<div class="radio-buttons-container" ref="radioButtonsContainer">
|
||||
<div v-for="index in indices" :key="index" class="radio-button" @click="onClick(index)">
|
||||
<span class="radio-button-radio"></span>
|
||||
<span class="radio-button-text">{{ textStrings[index] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
const radioButtonsContainer = ref<HTMLDivElement>()
|
||||
|
||||
const props = defineProps<{
|
||||
textStrings: string[],
|
||||
buttonCount: number,
|
||||
defaultButtonIndex: number,
|
||||
callback: CallableFunction,
|
||||
}>();
|
||||
|
||||
// makes an array from 0 to buttonCount - 1
|
||||
const indices = Array.from({ length: props.buttonCount }, (_, i) => i)
|
||||
|
||||
// select default selected button
|
||||
onMounted(async () => {
|
||||
await nextTick()
|
||||
|
||||
if (props.defaultButtonIndex != undefined && radioButtonsContainer.value) {
|
||||
const children = radioButtonsContainer.value.children
|
||||
const defaultButton = children.item(props.defaultButtonIndex)
|
||||
defaultButton?.classList.add("selected-radio-button")
|
||||
defaultButton?.children.item(0)?.classList.add("selected-radio-button-radio")
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function onClick(clickedIndex: number) {
|
||||
// remove selected-radio-button class from all buttons except the clicked one
|
||||
if (radioButtonsContainer.value) {
|
||||
const children = radioButtonsContainer.value.children
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
children.item(i)?.classList.remove("selected-radio-button")
|
||||
children.item(i)?.children.item(0)?.classList.remove("selected-radio-button-radio")
|
||||
}
|
||||
|
||||
children.item(clickedIndex)?.classList.add("selected-radio-button")
|
||||
children.item(clickedIndex)?.children.item(0)?.classList.add("selected-radio-button-radio")
|
||||
}
|
||||
|
||||
props.callback(clickedIndex)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.radio-buttons-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.radio-button {
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
border-radius: .66em;
|
||||
background-color: unset;
|
||||
color: var(--text-color);
|
||||
|
||||
padding: 0.4em 0.75em;
|
||||
margin: 0.4em 0em;
|
||||
font-size: 1.1em;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.radio-button:hover {
|
||||
background-color: var(--secondary-highlighted-color);
|
||||
}
|
||||
|
||||
.selected-radio-button {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.selected-radio-button:hover {
|
||||
background-color: var(--accent-highlighted-color);
|
||||
}
|
||||
|
||||
.radio-button-radio, .selected-radio-button-radio {
|
||||
position: relative;
|
||||
|
||||
display: inline-block;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.radio-button-radio {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
border: .15em solid var(--primary-color);
|
||||
}
|
||||
|
||||
.selected-radio-button-radio {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
border: 0.15em solid var(--primary-color);
|
||||
background-color: var(--primary-highlighted-color);
|
||||
}
|
||||
|
||||
.radio-button-text {
|
||||
margin-left: .5em;
|
||||
}
|
||||
</style>
|
||||
12
components/UserInterface/VerticalSpacer.vue
Normal file
12
components/UserInterface/VerticalSpacer.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<span class="spacer"></span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.spacer {
|
||||
height: 0.2dvh;
|
||||
display: block;
|
||||
margin: 0.8dvh 0.2dvw;
|
||||
background-color: var(--padding-color);
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue