-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
Merge remote-tracking branch 'origin/main' into AB#308-prepare-nuxt-e…
…ndpoint-for-fetching-post-data * origin/main: ♻️ use logger instance ✨ load more messages mechanism 🐛 fix footer 🐛 fix multiple tweaks ✨ notification component ✨ notification util ✨ partial prepare ♻️ added small changes ♻️ small changes to user settings component ♻️ add service to component ✨ add user settings component
Showing
28 changed files
with
416 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
<template> | ||
<div | ||
class="bg-slate-800 border border-white rounded-lg shadow-lg p-4 flex flex-col items-start gap-2" | ||
:class="`bg-${type}-100 border-${type}-200`" | ||
> | ||
<p :class="[color]">{{ title }}</p> | ||
<span class="flex justify-between gap-2"> | ||
<div class="flex items-center gap-2"> | ||
<Icon :name="icon" :class="[color]" /> | ||
<span>{{ message }}</span> | ||
</div> | ||
<button class="text-gray-500 hover:text-gray-800" @click="$emit('close')"> | ||
<Icon name="mdi:close" /> | ||
</button> | ||
</span> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
defineEmits(['close']); | ||
const props = defineProps({ | ||
title: { | ||
type: String, | ||
required: true, | ||
}, | ||
message: { | ||
type: String, | ||
required: true, | ||
}, | ||
type: { | ||
type: String, | ||
required: true, | ||
}, | ||
}); | ||
const icon = computed(() => { | ||
switch (props.type) { | ||
case 'success': | ||
return 'mdi:check-circle'; | ||
case 'error': | ||
return 'mdi:alert-circle'; | ||
case 'warning': | ||
return 'mdi:alert-circle'; | ||
case 'info': | ||
return 'mdi:information'; | ||
} | ||
return 'mdi:alert-circle'; | ||
}); | ||
const color = computed(() => { | ||
switch (props.type) { | ||
case 'success': | ||
return 'text-pink-500'; | ||
case 'error': | ||
return 'text-red-500'; | ||
case 'warning': | ||
return 'text-yellow-500'; | ||
case 'info': | ||
return 'text-white'; | ||
} | ||
return 'text-white'; | ||
}); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
<template> | ||
<div class="flex items-center w-full gap-2"> | ||
<img :src="profilePicture" alt="avatar" class="w-8 h-8 rounded-full" /> | ||
<p class="overflow-hidden text-ellipsis cursor-pointer" @click="$emit('copy')"> | ||
{{ member.username ?? member.address }} | ||
</p> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import type { PropType } from 'vue'; | ||
import type { UserResponseDTO } from '~/types/dtos'; | ||
defineEmits(['copy']); | ||
const props = defineProps({ | ||
member: { | ||
type: Object as PropType<UserResponseDTO>, | ||
required: true, | ||
}, | ||
}); | ||
const profilePicture = | ||
props.member.profilePicture ?? `https://gravatar.com/avatar/${props.member.address}?s=200&d=identicon&r=x`; | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
<template> | ||
<div class="flex flex-col justify-start items-center gap-2 mt-4 w-full h-screen"> | ||
<h1 class="text-2xl font-bold">User Settings</h1> | ||
<div class="flex flex-col rounded-md bg-black border border-pink-500 w-full m-2 p-4 gap-4"> | ||
<span class="flex justify-between items-center w-full"> | ||
<span class="flex flex-col gap-1"> | ||
<p class="font-semibold">Profile picture</p> | ||
<img v-if="profilePicture" :src="profilePicture" alt="Profile picture" class="border-2 p-2" /> | ||
<span v-else class="border-2 p-2">No image</span> | ||
</span> | ||
<span class="w-1/3"> | ||
<input ref="fileInput" type="file" accept="image/*" style="display: none" @change="openFileInput" /> | ||
<ConfirmButton text="Change photo" @click="openFileInput" /> | ||
</span> | ||
</span> | ||
<hr /> | ||
<span class="flex justify-between items-center w-full"> | ||
<span class="flex flex-col gap-1"> | ||
<p class="font-semibold">Username</p> | ||
<TextInput v-model="editedUsername" :placeholder="username" /> | ||
</span> | ||
</span> | ||
<hr /> | ||
<span class="flex justify-between items-center w-full"> | ||
<span class="flex flex-col gap-1"> | ||
<p class="font-semibold">Address</p> | ||
<p>{{ address }}</p> | ||
</span> | ||
<span class="w-1/3"></span> | ||
</span> | ||
<span class="flex justify-end gap-4"> | ||
<ConfirmButton primary :disabled="!canSave" text="Save changes" @click="saveChanges" /> | ||
<ConfirmButton text="Exit" @click="exit" /> | ||
</span> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { ref } from 'vue'; | ||
import ConfirmButton from '~/components/controls/ConfirmButton.vue'; | ||
import TextInput from '~/components/controls/TextInput.vue'; | ||
import { useAccountStore } from '~/store'; | ||
const accountStore = useAccountStore(); | ||
const username = computed(() => accountStore.username ?? ''); | ||
const address = computed(() => accountStore.address); | ||
const editedUsername = ref(username.value); | ||
const profilePicture = ref(''); | ||
const fileInputRef = ref<HTMLInputElement | null>(null); | ||
const openFileInput = () => { | ||
if (fileInputRef.value) { | ||
fileInputRef.value.click(); | ||
} | ||
}; | ||
const saveChanges = async () => { | ||
const fd = new FormData(); | ||
if (fileInputRef.value?.files?.length) { | ||
fd.append('profilePicture', fileInputRef.value.files[0]); | ||
} | ||
fd.append('username', editedUsername.value); | ||
try { | ||
await $fetch(`/api/user`, { | ||
method: 'PUT', | ||
headers: { | ||
Authorization: `Bearer ${accountStore.accessToken}`, | ||
}, | ||
body: fd, | ||
}); | ||
} catch (error) { | ||
throw new Error('Error saving changes: ' + error); | ||
} | ||
}; | ||
const router = useRouter(); | ||
const exit = () => { | ||
router.push('/'); | ||
}; | ||
const canSave = computed(() => { | ||
return !!(editedUsername.value !== username.value || profilePicture.value); | ||
}); | ||
</script> | ||
|
||
<style></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<template> | ||
<div> | ||
<h1>User profile</h1> | ||
<h2>{{ address }}</h2> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { computed } from 'vue'; | ||
const route = useRoute(); | ||
const address = computed(() => route.params.address); | ||
</script> | ||
|
||
<style></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<template> | ||
<div> | ||
<UserSettingsComponent :access-token="accessToken" /> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { ref } from 'vue'; | ||
import UserSettingsComponent from '~/components/user/UserSettings.vue'; | ||
const accessToken = ref<string | null>(null); | ||
</script> | ||
|
||
<style></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,13 @@ | ||
import { useUserService } from '~/server/services/user.service'; | ||
import { AuthenticatedUser } from '~/types/auth'; | ||
import { UserUpdateDTO, UserResponseDTO } from '~/types/dtos/user'; | ||
|
||
type Body = AuthenticatedUser & UserUpdateDTO & UserResponseDTO; | ||
|
||
export default defineEventHandler(async (event) => { | ||
const { jwt, username, profilePicture } = await readBody<Body>(event); | ||
const jwt = getHeader(event, 'Authorization')?.split('Bearer ')[1]; | ||
if (!jwt) { | ||
throw createError({ | ||
message: 'Unauthorized', | ||
}); | ||
} | ||
const fd = await readFormData(event); | ||
const service = useUserService(jwt); | ||
return await service.updateUser(username, profilePicture); | ||
return await service.updateUser(fd); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { defineStore } from 'pinia'; | ||
|
||
type NotificationType = 'info' | 'success' | 'error'; | ||
|
||
export interface Notification { | ||
title: string; | ||
content: string; | ||
type: NotificationType; | ||
} | ||
|
||
type StoreState = { | ||
items: Record<string, Notification>; | ||
}; | ||
|
||
export const useNotificationStore = defineStore({ | ||
id: 'notification', | ||
state: (): StoreState => ({ | ||
items: {}, | ||
}), | ||
actions: { | ||
addNotification(title: string, content: string, type: NotificationType = 'success', timeout = 50000) { | ||
const id = Math.random().toString(36).substring(7); | ||
this.items[id] = { | ||
title, | ||
content, | ||
type, | ||
}; | ||
setTimeout(() => { | ||
if (this.items[id]) { | ||
delete this.items[id]; | ||
} | ||
}, timeout); | ||
}, | ||
remove(id: string) { | ||
delete this.items[id]; | ||
}, | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters