diff --git a/app/assets/javascripts/directives/views/privilegesAuthModal.js b/app/assets/javascripts/directives/views/privilegesAuthModal.js
deleted file mode 100644
index e4adb539d..000000000
--- a/app/assets/javascripts/directives/views/privilegesAuthModal.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import template from '%/directives/privileges-auth-modal.pug';
-
-class PrivilegesAuthModalCtrl {
-  /* @ngInject */
-  constructor(
-    $element,
-    $timeout
-  ) {
-    this.$element = $element;
-    this.$timeout = $timeout;
-  }
-
-  $onInit() {
-    this.authParameters = {};
-    this.sessionLengthOptions = this.application.privilegesService.getSessionLengthOptions();
-    this.application.privilegesService.getSelectedSessionLength()
-    .then((length) => {
-      this.$timeout(() => {
-        this.selectedSessionLength = length;
-      });
-    });
-    this.application.privilegesService.netCredentialsForAction(this.action)
-    .then((credentials) => {
-      this.$timeout(() => {
-        this.requiredCredentials = credentials.sort();
-      });
-    });
-  }
-
-  selectSessionLength(length) {
-    this.selectedSessionLength = length;
-  }
-
-  promptForCredential(credential) {
-    return this.application.privilegesService.displayInfoForCredential(credential).prompt;
-  }
-
-  cancel() {
-    this.dismiss();
-    this.onCancel && this.onCancel();
-  }
-
-  isCredentialInFailureState(credential) {
-    if (!this.failedCredentials) {
-      return false;
-    }
-    return this.failedCredentials.find((candidate) => {
-      return candidate === credential;
-    }) != null;
-  }
-
-  validate() {
-    const failed = [];
-    for (const cred of this.requiredCredentials) {
-      const value = this.authParameters[cred];
-      if (!value || value.length === 0) {
-        failed.push(cred);
-      }
-    }
-    this.failedCredentials = failed;
-    return failed.length === 0;
-  }
-
-  async submit() {
-    if (!this.validate()) {
-      return;
-    }
-    const result = await this.application.privilegesService.authenticateAction(
-      this.action, 
-      this.authParameters
-    );
-    this.$timeout(() => {
-      if (result.success) {
-        this.application.privilegesService.setSessionLength(this.selectedSessionLength);
-        this.onSuccess();
-        this.dismiss();
-      } else {
-        this.failedCredentials = result.failedCredentials;
-      }
-    });
-  }
-
-  dismiss() {
-    const elem = this.$element;
-    const scope = elem.scope();
-    scope.$destroy();
-    elem.remove();
-  }
-}
-
-export class PrivilegesAuthModal {
-  constructor() {
-    this.restrict = 'E';
-    this.template = template;
-    this.controller = PrivilegesAuthModalCtrl;
-    this.controllerAs = 'ctrl';
-    this.bindToController = true;
-    this.scope = {
-      action: '=',
-      onSuccess: '=',
-      onCancel: '=',
-      application: '='
-    };
-  }
-}
diff --git a/app/assets/javascripts/directives/views/privilegesAuthModal.ts b/app/assets/javascripts/directives/views/privilegesAuthModal.ts
new file mode 100644
index 000000000..48e3297ce
--- /dev/null
+++ b/app/assets/javascripts/directives/views/privilegesAuthModal.ts
@@ -0,0 +1,128 @@
+import { WebDirective } from './../../types';
+import { WebApplication } from '@/application';
+import { ProtectedAction, PrivilegeCredential, PrivilegeSessionLength } from 'snjs';
+import template from '%/directives/privileges-auth-modal.pug';
+
+type PrivilegesAuthModalScope = {
+  application: WebApplication
+  action: ProtectedAction
+  onSuccess: () => void
+  onCancel: () => void
+}
+
+class PrivilegesAuthModalCtrl implements PrivilegesAuthModalScope {
+  $element: JQLite
+  $timeout: ng.ITimeoutService
+  application!: WebApplication
+  action!: ProtectedAction
+  onSuccess!: () => void
+  onCancel!: () => void
+  authParameters: Partial<Record<PrivilegeCredential, string>> = {}
+  sessionLengthOptions!: { value: PrivilegeSessionLength, label: string }[]
+  selectedSessionLength!: PrivilegeSessionLength
+  requiredCredentials!: PrivilegeCredential[]
+  failedCredentials!: PrivilegeCredential[]
+
+  /* @ngInject */
+  constructor(
+    $element: JQLite,
+    $timeout: ng.ITimeoutService
+  ) {
+    this.$element = $element;
+    this.$timeout = $timeout;
+  }
+
+  $onInit() {
+    this.sessionLengthOptions = this.application!.privilegesService!
+      .getSessionLengthOptions();
+    this.application.privilegesService!.getSelectedSessionLength()
+      .then((length) => {
+        this.$timeout(() => {
+          this.selectedSessionLength = length;
+        });
+      });
+    this.application.privilegesService!.netCredentialsForAction(this.action)
+      .then((credentials) => {
+        this.$timeout(() => {
+          this.requiredCredentials = credentials.sort();
+        });
+      });
+  }
+
+  selectSessionLength(length: PrivilegeSessionLength) {
+    this.selectedSessionLength = length;
+  }
+
+  promptForCredential(credential: PrivilegeCredential) {
+    return this.application.privilegesService!.displayInfoForCredential(credential).prompt;
+  }
+
+  cancel() {
+    this.dismiss();
+    this.onCancel && this.onCancel();
+  }
+
+  isCredentialInFailureState(credential: PrivilegeCredential) {
+    if (!this.failedCredentials) {
+      return false;
+    }
+    return this.failedCredentials.find((candidate) => {
+      return candidate === credential;
+    }) != null;
+  }
+
+  validate() {
+    const failed = [];
+    for (const cred of this.requiredCredentials) {
+      const value = this.authParameters[cred];
+      if (!value || value.length === 0) {
+        failed.push(cred);
+      }
+    }
+    this.failedCredentials = failed;
+    return failed.length === 0;
+  }
+
+  async submit() {
+    if (!this.validate()) {
+      return;
+    }
+    const result = await this.application.privilegesService!.authenticateAction(
+      this.action,
+      this.authParameters
+    );
+    this.$timeout(() => {
+      if (result.success) {
+        this.application.privilegesService!.setSessionLength(this.selectedSessionLength);
+        this.onSuccess();
+        this.dismiss();
+      } else {
+        this.failedCredentials = result.failedCredentials;
+      }
+    });
+  }
+
+  dismiss() {
+    const elem = this.$element;
+    const scope = elem.scope();
+    scope.$destroy();
+    elem.remove();
+  }
+}
+
+export class PrivilegesAuthModal extends WebDirective {
+  constructor() {
+    super();
+    this.restrict = 'E';
+    this.template = template;
+    this.controller = PrivilegesAuthModalCtrl;
+    this.controllerAs = 'ctrl';
+    this.bindToController = true;
+    this.scope = {
+      action: '=',
+      onSuccess: '=',
+      onCancel: '=',
+      application: '='
+    };
+  }
+}
diff --git a/app/assets/javascripts/directives/views/privilegesManagementModal.js b/app/assets/javascripts/directives/views/privilegesManagementModal.js
deleted file mode 100644
index 11a97b92a..000000000
--- a/app/assets/javascripts/directives/views/privilegesManagementModal.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import template from '%/directives/privileges-management-modal.pug';
-import { PrivilegeCredentials } from 'snjs';
-import { PureCtrl } from '@Controllers/abstract/pure_ctrl';
-
-class PrivilegesManagementModalCtrl extends PureCtrl {
-  /* @ngInject */
-  constructor(
-    $timeout,
-    $element
-  ) {
-    super($timeout);
-    this.$element = $element;
-  }
-  
-  onAppLaunch() {
-    super.onAppLaunch();
-    this.hasPasscode = this.application.hasPasscode();
-    this.hasAccount = !this.application.noAccount();
-    this.reloadPrivileges();
-  }
-
-  displayInfoForCredential(credential) {
-    const info = this.application.privilegesService.displayInfoForCredential(credential);
-    if (credential === PrivilegeCredentials.LocalPasscode) {
-      info.availability = this.hasPasscode;
-    } else if (credential === PrivilegeCredentials.AccountPassword) {
-      info.availability = this.hasAccount;
-    } else {
-      info.availability = true;
-    }
-    return info;
-  }
-
-  displayInfoForAction(action) {
-    return this.application.privilegesService.displayInfoForAction(action).label;
-  }
-
-  isCredentialRequiredForAction(action, credential) {
-    if (!this.privileges) {
-      return false;
-    }
-    return this.privileges.isCredentialRequiredForAction(action, credential);
-  }
-
-  async clearSession() {
-    await this.application.privilegesService.clearSession();
-    this.reloadPrivileges();
-  }
-
-  async reloadPrivileges() {
-    this.availableActions = this.application.privilegesService.getAvailableActions();
-    this.availableCredentials = this.application.privilegesService.getAvailableCredentials();
-    const sessionEndDate = await this.application.privilegesService.getSessionExpirey();
-    this.sessionExpirey = sessionEndDate.toLocaleString();
-    this.sessionExpired = new Date() >= sessionEndDate;
-    this.credentialDisplayInfo = {};
-    for (const cred of this.availableCredentials) {
-      this.credentialDisplayInfo[cred] = this.displayInfoForCredential(cred);
-    }
-    const privs = await this.application.privilegesService.getPrivileges();
-    this.$timeout(() => {
-      this.privileges = privs;
-    });
-  }
-
-  checkboxValueChanged(action, credential) {
-    this.privileges.toggleCredentialForAction(action, credential);
-    this.application.privilegesService.savePrivileges();
-  }
-
-  cancel() {
-    this.dismiss();
-    this.onCancel && this.onCancel();
-  }
-
-  dismiss() {
-    const elem = this.$element;
-    const scope = elem.scope();
-    scope.$destroy();
-    elem.remove();
-  }
-}
-
-export class PrivilegesManagementModal {
-  constructor() {
-    this.restrict = 'E';
-    this.template = template;
-    this.controller = PrivilegesManagementModalCtrl;
-    this.controllerAs = 'ctrl';
-    this.bindToController = true;
-    this.scope = {
-      application: '='
-    };
-  }
-}
diff --git a/app/assets/javascripts/directives/views/privilegesManagementModal.ts b/app/assets/javascripts/directives/views/privilegesManagementModal.ts
new file mode 100644
index 000000000..9e72ef841
--- /dev/null
+++ b/app/assets/javascripts/directives/views/privilegesManagementModal.ts
@@ -0,0 +1,118 @@
+import { WebDirective } from './../../types';
+import { WebApplication } from '@/application';
+import template from '%/directives/privileges-management-modal.pug';
+import { PrivilegeCredential, ProtectedAction, SNPrivileges, PrivilegeSessionLength } from 'snjs';
+import { PureCtrl } from '@Controllers/abstract/pure_ctrl';
+import { PrivilegeMutator } from '@/../../../../snjs/dist/@types/models';
+
+type DisplayInfo = {
+  label: string
+  prompt: string
+}
+
+class PrivilegesManagementModalCtrl extends PureCtrl {
+
+  hasPasscode = false
+  hasAccount = false
+  $element: JQLite
+  application!: WebApplication
+  privileges!: SNPrivileges
+  availableActions!: ProtectedAction[]
+  availableCredentials!: PrivilegeCredential[]
+  sessionExpirey!: string
+  sessionExpired = true
+  credentialDisplayInfo: Partial<Record<PrivilegeCredential, DisplayInfo>> = {}
+  onCancel!: () => void
+
+  /* @ngInject */
+  constructor(
+    $timeout: ng.ITimeoutService,
+    $element: JQLite
+  ) {
+    super($timeout);
+    this.$element = $element;
+  }
+  
+  async onAppLaunch() {
+    super.onAppLaunch();
+    this.hasPasscode = this.application.hasPasscode();
+    this.hasAccount = !this.application.noAccount();
+    this.reloadPrivileges();
+  }
+
+  displayInfoForCredential(credential: PrivilegeCredential) {
+    const info: any = this.application.privilegesService!.displayInfoForCredential(credential);
+    if (credential === PrivilegeCredential.LocalPasscode) {
+      info.availability = this.hasPasscode;
+    } else if (credential === PrivilegeCredential.AccountPassword) {
+      info.availability = this.hasAccount;
+    } else {
+      info.availability = true;
+    }
+    return info;
+  }
+
+  displayInfoForAction(action: ProtectedAction) {
+    return this.application.privilegesService!.displayInfoForAction(action).label;
+  }
+
+  isCredentialRequiredForAction(action: ProtectedAction, credential: PrivilegeCredential) {
+    if (!this.privileges) {
+      return false;
+    }
+    return this.privileges.isCredentialRequiredForAction(action, credential);
+  }
+
+  async clearSession() {
+    await this.application.privilegesService!.clearSession();
+    this.reloadPrivileges();
+  }
+
+  async reloadPrivileges() {
+    this.availableActions = this.application.privilegesService!.getAvailableActions();
+    this.availableCredentials = this.application.privilegesService!.getAvailableCredentials();
+    const sessionEndDate = await this.application.privilegesService!.getSessionExpirey();
+    this.sessionExpirey = sessionEndDate.toLocaleString();
+    this.sessionExpired = new Date() >= sessionEndDate;
+    for (const cred of this.availableCredentials) {
+      this.credentialDisplayInfo[cred] = this.displayInfoForCredential(cred);
+    }
+    const privs = await this.application.privilegesService!.getPrivileges();
+    this.$timeout(() => {
+      this.privileges = privs;
+    });
+  }
+
+  checkboxValueChanged(action: ProtectedAction, credential: PrivilegeCredential) {
+    this.application.changeAndSaveItem(this.privileges.uuid, (m) => {
+      const mutator = m as PrivilegeMutator;
+      mutator.toggleCredentialForAction(action, credential);
+    })
+  }
+
+  cancel() {
+    this.dismiss();
+    this.onCancel && this.onCancel();
+  }
+
+  dismiss() {
+    const elem = this.$element;
+    const scope = elem.scope();
+    scope.$destroy();
+    elem.remove();
+  }
+}
+
+export class PrivilegesManagementModal extends WebDirective {
+  constructor() {
+    super();
+    this.restrict = 'E';
+    this.template = template;
+    this.controller = PrivilegesManagementModalCtrl;
+    this.controllerAs = 'ctrl';
+    this.bindToController = true;
+    this.scope = {
+      application: '='
+    };
+  }
+}
diff --git a/app/assets/javascripts/directives/views/syncResolutionMenu.js b/app/assets/javascripts/directives/views/syncResolutionMenu.ts
similarity index 65%
rename from app/assets/javascripts/directives/views/syncResolutionMenu.js
rename to app/assets/javascripts/directives/views/syncResolutionMenu.ts
index b953a8ebb..e477ee65d 100644
--- a/app/assets/javascripts/directives/views/syncResolutionMenu.js
+++ b/app/assets/javascripts/directives/views/syncResolutionMenu.ts
@@ -1,15 +1,29 @@
+import { WebApplication } from '@/application';
+import { WebDirective } from './../../types';
 import template from '%/directives/sync-resolution-menu.pug';
 
 class SyncResolutionMenuCtrl {
+
+  closeFunction!: () => void
+  application!: WebApplication
+
+  $timeout: ng.ITimeoutService
+  status: Partial<{
+    backupFinished: boolean,
+    resolving: boolean,
+    attemptedResolution: boolean,
+    success: boolean
+    fail: boolean
+  }> = {}
+
   /* @ngInject */
   constructor(
-    $timeout
+    $timeout: ng.ITimeoutService
   ) {
     this.$timeout = $timeout;
-    this.status = {};
   }
 
-  downloadBackup(encrypted) {
+  downloadBackup(encrypted: boolean) {
     this.application.getArchiveService().downloadBackup(encrypted);
     this.status.backupFinished = true;
   }
@@ -24,7 +38,7 @@ class SyncResolutionMenuCtrl {
     this.$timeout(() => {
       this.status.resolving = false;
       this.status.attemptedResolution = true;
-      if (this.application.getSyncStatus().isOutOfSync()) {
+      if (this.application.isOutOfSync()) {
         this.status.fail = true;
       } else {
         this.status.success = true;
@@ -39,8 +53,9 @@ class SyncResolutionMenuCtrl {
   }
 }
 
-export class SyncResolutionMenu {
+export class SyncResolutionMenu extends WebDirective {
   constructor() {
+    super();
     this.restrict = 'E';
     this.template = template;
     this.controller = SyncResolutionMenuCtrl;