cordis/client/webapp/elements/overlay-personalize.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 BaseElements from './require/base-elements';
import ElementsUtil from './require/elements-util';

import Globals from '../globals';

import ClientController from '../client-controller';
import Q from '../q-module';
import createTextMessage from './message-text';

export default function createPersonalizeOverlay(document: Document, q: Q, server: ClientController, connection: any): HTMLElement {
	let element = BaseElements.createOverlay(document, {
		class: 'content submit-dialog personalize', content: [
			createTextMessage(q, server, { id: 'test-message', member: connection, sent: new Date(), text: 'Example Message' }),
			{ class: 'text-input', placeholder: 'New Display Name',
				spellcheck: 'false', contenteditable: 'plaintext-only', content: connection.display_name },
			{ class: 'image-input avatar-input', content: [
				{ tag: 'label', class: 'image-input-label avatar-input-label button', content: [
					'Select New Avatar',
					{ class: 'image-input-upload 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: 'Save Changes' }
				] }
			] }
		]
	});

	let newAvatarBuffer: Buffer | null = null;
	BaseElements.bindImageUploadEvents(q.$$$(element, '.avatar-upload') as HTMLInputElement, {
		maxSize: Globals.MAX_AVATAR_SIZE,
		acceptedMimeTypes: [ 'image/png', 'image/jpeg', 'image/jpg' ],
		onChangeStart: () => { q.$$$(element, '.error').innerText = ''; },
		onCleared: () => {},
		onError: async (errMsg) => {
			q.$$$(element, '.error').innerText = errMsg;
			await ElementsUtil.shakeElement(q.$$$(element, '.avatar-upload-label'), 400);
		},
		onLoaded: (buff, src) => {
			newAvatarBuffer = buff;
			(q.$$$(element, '.member-avatar img') as HTMLImageElement).src = src;
		}
	});

	q.$$$(element, '.text-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, '.text-input').addEventListener('input', () => {
		q.$$$(element, '.member-name').innerText = q.$$$(element, '.text-input').innerText;
	});

	let setting = false;
	q.$$$(element, '.button.submit').addEventListener('click', async () => {
		if (setting) return;
		setting = true;
		q.$$$(element, '.error').innerText = '';
		q.$$$(element, '.button.submit').innerText = 'Submitting...';
		let newDisplayName = q.$$$(element, '.text-input').innerText;

		if (newDisplayName == connection.display_name && newAvatarBuffer == null) {
			// nothing changed, simply close the diaolg
			element.removeSelf();
			setting = false;
			return;
		}

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

		let success = false;
		if (newDisplayName != connection.display_name && newDisplayName.length == 0) {
			LOG.warn('attempted to set empty new display name');
			q.$$$(element, '.button.submit').innerText = 'Try Again';
			q.$$$(element, '.error').innerText = 'New display name is empty.';
			await ElementsUtil.shakeElement(q.$$$(element, '.button.submit'), 400);
		} else if (newDisplayName != connection.display_name && newDisplayName.length > Globals.MAX_DISPLAY_NAME_LENGTH) {
			LOG.warn('attempted to set too long new display name');
			q.$$$(element, '.button.submit').innerText = 'Try Again';
			q.$$$(element, '.error').innerText = 'New display name too long. ' + newDisplayName.length + ' > ' + Globals.MAX_DISPLAY_NAME_LENGTH;
			await ElementsUtil.shakeElement(q.$$$(element, '.button.submit'), 400);
		} else { // new avatar buffer size is already checked above
			// Set Display Name
			let failed = false;
			if (newDisplayName != connection.display_name) {
				try {
					await server.setDisplayName(newDisplayName);
					connection.display_name = newDisplayName; // prevent resubmit
				} catch (e) {
					LOG.error('error setting display name', e);
					q.$$$(element, '.button.submit').innerText = 'Try Again';
					q.$$$(element, '.error').innerText = 'Error setting display name';
					await ElementsUtil.shakeElement(q.$$$(element, '.button.submit'), 400);
					failed = true;
				}
			}

			// Set New Avatar
			if (!failed && newAvatarBuffer != null) {
				try {
					await server.setAvatar(newAvatarBuffer);
					newAvatarBuffer = null; // prevent resubmit
				} catch (e) {
					LOG.error('error setting avatar buffer', e);
					q.$$$(element, '.button.submit').innerText = 'Try Again';
					q.$$$(element, '.error').innerText = 'Error submitting avatar';
					await ElementsUtil.shakeElement(q.$$$(element, '.button.submit'), 400);
					failed = true;
				}
			}

			success = !failed;
		}

		q.$$$(element, '.text-input').setAttribute('contenteditable', 'plaintext-only');
		q.$$$(element, '.text-input').focus();
		
		if (success) {
			element.removeSelf(); // close the dialog
		}
		
		setting = false;
	});
	return element;
}