Fix sticker overflow on time

Email confirmation temp commit

src/components/sidebarLeft/tabs/2fa/email.ts

@@ -5,11 +5,13 @@ import Button from "../../../button";
 import SidebarSlider, { SliderSuperTab } from "../../../slider";
 import { wrapSticker } from "../../../wrappers";
 import InputField from "../../../inputField";
-import { attachClickEvent } from "../../../../helpers/dom";
+import { attachClickEvent, cancelEvent } from "../../../../helpers/dom";
 import PopupConfirmAction from "../../../popups/confirmAction";
 import { putPreloader } from "../../../misc";
 import passwordManager from "../../../../lib/mtproto/passwordManager";
 import AppTwoStepVerificationSetTab from "./passwordSet";
+import AppTwoStepVerificationEmailConfirmationTab from "./emailConfirmation";
+import RichTextProcessor from "../../../../lib/richtextprocessor";
 
 export default class AppTwoStepVerificationEmailTab extends SliderSuperTab {
   public inputField: InputField;
@@ -60,7 +62,19 @@ export default class AppTwoStepVerificationEmailTab extends SliderSuperTab {
 
     const inputField = this.inputField = new InputField({
       name: 'recovery-email',
-      label: 'Recovery Email'
+      label: 'Recovery Email',
+      plainText: true
+    });
+
+    inputField.input.addEventListener('keypress', (e) => {
+      if(e.key === 'Enter') {
+        cancelEvent(e);
+        return btnContinue.click();
+      }
+    });
+
+    inputField.input.addEventListener('input', (e) => {
+      inputField.input.classList.remove('error');
     });
 
     const btnContinue = Button('btn-primary btn-color-primary', {text: 'CONTINUE'});
@@ -70,6 +84,54 @@ export default class AppTwoStepVerificationEmailTab extends SliderSuperTab {
       new AppTwoStepVerificationSetTab(this.slider).open();
     };
 
+    attachClickEvent(btnContinue, (e) => {
+      const email = inputField.value.trim();
+      const match = RichTextProcessor.matchEmail(email);
+      if(!match || match[0].length !== email.length) {
+        inputField.input.classList.add('error');
+        return;
+      }
+
+      toggleButtons(true);
+      putPreloader(btnContinue);
+
+      passwordManager.updateSettings({
+        hint: this.hint,
+        currentPassword: this.plainPassword,
+        newPassword: this.newPassword,
+        email
+      }).then((value) => {
+        goNext();
+      }, (err) => {
+        if(err.type.includes('EMAIL_UNCONFIRMED')) {
+          const symbols = +err.type.match(/^EMAIL_UNCONFIRMED_(\d+)/)[1];
+
+          const tab = new AppTwoStepVerificationEmailConfirmationTab(this.slider);
+          tab.state = this.state;
+          tab.newPassword = this.newPassword;
+          tab.plainPassword = this.plainPassword;
+          tab.hint = this.hint;
+          tab.email = email;
+          tab.length = symbols;
+          tab.open();
+        } else {
+          console.log('password set error', err);
+        }
+
+        toggleButtons(false);
+      });
+    });
+
+    const toggleButtons = (freeze: boolean) => {
+      if(freeze) {
+        btnContinue.setAttribute('disabled', 'true');
+        btnSkip.setAttribute('disabled', 'true');
+      } else {
+        btnContinue.removeAttribute('disabled');
+        btnSkip.removeAttribute('disabled');
+      }
+    };
+
     attachClickEvent(btnSkip, (e) => {
       const popup = new PopupConfirmAction('popup-skip-email', [{
         text: 'CANCEL',
@@ -78,8 +140,7 @@ export default class AppTwoStepVerificationEmailTab extends SliderSuperTab {
         text: 'SKIP',
         callback: () => {
           //inputContent.classList.add('sidebar-left-section-disabled');
-          btnContinue.setAttribute('disabled', 'true');
-          btnSkip.setAttribute('disabled', 'true');
+          toggleButtons(true);
           putPreloader(btnSkip);
           passwordManager.updateSettings({
             hint: this.hint, 
@@ -88,8 +149,7 @@ export default class AppTwoStepVerificationEmailTab extends SliderSuperTab {
           }).then(() => {
             goNext();
           }, (err) => {
-            btnContinue.removeAttribute('disabled');
-            btnSkip.removeAttribute('disabled');
+            toggleButtons(false);
           });
         },
         isDanger: true,

src/components/sidebarLeft/tabs/2fa/emailConfirmation.ts

@@ -0,0 +1,120 @@
+import { SettingSection } from "../..";
+import { AccountPassword } from "../../../../layer";
+import appStickersManager from "../../../../lib/appManagers/appStickersManager";
+import Button from "../../../button";
+import SidebarSlider, { SliderSuperTab } from "../../../slider";
+import { wrapSticker } from "../../../wrappers";
+import InputField from "../../../inputField";
+import { attachClickEvent } from "../../../../helpers/dom";
+import PopupConfirmAction from "../../../popups/confirmAction";
+import { putPreloader } from "../../../misc";
+import passwordManager from "../../../../lib/mtproto/passwordManager";
+import AppTwoStepVerificationSetTab from "./passwordSet";
+
+export default class AppTwoStepVerificationEmailConfirmationTab extends SliderSuperTab {
+  public inputField: InputField;
+  public state: AccountPassword;
+  public plainPassword: string;
+  public newPassword: string;
+  public hint: string;
+  public email: string;
+  public length: number;
+
+  constructor(slider: SidebarSlider) {
+    super(slider, true);
+  }
+
+  protected init() {
+    this.container.classList.add('two-step-verification', 'two-step-verification-email-confirmation');
+    this.title.innerHTML = 'Recovery Email';
+
+    const section = new SettingSection({
+      caption: ' ',
+      noDelimiter: true
+    });
+
+    const emoji = '📬';
+    const doc = appStickersManager.getAnimatedEmojiSticker(emoji);
+    const stickerContainer = document.createElement('div');
+
+    if(doc) {
+      wrapSticker({
+        doc,
+        div: stickerContainer,
+        loop: false,
+        play: true,
+        width: 160,
+        height: 160,
+        emoji
+      }).then(() => {
+        // this.animation = player;
+      });
+    } else {
+      stickerContainer.classList.add('media-sticker-wrapper');
+    }
+
+    section.content.append(stickerContainer);
+
+    const inputContent = section.generateContentElement();
+
+    const inputWrapper = document.createElement('div');
+    inputWrapper.classList.add('input-wrapper');
+
+    const inputField = this.inputField = new InputField({
+      name: 'recovery-email-code',
+      label: 'Code'
+    });
+
+    const btnContinue = Button('btn-primary btn-color-primary', {text: 'CONTINUE'});
+    const btnSkip = Button('btn-primary btn-primary-transparent primary', {text: 'SKIP'});
+
+    const goNext = () => {
+      new AppTwoStepVerificationSetTab(this.slider).open();
+    };
+
+    attachClickEvent(btnContinue, (e) => {
+      
+    });
+
+    attachClickEvent(btnSkip, (e) => {
+      const popup = new PopupConfirmAction('popup-skip-email', [{
+        text: 'CANCEL',
+        isCancel: true
+      }, {
+        text: 'SKIP',
+        callback: () => {
+          //inputContent.classList.add('sidebar-left-section-disabled');
+          btnContinue.setAttribute('disabled', 'true');
+          btnSkip.setAttribute('disabled', 'true');
+          putPreloader(btnSkip);
+          passwordManager.updateSettings({
+            hint: this.hint, 
+            currentPassword: this.plainPassword,
+            newPassword: this.newPassword
+          }).then(() => {
+            goNext();
+          }, (err) => {
+            btnContinue.removeAttribute('disabled');
+            btnSkip.removeAttribute('disabled');
+          });
+        },
+        isDanger: true,
+      }], {
+        title: 'Warning',
+        text: 'No, seriously.<br/><br/>If you forget your password, you will lose access to your Telegram account. There will be no way to restore it.'
+      });
+
+      popup.show();
+    });
+
+    inputWrapper.append(inputField.container, btnContinue, btnSkip);
+
+    inputContent.append(inputWrapper);
+
+    this.scrollable.container.append(section.container);
+  }
+
+  onOpenAfterTimeout() {
+    this.inputField.input.focus();
+  }
+}

src/components/sidebarLeft/tabs/2fa/passwordSet.ts

@@ -28,7 +28,7 @@ export default class AppTwoStepVerificationSetTab extends SliderSuperTab {
       wrapSticker({
         doc,
         div: stickerContainer,
-        loop: false,
+        loop: true,
         play: true,
         width: 160,
         height: 160,

src/lib/richtextprocessor.ts

@@ -725,6 +725,10 @@ namespace RichTextProcessor {
     return !text ? null : text.match(urlRegExp);
   }
 
+  export function matchEmail(text: string) {
+    return !text ? null : text.match(emailRegExp);
+  }
+
   export function getAbbreviation(str: string, onlyFirst = false) {
     const splitted = str.trim().split(' ');
     if(!splitted[0]) return '';

src/scss/partials/_chatBubble.scss

@@ -506,6 +506,7 @@ $bubble-margin: .25rem;
   &.sticker {
     .attachment {
       border-radius: 0;
+      z-index: 1;
     }
 
     .bubble-content {