From 03d01e822dd62b6555b72f829d760ec84aec2c4f Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Sun, 31 Oct 2021 10:29:03 +0100
Subject: [PATCH] basic modal dialog show/hide

---
 app/adapters/application.js                   |   3 +-
 app/adapters/node.js                          |   4 +-
 app/adapters/user.js                          |  13 +-
 app/app.js                                    |   1 -
 app/authenticators/auth-token.js              |  11 +-
 app/base/routing.js                           |   2 -
 app/components/modal/new_folder.hbs           |   4 +-
 app/components/modal/new_folder.js            |   5 +-
 app/components/nav/topbar.js                  |   5 +-
 app/components/role/add.js                    |   1 -
 app/components/role/edit.js                   |   1 -
 app/components/role/permission.js             |  10 +-
 app/components/role/permission_group.js       |  15 +-
 app/components/role/table_row.js              |   2 +-
 app/components/tag/new.js                     |  16 ++-
 app/components/user/add.js                    |   2 -
 app/components/user/change_password.js        |   9 +-
 app/components/user/edit.js                   |   1 -
 app/components/user/table_row.js              |   3 +-
 app/controllers/authenticated/index.js        |  18 +--
 app/controllers/login.js                      |   8 +-
 app/models/automate.js                        |   1 -
 app/models/content_type.js                    |   1 -
 app/models/document.js                        |   1 -
 app/models/folder.js                          |   1 -
 app/models/group.js                           |   1 -
 app/models/node.js                            |   1 -
 app/models/permission.js                      |   1 -
 app/models/role.js                            |   1 -
 app/models/user.js                            |   1 -
 app/modifiers/show-when.js                    |  14 ++
 app/router.js                                 |   5 +-
 app/routes/application.js                     |   4 +-
 app/routes/authenticated/automates/index.js   |   1 -
 app/routes/authenticated/groups.js            |   3 +-
 app/routes/authenticated/index.js             |   2 -
 app/routes/authenticated/roles/add.js         |   1 -
 app/routes/authenticated/roles/edit.js        |  13 +-
 app/routes/authenticated/roles/index.js       |   1 -
 app/routes/authenticated/tags.js              |   1 -
 app/routes/authenticated/users/add.js         |   5 +-
 .../authenticated/users/change_password.js    |   3 +-
 app/routes/authenticated/users/edit.js        |   6 +-
 app/routes/authenticated/users/index.js       |   2 -
 app/routes/login.js                           |   5 +-
 app/services/current-user.js                  |   3 +-
 app/services/session.js                       |   5 +-
 app/session-stores/application.js             |   3 +-
 app/templates/authenticated/index.hbs         |   6 +-
 ember-cli-build.js                            |   2 -
 package-lock.json                             | 130 ++++++++++++++++++
 package.json                                  |   1 +
 tests/acceptance/roles-test.js                |   4 +-
 tests/acceptance/tags-test.js                 |   4 +-
 tests/integration/modifiers/show-when-test.js |  15 ++
 55 files changed, 244 insertions(+), 138 deletions(-)
 create mode 100644 app/modifiers/show-when.js
 create mode 100644 tests/integration/modifiers/show-when-test.js

diff --git a/app/adapters/application.js b/app/adapters/application.js
index 90c4dd2..14f50f8 100644
--- a/app/adapters/application.js
+++ b/app/adapters/application.js
@@ -2,7 +2,6 @@ import JSONAPIAdapter from '@ember-data/adapter/json-api';
 import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 
-
 export default class ApplicationAdapter extends JSONAPIAdapter {
   namespace = 'api';
   host = 'http://127.0.0.1:8000';
@@ -12,7 +11,7 @@ export default class ApplicationAdapter extends JSONAPIAdapter {
     return `${super.buildURL(...args)}/`;
   }
 
-  @computed('session.data.authenticated.token')
+  @computed('session.data.authenticated.token', 'session.isAuthenticated')
   get headers() {
     let _headers = {},
       token;
diff --git a/app/adapters/node.js b/app/adapters/node.js
index 48bbf44..6dffdad 100644
--- a/app/adapters/node.js
+++ b/app/adapters/node.js
@@ -1,8 +1,6 @@
 import ApplicationAdapter from './application';
 
-
 export default class NodeAdapter extends ApplicationAdapter {
-
   findNode(node_id) {
     let url, ret;
 
@@ -11,4 +9,4 @@ export default class NodeAdapter extends ApplicationAdapter {
 
     return ret;
   }
-}
\ No newline at end of file
+}
diff --git a/app/adapters/user.js b/app/adapters/user.js
index 6cd8639..249c173 100644
--- a/app/adapters/user.js
+++ b/app/adapters/user.js
@@ -1,18 +1,16 @@
 import ApplicationAdapter from './application';
 
-
 export default class UserAdapter extends ApplicationAdapter {
-
   changePassword(model, new_password) {
     const url = this.buildURL('user', model.id) + 'change-password/';
 
-    return this.ajax(url, 'POST',  {
+    return this.ajax(url, 'POST', {
       data: {
-        'password': new_password
+        password: new_password,
       },
       headers: {
-        'Content-Type': 'application/json'
-      }
+        'Content-Type': 'application/json',
+      },
     });
   }
 
@@ -30,5 +28,4 @@ export default class UserAdapter extends ApplicationAdapter {
 
     return originalUrl;
   }
-
-}
\ No newline at end of file
+}
diff --git a/app/app.js b/app/app.js
index 32770b8..1953ae5 100644
--- a/app/app.js
+++ b/app/app.js
@@ -4,7 +4,6 @@ import loadInitializers from 'ember-load-initializers';
 import config from 'papermerge/config/environment';
 import 'bootstrap';
 
-
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;
diff --git a/app/authenticators/auth-token.js b/app/authenticators/auth-token.js
index b70e272..3704479 100644
--- a/app/authenticators/auth-token.js
+++ b/app/authenticators/auth-token.js
@@ -1,6 +1,5 @@
 import Base from 'ember-simple-auth/authenticators/base';
 
-
 export default class AuthToken extends Base {
   /*
   Simple token based authenticator
@@ -13,7 +12,7 @@ export default class AuthToken extends Base {
   async restore(data) {
     /**
      * Restores session token from the cookie.
-    */
+     */
     let { token } = data;
 
     if (token) {
@@ -27,11 +26,11 @@ export default class AuthToken extends Base {
     let response, error;
 
     response = await fetch('http://localhost:8000/api/auth-token/', {
-      'method': 'POST',
-      'headers': {
-        'Content-Type': 'application/json'
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
       },
-      body: JSON.stringify({username, password})
+      body: JSON.stringify({ username, password }),
     });
 
     if (response.ok) {
diff --git a/app/base/routing.js b/app/base/routing.js
index 35434d0..3078d32 100644
--- a/app/base/routing.js
+++ b/app/base/routing.js
@@ -1,9 +1,7 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
-
 export default class BaseRoute extends Route {
-
   @service session;
 
   beforeModel(transition) {
diff --git a/app/components/modal/new_folder.hbs b/app/components/modal/new_folder.hbs
index 220319a..58c7af9 100644
--- a/app/components/modal/new_folder.hbs
+++ b/app/components/modal/new_folder.hbs
@@ -1,6 +1,8 @@
+
 <Modal::Base
   @title="Create Folder"
   @actionTitle="Create"
+  @onClose={{@onClose}}
   @onSubmit={{this.onSubmit}}
   ...attributes
 >
@@ -9,6 +11,6 @@
     id="folder-title"
     class="form-control"
     @type="text"
-    @value="{{this.title}}"
+    @value={{this.title}}
   />
 </Modal::Base>
\ No newline at end of file
diff --git a/app/components/modal/new_folder.js b/app/components/modal/new_folder.js
index c68a4cf..959912a 100644
--- a/app/components/modal/new_folder.js
+++ b/app/components/modal/new_folder.js
@@ -2,12 +2,15 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
+import { Modal } from 'bootstrap';
 
 export default class NewFolderComponent extends Component {
   @tracked title = '';
 
   @action
   onSubmit() {
-    console.log(`title ${this.title}`);
+    console.log(`title=${this.title}`);
+    this.args.onClose();
   }
+
 }
diff --git a/app/components/nav/topbar.js b/app/components/nav/topbar.js
index 7782d6c..6147a66 100644
--- a/app/components/nav/topbar.js
+++ b/app/components/nav/topbar.js
@@ -1,7 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import {inject as service} from '@ember/service';
-
+import { inject as service } from '@ember/service';
 
 export default class TopbarComponent extends Component {
   @service session;
@@ -11,4 +10,4 @@ export default class TopbarComponent extends Component {
   logout() {
     this.session.invalidate();
   }
-}
\ No newline at end of file
+}
diff --git a/app/components/role/add.js b/app/components/role/add.js
index 48c903d..708dad8 100644
--- a/app/components/role/add.js
+++ b/app/components/role/add.js
@@ -4,7 +4,6 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { group_perms_by_model } from 'papermerge/utils';
 
-
 class AddRoleComponent extends Component {
   @service store;
   @service router;
diff --git a/app/components/role/edit.js b/app/components/role/edit.js
index 25f6faf..4096a36 100644
--- a/app/components/role/edit.js
+++ b/app/components/role/edit.js
@@ -4,7 +4,6 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { group_perms_by_model } from 'papermerge/utils';
 
-
 class EditRoleComponent extends Component {
   @service router;
 
diff --git a/app/components/role/permission.js b/app/components/role/permission.js
index 498a204..f82ee2e 100644
--- a/app/components/role/permission.js
+++ b/app/components/role/permission.js
@@ -1,9 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 
-
 class PermissionComponent extends Component {
-
   get isChecked() {
     /*
     A permission is checked only if given current permission
@@ -11,7 +9,7 @@ class PermissionComponent extends Component {
     */
     let role_perm_ids;
 
-    role_perm_ids = this.args.role.permissions.map(p => p.id);
+    role_perm_ids = this.args.role.permissions.map((p) => p.id);
 
     return role_perm_ids.includes(this.args.permission.id);
   }
@@ -21,11 +19,7 @@ class PermissionComponent extends Component {
     Just forwards the event to parent component, which will take care of
     adding/removing permission.
     */
-    this.args.onChange(
-      value,
-      this.args.role,
-      this.args.permission
-    );
+    this.args.onChange(value, this.args.role, this.args.permission);
   }
 }
 
diff --git a/app/components/role/permission_group.js b/app/components/role/permission_group.js
index 8ecd6be..a356289 100644
--- a/app/components/role/permission_group.js
+++ b/app/components/role/permission_group.js
@@ -1,8 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 
-
-
 class PermissionGroupComponent extends Component {
   /*
   A permission group is a set of four permissions
@@ -28,13 +26,12 @@ class PermissionGroupComponent extends Component {
     `this.args.perm_group.perms`) are included in
     `this.args.role.permissions`.
     */
-    let role_perm_ids,
-      group_perm_ids;
+    let role_perm_ids, group_perm_ids;
 
-    role_perm_ids = this.args.role.permissions.map(p => p.id);
-    group_perm_ids = this.args.perm_group.perms.map(p => p.id);
+    role_perm_ids = this.args.role.permissions.map((p) => p.id);
+    group_perm_ids = this.args.perm_group.perms.map((p) => p.id);
 
-    return group_perm_ids.every(v => role_perm_ids.includes(v));
+    return group_perm_ids.every((v) => role_perm_ids.includes(v));
   }
 
   set isChecked(value) {
@@ -72,13 +69,13 @@ class PermissionGroupComponent extends Component {
     if (value) {
       // user chose to select (he checked) all
       // permissions in the group
-      this.args.perm_group.perms.forEach(perm => {
+      this.args.perm_group.perms.forEach((perm) => {
         that.addPermission(role, perm);
       });
     } else {
       // user chose to unselect (i.e. he unchecked) all
       // permissions in the group
-      this.args.perm_group.perms.forEach(perm => {
+      this.args.perm_group.perms.forEach((perm) => {
         that.removePermission(role, perm);
       });
     }
diff --git a/app/components/role/table_row.js b/app/components/role/table_row.js
index fe61b63..11c8086 100644
--- a/app/components/role/table_row.js
+++ b/app/components/role/table_row.js
@@ -10,4 +10,4 @@ class TableRowComponent extends Component {
   }
 }
 
-export default TableRowComponent;
\ No newline at end of file
+export default TableRowComponent;
diff --git a/app/components/tag/new.js b/app/components/tag/new.js
index 81465c4..a4e7bd0 100644
--- a/app/components/tag/new.js
+++ b/app/components/tag/new.js
@@ -50,13 +50,15 @@ export default class NewTagComponent extends Component {
 
   @action
   onCreate() {
-    this.store.createRecord('tag', {
-      name: this.new_name,
-      description: this.new_description,
-      pinned: this.new_pinned,
-      bg_color: this.new_bg_color,
-      fg_color: this.new_fg_color,
-    }).save();
+    this.store
+      .createRecord('tag', {
+        name: this.new_name,
+        description: this.new_description,
+        pinned: this.new_pinned,
+        bg_color: this.new_bg_color,
+        fg_color: this.new_fg_color,
+      })
+      .save();
 
     this._empty_form();
   }
diff --git a/app/components/user/add.js b/app/components/user/add.js
index ad5227a..7509b05 100644
--- a/app/components/user/add.js
+++ b/app/components/user/add.js
@@ -3,7 +3,6 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 
-
 class AddUserComponent extends Component {
   /*
   Form component to add new user.
@@ -49,7 +48,6 @@ class AddUserComponent extends Component {
 
     this.router.transitionTo('authenticated.users');
   }
-
 }
 
 export default AddUserComponent;
diff --git a/app/components/user/change_password.js b/app/components/user/change_password.js
index cb4b624..a385f69 100644
--- a/app/components/user/change_password.js
+++ b/app/components/user/change_password.js
@@ -3,7 +3,6 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 
-
 class ChangeUserPasswordComponent extends Component {
   @service router;
 
@@ -12,10 +11,10 @@ class ChangeUserPasswordComponent extends Component {
 
   get disabled() {
     /**
-    * If both password inputs are empty submit button is disabled.
-    * Also, submit form button will be disabled if given
-    * passwords do not match.
-    */
+     * If both password inputs are empty submit button is disabled.
+     * Also, submit form button will be disabled if given
+     * passwords do not match.
+     */
     if (this.new_password_1 && new_password_2) {
       if (this.new_password_1 === this.new_password_2) {
         return false;
diff --git a/app/components/user/edit.js b/app/components/user/edit.js
index 5975188..5dceeb9 100644
--- a/app/components/user/edit.js
+++ b/app/components/user/edit.js
@@ -4,7 +4,6 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { group_perms_by_model } from 'papermerge/utils';
 
-
 class EditUserComponent extends Component {
   @service router;
 
diff --git a/app/components/user/table_row.js b/app/components/user/table_row.js
index 03bb340..17b64cf 100644
--- a/app/components/user/table_row.js
+++ b/app/components/user/table_row.js
@@ -1,7 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 
-
 class TableRowComponent extends Component {
   @action
   async onRemove(user) {
@@ -9,4 +8,4 @@ class TableRowComponent extends Component {
   }
 }
 
-export default TableRowComponent;
\ No newline at end of file
+export default TableRowComponent;
diff --git a/app/controllers/authenticated/index.js b/app/controllers/authenticated/index.js
index 5e5c1c2..5baa155 100644
--- a/app/controllers/authenticated/index.js
+++ b/app/controllers/authenticated/index.js
@@ -1,16 +1,18 @@
-import { Modal } from 'bootstrap';
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
+import { tracked } from "@glimmer/tracking";
 
 export default class IndexController extends Controller {
 
-  @action
-  newFolder(modal_elem_id) {
-    let modal, dom_elem;
+  @tracked show_new_folder = false;
 
-    dom_elem = document.getElementById(modal_elem_id);
+  @action
+  newFolder() {
+    this.show_new_folder = true;
+  }
 
-    modal = new Modal(dom_elem, {});
-    modal.show();
+  @action
+  closeNewFolder() {
+    this.show_new_folder = false;
   }
-}
\ No newline at end of file
+}
diff --git a/app/controllers/login.js b/app/controllers/login.js
index 2463c00..00a4bd5 100644
--- a/app/controllers/login.js
+++ b/app/controllers/login.js
@@ -1,8 +1,7 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
-import { action } from "@ember/object";
-import { tracked } from "@glimmer/tracking";
-
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 export default class LoginController extends Controller {
   @tracked errorMessage;
@@ -14,7 +13,6 @@ export default class LoginController extends Controller {
 
     let { identification, password } = this;
 
-
     try {
       await this.session.authenticate(
         'authenticator:auth-token',
@@ -40,4 +38,4 @@ export default class LoginController extends Controller {
   updatePassword(event) {
     this.password = event.target.value;
   }
-}
\ No newline at end of file
+}
diff --git a/app/models/automate.js b/app/models/automate.js
index e908b67..6ed85b1 100644
--- a/app/models/automate.js
+++ b/app/models/automate.js
@@ -1,6 +1,5 @@
 import Model, { attr, hasMany } from '@ember-data/model';
 
-
 export default class AutomateModel extends Model {
   @attr name;
   @attr match;
diff --git a/app/models/content_type.js b/app/models/content_type.js
index b0a1f60..c5b500e 100644
--- a/app/models/content_type.js
+++ b/app/models/content_type.js
@@ -1,6 +1,5 @@
 import Model, { attr, hasMany } from '@ember-data/model';
 
-
 class ContentTypeModel extends Model {
   @attr model;
   @hasMany('permission') permissions;
diff --git a/app/models/document.js b/app/models/document.js
index 43a56f4..e69bcf6 100644
--- a/app/models/document.js
+++ b/app/models/document.js
@@ -1,7 +1,6 @@
 import { attr } from '@ember-data/model';
 import NodeModel from './node';
 
-
 export default class DocumentModel extends NodeModel {
   @attr image;
 
diff --git a/app/models/folder.js b/app/models/folder.js
index 26882fc..4a127ee 100644
--- a/app/models/folder.js
+++ b/app/models/folder.js
@@ -1,5 +1,4 @@
 import { attr } from '@ember-data/model';
 import NodeModel from './node';
 
-
 export default class FolderModel extends NodeModel {}
diff --git a/app/models/group.js b/app/models/group.js
index 1ea5b29..5e1589c 100644
--- a/app/models/group.js
+++ b/app/models/group.js
@@ -1,6 +1,5 @@
 import Model, { attr } from '@ember-data/model';
 
-
 class GroupModel extends Model {
   @attr name;
 }
diff --git a/app/models/node.js b/app/models/node.js
index 4c95f9e..45e35cb 100644
--- a/app/models/node.js
+++ b/app/models/node.js
@@ -1,6 +1,5 @@
 import Model, { attr, hasMany, belongsTo } from '@ember-data/model';
 
-
 export default class NodeModel extends Model {
   @attr title;
   @attr model;
diff --git a/app/models/permission.js b/app/models/permission.js
index 8340fa6..259e088 100644
--- a/app/models/permission.js
+++ b/app/models/permission.js
@@ -1,6 +1,5 @@
 import Model, { attr, belongsTo } from '@ember-data/model';
 
-
 class PermissionModel extends Model {
   @attr name;
   @attr codename;
diff --git a/app/models/role.js b/app/models/role.js
index 6186f2b..2cd30fb 100644
--- a/app/models/role.js
+++ b/app/models/role.js
@@ -1,6 +1,5 @@
 import Model, { attr, hasMany } from '@ember-data/model';
 
-
 class RoleModel extends Model {
   @attr name;
   @hasMany('permission') permissions;
diff --git a/app/models/user.js b/app/models/user.js
index 3121cee..c5a153a 100644
--- a/app/models/user.js
+++ b/app/models/user.js
@@ -1,6 +1,5 @@
 import Model, { attr, belongsTo } from '@ember-data/model';
 
-
 class UserModel extends Model {
   @attr username;
   @attr email;
diff --git a/app/modifiers/show-when.js b/app/modifiers/show-when.js
new file mode 100644
index 0000000..e604427
--- /dev/null
+++ b/app/modifiers/show-when.js
@@ -0,0 +1,14 @@
+import { Modal } from 'bootstrap';
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, [isDisplayed]) => {
+  let modal;
+
+  modal = Modal.getOrCreateInstance(element);
+
+  if (isDisplayed) {
+    modal.show();
+  } else {
+    modal.hide();
+  }
+});
diff --git a/app/router.js b/app/router.js
index b99ae90..b46490e 100644
--- a/app/router.js
+++ b/app/router.js
@@ -7,7 +7,7 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function () {
-  this.route('authenticated', { path: '' }, function() {
+  this.route('authenticated', { path: '' }, function () {
     this.route('documents');
     this.route('inbox');
     this.route('document', { path: '/document/:document_id' });
@@ -15,7 +15,6 @@ Router.map(function () {
     this.route('nodes', { path: '/nodes/:node_id' });
     this.route('nodes', { path: '/nodes/' });
 
-
     this.route('tags');
 
     this.route('automates', function () {
@@ -33,7 +32,7 @@ Router.map(function () {
     this.route('users', function () {
       this.route('add');
       this.route('edit', { path: '/:user_id/edit' });
-      this.route('change_password', { path: '/:user_id/change-password'});
+      this.route('change_password', { path: '/:user_id/change-password' });
       this.route('index', { path: '/' });
     });
 
diff --git a/app/routes/application.js b/app/routes/application.js
index 90d85fb..6768ea9 100644
--- a/app/routes/application.js
+++ b/app/routes/application.js
@@ -12,8 +12,8 @@ export default class ApplicationRoute extends Route {
   async _loadCurrentUser() {
     try {
       await this.currentUser.loadCurrentUser();
-    } catch(err) {
+    } catch (err) {
       await this.session.invalidate();
     }
   }
-};
\ No newline at end of file
+}
diff --git a/app/routes/authenticated/automates/index.js b/app/routes/authenticated/automates/index.js
index 9f39aa0..2168ce0 100644
--- a/app/routes/authenticated/automates/index.js
+++ b/app/routes/authenticated/automates/index.js
@@ -1,7 +1,6 @@
 import { inject as service } from '@ember/service';
 import BaseRoute from 'papermerge/base/routing';
 
-
 export default class AutomatesRoute extends BaseRoute {
   @service store;
 
diff --git a/app/routes/authenticated/groups.js b/app/routes/authenticated/groups.js
index 1163f4a..9fda41c 100644
--- a/app/routes/authenticated/groups.js
+++ b/app/routes/authenticated/groups.js
@@ -1,6 +1,5 @@
 import { inject as service } from '@ember/service';
-import BaseRoute from 'papermerge/base/routing'
-
+import BaseRoute from 'papermerge/base/routing';
 
 export default class GroupsRoute extends BaseRoute {
   @service store;
diff --git a/app/routes/authenticated/index.js b/app/routes/authenticated/index.js
index 83a0eca..0ddce9e 100644
--- a/app/routes/authenticated/index.js
+++ b/app/routes/authenticated/index.js
@@ -1,9 +1,7 @@
 import { inject as service } from '@ember/service';
 import BaseRoute from 'papermerge/base/routing';
 
-
 export default class IndexRoute extends BaseRoute {
-
   @service store;
   @service currentUser;
 
diff --git a/app/routes/authenticated/roles/add.js b/app/routes/authenticated/roles/add.js
index 5c8578c..2024071 100644
--- a/app/routes/authenticated/roles/add.js
+++ b/app/routes/authenticated/roles/add.js
@@ -1,7 +1,6 @@
 import { inject as service } from '@ember/service';
 import BaseRoute from 'papermerge/base/routing';
 
-
 export default class AddRoleRoute extends BaseRoute {
   @service store;
 
diff --git a/app/routes/authenticated/roles/edit.js b/app/routes/authenticated/roles/edit.js
index 742fbd1..c8b0f7f 100644
--- a/app/routes/authenticated/roles/edit.js
+++ b/app/routes/authenticated/roles/edit.js
@@ -1,19 +1,16 @@
 import { inject as service } from '@ember/service';
 import RSVP from 'rsvp';
-import BaseRoute from 'papermerge/base/routing'
-
+import BaseRoute from 'papermerge/base/routing';
 
 export default class EditRoleRoute extends BaseRoute {
   @service store;
 
   async model(params) {
     return RSVP.hash({
-      role: this.store.findRecord(
-        'role',
-        params.role_id,
-        { include: 'permissions' }
-      ),
-      all_permissions: this.store.findAll('permission')
+      role: this.store.findRecord('role', params.role_id, {
+        include: 'permissions',
+      }),
+      all_permissions: this.store.findAll('permission'),
     });
   }
 }
diff --git a/app/routes/authenticated/roles/index.js b/app/routes/authenticated/roles/index.js
index d20a63d..dfdd7a9 100644
--- a/app/routes/authenticated/roles/index.js
+++ b/app/routes/authenticated/roles/index.js
@@ -1,7 +1,6 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
-
 export default class RolesRoute extends Route {
   @service store;
   @service session;
diff --git a/app/routes/authenticated/tags.js b/app/routes/authenticated/tags.js
index 67f9b06..e5afb59 100644
--- a/app/routes/authenticated/tags.js
+++ b/app/routes/authenticated/tags.js
@@ -1,7 +1,6 @@
 import { inject as service } from '@ember/service';
 import BaseRoute from 'papermerge/base/routing';
 
-
 export default class TagsRoute extends BaseRoute {
   @service store;
 
diff --git a/app/routes/authenticated/users/add.js b/app/routes/authenticated/users/add.js
index ad858ea..08bf1cb 100644
--- a/app/routes/authenticated/users/add.js
+++ b/app/routes/authenticated/users/add.js
@@ -2,16 +2,15 @@ import { inject as service } from '@ember/service';
 import RSVP from 'rsvp';
 import BaseRoute from 'papermerge/base/routing';
 
-
 class AddUserRoute extends BaseRoute {
   @service store;
 
   async model() {
     return RSVP.hash({
       groups: this.store.findAll('group'),
-      roles: this.store.findAll('role')
+      roles: this.store.findAll('role'),
     });
   }
 }
 
-export default AddUserRoute;
\ No newline at end of file
+export default AddUserRoute;
diff --git a/app/routes/authenticated/users/change_password.js b/app/routes/authenticated/users/change_password.js
index da9cdc9..30477db 100644
--- a/app/routes/authenticated/users/change_password.js
+++ b/app/routes/authenticated/users/change_password.js
@@ -1,6 +1,5 @@
 import { inject as service } from '@ember/service';
-import BaseRoute from 'papermerge/base/routing'
-
+import BaseRoute from 'papermerge/base/routing';
 
 export default class ChangeUserPasswordRoute extends BaseRoute {
   @service store;
diff --git a/app/routes/authenticated/users/edit.js b/app/routes/authenticated/users/edit.js
index 3ad9e43..b08d399 100644
--- a/app/routes/authenticated/users/edit.js
+++ b/app/routes/authenticated/users/edit.js
@@ -1,7 +1,6 @@
 import { inject as service } from '@ember/service';
 import RSVP from 'rsvp';
-import BaseRoute from 'papermerge/base/routing'
-
+import BaseRoute from 'papermerge/base/routing';
 
 export default class EditUserRoute extends BaseRoute {
   @service store;
@@ -10,8 +9,7 @@ export default class EditUserRoute extends BaseRoute {
     return RSVP.hash({
       user: this.store.findRecord('user', params.user_id),
       roles: this.store.findAll('role'),
-      groups: this.store.findAll('group')
+      groups: this.store.findAll('group'),
     });
   }
 }
-
diff --git a/app/routes/authenticated/users/index.js b/app/routes/authenticated/users/index.js
index e09404b..44691a4 100644
--- a/app/routes/authenticated/users/index.js
+++ b/app/routes/authenticated/users/index.js
@@ -1,7 +1,6 @@
 import { inject as service } from '@ember/service';
 import BaseRoute from 'papermerge/base/routing';
 
-
 export default class UsersRoute extends BaseRoute {
   @service store;
 
@@ -9,4 +8,3 @@ export default class UsersRoute extends BaseRoute {
     return this.store.findAll('user');
   }
 }
-
diff --git a/app/routes/login.js b/app/routes/login.js
index 049b8a6..18a9302 100644
--- a/app/routes/login.js
+++ b/app/routes/login.js
@@ -1,11 +1,10 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
-
 export default class LoginRoute extends Route {
   @service session;
 
   beforeModel(transition) {
-    this.get('session').prohibitAuthentication('roles');
+    this.session.prohibitAuthentication('roles');
   }
-}
\ No newline at end of file
+}
diff --git a/app/services/current-user.js b/app/services/current-user.js
index a95b85e..e805e33 100644
--- a/app/services/current-user.js
+++ b/app/services/current-user.js
@@ -1,7 +1,6 @@
 import Service from '@ember/service';
 import { inject as service } from '@ember/service';
 
-
 export default class CurrentUserService extends Service {
   @service session;
   @service store;
@@ -12,4 +11,4 @@ export default class CurrentUserService extends Service {
       this.set('user', user);
     }
   }
-};
+}
diff --git a/app/services/session.js b/app/services/session.js
index 6c94ff9..25d70a7 100644
--- a/app/services/session.js
+++ b/app/services/session.js
@@ -1,7 +1,6 @@
 import { inject as service } from '@ember/service';
 import BaseSessionService from 'ember-simple-auth/services/session';
 
-
 export default class SessionService extends BaseSessionService {
   @service currentUser;
 
@@ -9,8 +8,8 @@ export default class SessionService extends BaseSessionService {
     super.handleAuthentication(...arguments);
     try {
       await this.currentUser.loadCurrentUser();
-    } catch(err) {
+    } catch (err) {
       await this.invalidate();
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/session-stores/application.js b/app/session-stores/application.js
index 9bb1495..d4207ba 100644
--- a/app/session-stores/application.js
+++ b/app/session-stores/application.js
@@ -1,6 +1,5 @@
 import CookieStore from 'ember-simple-auth/session-stores/cookie';
 
-
 export default class ApplicationSessionStore extends CookieStore {
   // pass
-}
\ No newline at end of file
+}
diff --git a/app/templates/authenticated/index.hbs b/app/templates/authenticated/index.hbs
index 3f05b27..e3ad06b 100644
--- a/app/templates/authenticated/index.hbs
+++ b/app/templates/authenticated/index.hbs
@@ -6,7 +6,7 @@
   </button>
 
   <button class="btn btn-bordered btn-light btn-flat"
-  type="button" {{on "click" (fn this.newFolder 'new-folder') }}>
+  type="button" {{on "click" this.newFolder }}>
     <i class="fa fa-plus mr-1 text-success"></i>
     New Folder
   </button>
@@ -15,4 +15,6 @@
 Documents and Folders will be displayed here!
 
 <Modal::NewFolder
-  id="new-folder" />
\ No newline at end of file
+  id="new-folder"
+  @onClose={{this.closeNewFolder}}
+  {{show-when this.show_new_folder}} />
\ No newline at end of file
diff --git a/ember-cli-build.js b/ember-cli-build.js
index 3486786..380097e 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -1,7 +1,5 @@
 'use strict';
 
-
-
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
 module.exports = function (defaults) {
diff --git a/package-lock.json b/package-lock.json
index 9b4ff32..46bc145 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10727,6 +10727,136 @@
         }
       }
     },
+    "ember-modifier": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ember-modifier/-/ember-modifier-3.0.0.tgz",
+      "integrity": "sha512-ccXfMnjWhjEUCB5taeIPQmf0h1zPUIMbmsCV7W+JZ2BioPUZTLhE1WuHspmV0iEOiX3Fwx8jMOx6b74sFcKJ0g==",
+      "dev": true,
+      "requires": {
+        "ember-cli-babel": "^7.26.6",
+        "ember-cli-normalize-entity-name": "^1.0.0",
+        "ember-cli-string-utils": "^1.1.0",
+        "ember-cli-typescript": "^4.2.1",
+        "ember-compatibility-helpers": "^1.2.5"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ember-cli-typescript": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ember-cli-typescript/-/ember-cli-typescript-4.2.1.tgz",
+          "integrity": "sha512-0iKTZ+/wH6UB/VTWKvGuXlmwiE8HSIGcxHamwNhEC5x1mN3z8RfvsFZdQWYUzIWFN2Tek0gmepGRPTwWdBYl/A==",
+          "dev": true,
+          "requires": {
+            "ansi-to-html": "^0.6.15",
+            "broccoli-stew": "^3.0.0",
+            "debug": "^4.0.0",
+            "execa": "^4.0.0",
+            "fs-extra": "^9.0.1",
+            "resolve": "^1.5.0",
+            "rsvp": "^4.8.1",
+            "semver": "^7.3.2",
+            "stagehand": "^1.0.0",
+            "walk-sync": "^2.2.0"
+          }
+        },
+        "execa": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
+          "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^7.0.0",
+            "get-stream": "^5.0.0",
+            "human-signals": "^1.1.1",
+            "is-stream": "^2.0.0",
+            "merge-stream": "^2.0.0",
+            "npm-run-path": "^4.0.0",
+            "onetime": "^5.1.0",
+            "signal-exit": "^3.0.2",
+            "strip-final-newline": "^2.0.0"
+          }
+        },
+        "fs-extra": {
+          "version": "9.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+          "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+          "dev": true,
+          "requires": {
+            "at-least-node": "^1.0.0",
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "human-signals": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
+          "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
+          "dev": true
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "matcher-collection": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/matcher-collection/-/matcher-collection-2.0.1.tgz",
+          "integrity": "sha512-daE62nS2ZQsDg9raM0IlZzLmI2u+7ZapXBwdoeBUKAYERPDDIc0qNqA8E0Rp2D+gspKR7BgIFP52GeujaGXWeQ==",
+          "dev": true,
+          "requires": {
+            "@types/minimatch": "^3.0.3",
+            "minimatch": "^3.0.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        },
+        "npm-run-path": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.0.0"
+          }
+        },
+        "universalify": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+          "dev": true
+        },
+        "walk-sync": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/walk-sync/-/walk-sync-2.2.0.tgz",
+          "integrity": "sha512-IC8sL7aB4/ZgFcGI2T1LczZeFWZ06b3zoHH7jBPyHxOtIIz1jppWHjjEXkOFvFojBVAK9pV7g47xOZ4LW3QLfg==",
+          "dev": true,
+          "requires": {
+            "@types/minimatch": "^3.0.3",
+            "ensure-posix-path": "^1.1.0",
+            "matcher-collection": "^2.0.0",
+            "minimatch": "^3.0.4"
+          }
+        }
+      }
+    },
     "ember-page-title": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/ember-page-title/-/ember-page-title-6.2.2.tgz",
diff --git a/package.json b/package.json
index c17c7ab..e068682 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "ember-fetch": "^8.1.1",
     "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",
+    "ember-modifier": "^3.0.0",
     "ember-page-title": "^6.2.2",
     "ember-qunit": "^5.1.4",
     "ember-resolver": "^8.0.2",
diff --git a/tests/acceptance/roles-test.js b/tests/acceptance/roles-test.js
index 3aeffeb..fa36877 100644
--- a/tests/acceptance/roles-test.js
+++ b/tests/acceptance/roles-test.js
@@ -9,8 +9,6 @@ module('Acceptance | roles', function (hooks) {
     await visit('/roles');
 
     assert.equal(currentURL(), '/roles');
-    assert
-      .dom('.add-role')
-      .hasText('New', 'The user can add new role');
+    assert.dom('.add-role').hasText('New', 'The user can add new role');
   });
 });
diff --git a/tests/acceptance/tags-test.js b/tests/acceptance/tags-test.js
index ba9df11..359cb66 100644
--- a/tests/acceptance/tags-test.js
+++ b/tests/acceptance/tags-test.js
@@ -9,8 +9,6 @@ module('Acceptance | tags', function (hooks) {
     await visit('/tags');
 
     assert.equal(currentURL(), '/tags');
-    assert
-      .dom('.add-tag')
-      .hasText('New', 'The user can add new tag');
+    assert.dom('.add-tag').hasText('New', 'The user can add new tag');
   });
 });
diff --git a/tests/integration/modifiers/show-when-test.js b/tests/integration/modifiers/show-when-test.js
new file mode 100644
index 0000000..be97584
--- /dev/null
+++ b/tests/integration/modifiers/show-when-test.js
@@ -0,0 +1,15 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Modifier | show-when', function (hooks) {
+  setupRenderingTest(hooks);
+
+  // Replace this with your real tests.
+  test('it renders', async function (assert) {
+    await render(hbs`<div {{show-when}}></div>`);
+
+    assert.ok(true);
+  });
+});
-- 
GitLab