Release

.docker/docker-compose.yml

@@ -67,12 +67,18 @@ services:
 
   proxy:
     image: mitmproxy/mitmproxy
-    command: mitmweb --mode regular@8888 -s /data/mitmproxy-local.py -v --web-host 0.0.0.0 -k --set tls_version_client_min=UNBOUNDED --set tls_version_server_min=UNBOUNDED --set web_password=letmein
+    command: > 
+      mitmweb -v --mode regular@8888
+      -s /data/mitmproxy-local.py
+      --web-host 0.0.0.0 --set web_password=letmein
+      -k --set tls_version_client_min=UNBOUNDED --set tls_version_server_min=UNBOUNDED 
+      --set key_size=1024
     ports:
       - 8888:8888
       - 127.0.0.1:8081:8081
     volumes:
       - "./mitmproxy-local.py:/data/mitmproxy-local.py"
+      - "./mitmproxy-data/:/home/mitmproxy/.mitmproxy/"
     extra_hosts:
       - "host.docker.internal:host-gateway"
 

.gitignore

@@ -5,3 +5,5 @@ dist/
 newman
 config.json
 uploads/
+
+.docker/mitmproxy-data

.vscode/launch.json

@@ -23,6 +23,13 @@
             "env": {
                 "PN_JUXTAPOSITION_UI_USE_PRESETS": "docker"
             }
+        },
+        {
+            "type": "node-terminal",
+            "name": "Rebuild gRPC",
+            "request": "launch",
+            "command": "npm rebuild @repo/grpc-client",
+            "cwd": "${workspaceFolder}"
         }
     ],
     "compounds": [

apps/juxtaposition-ui/package.json

@@ -27,6 +27,7 @@
     "ejs": "^3.1.10",
     "esbuild-plugin-copy": "^2.1.1",
     "express": "^4.21.2",
+    "express-async-errors": "^3.1.1",
     "express-prom-bundle": "^7.0.2",
     "express-rate-limit": "^7.5.0",
     "express-session": "^1.18.1",
@@ -52,7 +53,8 @@
     "redis": "^4.7.0",
     "sharp": "^0.33.5",
     "tga": "^1.0.7",
-    "tsx": "^4.19.3"
+    "tsx": "^4.19.3",
+    "zod": "^3.25.56"
   },
   "devDependencies": {
     "@pretendonetwork/eslint-config": "^0.0.11",

apps/juxtaposition-ui/src/api/post.ts

@@ -0,0 +1,65 @@
+import { apiFetchUser } from '@/fetch';
+import type { UserTokens } from '@/fetch';
+
+/* !!! HEY
+ * This type lives in apps/miiverse-api/src/services/internal/contract/post.ts
+ * Modify it there and copy-paste here! */
+
+/* This type is the contract for the frontend. If we make changes to the db, this shape should be kept. */
+export type PostDto = {
+	id: string;
+	title_id?: string; // number
+	screen_name: string;
+	body: string;
+	app_data?: string; // nintendo base64
+
+	painting?: string; // base64 or '', undef for PMs
+	screenshot?: string; // URL frag (leading /) or '', undef for PMs
+	screenshot_length?: number;
+
+	search_key?: string[]; // can be []
+	topic_tag?: string; // can be ''
+
+	community_id: string; // number
+	created_at: string; // ISO Z
+	feeling_id?: number;
+
+	is_autopost: boolean;
+	is_community_private_autopost: boolean;
+	is_spoiler: boolean;
+	is_app_jumpable: boolean;
+
+	empathy_count: number;
+	country_id: number;
+	language_id: number;
+
+	mii: string; // nintendo base64
+	mii_face_url: string; // full URL (cdn., r2-cdn.)
+
+	pid: number;
+	platform_id?: number;
+	region_id?: number;
+	parent: string | null;
+
+	reply_count: number;
+	verified: boolean;
+
+	message_to_pid: string | null;
+	removed: boolean;
+	removed_by?: number;
+	removed_at?: string; // ISO Z
+	removed_reason?: string;
+
+	yeahs: number[];
+};
+
+/**
+ * Fetches a Post for a given ID.
+ * @param tokens User to perform fetch as. Responses will be according to this users' permissions (user, moderator etc.)
+ * @param post_id The ID of the post to get.
+ * @returns Post object
+ */
+export async function getPostById(tokens: UserTokens, post_id: string): Promise<PostDto | null> {
+	const post = await apiFetchUser<PostDto>(tokens, `/api/v1/posts/${post_id}`);
+	return post;
+}

apps/juxtaposition-ui/src/config.ts

@@ -9,6 +9,8 @@ const schema = z.object({
 	logSensitive: zodCoercedBoolean().default(false),
 	httpPort: z.coerce.number().default(8080),
 	httpCookieDomain: z.string().default('.pretendo.network'),
+	/** "Safe" base origin for login-redirect validation */
+	httpBaseUrl: z.string().default('https://juxt.pretendo.network'),
 	/** Configures proxy trust (X-Forwarded-For etc.). Can be `true` to unconditionally trust, or
 	 *  provide a numeric hop count, or comma-seperated CIDR ranges.
 	 *  See https://expressjs.com/en/guide/behind-proxies.html
@@ -94,7 +96,8 @@ export const config = {
 	http: {
 		port: unmappedConfig.httpPort,
 		cookieDomain: unmappedConfig.httpCookieDomain,
-		trustProxy: unmappedConfig.httpTrustProxy
+		trustProxy: unmappedConfig.httpTrustProxy,
+		baseUrl: unmappedConfig.httpBaseUrl
 	},
 	metrics: {
 		enabled: unmappedConfig.metricsEnabled,

apps/juxtaposition-ui/src/fetch.ts

@@ -1,39 +1,72 @@
 import { Metadata } from 'nice-grpc';
 import { config } from '@/config';
 import { grpcClient } from '@/grpc';
+import type { PacketResponse } from '@repo/grpc-client/out/packet';
 
 export type FetchOptions = {
 	method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
-	headers?: Record<string, string>;
+	headers?: Record<string, string | undefined>;
 	body?: Record<string, any> | undefined | null;
 };
 
+export interface FetchError extends Error {
+	name: 'FetchError';
+	status: number;
+	response: any;
+}
+function FetchError(response: PacketResponse, message: string): FetchError {
+	const error = new Error(message) as FetchError;
+	error.name = 'FetchError';
+	error.status = response.status;
+	error.response = response.payload; // parse json?
+	return error;
+}
+
 function isErrorHttpStatus(status: number): boolean {
 	return status >= 400 && status < 600;
 }
 
-export async function apiFetch<T>(path: string, options?: FetchOptions): Promise<T> {
+export async function apiFetch<T>(path: string, options?: FetchOptions): Promise<T | null> {
 	const defaultedOptions = {
 		method: 'GET',
 		headers: {},
 		...options
 	};
 
 	const metadata = Metadata({
-		...defaultedOptions.headers,
 		'X-API-Key': config.grpc.miiverse.apiKey
 	});
 	const response = await grpcClient.sendPacket({
 		path,
 		method: defaultedOptions.method,
+		headers: JSON.stringify(defaultedOptions.headers),
 		payload: defaultedOptions.body ? JSON.stringify(defaultedOptions.body) : undefined
 	}, {
 		metadata
 	});
 
-	if (isErrorHttpStatus(response.status)) {
-		throw new Error(`HTTP error! status: ${response.status}`);
+	if (response.status === 404) {
+		return null;
+	} else if (isErrorHttpStatus(response.status)) {
+		throw FetchError(response, `HTTP error! status: ${response.status} ${response.payload}`);
 	}
 
 	return JSON.parse(response.payload) as T;
 }
+
+export type UserTokens = {
+	serviceToken?: string;
+	oauthToken?: string;
+};
+
+export async function apiFetchUser<T>(tokens: UserTokens, path: string, options?: FetchOptions): Promise<T | null> {
+	options = {
+		...options,
+		headers: {
+			'x-service-token': tokens.serviceToken,
+			'x-oauth-token': tokens.oauthToken,
+			...options?.headers
+		}
+	};
+	return apiFetch<T>(path, options);
+}

apps/juxtaposition-ui/src/images.ts

@@ -0,0 +1,129 @@
+import { Buffer } from 'node:buffer';
+// @ts-expect-error Missing upstream types for this library
+import TGA from 'tga';
+// @ts-expect-error Missing upstream types for this library
+import imagePixels from 'image-pixels';
+import { inflate, deflate } from 'pako';
+import { PNG } from 'pngjs';
+import bmp from 'bmp-js';
+import sharp from 'sharp';
+import { logger } from '@/logger';
+
+/** Ingests a BMP-format painting and converts it to the usual TGA format.
+ * @param painting base64-encoded bmp image
+ * @returns base64-encoded zlib-compressed TGA
+ */
+export async function processBmpPainting(painting: string): Promise<string | null> {
+	const paintingBuffer = Buffer.from(painting, 'base64');
+	const bitmap = bmp.decode(paintingBuffer);
+	const tga = createTgaFromPixelData(bitmap.width, bitmap.height, bitmap.data, false);
+
+	let output: Uint8Array;
+	try {
+		output = deflate(tga, { level: 6 });
+	} catch (err) {
+		logger.error(err, 'Could not compress painting');
+		return null;
+	}
+	return Buffer.from(output.buffer).toString('base64');
+}
+
+/**
+ * Ingests a raw painting and converts it for CDN upload.
+ * @param painting base64-encoded zlib-compressed TGA
+ * @returns PNG in buffer
+ */
+export async function processPainting(painting: string): Promise<Buffer | null> {
+	const paintingBuffer = Buffer.from(painting, 'base64');
+	let output: Uint8Array;
+	try {
+		output = inflate(paintingBuffer);
+	} catch (err) {
+		logger.error(err, 'Could not decompress painting');
+		return null;
+	}
+	let tga: TGA;
+	try {
+		tga = new TGA(Buffer.from(output.buffer));
+	} catch (e) {
+		logger.error(e, 'Could not parse painting');
+		return null;
+	}
+	const png = new PNG({
+		width: tga.width,
+		height: tga.height
+	});
+	png.data = tga.pixels;
+	return PNG.sync.write(png);
+}
+
+/**
+ * Rezise an image.
+ * @param data base64-encoded input image, most codecs OK (check Sharp docs)
+ * @param width Target width in pixels
+ * @param height Target height in pixels
+ * @returns New image, same codec as the input (not base64'd!)
+ */
+export async function resizeImage(data: string, width: number, height: number): Promise<Buffer> {
+	const image = Buffer.from(data, 'base64');
+	return sharp(image)
+		.resize({ height, width })
+		.toBuffer()
+		.catch((err) => {
+			logger.error(err, 'Could not resize image!');
+			throw err;
+		});
+}
+
+export async function getTGAFromPNG(image: Buffer): Promise<string | null> {
+	const pngData = await imagePixels(Buffer.from(image));
+	const tga = TGA.createTgaBuffer(pngData.width, pngData.height, pngData.data);
+	let output: Uint8Array;
+	try {
+		output = deflate(tga, { level: 6 });
+	} catch (err) {
+		logger.error(err, 'Could not decompress image');
+		return null;
+	}
+	return Buffer.from(output.buffer).toString('base64').trim();
+}
+
+/**
+ * Makes a new TGA from BGRX pixel data
+ * @param width Width of the data
+ * @param height Height of the data
+ * @param pixels [B1, G1, R1, X1, B2, R2, G2, X2...]
+ * @param dontFlipY Invert the y-axis
+ * @returns Buffer with TGA data
+ *
+ * Modified from https://github.com/steel1990/tga/blob/dcd2bff6536c1c75719ed4309389cd66f991d8d3/src/index.js#L16-L45
+ */
+function createTgaFromPixelData(width: number, height: number, pixels: Buffer, dontFlipY: boolean): Buffer {
+	const buffer = Buffer.alloc(18 + pixels.length);
+	// write header
+	buffer.writeInt8(0, 0);
+	buffer.writeInt8(0, 1);
+	buffer.writeInt8(2, 2);
+	buffer.writeInt16LE(0, 3);
+	buffer.writeInt16LE(0, 5);
+	buffer.writeInt8(0, 7);
+	buffer.writeInt16LE(0, 8);
+	buffer.writeInt16LE(0, 10);
+	buffer.writeInt16LE(width, 12);
+	buffer.writeInt16LE(height, 14);
+	buffer.writeInt8(32, 16);
+	buffer.writeInt8(8, 17);
+
+	let offset = 18;
+	for (let i = 0; i < height; i++) {
+		for (let j = 0; j < width; j++) {
+			const idx = ((dontFlipY ? i : height - i - 1) * width + j) * 4;
+			buffer.writeUInt8(pixels[idx + 1], offset++); // b
+			buffer.writeUInt8(pixels[idx + 2], offset++); // g
+			buffer.writeUInt8(pixels[idx + 3], offset++); // r
+			buffer.writeUInt8(255, offset++); // a
+		}
+	}
+
+	return buffer;
+}

apps/juxtaposition-ui/src/loggerHttp.ts

@@ -4,8 +4,9 @@ import { config } from '@/config';
 import { decodeParamPack } from '@/util';
 import type { SerializedRequest, SerializedResponse } from 'pino';
 import type { Request } from 'express';
+import type { ParamPack } from '@/types/common/param-pack';
 
-type SerializedNintendoRequest = SerializedRequest & { param_pack?: Record<string, string> };
+type SerializedNintendoRequest = SerializedRequest & { param_pack?: ParamPack };
 
 function redactHeaders(headers: Record<string, string>, allowlist: string[]): Record<string, string> {
 	if (!config.log.sensitive) {

apps/juxtaposition-ui/src/middleware/checkBan.js

@@ -38,7 +38,7 @@ async function checkBan(request, response, next) {
 	if (!accessAllowed) {
 		response.status(500);
 		if (request.directory === 'web') {
-			return response.render('web/login.ejs', { toast: 'No access. Must be tester or dev' });
+			return response.render('web/login.ejs', { toast: 'No access. Must be tester or dev', redirect: request.originalUrl });
 		} else {
 			return response.render('portal/partials/ban_notification.ejs', {
 				user: null,
@@ -66,7 +66,7 @@ async function checkBan(request, response, next) {
 				default:
 					banMessage = `${request.user.username} has been banned. \n\nIf you have any questions contact the moderators in the Discord server or forum.`;
 			}
-			return response.render('web/login.ejs', { toast: banMessage });
+			return response.render('web/login.ejs', { toast: banMessage, redirect: request.originalUrl });
 		} else {
 			return response.render(request.directory + '/partials/ban_notification.ejs', {
 				user: userSettings,

apps/juxtaposition-ui/src/middleware/consoleAuth.js

@@ -7,12 +7,15 @@ async function auth(request, response, next) {
 	if (request.session && request.session.user && request.session.pid && !request.isWrite) {
 		request.user = request.session.user;
 		request.pid = request.session.pid;
+		request.tokens = request.session.tokens;
 	} else {
-		request.pid = request.headers['x-nintendo-servicetoken'] ? await util.processServiceToken(request.headers['x-nintendo-servicetoken']) : null;
-		request.user = request.pid ? await util.getUserDataFromPid(request.pid) : null;
+		request.tokens = { serviceToken: request.headers['x-nintendo-servicetoken'] };
+		request.pid = request.headers['x-nintendo-servicetoken'] ? await util.getPIDFromServiceToken(request.headers['x-nintendo-servicetoken']) : null;
+		request.user = request.pid ? await util.getUserAccountData(request.pid) : null;
 
 		request.session.user = request.user;
 		request.session.pid = request.pid;
+		request.session.tokens = request.tokens;
 	}
 
 	// Set headers