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 Elements from '../elements';

import { $, $$, $$$, $$$$ } from './require/q-module';

import IState from './require/elements-state';
import ClientController from '../client-controller';

export default function createPersonalizeOverlay(state: IState, server: ClientController, connection: any): HTMLElement {
    const { document } = state;
    $.setDocument(document);
    
    let element = BaseElements.createOverlay(document, {
        class: 'content submit-dialog personalize', content: [
            Elements.createTextMessage(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($$$(element, '.avatar-upload') as HTMLInputElement, {
        maxSize: Globals.MAX_AVATAR_SIZE,
        acceptedMimeTypes: [ 'image/png', 'image/jpeg', 'image/jpg' ],
        onChangeStart: () => { $$$(element, '.error').innerText = ''; },
        onCleared: () => {},
        onError: async (errMsg) => {
            $$$(element, '.error').innerText = errMsg;
            await ElementsUtil.shakeElement($$$(element, '.avatar-upload-label'), 400);
        },
        onLoaded: (buff, src) => {
            newAvatarBuffer = buff;
            ($$$(element, '.member-avatar img') as HTMLImageElement).src = src;
        }
    });

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

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

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

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

        $$$(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');
            $$$(element, '.button.submit').innerText = 'Try Again';
            $$$(element, '.error').innerText = 'New display name is empty.';
            await ElementsUtil.shakeElement($$$(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');
            $$$(element, '.button.submit').innerText = 'Try Again';
            $$$(element, '.error').innerText = 'New display name too long. ' + newDisplayName.length + ' > ' + Globals.MAX_DISPLAY_NAME_LENGTH;
            await ElementsUtil.shakeElement($$$(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);
                    $$$(element, '.button.submit').innerText = 'Try Again';
                    $$$(element, '.error').innerText = 'Error setting display name';
                    await ElementsUtil.shakeElement($$$(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);
                    $$$(element, '.button.submit').innerText = 'Try Again';
                    $$$(element, '.error').innerText = 'Error submitting avatar';
                    await ElementsUtil.shakeElement($$$(element, '.button.submit'), 400);
                    failed = true;
                }
            }

            success = !failed;
        }

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