Merge pull request mainmatter#2876 from mainmatter/use-on-modifier

refactor(all): use on modifier. Action template helper dropped in 6.0
Jimimaku · Dec 25, 2024 · 3eeb974 · 3eeb974
2 parents 4ed6d5b + 1eab153
commit 3eeb974
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 70 deletions.
diff --git a/packages/classic-test-app/app/components/login-form.js b/packages/classic-test-app/app/components/login-form.js
@@ -1,53 +1,54 @@
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import config from '../config/environment';
+import { action } from '@ember/object';
 
 export default Component.extend({
   session: service('session'),
 
-  actions: {
-    async authenticateWithOAuth2() {
-      try {
-        let { identification, password } = this;
-        await this.get('session').authenticate('authenticator:oauth2', identification, password);
-
-        if (this.rememberMe) {
-          this.get('session').set('store.cookieExpirationTime', 60 * 60 * 24 * 14);
-        }
-      } catch (response) {
-        let responseBody = await response.clone().json();
-        this.set('errorMessage', responseBody);
+  authenticateWithOAuth2: action(async function (e) {
+    e.preventDefault();
+    try {
+      let { identification, password } = this;
+      await this.get('session').authenticate('authenticator:oauth2', identification, password);
+
+      if (this.rememberMe) {
+        this.get('session').set('store.cookieExpirationTime', 60 * 60 * 24 * 14);
       }
-    },
-
-    authenticateWithFacebook() {
-      this.get('session').authenticate('authenticator:torii', 'facebook');
-    },
-
-    authenticateWithGoogleImplicitGrant() {
-      let clientId = config.googleClientID;
-      let redirectURI = `${window.location.origin}/callback`;
-      let responseType = `token`;
-      let scope = `email`;
-      window.location.replace(
-        `https://accounts.google.com/o/oauth2/v2/auth?` +
-          `client_id=${clientId}` +
-          `&redirect_uri=${redirectURI}` +
-          `&response_type=${responseType}` +
-          `&scope=${scope}`
-      );
-    },
-
-    updateIdentification(e) {
-      this.set('identification', e.target.value);
-    },
-
-    updatePassword(e) {
-      this.set('password', e.target.value);
-    },
-
-    updateRememberMe(e) {
-      this.set('rememberMe', e.target.checked);
-    },
-  },
+    } catch (response) {
+      this.set('errorMessage', response.toString());
+    }
+  }),
+
+  authenticateWithFacebook: action(function (e) {
+    e.preventDefault();
+    this.get('session').authenticate('authenticator:torii', 'facebook');
+  }),
+
+  authenticateWithGoogleImplicitGrant: action(function (e) {
+    e.preventDefault();
+    let clientId = config.googleClientID;
+    let redirectURI = `${window.location.origin}/callback`;
+    let responseType = `token`;
+    let scope = `email`;
+    window.location.replace(
+      `https://accounts.google.com/o/oauth2/v2/auth?` +
+        `client_id=${clientId}` +
+        `&redirect_uri=${redirectURI}` +
+        `&response_type=${responseType}` +
+        `&scope=${scope}`
+    );
+  }),
+
+  updateIdentification: action(function (e) {
+    this.set('identification', e.target.value);
+  }),
+
+  updatePassword: action(function (e) {
+    this.set('password', e.target.value);
+  }),
+
+  updateRememberMe: action(function (e) {
+    this.set('rememberMe', e.target.checked);
+  }),
 });
diff --git a/packages/classic-test-app/app/components/main-navigation.js b/packages/classic-test-app/app/components/main-navigation.js
@@ -1,13 +1,12 @@
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
+import { action } from '@ember/object';
 
 export default Component.extend({
   session: service('session'),
   sessionAccount: service('session-account'),
 
-  actions: {
-    logout() {
-      this.get('session').invalidate();
-    },
-  },
+  logout: action(function () {
+    this.get('session').invalidate();
+  }),
 });
diff --git a/packages/classic-test-app/app/templates/components/login-form.hbs b/packages/classic-test-app/app/templates/components/login-form.hbs
@@ -1,20 +1,20 @@
 {{! login form; the fields must be named "identification" and "password"; the controller action is "authenticate" }}
-<a {{action 'authenticateWithFacebook'}} class="btn btn-primary" href="#" role="button">Login with Facebook</a>
+<a {{on "click" this.authenticateWithFacebook}} class="btn btn-primary" href="#" role="button">Login with Facebook</a>
 <hr/>
-<a {{action 'authenticateWithGoogleImplicitGrant'}} class="btn btn-primary" href="#" role="button">Login with Google (Implicit Grant)</a>
+<a {{on "click" this.authenticateWithGoogleImplicitGrant}} class="btn btn-primary" href="#" role="button">Login with Google (Implicit Grant)</a>
 <hr/>
 <p>or login with OAuth 2.0 <em>Resource Owner Password Credentials</em>:</p>
-<form {{action 'authenticateWithOAuth2' on='submit'}}>
+<form {{on "submit" this.authenticateWithOAuth2}}>
   <div class="form-group">
     <label for="identification">Login</label>
-    <input type="text" placeholder="Enter Login" class="form-control" onchange={{action 'updateIdentification'}} value={{this.identification}} data-test-identification />
+    <input type="text" placeholder="Enter Login" class="form-control" {{on "change" this.updateIdentification}} value={{this.identification}} data-test-identification />
   </div>
   <div class="form-group">
     <label for="password">Password</label>
-    <input type="password" placeholder="Enter Password" class="form-control" onchange={{action 'updatePassword'}} value={{this.password}} data-test-password />
+    <input type="password" placeholder="Enter Password" class="form-control" {{on "change" this.updatePassword}} value={{this.password}} data-test-password />
   </div>
   <div class="form-group form-check">
-    <input type="checkbox" class="form-check-input" id="rememberMe" onchange={{action 'updateRememberMe'}} checked={{this.rememberMe}} />
+    <input type="checkbox" class="form-check-input" id="rememberMe" {{on "change" this.updateRememberMe}} checked={{this.rememberMe}} />
     <label for="rememberMe" class="form-check-label">
       Remember me
     </label>
@@ -30,4 +30,4 @@
       Documentation of the error codes can be found in the <a href="http://tools.ietf.org/html/rfc6749#section-5.2" title="RFC 6749 - Error Response">Error Response section of RFC 6749</a>.
     </p>
   </div>
-{{/if}}
+{{/if}}
diff --git a/packages/classic-test-app/app/templates/components/main-navigation.hbs b/packages/classic-test-app/app/templates/components/main-navigation.hbs
@@ -19,9 +19,9 @@
       {{#if this.sessionAccount.account}}
         <span class="navbar-text mr-3">Signed in as {{this.sessionAccount.account.name}}</span>
       {{/if}}
-      <a {{action 'logout'}} class="btn btn-danger" href="#" role="button">Logout</a>
+      <a {{on "click" this.logout}} class="btn btn-danger" href="#" role="button">Logout</a>
     {{else}}
-      <a {{action this.onLogin}} class="btn btn-success" href="#" role="button">Login</a>
+      <a {{on "click" this.onLogin}} class="btn btn-success" href="#" role="button">Login</a>
     {{/if}}
   </form>
 </nav>
diff --git a/packages/classic-test-app/lib/my-engine/addon/controllers/index.js b/packages/classic-test-app/lib/my-engine/addon/controllers/index.js
@@ -1,12 +1,11 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
 export default Controller.extend({
   session: service(),
 
-  actions: {
-    logout() {
-      this.get('session').invalidate();
-    },
-  },
+  logout: action(function () {
+    this.get('session').invalidate();
+  }),
 });
diff --git a/packages/classic-test-app/lib/my-engine/addon/templates/index.hbs b/packages/classic-test-app/lib/my-engine/addon/templates/index.hbs
@@ -4,4 +4,4 @@
 <div class="alert alert-warning">
   This is a protected page in an engine only visible to authenticated users!
 </div>
-<button {{action 'logout'}} class="btn btn-danger" data-test-logout-button>Logout</button>
+<button {{on "click" this.logout}} class="btn btn-danger" data-test-logout-button>Logout</button>
diff --git a/packages/test-app/app/components/login-form.js b/packages/test-app/app/components/login-form.js
@@ -13,7 +13,8 @@ export default class LoginFormComponent extends Component {
   @tracked rememberMe;
 
   @action
-  async authenticateWithOAuth2() {
+  async authenticateWithOAuth2(event) {
+    event.preventDefault();
     try {
       let { identification, password } = this;
       await this.session.authenticate('authenticator:oauth2', identification, password);

diff --git a/packages/test-app/app/templates/application.hbs b/packages/test-app/app/templates/application.hbs
@@ -1,4 +1,4 @@
-<MainNavigation @onLogin={{action "transitionToLoginRoute"}} />
+<MainNavigation @onLogin={{this.transitionToLoginRoute}} />
 <div class="container mt-4">
   {{outlet}}
-</div>
+</div>
diff --git a/packages/test-app/app/templates/components/login-form.hbs b/packages/test-app/app/templates/components/login-form.hbs
@@ -4,7 +4,7 @@
 <a {{on 'click' this.authenticateWithGoogleImplicitGrant}} class="btn btn-primary" href="#" role="button">Login with Google (Implicit Grant)</a>
 <hr/>
 <p>or login with OAuth 2.0 <em>Resource Owner Password Credentials</em>:</p>
-<form {{action 'authenticateWithOAuth2' on='submit'}}>
+<form {{on "submit" this.authenticateWithOAuth2}}>
   <div class="form-group">
     <label for="identification">Login</label>
     <input type="text" placeholder="Enter Login" class="form-control" {{on 'change' this.updateIdentification}} value={{this.identification}} data-test-identification />
@@ -30,4 +30,4 @@
       Documentation of the error codes can be found in the <a href="http://tools.ietf.org/html/rfc6749#section-5.2" title="RFC 6749 - Error Response">Error Response section of RFC 6749</a>.
     </p>
   </div>
-{{/if}}
+{{/if}}
diff --git a/packages/test-app/lib/my-engine/addon/templates/protected.hbs b/packages/test-app/lib/my-engine/addon/templates/protected.hbs
@@ -4,4 +4,4 @@
 <div class="alert alert-warning">
   This is a protected page in an engine only visible to authenticated users!
 </div>
-<button {{action 'logout'}} class="btn btn-danger" data-test-logout-button>Logout</button>
+<button {{on "click" this.logout}} class="btn btn-danger" data-test-logout-button>Logout</button>