ci: only run on push

prevents duplicate CIs from running at the same time

.woodpecker/build-and-publish.yml

@@ -8,7 +8,6 @@ steps:
       - pnpm build
     when:
     - event: push
-    - event: pull_request
 
   - name: container-build-and-publish
     image: docker

components/Avatar.vue

@@ -3,10 +3,8 @@
 		class="display-avatar"
 		:src="displayAvatar"
 		:alt="displayName" />
-	<DefaultIcon v-else-if="user"
-		class="display-avatar"
-		:name="displayName"
-		:seed="user.uuid"
+	<Icon v-else
+		name="lucide:user"
 		:alt="displayName" />
 </template>
 
@@ -30,6 +28,10 @@ if (user) {
 	
 	if (user.avatar) {
 		displayAvatar = user.avatar
+	} else if (!isCanvasBlocked()){
+		displayAvatar = generateDefaultIcon(displayName, user.uuid)
+	} else {
+		displayAvatar = null
 	}
 }
 

components/DefaultIcon.vue

@@ -1,48 +0,0 @@
-<template>
-  <div :style="`background-color: ${generateIrcColor(seed, 50)}`"
-	class="default-icon">
-		<span class="default-icon-text">
-			{{ previewName }}
-		</span>
-  </div>
-</template>
-
-<script lang="ts" setup>
-
-const props = defineProps<{
-	seed: string,
-	name: string	
-}>();
-
-let previewName = "";
-if (props.name.length > 3) {
-	let guildName: string[] = props.name.split(' ')
-	for (let i = 0; i < 3; i ++) {
-		if (guildName.length > i) {
-			previewName += guildName[i].charAt(0)
-		} else {
-			break
-		}
-	}
-} else {
-	previewName = props.name
-}
-
-</script>
-
-<style scoped>
-.default-icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.default-icon-text {
-	/* helps centre the icon, yes, this is NOT perfect */
-	margin-top: -0.15em;
-
-	font-weight: bold;
-
-	color: var(--secondary-text-color)
-}
-</style>

components/Guild/MemberEntry.vue

