Compare commits
1 commit
main
...
guild-sett
| Author | SHA1 | Date | |
|---|---|---|---|
64c6276153
|
17 changed files with 91 additions and 565 deletions
|
|
@ -1,7 +1,5 @@
|
|||
# Nuxt Minimal Starter
|
||||
|
||||
|
||||
|
||||
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
|
||||
## Setup
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
<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: #b35719;
|
||||
color: #ffffff;
|
||||
|
||||
padding: 0.7dvh 1.2dvw;
|
||||
font-size: 1.1em;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
border-radius: 0.7rem;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.scary-button {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.neutral-button {
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #934410;
|
||||
}
|
||||
</style>
|
||||
58
components/GuildOptionsMenu.vue
Normal file
58
components/GuildOptionsMenu.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div id="guild-options-container">
|
||||
<div v-for="setting of settings" class="guild-option" tabindex="0">
|
||||
<button class="guild-option-button" @click="setting.action">{{ setting.name }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { InvitePopup } from '#components';
|
||||
|
||||
|
||||
const showInviteModal = ref(false);
|
||||
|
||||
const settings = [
|
||||
{ name: "Server Settings", icon: "lucide:cog" },
|
||||
{ name: "Invite", icon: "lucide:letter", action: openInviteModal }
|
||||
]
|
||||
|
||||
function openInviteModal() {
|
||||
//showInviteModal.value = !showInviteModal.value;
|
||||
//const invitePopup = createApp(InvitePopup);
|
||||
//invitePopup
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
#guild-options-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
background-color: rgb(20, 20, 20);
|
||||
top: 8dvh;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.guild-option {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 5dvh;
|
||||
}
|
||||
|
||||
.guild-option:hover {
|
||||
border: var(--outline-border);
|
||||
}
|
||||
|
||||
.guild-option-button {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>hi</h1>
|
||||
<h5>TEST</h5>
|
||||
<h5>TEST</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Keybinds (TBA)</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Language (TBA)</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Notifications (TBA)</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,155 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>My 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>
|
||||
|
||||
<h2>Account Deletion</h2>
|
||||
<Button text="Delete Account (tbd)" :callback=deleteAccount variant="scary"></Button>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Button from '~/components/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 :(")
|
||||
}
|
||||
|
||||
let newPfpFile: File;
|
||||
|
||||
const saveChanges = async () => {
|
||||
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`)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
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);
|
||||
}
|
||||
})
|
||||
|
||||
input.click()
|
||||
}
|
||||
|
||||
const resetPassword = async () => {
|
||||
alert("TBD")
|
||||
// await fetchWithApi(`/auth/reset-password`);
|
||||
}
|
||||
|
||||
const deleteAccount = async () => {
|
||||
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;
|
||||
}
|
||||
|
||||
.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: white;
|
||||
background-color: #54361b;
|
||||
}
|
||||
|
||||
.profile-popup {
|
||||
margin-left: 2dvw;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Connections (TBA)</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Devices (TBA)</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Privacy (TBA)</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Button from '~/components/Button.vue';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
<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>
|
||||
<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-colour {
|
||||
border-radius: 12px 12px 0 0;
|
||||
min-height: 60px;
|
||||
background-color: #442505;
|
||||
}
|
||||
|
||||
#main-body {
|
||||
border-radius: 0 0 12px 12px;
|
||||
padding: 12px;
|
||||
min-height: 280px;
|
||||
background-color: #4b3018;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: manual;
|
||||
}
|
||||
|
||||
#avatar {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border: 5px solid #4b3018;
|
||||
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: #34200f;
|
||||
border-radius: 12px;
|
||||
|
||||
margin-top: 32px;
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -75,7 +75,7 @@ export const useAuth = () => {
|
|||
async function fetchUser() {
|
||||
if (!accessToken.value) return;
|
||||
console.log("fetchuser access token:", accessToken.value);
|
||||
const res = await fetchWithApi("/me") as UserResponse;
|
||||
const res = await fetchWithApi("/users/me") as UserResponse;
|
||||
user.value = res;
|
||||
return user.value;
|
||||
}
|
||||
|
|
@ -88,20 +88,6 @@ export const useAuth = () => {
|
|||
return user.value;
|
||||
}
|
||||
|
||||
|
||||
// as in email the password link
|
||||
async function resetPassword() {
|
||||
// ...
|
||||
}
|
||||
|
||||
async function disableAccount() {
|
||||
// ...
|
||||
}
|
||||
|
||||
async function deleteAccount() {
|
||||
// ...
|
||||
}
|
||||
|
||||
return {
|
||||
accessToken,
|
||||
register,
|
||||
|
|
|
|||
|
|
@ -1,21 +1,13 @@
|
|||
<template>
|
||||
<NuxtLayout name="client">
|
||||
<div id="middle-left-column" class="main-grid-row">
|
||||
<div id="server-title">
|
||||
<h3>
|
||||
{{ server?.name }}
|
||||
<span>
|
||||
<button @click="showGuildSettings">
|
||||
<Icon name="lucide:settings" />
|
||||
</button>
|
||||
</span>
|
||||
<span>
|
||||
<button @click="toggleInvitePopup">
|
||||
<Icon name="lucide:share-2" />
|
||||
</button>
|
||||
</span>
|
||||
<InvitePopup v-if="showInvitePopup" />
|
||||
</h3>
|
||||
<div id="server-name-container">
|
||||
<span id="server-name">{{ server?.name }}</span>
|
||||
<button id="server-settings-button" @click="toggleGuildSettings">
|
||||
<Icon id="server-settings-icon" name="lucide:chevron-down" />
|
||||
</button>
|
||||
<GuildOptionsMenu v-if="showGuildSettings" />
|
||||
<InvitePopup v-if="showInvitePopup" />
|
||||
</div>
|
||||
<div id="channels-list">
|
||||
<Channel v-for="channel of channels" :name="channel.name"
|
||||
|
|
@ -49,6 +41,7 @@ const channels = ref<ChannelResponse[] | undefined>();
|
|||
const channel = ref<ChannelResponse | undefined>();
|
||||
|
||||
const showInvitePopup = ref(false);
|
||||
const showGuildSettings = ref(false);
|
||||
|
||||
import type { ChannelResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
|
||||
|
||||
|
|
@ -72,7 +65,10 @@ onMounted(async () => {
|
|||
console.log("channelid: set loading to false");
|
||||
});
|
||||
|
||||
function showGuildSettings() { }
|
||||
function toggleGuildSettings(e: Event) {
|
||||
e.preventDefault();
|
||||
showGuildSettings.value = !showGuildSettings.value;
|
||||
}
|
||||
|
||||
function toggleInvitePopup(e: Event) {
|
||||
e.preventDefault();
|
||||
|
|
@ -132,4 +128,24 @@ function toggleInvitePopup(e: Event) {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#server-name-container {
|
||||
padding-top: 3dvh;
|
||||
padding-bottom: 3dvh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#server-name {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
#server-settings-button {
|
||||
background-color: transparent;
|
||||
font-size: 1em;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,159 +0,0 @@
|
|||
<template>
|
||||
<div id="settings-page-container">
|
||||
<div id="settings-page">
|
||||
<div id="sidebar">
|
||||
<h4>(Search bar here)</h4>
|
||||
<ul>
|
||||
<div v-for="category in categories" :key="category.displayName">
|
||||
<h2>{{ category.displayName }}</h2>
|
||||
<li v-for="page in category.pages" :key="page.displayName" @click="selectCategory(page)"
|
||||
:class="{ 'sidebar-focus': selectedPage === page.displayName }">
|
||||
{{ page.displayName }}
|
||||
</li>
|
||||
<span class="spacer"></span>
|
||||
</div>
|
||||
|
||||
<Button text="Log Out" :callback=logout variant="scary"></Button>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="sub-page">
|
||||
<component :is="currentPage.pageData" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Button from '~/components/Button.vue';
|
||||
|
||||
const { logout } = useAuth()
|
||||
|
||||
interface Page {
|
||||
displayName: string;
|
||||
pageData: any; // is actually Component but TS is yelling at me :(
|
||||
}
|
||||
|
||||
interface Category {
|
||||
displayName: string;
|
||||
pages: Page[];
|
||||
}
|
||||
|
||||
import Account from '~/components/Settings/UserSettings/Account.vue';
|
||||
import Privacy from '~/components/Settings/UserSettings/Privacy.vue';
|
||||
import Devices from '~/components/Settings/UserSettings/Devices.vue';
|
||||
import Connections from '~/components/Settings/UserSettings/Connections.vue';
|
||||
|
||||
import Appearance from '~/components/Settings/AppSettings/Appearance.vue';
|
||||
import Notifications from '~/components/Settings/AppSettings/Notifications.vue';
|
||||
import Keybinds from '~/components/Settings/AppSettings/Keybinds.vue';
|
||||
import Language from '~/components/Settings/AppSettings/Language.vue';
|
||||
|
||||
const settingsCategories = {
|
||||
userSettings: {
|
||||
displayName: "User Settings",
|
||||
pages: [
|
||||
{ displayName: "My Account", pageData: Account },
|
||||
{ displayName: "Privacy", pageData: Privacy },
|
||||
{ displayName: "Devices", pageData: Devices },
|
||||
{ displayName: "Connections", pageData: Connections },
|
||||
]
|
||||
},
|
||||
appSettings: {
|
||||
displayName: "App Settings",
|
||||
pages: [
|
||||
{ displayName: "Appearance", pageData: Appearance },
|
||||
{ displayName: "Notifications", pageData: Notifications },
|
||||
{ displayName: "Keybinds", pageData: Keybinds },
|
||||
{ displayName: "Language", pageData: Language },
|
||||
]
|
||||
},
|
||||
};
|
||||
|
||||
const categories = Object.values(settingsCategories);
|
||||
|
||||
let currentPage = ref(categories[0].pages[0]);
|
||||
let selectedPage = ref(currentPage.value.displayName); // used to highlight the current channel
|
||||
|
||||
function selectCategory(page: Page) {
|
||||
currentPage.value = page;
|
||||
selectedPage.value = page.displayName;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#settings-page-container {
|
||||
height: 100%;
|
||||
align-content: center;
|
||||
overflow-y: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#settings-page {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
min-width: 25dvw;
|
||||
max-width: 25dvw;
|
||||
background-color: #2f3136;
|
||||
color: white;
|
||||
padding: 1dvh 1dvw;
|
||||
margin-left: auto;
|
||||
|
||||
overflow-y: auto;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#sidebar h2 {
|
||||
font-size: 0.95em;
|
||||
padding: 0 0.8dvw;
|
||||
}
|
||||
|
||||
#sidebar ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#sidebar li {
|
||||
border-radius: 8px;
|
||||
padding: 0.8dvh 0.8dvw;
|
||||
font-size: 1.4em;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.sidebar-focus {
|
||||
background-color: #383B41;
|
||||
}
|
||||
|
||||
#sidebar li:hover {
|
||||
background-color: #40444b;
|
||||
}
|
||||
|
||||
#sub-page {
|
||||
flex-grow: 1;
|
||||
min-width: 70dvw;
|
||||
max-width: 70dvw;
|
||||
padding-left: 1.5rem;
|
||||
margin-right: auto;
|
||||
|
||||
overflow-y: auto;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
height: 0.2dvh;
|
||||
display: block;
|
||||
margin: 0.8dvh 1dvw;
|
||||
background-color: #2c2e32;
|
||||
}
|
||||
|
||||
/* applies to child pages too */
|
||||
:deep(h5) {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 4.2 KiB |
|
|
@ -58,8 +58,6 @@ export interface UserResponse {
|
|||
username: string,
|
||||
display_name: string | null,
|
||||
avatar: string | null,
|
||||
pronouns: string | null,
|
||||
about: string | null,
|
||||
email?: string,
|
||||
email_verified?: boolean
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue