feat: add widget endpoints

Implemented the four widget related endpoints of the api. Partial user
object being returned as part of the widget.json endpoint [1] is an
intentional choice related to privacy [2].

The widget.json endpoint will require additional changes upon completion
of other work. Member details will need to return extra key/values for
connected users to voice channels. An additional avatar_url value will
hold an unique avatar url for the user + guild, fetched via a CDN
endpoint widget-avatars.

New dependencies `canvas` and `image-size`. Canvas is used to create the
widget.png endpoint image [3]. Image-size is used to set the canvas'
size to match the widget template images.

Use regex in determining if a NO_AUTHORIZATION_ROUTES is hit or not.

[1] https://discord.com/developers/docs/resources/guild#get-guild-widget
[2] https://github.com/discord/discord-api-docs/issues/1287
[3] https://discord.com/developers/docs/resources/guild#get-guild-widget-image

Closes: #9, #110

client_test/index.html

@@ -16,7 +16,7 @@
 				CDN_HOST: "//localhost:3003",
 				ASSET_ENDPOINT: "",
 				MEDIA_PROXY_ENDPOINT: "https://media.discordapp.net",
-				WIDGET_ENDPOINT: "//discord.com/widget",
+				WIDGET_ENDPOINT: "//localhost:3001/widget",
 				INVITE_HOST: "discord.gg",
 				GUILD_TEMPLATE_HOST: "discord.new",
 				GIFT_CODE_HOST: "discord.gift",

package.json

@@ -38,6 +38,7 @@
 		"atomically": "^1.7.0",
 		"bcrypt": "^5.0.1",
 		"body-parser": "^1.19.0",
+		"canvas": "^2.8.0",
 		"cheerio": "^1.0.0-rc.9",
 		"dot-prop": "^6.0.1",
 		"dotenv": "^8.2.0",
@@ -48,6 +49,7 @@
 		"i18next": "^19.8.5",
 		"i18next-http-middleware": "^3.1.3",
 		"i18next-node-fs-backend": "^2.1.3",
+		"image-size": "^1.0.0",
 		"jsonwebtoken": "^8.5.1",
 		"lambert-server": "^1.2.5",
 		"missing-native-js-functions": "^1.2.6",

src/middlewares/Authentication.ts

@@ -3,11 +3,12 @@ import { HTTPError } from "lambert-server";
 import { checkToken, Config } from "@fosscord/server-util";
 
 export const NO_AUTHORIZATION_ROUTES = [
-	"/api/v8/auth/login",
-	"/api/v8/auth/register",
-	"/api/v8/webhooks/",
-	"/api/v8/gateway",
-	"/api/v8/experiments"
+	/^\/api\/v8\/auth\/login/,
+	/^\/api\/v8\/auth\/register/,
+	/^\/api\/v8\/webhooks\//,
+	/^\/api\/v8\/gateway/,
+	/^\/api\/v8\/experiments/,
+	/^\/api(\/v\d+)?\/guilds\/\d+\/widget\.(json|png)/
 ];
 
 declare global {
@@ -22,7 +23,7 @@ declare global {
 export async function Authentication(req: Request, res: Response, next: NextFunction) {
 	if (!req.url.startsWith("/api")) return next();
 	if (req.url.startsWith("/api/v8/invites") && req.method === "GET") return next();
-	if (NO_AUTHORIZATION_ROUTES.some((x) => req.url.startsWith(x))) return next();
+	if (NO_AUTHORIZATION_ROUTES.some((x) => x.test(req.url))) return next();
 	if (!req.headers.authorization) return next(new HTTPError("Missing Authorization Header", 401));
 
 	try {

src/routes/guilds/#guild_id/widget.json.ts

@@ -0,0 +1,142 @@
+import { Request, Response, Router } from "express";
+import { Config, Permissions, GuildModel, InviteModel, ChannelModel, MemberModel } from "@fosscord/server-util";
+import { HTTPError } from "lambert-server";
+import { random } from "../../../util/RandomInviteID";
+
+const router: Router = Router();
+
+// Undocumented API notes:
+// An invite is created for the widget_channel_id on request (only if an existing one created by the widget doesn't already exist)
+// This invite created doesn't include an inviter object like user created ones and has a default expiry of 24 hours
+// Missing user object information is intentional (https://github.com/discord/discord-api-docs/issues/1287)
+// channels returns voice channel objects where @everyone has the CONNECT permission
+// members (max 100 returned) is a sample of all members, and bots par invisible status, there exists some alphabetical distribution pattern between the members returned
+
+// https://discord.com/developers/docs/resources/guild#get-guild-widget
+// TODO: Cache the response for a guild for 5 minutes regardless of response
+router.get("/", async (req: Request, res: Response) => {
+	const { guild_id } = req.params;
+
+	const guild = await GuildModel.findOne({ id: guild_id }).exec();
+	if (!guild) throw new HTTPError("Guild does not exist", 404);
+	if (!guild.widget_enabled) throw new HTTPError("Widget Disabled", 404);
+
+	// Fetch existing widget invite for widget channel
+	var invite = await InviteModel.findOne({ channel_id: guild.widget_channel_id, inviter_id: { $type: 10 } }).exec();
+	if (guild.widget_channel_id && !invite) {
+		// Create invite for channel if none exists
+		// TODO: Refactor invite create code to a shared function
+		const max_age = 86400; // 24 hours
+		const expires_at = new Date(max_age * 1000 + Date.now());
+		const body = {
+			code: random(),
+			temporary: false,
+			uses: 0,
+			max_uses: 0,
+			max_age: max_age,
+			expires_at,
+			created_at: new Date(),
+			guild_id,
+			channel_id: guild.widget_channel_id,
+			inviter_id: null
+		};
+
+		invite = await new InviteModel(body).save();
+	}
+	
+	// Fetch voice channels, and the @everyone permissions object
+	let channels: any[] = [];
+	await ChannelModel.find(
+		{ guild_id: guild_id, type: 2 },
+		{ permission_overwrites: { $elemMatch: { id: guild_id } } }
+	).lean()
+	.select("id name position permission_overwrites")
+	.sort({ position: 1 })
+	.cursor()
+	.eachAsync(doc => {
+		// Only return channels where @everyone has the CONNECT permission
+		if (doc.permission_overwrites === undefined || Permissions.channelPermission(doc.permission_overwrites, Permissions.FLAGS.CONNECT) === Permissions.FLAGS.CONNECT) {
+			channels.push(
+				{
+					id: doc.id,
+					name: doc.name,
+					position: doc.position
+				}
+			)
+		}
+	});
+
+	// Fetch members
+	// TODO: Understand how Discord's max 100 random member sample works, and apply to here (see top of this file)
+	let members: any[] = [];
+	await MemberModel.find({ guild_id: guild_id })
+	.lean()
+	.populate({ path: "user", select: { _id: 0, username: 1, avatar: 1, presence: 1 } })
+	.select("id user nick deaf mute")
+	.cursor()
+	.eachAsync(doc => {
+		const status = doc.user?.presence.status || "offline";
+		if (status != "offline") {
+			let item = {}
+
+			item = {
+				...item,
+				id: null, // this is updated during the sort outside of the query  
+				username: doc.nick || doc.user?.username,
+				discriminator: "0000", // intended (https://github.com/discord/discord-api-docs/issues/1287)
+				avatar: null, // intended, avatar_url below will return a unique guild + user url to the avatar
+				status: status
+			}
+
+			const activity = doc.user?.presence.activities[0];
+			if (activity) {
+				item = {
+					...item,
+					game: { name: activity.name }
+				}
+			}
+
+			// TODO: If the member is in a voice channel, return extra widget details
+			// Extra fields returned include deaf, mute, self_deaf, self_mute, supress, and channel_id (voice channel connected to)
+			// Get this from VoiceState
+
+
+			// TODO: Implement a widget-avatar endpoint on the CDN, and implement logic here to request it
+			// Get unique avatar url for guild user, cdn to serve the actual avatar image on this url
+			/*
+			const avatar = doc.user?.avatar;
+			if (avatar) {
+				const CDN_HOST = Config.get().cdn.endpoint || "http://localhost:3003";
+				const avatar_url = "/widget-avatars/" + ;
+				item = {
+					...item,
+					avatar_url: avatar_url
+				}
+			}
+			*/
+
+			members.push(item);
+		}
+	});
+
+	// Sort members, and update ids (Unable to do under the mongoose query due to https://mongoosejs.com/docs/faq.html#populate_sort_order)
+	members = members.sort((first, second) => 0 - (first.username > second.username ? -1 : 1));
+	members.forEach((x, i) => {
+		x.id = i;
+	});
+
+	// Construct object to respond with
+	const data = {
+		id: guild_id,
+		name: guild.name,
+		instant_invite: invite?.code,
+		channels: channels,
+		members: members,
+		presence_count: guild.presence_count
+	}
+
+	res.set("Cache-Control", "public, max-age=300");
+	return res.json(data);
+});
+
+export default router;

src/routes/guilds/#guild_id/widget.png.ts

@@ -0,0 +1,108 @@
+import { Request, Response, Router } from "express";
+import { GuildModel } from "@fosscord/server-util";
+import { HTTPError } from "lambert-server";
+import { Image } from "canvas";
+import fs from "fs";
+
+const router: Router = Router();
+
+// https://discord.com/developers/docs/resources/guild#get-guild-widget-image
+// TODO: Cache the response
+router.get("/", async (req: Request, res: Response) => {
+	const { guild_id } = req.params;
+
+	const guild = await GuildModel.findOne({ id: guild_id }).exec();
+	if (!guild) throw new HTTPError("Guild does not exist", 404);
+	if (!guild.widget_enabled) throw new HTTPError("Unknown Guild", 404);
+
+	// Fetch guild information
+	const icon = guild.icon;
+	const name = guild.name;
+	const presence = guild.presence_count + " ONLINE";
+
+	// Fetch parameter
+	const style = req.query.style?.toString() || "shield";
+	if (!["shield", "banner1", "banner2", "banner3", "banner4"].includes(style)) {
+		throw new HTTPError("Value must be one of ('shield', 'banner1', 'banner2', 'banner3', 'banner4').", 400);
+	}
+
+	// Setup canvas
+	const { createCanvas } = require("canvas");
+	const { loadImage } = require("canvas");
+	const sizeOf = require("image-size");
+
+	// TODO: Widget style templates need Fosscord branding
+	const source = __dirname + "../../../../../cache/widget/" + style + ".png";
+	if (!fs.existsSync(source)) {
+		throw new HTTPError("Widget template does not exist.", 400);
+	}
+
+	// Create base template image for parameter
+	const { width, height } = await sizeOf(source);
+	const canvas = createCanvas(width, height);
+	const ctx = canvas.getContext("2d");
+	const template = await loadImage(source);
+	ctx.drawImage(template, 0, 0);
+
+	// Add the guild specific information to the template asset image
+	switch (style) {
+		case "shield":
+			ctx.textAlign = "center";
+			await drawText(ctx, 73, 13, "#FFFFFF", "thin 10px Verdana", presence);
+			break;
+		case "banner1":
+			if (icon) await drawIcon(ctx, 20, 27, 50, icon);
+			await drawText(ctx, 83, 51, "#FFFFFF", "12px Verdana", name, 22);
+			await drawText(ctx, 83, 66, "#C9D2F0FF", "thin 11px Verdana", presence);
+			break;
+		case "banner2":
+			if (icon) await drawIcon(ctx, 13, 19, 36, icon);
+			await drawText(ctx, 62, 34, "#FFFFFF", "12px Verdana", name, 15);
+			await drawText(ctx, 62, 49, "#C9D2F0FF", "thin 11px Verdana", presence);
+			break;
+		case "banner3":
+			if (icon) await drawIcon(ctx, 20, 20, 50, icon);
+			await drawText(ctx, 83, 44, "#FFFFFF", "12px Verdana", name, 27);
+			await drawText(ctx, 83, 58, "#C9D2F0FF", "thin 11px Verdana", presence);
+			break;
+		case "banner4":
+			if (icon) await drawIcon(ctx, 21, 136, 50, icon);
+			await drawText(ctx, 84, 156, "#FFFFFF", "13px Verdana", name, 27);
+			await drawText(ctx, 84, 171, "#C9D2F0FF", "thin 12px Verdana", presence);
+			break;
+		default:
+			throw new HTTPError("Value must be one of ('shield', 'banner1', 'banner2', 'banner3', 'banner4').", 400);
+	}
+
+	// Return final image
+	const buffer = canvas.toBuffer("image/png");
+	res.set("Content-Type", "image/png");
+	res.set("Cache-Control", "public, max-age=3600");
+	return res.send(buffer);
+});
+
+async function drawIcon(canvas: any, x: number, y: number, scale: number, icon: string) {
+	const img = new Image();
+	img.src = icon;
+	
+	// Do some canvas clipping magic!
+	canvas.save();
+	canvas.beginPath();
+
+	const r = scale / 2; // use scale to determine radius
+	canvas.arc(x + r, y + r, r, 0, 2 * Math.PI, false); // start circle at x, and y coords + radius to find center
+	
+	canvas.clip();
+	canvas.drawImage(img, x, y, scale, scale);
+
+	canvas.restore();
+}
+
+async function drawText(canvas: any, x: number, y: number, color: string, font: string, text: string, maxcharacters?: number) {
+	canvas.fillStyle = color;
+	canvas.font = font;
+	if (text.length > (maxcharacters || 0) && maxcharacters) text = text.slice(0, maxcharacters) + "...";
+	canvas.fillText(text, x, y);
+}
+
+export default router;

src/routes/guilds/#guild_id/widget.ts

@@ -0,0 +1,39 @@
+import { Request, Response, Router } from "express";
+import { getPermission, GuildModel } from "@fosscord/server-util";
+import { HTTPError } from "lambert-server";
+import { check } from "../../../util/instanceOf";
+import { WidgetModifySchema } from "../../../schema/Widget";
+
+const router: Router = Router();
+
+// https://discord.com/developers/docs/resources/guild#get-guild-widget-settings
+router.get("/", async (req: Request, res: Response) => {
+	const { guild_id } = req.params;
+
+	const perms = await getPermission(req.user_id, guild_id);
+	perms.hasThrow("MANAGE_GUILD");
+
+	const guild = await GuildModel.findOne({ id: guild_id }).exec();
+	if (!guild) throw new HTTPError("Guild not found", 404);
+
+	return res.json({ enabled: guild.widget_enabled || false, channel_id: guild.widget_channel_id || null});
+});
+
+// https://discord.com/developers/docs/resources/guild#modify-guild-widget
+router.patch("/", check(WidgetModifySchema), async (req: Request, res: Response) => {
+	const body = req.body as WidgetModifySchema;
+	const { guild_id } = req.params;
+
+	const perms = await getPermission(req.user_id, guild_id);
+	perms.hasThrow("MANAGE_GUILD");
+
+	const guild = await GuildModel.findOne({ id: guild_id }).exec();
+	if (!guild) throw new HTTPError("Guild not found", 404);
+
+	await GuildModel.updateOne({ id: guild_id }, { widget_enabled: body['enabled'], widget_channel_id: body['channel_id'] }).exec();
+	// Widget invite for the widget_channel_id gets created as part of the /guilds/{guild.id}/widget.json request
+
+	return res.json(body);
+});
+
+export default router;

src/schema/Widget.ts

@@ -0,0 +1,10 @@
+// https://discord.com/developers/docs/resources/guild#guild-widget-object
+export const WidgetModifySchema = {
+	$enabled: Boolean, // whether the widget is enabled
+	$channel_id: String // the widget channel id
+};
+
+export interface WidgetModifySchema {
+	enabled: boolean; // whether the widget is enabled
+	channel_id: string; // the widget channel id
+}