tweb/src/components/sidebarLeft/tabs/editProfile.ts

/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

import InputField from '../../inputField';
import {SliderSuperTab} from '../../slider';
import EditPeer from '../../editPeer';
import {UsernameInputField} from '../../usernameInputField';
import {i18n, i18n_} from '../../../lib/langPack';
import {attachClickEvent} from '../../../helpers/dom/clickEvent';
import rootScope from '../../../lib/rootScope';
import {generateSection, SettingSection} from '..';

// TODO: аватарка не поменяется в этой вкладке после изменения почему-то (если поставить в другом клиенте, и потом тут проверить, для этого ещё вышел в чатлист)

export default class AppEditProfileTab extends SliderSuperTab {
  private firstNameInputField: InputField;
  private lastNameInputField: InputField;
  private bioInputField: InputField;
  private usernameInputField: InputField;

  private profileUrlContainer: HTMLDivElement;
  private profileUrlAnchor: HTMLAnchorElement;

  private editPeer: EditPeer;

  public static getInitArgs() {
    return {
      bioMaxLength: rootScope.managers.apiManager.getLimit('bio'),
      user: rootScope.managers.appUsersManager.getSelf(),
      userFull: rootScope.managers.appProfileManager.getProfile(rootScope.myId.toUserId())
    };
  }

  public async init(p: ReturnType<typeof AppEditProfileTab['getInitArgs']>) {
    this.container.classList.add('edit-profile-container');
    this.setTitle('EditAccount.Title');

    const inputFields: InputField[] = [];

    const [bioMaxLength, user, userFull] = await Promise.all([p.bioMaxLength, p.user, p.userFull]);

    {
      const section = generateSection(this.scrollable, undefined, 'Bio.Description');
      const inputWrapper = document.createElement('div');
      inputWrapper.classList.add('input-wrapper');

      this.firstNameInputField = new InputField({
        label: 'EditProfile.FirstNameLabel',
        name: 'first-name',
        maxLength: 70
      });
      this.lastNameInputField = new InputField({
        label: 'Login.Register.LastName.Placeholder',
        name: 'last-name',
        maxLength: 64
      });
      this.bioInputField = new InputField({
        label: 'EditProfile.BioLabel',
        name: 'bio',
        maxLength: bioMaxLength
      });

      inputWrapper.append(this.firstNameInputField.container, this.lastNameInputField.container, this.bioInputField.container);

      const caption = document.createElement('div');
      caption.classList.add('caption');
      i18n_({element: caption, key: 'Bio.Description'});

      inputFields.push(this.firstNameInputField, this.lastNameInputField, this.bioInputField);

      this.editPeer = new EditPeer({
        peerId: rootScope.myId,
        inputFields,
        listenerSetter: this.listenerSetter
      });

      this.content.append(this.editPeer.nextBtn);

      section.append(this.editPeer.avatarEdit.container, inputWrapper);
    }

    {
      const section = new SettingSection({
        name: 'EditAccount.Username',
        caption: true
      });

      const inputWrapper = document.createElement('div');
      inputWrapper.classList.add('input-wrapper');

      this.usernameInputField = new UsernameInputField({
        label: 'EditProfile.Username.Label',
        name: 'username',
        plainText: true,
        listenerSetter: this.listenerSetter,
        onChange: () => {
          this.editPeer.handleChange();
          this.setProfileUrl();
        },
        availableText: 'EditProfile.Username.Available',
        takenText: 'EditProfile.Username.Taken',
        invalidText: 'EditProfile.Username.Invalid'
      }, this.managers);

      inputWrapper.append(this.usernameInputField.container);

      const caption = section.caption;
      caption.append(i18n('UsernameSettings.ChangeDescription'));
      caption.append(document.createElement('br'), document.createElement('br'));

      const profileUrlContainer = this.profileUrlContainer = document.createElement('div');
      profileUrlContainer.classList.add('profile-url-container');

      const profileUrlAnchor = this.profileUrlAnchor = document.createElement('a');
      profileUrlAnchor.classList.add('profile-url');
      profileUrlAnchor.href = '#';
      profileUrlAnchor.target = '_blank';

      profileUrlContainer.append(i18n('UsernameHelpLink', [profileUrlAnchor]));

      caption.append(profileUrlContainer);

      inputFields.push(this.usernameInputField);
      section.content.append(inputWrapper);
      this.scrollable.append(section.container);
    }

    attachClickEvent(this.editPeer.nextBtn, () => {
      this.editPeer.nextBtn.disabled = true;

      const promises: Promise<any>[] = [];

      const profilePromise = this.managers.appProfileManager.updateProfile(
        this.firstNameInputField.value,
        this.lastNameInputField.value,
        this.bioInputField.value
      );
      promises.push(profilePromise.then(() => {
        this.close();
      }, (err) => {
        console.error('updateProfile error:', err);
      }));

      if(this.editPeer.uploadAvatar) {
        promises.push(this.editPeer.uploadAvatar().then((inputFile) => {
          return this.managers.appProfileManager.uploadProfilePhoto(inputFile);
        }));
      }

      if(this.usernameInputField.isValidToChange()) {
        promises.push(this.managers.appUsersManager.updateUsername(this.usernameInputField.value));
      }

      Promise.race(promises).finally(() => {
        this.editPeer.nextBtn.removeAttribute('disabled');
      });
    }, {listenerSetter: this.listenerSetter});

    this.firstNameInputField.setOriginalValue(user.first_name, true);
    this.lastNameInputField.setOriginalValue(user.last_name, true);
    this.bioInputField.setOriginalValue(userFull.about, true);
    this.usernameInputField.setOriginalValue(user.username, true);

    this.setProfileUrl();
    this.editPeer.handleChange();
  }

  private setProfileUrl() {
    if(this.usernameInputField.input.classList.contains('error') || !this.usernameInputField.value.length) {
      this.profileUrlContainer.style.display = 'none';
    } else {
      this.profileUrlContainer.style.display = '';
      const url = 'https://t.me/' + this.usernameInputField.value;
      this.profileUrlAnchor.innerText = url;
      this.profileUrlAnchor.href = url;
    }
  }
}