Merge branch 'main' into replies
This commit is contained in:
commit
5958697b6c
GPG key ID:
2BF92EB6D8A5CCA7
37 changed files with 1322 additions and 364 deletions
|
|
@ -18,10 +18,10 @@ const props = defineProps<{
|
|||
.button {
|
||||
cursor: pointer;
|
||||
|
||||
background-color: #b35719;
|
||||
color: #ffffff;
|
||||
background-color: var(--primary-color);
|
||||
color: var(--text-color);
|
||||
|
||||
padding: 0.7dvh 1.2dvw;
|
||||
padding: 0.4em 0.75em;
|
||||
font-size: 1.1em;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
|
|
@ -30,15 +30,22 @@ const props = defineProps<{
|
|||
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: grey;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
.neutral-button:hover {
|
||||
background-color: var(--accent-highlighted-color);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #934410;
|
||||
}
|
||||
</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>
|
||||
93
components/CropPopup.vue
Normal file
93
components/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>
|
||||
35
components/MemberEntry.vue
Normal file
35
components/MemberEntry.vue
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<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';
|
||||
import UserPopup from './UserPopup.vue';
|
||||
|
||||
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>
|
||||
|
|
@ -10,6 +10,8 @@
|
|||
{{ author?.display_name || author?.username }}
|
||||
</span>
|
||||
<span class="message-date" :title="date.toString()">
|
||||
<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, { timeStyle: "short" }) }}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -40,6 +42,7 @@ 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.author);
|
||||
|
|
@ -48,7 +51,16 @@ 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();
|
||||
if (messageElement.value?.classList.contains("grouped-message")) {
|
||||
|
|
@ -75,6 +87,18 @@ 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>
|
||||
|
|
@ -82,14 +106,15 @@ if (props.author?.uuid == props.me.uuid) {
|
|||
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:hover {
|
||||
background-color: rgb(20, 20, 20);
|
||||
background-color: var(--chat-highlighted-background-color);
|
||||
}
|
||||
|
||||
.normal-message {
|
||||
|
|
@ -130,10 +155,11 @@ if (props.author?.uuid == props.me.uuid) {
|
|||
}
|
||||
|
||||
.left-column {
|
||||
min-width: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.author-username {
|
||||
|
|
@ -143,7 +169,7 @@ if (props.author?.uuid == props.me.uuid) {
|
|||
|
||||
.message-date {
|
||||
font-size: .7em;
|
||||
color: rgb(150, 150, 150);
|
||||
color: var(--secondary-text-color);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
|
@ -164,12 +190,12 @@ if (props.author?.uuid == props.me.uuid) {
|
|||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,28 @@
|
|||
</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>
|
||||
|
|
@ -108,11 +125,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;
|
||||
|
||||
|
|
@ -160,12 +204,21 @@ 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 = {
|
||||
message: messageInput.value.trim().replace(/\n/g, "<br>") // trim, and replace \n with <br>
|
||||
}
|
||||
|
||||
console.log("message:", message);
|
||||
ws.send(JSON.stringify(message));
|
||||
|
||||
// reset input field
|
||||
messageInput.value = ""
|
||||
if (messageTextboxInput.value) {
|
||||
messageTextboxInput.value.innerText = ""
|
||||
}
|
||||
|
||||
adjustTextboxHeight()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -241,38 +294,63 @@ 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-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 {
|
||||
|
|
@ -283,14 +361,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>
|
||||
|
|
@ -1,14 +1,100 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>hi</h1>
|
||||
<h5>TEST</h5>
|
||||
<h5>TEST</h5>
|
||||
<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="themes">
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
const defaultThemes = runtimeConfig.public.defaultThemes
|
||||
const baseURL = runtimeConfig.app.baseURL;
|
||||
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;
|
||||
}
|
||||
|
||||
localStorage.setItem("selectedTheme", 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()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.themes {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
</style>
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,16 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>My Account</h1>
|
||||
<div v-if="user">
|
||||
<h1>Account</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" />
|
||||
|
||||
<br>
|
||||
<Button style="margin-top: 1dvh" text="Save Changes" :callback="saveChanges"></Button>
|
||||
</div>
|
||||
|
||||
<UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 8duservh">Password (and eventually authenticator)</h2>
|
||||
<Button text="Reset Password (tbd)" :callback=resetPassword></Button>
|
||||
<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>
|
||||
|
||||
<h2>Account Deletion</h2>
|
||||
<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>
|
||||
|
|
@ -44,22 +27,13 @@ if (!user) {
|
|||
alert("could not fetch user info, aborting :(")
|
||||
}
|
||||
|
||||
let newPfpFile: File;
|
||||
|
||||
const saveChanges = async () => {
|
||||
async function changeEmail() {
|
||||
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,
|
||||
email: user.email,
|
||||
}));
|
||||
formData.append('json', new Blob([bytes], { type: 'application/json' }));
|
||||
|
||||
|
|
@ -69,6 +43,14 @@ const saveChanges = async () => {
|
|||
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) {
|
||||
|
|
@ -78,60 +60,24 @@ const saveChanges = async () => {
|
|||
};
|
||||
|
||||
|
||||
const removeAvatar = async () => {
|
||||
alert("TBD")
|
||||
// await fetchWithApi(`/auth/reset-password`);
|
||||
}
|
||||
|
||||
const changeAvatar = async () => {
|
||||
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;
|
||||
|
||||
newPfpFile = file
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener("onload", () => {
|
||||
if (reader.result && typeof reader.result === 'string') {
|
||||
user.avatar = reader.result;
|
||||
}
|
||||
});
|
||||
reader.readAsDataURL(file);
|
||||
async function resetPassword () {
|
||||
await fetchWithApi("/auth/reset-password", {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
query: {
|
||||
identifier: user?.username
|
||||
}
|
||||
})
|
||||
|
||||
input.click()
|
||||
});
|
||||
}
|
||||
|
||||
const resetPassword = async () => {
|
||||
alert("TBD")
|
||||
// await fetchWithApi(`/auth/reset-password`);
|
||||
}
|
||||
|
||||
const deleteAccount = async () => {
|
||||
async function deleteAccount() {
|
||||
alert("TBD")
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
font-weight: 800;
|
||||
margin: 1.5dvh 0 0.5dvh 0.25dvw;
|
||||
}
|
||||
|
||||
.user-data-fields {
|
||||
min-width: 35dvw;
|
||||
max-width: 35dvw;
|
||||
|
|
@ -145,11 +91,7 @@ const deleteAccount = async () => {
|
|||
font-size: 1em;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: white;
|
||||
background-color: #54361b;
|
||||
}
|
||||
|
||||
.profile-popup {
|
||||
margin-left: 2dvw;
|
||||
color: var(--text-color);
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
</style>
|
||||
151
components/Settings/UserSettings/Profile.vue
Normal file
151
components/Settings/UserSettings/Profile.vue
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
<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 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>
|
||||
20
components/UserArea.vue
Normal file
20
components/UserArea.vue
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div id="user-panel">
|
||||
HELLO!!
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { UserResponse } from '~/types/interfaces';
|
||||
|
||||
const props = defineProps<{
|
||||
user: UserResponse,
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#user-panel {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<div id="profile-popup">
|
||||
<img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
|
||||
<div id="cover-colour"></div>
|
||||
<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>
|
||||
|
|
@ -38,17 +40,17 @@ const props = defineProps<{
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
#cover-colour {
|
||||
#cover-color {
|
||||
border-radius: 12px 12px 0 0;
|
||||
min-height: 60px;
|
||||
background-color: #442505;
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
#main-body {
|
||||
border-radius: 0 0 12px 12px;
|
||||
padding: 12px;
|
||||
min-height: 280px;
|
||||
background-color: #4b3018;
|
||||
background-color: var(--accent-color);
|
||||
overflow-wrap: break-word;
|
||||
hyphens: manual;
|
||||
}
|
||||
|
|
@ -57,12 +59,14 @@ const props = defineProps<{
|
|||
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;
|
||||
|
|
@ -75,7 +79,7 @@ const props = defineProps<{
|
|||
}
|
||||
|
||||
#about-me {
|
||||
background-color: #34200f;
|
||||
background-color: var(--secondary-color);
|
||||
border-radius: 12px;
|
||||
|
||||
margin-top: 32px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue