cordis/client/webapp/elements/overlay-add-guild.ts

import * as electronRemote from '@electron/remote';
const electronConsole = electronRemote.getGlobal('console') as Console;
import Logger from '../../../logger/logger';
const LOG = Logger.create(__filename, electronConsole);

import * as fs from 'fs/promises';
import * as path from 'path';

import * as moment from 'moment';

import * as FileType from 'file-type';

import Globals from '../globals';
import BaseElements from './require/base-elements';
import ElementsUtil from './require/elements-util';

import Q from '../q-module';
import UI from '../ui';
import GuildsManager from '../guilds-manager';
import CombinedGuild from '../guild-combined';

export interface IAddGuildData {
	name: string,
	url: string,
	cert: string,
	token: string,
	expires: number,
	iconSrc: string
}

function getExampleDisplayName(): string {
	let names = [
		'gamer69',
		'exdenoccp',
		'TiggerEliminator',
		'FreshDingus',
		'Wonky Experiment',
		'TheLegend27'
	];
	return names[Math.floor(Math.random() * names.length)];
}

function getExampleAvatarPath(): string {
	let paths = [ // these are relative to the working directory
		path.join(__dirname, '../img/default-avatars/avatar-airstrip.png'),
		path.join(__dirname, '../img/default-avatars/avatar-building.png'),
		path.join(__dirname, '../img/default-avatars/avatar-frog.png'),
		path.join(__dirname, '../img/default-avatars/avatar-sun.png')
	];
	return paths[Math.floor(Math.random() * paths.length)];
}

export default function createAddGuildOverlay(document: Document, q: Q, ui: UI, guildsManager: GuildsManager, addGuildData: IAddGuildData): HTMLElement {
	let expired = addGuildData.expires < new Date().getTime();

	let displayName = getExampleDisplayName();
	let avatarPath = getExampleAvatarPath();

	//LOG.debug('addguilddata:', { addGuildData });

	let element = BaseElements.createOverlay(document, {
		class: 'content add-guild', content: [
			{ class: 'preview', content: [
				{ tag: 'img', class: 'icon', src: addGuildData.iconSrc, alt: 'icon' },
				{ content: [
					{ class: 'name', content: addGuildData.name },
					{ class: 'url', content: addGuildData.url },
					{ class: 'expires',
						content: (expired ? 'Invite Expired ' : 'Invite Expires ') + moment(addGuildData.expires).fromNow() }
				] }
			] },
			{ class: 'divider' },
			{ class: 'message-preview message', content: [
				{ class: 'member-avatar', content: { tag: 'img', src: './img/loading.svg', alt: 'avatar' } },
				{ class: 'right', content: [
					{ class: 'header', content: [
						{ class: 'member-name', content: displayName },
						{ class: 'timestamp', content: moment().calendar(ElementsUtil.calendarFormats) }
					] },
					{ class: 'content text', content: 'Example Message' }
				] }
			] },
			{ class: 'display-name-input', placeholder: 'Display Name',
				spellcheck: 'false', contenteditable: 'plaintext-only', content: displayName },
			{ class: 'avatar-input', content: [
				{ tag: 'label', class: 'avatar-upload-label button', content: [
					'Select Avatar',
					{ class: 'avatar-upload', tag: 'input',
						type: 'file', accept: '.png,.jpg,.jpeg', style: 'display: none;' },
				] }
			] },
			{ class: 'lower', content: [
				{ class: 'error' },
				{ class: 'buttons', content: [
					{ class: 'button submit', content: 'Add Guild' }
				] }
			] }
		]
	});

	let avatarBuff: Buffer | null;
	let defaultAvatarBuff: Buffer | null;
	(async () => {
		try {
			defaultAvatarBuff = await fs.readFile(avatarPath); // TODO: on error
			let src = await ElementsUtil.getImageBufferSrc(defaultAvatarBuff);
			(q.$$$(element, '.member-avatar img') as HTMLImageElement).src = src;
			avatarBuff = defaultAvatarBuff;
		} catch (e) {
			LOG.error('error setting default avatar', e);
			(q.$$$(element, '.member-avatar img') as HTMLImageElement).src = './img/error.png';
			defaultAvatarBuff = null;
			avatarBuff = null;
		}
	})();

	q.$$$(element, '.avatar-upload').addEventListener('change', async () => {
		q.$$$(element, '.error').innerText = '';
		let files = (q.$$$(element, '.avatar-upload') as HTMLInputElement).files;
		if (!files || files.length == 0) {
			avatarBuff = null;
			return;
		}
		let file = files[0];

		if (file.size > Globals.MAX_AVATAR_SIZE) {
			q.$$$(element, '.error').innerText = 'Image too large. Max size: ' + ElementsUtil.humanSize(Globals.MAX_AVATAR_SIZE);
			await ElementsUtil.shakeElement(q.$$$(element, '.avatar-upload-label'), 400);
			(q.$$$(element, '.avatar-upload') as HTMLInputElement).value = '';
			avatarBuff = null;
			return;
		}

		let buff = Buffer.from(await file.arrayBuffer());

		let typeResult = await FileType.fromBuffer(buff);
		if (!typeResult || !['image/png', 'image/jpeg', 'image/jpg'].includes(typeResult.mime)) {
			q.$$$(element, '.error').innerText = 'Invalid avatar image (png/jpg only)';
			await ElementsUtil.shakeElement(q.$$$(element, '.avatar-upload-label'), 400);
			avatarBuff = null;
			return;
		}

		try {
			let src = await ElementsUtil.getImageBufferSrc(buff);
			(q.$$$(element, '.member-avatar img') as HTMLImageElement).src = src;
			avatarBuff = buff;
		} catch (e) {
			LOG.warn('unable to create image src from buffer', e);
			q.$$$(element, '.error').innerText = 'Invalid avatar image';
			await ElementsUtil.shakeElement(q.$$$(element, '.avatar-upload-label'), 400);
			(q.$$$(element, '.avatar-upload') as HTMLInputElement).value = '';
			avatarBuff = null;
			return;
		}
	});

	q.$$$(element, '.display-name-input').addEventListener('keydown', (e) => {
		if (e.key == 'Enter') {
			e.preventDefault();
			if (e.shiftKey) return; // since the shift key makes newlines other places
			q.$$$(element, '.button.submit').click();
		}
	});

	q.$$$(element, '.display-name-input').addEventListener('input', () => {
		q.$$$(element, '.member-name').innerText = q.$$$(element, '.display-name-input').innerText;
	});

	let submitting = false;
	q.$$$(element, '.button.submit').addEventListener('click', async () => {
		if (submitting) return;
		submitting = true;

		displayName = q.$$$(element, '.display-name-input').innerText;

		q.$$$(element, '.display-name-input').removeAttribute('contenteditable');

		let newGuild: CombinedGuild | null = null;
		if (addGuildData == null) {
			q.$$$(element, '.error').innerText = 'Very bad guild file';
			q.$$$(element, '.submit').innerText = 'Try Again';
			await ElementsUtil.shakeElement(q.$$$(element, '.submit'), 400);
		} else if (addGuildData.expires < new Date().getTime()) {
			q.$$$(element, '.error').innerText = 'Token expired';
			q.$$$(element, '.submit').innerText = 'Try Again';
			await ElementsUtil.shakeElement(q.$$$(element, '.submit'), 400);
		} else if (displayName.length > Globals.MAX_DISPLAY_NAME_LENGTH) {
			q.$$$(element, '.error').innerText = 'Display name too long: ' + displayName.length + ' > ' + Globals.MAX_DISPLAY_NAME_LENGTH;
			q.$$$(element, '.submit').innerText = 'Try Again';
			await ElementsUtil.shakeElement(q.$$$(element, '.submit'), 400);
		} else if (displayName.length == 0) {
			q.$$$(element, '.error').innerText = 'Display name is empty';
			q.$$$(element, '.submit').innerText = 'Try Again';
			await ElementsUtil.shakeElement(q.$$$(element, '.submit'), 400);
		} else if (avatarBuff === null) {
			q.$$$(element, '.error').innerText = 'Unable to parse avatar';
			q.$$$(element, '.submit').innerText = 'Try Again';
			await ElementsUtil.shakeElement(q.$$$(element, '.submit'), 400);
		} else { // NOTE: Avatar size is checked above
			q.$$$(element, '.submit').innerText = 'Registering...';
			try {
				newGuild = await guildsManager.addNewGuild(addGuildData, displayName, avatarBuff);
			} catch (e) {
				LOG.warn('error adding new guild: ' + e.message, e); // explicitly not printing stack trace here
				q.$$$(element, '.error').innerText = e.message;
				q.$$$(element, '.submit').innerText = 'Try Again';
				await ElementsUtil.shakeElement(q.$$$(element, '.submit'), 400);
				newGuild = null;
			}
		}

		if (newGuild !== null) {
			let guildElement = await ui.addGuild(guildsManager, newGuild);
			element.removeSelf(); // close the overlay since we got a new guild
			guildElement.click(); // click on the new guild
		}

		q.$$$(element, '.display-name-input').setAttribute('contenteditable', 'plaintext-only');
		q.$$$(element, '.display-name-input').focus();

		submitting = false;
	});

	return element;
}