@@ -30,11 +30,4 @@ const hidePopup = () => {
 .member-item {
     position: relative; /* Set the position to relative for absolute positioning of the popup */
 }
-
-.member-avatar {
-    min-height: 2.3em;
-	max-height: 2.3em;
-	min-width: 2.3em;
-	max-width: 2.3em;
-}
 </style>

components/Message.vue

@@ -220,10 +220,7 @@ function getDayDifference(date1: Date, date2: Date) {
 }
 
 .message-author-avatar {
-	min-height: 2em;
-	max-height: 2em;
-	min-width: 2em;
-	max-width: 2em;
+	width: 100%;
 }
 
 .left-column {

components/Popups/CropPopup.vue

@@ -10,6 +10,7 @@
 
 <script lang="ts" setup>
 import Cropper from 'cropperjs';
+import Button from '../UserInterface/Button.vue';
 
 const props = defineProps({
   imageSrc: String,

components/Settings/UserSettings/Profile.vue

@@ -33,6 +33,7 @@
 </template>
 
 <script lang="ts" setup>
+import CropPopup from '~/components/Popups/CropPopup.vue';
 import UserPopup from '~/components/User/UserPopup.vue';
 import Button from '~/components/UserInterface/Button.vue';
 
@@ -41,7 +42,7 @@ 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()

components/User/UserEntry.vue

@@ -36,7 +36,7 @@ const props = defineProps<{
 .user-avatar {
     min-width: 2.3em;
     max-width: 2.3em;
-    min-height: 2.3em;
+    min-width: 2.3em;
     max-height: 2.3em;
 }
 

composables/api.ts

@@ -94,6 +94,10 @@ export const useApi = () => {
 		await fetchWithApi("/auth/reset-password", { method: "POST", body: { password, token } });
 	}
 
+	async function fetchInvite(id: string): Promise<GuildResponse | undefined> {
+		return await fetchWithApi(`/invites/${id}`);
+	}
+
 	return {
 		fetchGuilds,
 		fetchGuild,
@@ -115,6 +119,7 @@ export const useApi = () => {
 		fetchInstanceStats,
 		sendVerificationEmail,
 		sendPasswordResetEmail,
-		resetPassword
+		resetPassword,
+		fetchInvite
 	}
 }

composables/auth.ts

@@ -41,7 +41,7 @@ export const useAuth = () => {
   async function logout() {
     console.log("access:", accessToken.value);
 
-    await fetchWithApi("/auth/logout", { method: "GET", credentials: "include" });
+    await fetchWithApi("/auth/logout", { method: "DELETE", credentials: "include" });
     clearAuth();
 
 	  return await navigateTo("/login");

layouts/client.vue

@@ -17,15 +17,19 @@
 				</div>
 				<VerticalSpacer />
 				<div class="left-column-segment" id="left-column-middle">
-					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`" id="guild-icon-container">
+					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
 						<NuxtImg v-if="guild.icon"
 							class="sidebar-icon guild-icon"
 							:alt="guild.name"
 							:src="guild.icon" />
-						<DefaultIcon v-else 
-							class="sidebar-icon guild-icon" 
+						<NuxtImg v-else-if="!blockedCanvas"
+							class="sidebar-icon guild-icon"
 							:alt="guild.name"
-							:name="guild.name" :seed="guild.uuid"/>
+							:src="generateDefaultIcon(guild.name, guild.uuid)" />
+						<Icon v-else name="lucide:server"
+							:style="`color: ${generateIrcColor(guild.uuid, 50)}`"
+							class="sidebar-icon guild-icon"
+							:alt="guild.name" />
 					</NuxtLink>
 				</div>
 				<VerticalSpacer />
@@ -48,7 +52,6 @@
 <script lang="ts" setup>
 import { ModalBase } from '#components';
 import { render } from 'vue';
-import DefaultIcon from '~/components/DefaultIcon.vue';
 import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
 import Button from '~/components/UserInterface/Button.vue';
 import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
@@ -60,6 +63,8 @@ const createButtonContainer = ref<HTMLButtonElement>();
 
 const api = useApi();
 
+const blockedCanvas = isCanvasBlocked()
+
 const options = [
 	{ name: "Join", value: "join", callback: async () => {
 			console.log("join guild!");
@@ -244,10 +249,6 @@ function createDropdown() {
 	height: var(--sidebar-icon-width);
 }
 
-#guild-icon-container {
-	text-decoration: none;
-}
-
 .guild-icon {
 	border-radius: var(--guild-icon-radius);
 }

pages/invite/[inviteId].vue

@@ -0,0 +1,180 @@
+<template>
+  <div id="invite-root">
+	<div id="invite-container">
+		<div id="guild-container" v-if="guild">
+			<h1>You have been invited to {{ guild.name }}!</h1>
+			<div id="guild-card">
+				<div id="card-grid">
+					<div id="guild-details">
+						<div id="guild-name" title="Server name">
+							<span>{{ guild.name }}</span>
+						</div>
+						<div id="guild-member-count" :title="`${guild.member_count} members`">
+							<Icon name="lucide:users" />
+							<span>{{ guild.member_count }}</span>
+						</div>
+					</div>
+					<VerticalSpacer id="space" />
+					<div id="guild-description">
+						<span>{{ guild.description }}</span>
+					</div>
+					<div id="guild-icon">
+						<NuxtImg v-if="guild.icon" id="guild-icon-img" :src="guild.icon" :alt="`${guild.name} server icon`" />
+					</div>
+				</div>
+				<Button :text="isMember ? 'Joined' : 'Join'" variant="normal" :callback="acceptInvite" />
+			</div>
+		</div>
+		<div v-else-if="errorMessage">
+			<h1>{{ errorMessage }}</h1>
+		</div>
+	</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/UserInterface/Button.vue';
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+import type { GuildResponse } from '~/types/interfaces';
+
+
+const route = useRoute();
+const { fetchInvite, joinGuild, fetchMembers } = useApi();
+const { getUser } = useAuth();
+
+const inviteId = route.params.inviteId as string;
+
+const guild = ref<GuildResponse>();
+const errorMessage = ref<string>();
+const isMember = ref(false);
+
+const accessToken = useCookie("access_token");
+
+if (inviteId) {
+	try {
+		guild.value = await fetchInvite(inviteId);
+		console.log("invite guild:", guild.value);
+		if (accessToken.value && guild.value) {
+			const members = await fetchMembers(guild.value.uuid);
+			const me = await getUser();
+			if (me && members.find(member => member.user.uuid == me.uuid)) {
+				isMember.value = true;
+			}
+		} 
+	} catch (error: any) {
+		if (error.response) {
+			if (error.status == 404) {
+				errorMessage.value = "That invite doesn't exist or has expired.";
+			}
+		}
+		console.error(error);
+	}
+}
+
+async function acceptInvite() {
+	if (accessToken.value && guild.value) {		
+		await joinGuild(inviteId);
+		return await navigateTo(`/servers/${guild.value.uuid}`);
+	}
+
+	return await navigateTo(`/login?redirect_to=${route.fullPath}`);
+}
+
+</script>
+
+<style>
+
+#invite-root {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100dvh;
+}
+
+#invite-container {
+	border: .5rem solid var(--chat-highlighted-background-color);
+	border-radius: var(--standard-radius);
+	height: 50%;
+	width: 50%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 50%;
+	height: 60%;
+}
+
+#guild-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 50%;
+	height: 60%;
+}
+
+#guild-card {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	width: 100%;
+	background-color: var(--sidebar-highlighted-background-color);
+	border: .5rem solid black;
+	border-radius: var(--standard-radius);
+	padding: .5rem;
+}
+
+#card-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: 5rem auto 1fr;
+	height: 100%;
+	width: 100%;
+}
+
+#guild-details {
+	grid-row: 1;
+	grid-column: span 2;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+#guild-name {
+	font-size: 2rem;
+	flex-direction: column;
+}
+
+#guild-member-count {
+	gap: .3rem;
+}
+
+#space {
+	grid-row: 2;
+	grid-column: span 3;
+}
+
+#guild-description {
+	grid-row: 3;
+	grid-column: span 3;
+	word-break: break-all;
+	padding: .3rem;
+}
+
+#guild-name, #guild-member-count {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+#guild-icon-img {
+	height: 100%;
+	width: 100%;
+	object-fit: scale-down;
+}
+
+</style>

pages/servers/[serverId]/channels/[channelId].vue

@@ -133,6 +133,13 @@ function handleMemberClick(member: GuildMemberResponse) {
 	text-overflow: ellipsis;
 }
 
+.member-avatar {
+    min-width: 2.3em;
+    max-width: 2.3em;
+    min-width: 2.3em;
+    max-height: 2.3em;
+}
+
 .member-display-name {
 	overflow: hidden;
 	text-overflow: ellipsis;

utils/generateDefaultIcon.ts

@@ -0,0 +1,38 @@
+export default (name: string, seed: string): string => {
+	const canvas = document.createElement("canvas");
+	const ctx = canvas.getContext("2d");
+	if (canvas && ctx) {
+		canvas.width = 256;
+		canvas.height = 256;
+
+		// get the first char from every word in the guild name
+		let previewName = "";
+		if (name.length > 3) {
+			let guildName: string[] = name.split(' ')
+			for (let i = 0; i < 3; i ++) {
+				if (guildName.length > i) {
+					previewName += guildName[i].charAt(0)
+				} else {
+					break
+				}
+			}
+		} else {
+			previewName = name
+		}
+
+		// fill background using seeded colour
+		ctx.fillStyle = generateIrcColor(seed, 50)
+		ctx.fillRect(0, 0, 256, 256)
+
+		ctx.fillStyle = 'white'
+		ctx.textAlign = 'center'
+		ctx.textBaseline = 'middle'
+		ctx.font = `bold 96px Arial, Helvetica, sans-serif`
+		// 136 isn't actually centered, but it *looks* centered
+		ctx.fillText(previewName, 128, 136)
+
+		return canvas.toDataURL("image/png");
+	}
+
+	return "https://tenor.com/view/dame-da-ne-guy-kiryukazuma-kiryu-yakuza-yakuza-0-gif-14355451116903905918"
+}

utils/isCanvasBlocked.ts

@@ -0,0 +1,50 @@
+//
+// Canvas Blocker &								  
+// Firefox privacy.resistFingerprinting Detector. 
+// (c) 2018 // JOHN OZBAY // CRYPT.EE 			  
+// MIT License
+//
+export default () => {
+	// create a 1px image data
+	var blocked = false;
+	var canvas = document.createElement("canvas");
+	var ctx = canvas.getContext("2d");
+	
+	// some blockers just return an undefined ctx. So let's check that first. 
+	if (ctx) {
+		var imageData = ctx.createImageData(1,1);
+		var originalImageData  = imageData.data;
+
+		// set pixels to RGB 128
+		originalImageData[0]=128; 
+		originalImageData[1]=128; 
+		originalImageData[2]=128; 
+		originalImageData[3]=255;
+		
+		// set this to canvas
+		ctx.putImageData(imageData,1,1); 
+		
+		try {
+			// now get the data back from canvas.
+			var checkData = ctx.getImageData(1, 1, 1, 1).data;
+
+			// If this is firefox, and privacy.resistFingerprinting is enabled,
+			// OR a browser extension blocking the canvas, 
+			// This will return RGB all white (255,255,255) instead of the (128,128,128) we put.
+
+			// so let's check the R and G to see if they're 255 or 128 (matching what we've initially set)
+			if (originalImageData[0] !== checkData[0] && originalImageData[1] !== checkData[1]) {
+				blocked = true;
+				console.log("Canvas is blocked. Will display warning.");
+			}
+		} catch (error) {
+			// some extensions will return getImageData null. this is to account for that.
+			blocked = true;
+			console.log("Canvas is blocked. Will display warning.");
+		}
+	} else {
+		blocked = true;
+		console.log("Canvas is blocked. Will display warning.");
+	}
+	return blocked;
+}