At the beginning of 2FA settings

src/components/row.ts

@@ -12,6 +12,8 @@ export default class Row {
   public checkboxField: ReturnType<typeof CheckboxField>;
   public radioField: ReturnType<typeof RadioField>;
 
+  public freezed = false;
+
   constructor(options: Partial<{
     icon: string,
     subtitle: string,
@@ -62,6 +64,7 @@ export default class Row {
 
     if(options.navigationTab) {
       this.container.addEventListener('click', () => {
+        if(this.freezed) return;
         options.navigationTab.open();
       });
       options.clickable = true;

src/components/sidebarLeft/index.ts

@@ -454,35 +454,45 @@ export class SettingSection {
   public title: HTMLElement;
   public caption: HTMLElement;
 
-  constructor(name?: string, caption?: string) {
+  constructor(options: {
+    name?: string, 
+    caption?: string,
+    noDelimiter?: boolean
+  }) {
     this.container = document.createElement('div');
     this.container.classList.add('sidebar-left-section');
 
-    const hr = document.createElement('hr');
+    if(!options.noDelimiter) {
+      const hr = document.createElement('hr');
+      this.container.append(hr);
+    }
 
-    this.content = document.createElement('div');
+    this.content = this.generateContentElement();
-    this.content.classList.add('sidebar-left-section-content');
 
-    if(name) {
+    if(options.name) {
       this.title = document.createElement('div');
       this.title.classList.add('sidebar-left-h2', 'sidebar-left-section-name');
-      this.title.innerHTML = name;
+      this.title.innerHTML = options.name;
       this.content.append(this.title);
     }
 
-    this.container.append(hr, this.content);
+    if(options.caption) {
-
+      this.caption = this.generateContentElement();
-    if(caption) {
-      this.caption = document.createElement('div');
       this.caption.classList.add('sidebar-left-section-caption');
-      this.caption.innerHTML = caption;
+      this.caption.innerHTML = options.caption;
-      this.container.append(this.caption);
     }
   }
+
+  public generateContentElement() {
+    const content = document.createElement('div');
+    content.classList.add('sidebar-left-section-content');
+    this.container.append(content);
+    return content;
+  }
 }
 
 export const generateSection = (appendTo: Scrollable, name?: string, caption?: string) => {
-  const section = new SettingSection(name, caption);
+  const section = new SettingSection({name, caption});
   appendTo.append(section.container);
   return section.content;
 };

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

@@ -0,0 +1,60 @@
+import { generateSection, 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";
+
+export default class AppTwoStepVerificationTab extends SliderSuperTab {
+  public passwordState: AccountPassword;
+
+  constructor(slider: SidebarSlider) {
+    super(slider);
+  }
+
+  protected init() {
+    this.container.classList.add('two-step-verification');
+    this.title.innerHTML = 'Two-Step Verification';
+
+    const section = new SettingSection({
+      caption: ' ',
+      noDelimiter: true
+    });
+
+    const emoji = '🔐';
+    const doc = appStickersManager.getAnimatedEmojiSticker(emoji);
+    const stickerContainer = document.createElement('div');
+
+    wrapSticker({
+      doc,
+      div: stickerContainer,
+      loop: false,
+      play: true,
+      width: 168,
+      height: 168,
+      emoji
+    }).then(() => {
+      // this.animation = player;
+    });
+
+    section.content.append(stickerContainer);
+
+    const c = section.generateContentElement();
+    if(this.passwordState.pFlags.has_password) {
+      section.caption.innerHTML = 'You have enabled Two-Step verification.<br/>You\'ll need the password you set up here to log in to your Telegram account';
+
+      const btnChangePassword = Button('btn-primary btn-transparent', {icon: 'edit', text: 'Change Password'});
+      const btnRemovePassword = Button('btn-primary btn-transparent', {icon: 'passwordoff', text: 'Turn Password Off'});
+      const btnSetRecoveryEmail = Button('btn-primary btn-transparent', {icon: 'email', text: 'Set Recovery Email'});
+
+      c.append(btnChangePassword, btnRemovePassword, btnSetRecoveryEmail);
+    } else {
+      section.caption.innerHTML = 'You can set a password that will be required when you log in on a new device in addition to the code you get in the SMS.';
+
+      const btnSetPassword = Button('btn-primary', {text: 'SET PASSWORD'});
+      c.append(btnSetPassword);
+    }
+
+    this.scrollable.container.append(section.container);
+  }
+}

src/components/sidebarLeft/tabs/privacyAndSecurity.ts

@@ -1,9 +1,11 @@
 import SidebarSlider, { SliderSuperTab } from "../../slider";
-import { generateSection } from "..";
+import { generateSection, SettingSection } from "..";
 import Row from "../../row";
 import { InputPrivacyKey, PrivacyRule } from "../../../layer";
 import appPrivacyManager from "../../../lib/appManagers/appPrivacyManager";
 import AppPrivacyPhoneNumberTab from "./privacy/phoneNumber";
+import AppTwoStepVerificationTab from "./2fa";
+import passwordManager from "../../../lib/mtproto/passwordManager";
 
 export default class AppPrivacyAndSecurityTab extends SliderSuperTab {
   constructor(slider: SidebarSlider) {
@@ -17,7 +19,7 @@ export default class AppPrivacyAndSecurityTab extends SliderSuperTab {
     const section = generateSection.bind(null, this.scrollable);
 
     {
-      const container = section('');
+      const section = new SettingSection({noDelimiter: true});
 
       const blockedUsersRow = new Row({
         icon: 'deleteuser',
@@ -26,12 +28,15 @@ export default class AppPrivacyAndSecurityTab extends SliderSuperTab {
         clickable: true
       });
 
+      const tab = new AppTwoStepVerificationTab(this.slider);
+      
       const twoFactorRow = new Row({
         icon: 'lock',
         title: 'Two-Step Verification',
-        subtitle: 'Off',
+        subtitle: 'Loading...',
-        clickable: true
+        navigationTab: tab
       });
+      twoFactorRow.freezed = true;
 
       const activeSessionRow = new Row({
         icon: 'activesessions',
@@ -40,7 +45,15 @@ export default class AppPrivacyAndSecurityTab extends SliderSuperTab {
         clickable: true
       });
 
-      container.append(blockedUsersRow.container, twoFactorRow.container, activeSessionRow.container);
+      section.content.append(blockedUsersRow.container, twoFactorRow.container, activeSessionRow.container);
+      this.scrollable.append(section.container);
+
+      passwordManager.getState().then(state => {
+        twoFactorRow.subtitle.innerText = state.pFlags.has_password ? 'On' : 'Off';
+        twoFactorRow.freezed = false;
+        tab.passwordState = state;
+        //console.log('password state', state);
+      });
     }
 
     {

src/components/wrappers.ts

@@ -772,6 +772,7 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
   }
 
   div.dataset.docId = doc.id;
+  div.classList.add('media-sticker-wrapper');
   
   //console.log('wrap sticker', doc, div, onlyThumb);
 

src/scss/partials/_leftSidebar.scss

@@ -837,7 +837,7 @@
   &-section {
     padding: .5rem 0 1rem;
   
-    &-content, &-caption {
+    &-content {
       margin: 0 .125rem;
 
       @include respond-to(not-handhelds) {
@@ -851,9 +851,10 @@
 
     &-caption {
       margin-top: 1rem;
-      font-size: 0.875rem;
+      font-size: .875rem;
       color: #707579;
       line-height: 1.2;
+      padding: 0 .875rem;
     }
 
     .btn-primary, .checkbox-field, .radio-field {
@@ -872,14 +873,18 @@
       padding: 0;
     }
 
-    &-caption {
-      padding: 0 .875rem;
-    }
-
     &-disabled {
       pointer-events: none !important;
       opacity: .25;
     }
+
+    .media-sticker-wrapper {
+      width: 86px;
+      height: 86px;
+      margin: 1px auto 29px;
+      flex: 0 0 auto;
+      position: relative;
+    }
   }
 
   &-h2 {
@@ -893,6 +898,13 @@
   user-select: none;
 }
 
+.two-step-verification {
+  .media-sticker-wrapper {
+    width: 168px;
+    height: 168px;
+  }
+}
+
 .range-setting-selector {
   padding: 1rem .875rem;