refactor(optional-policies): convert AcceptPoliciesModal to JSX

FriendsOfFlarum · Dec 5, 2024 · d6304b2 · d6304b2
1 parent 5f02801
commit d6304b2
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 78 deletions.
diff --git a/js/src/forum/components/AcceptPoliciesModal.js b/js/src/forum/components/AcceptPoliciesModal.js
@@ -23,7 +23,7 @@ export default class AcceptPoliciesModal extends Modal {
   }
 
   content() {
-    return m('.Modal-body', this.body());
+    return <div className="Modal-body">{this.body()}</div>;
   }
 
   body() {
@@ -36,91 +36,83 @@ export default class AcceptPoliciesModal extends Modal {
     );
 
     if (policies.length === 0) {
-      return Button.component(
-        {
-          className: 'Button',
-          onclick() {
+      return (
+        <Button
+          className="Button"
+          onclick={() => {
             app.modal.close();
-          },
-        },
-        app.translator.trans('fof-terms.forum.accept-modal.close')
+          }}
+        >
+          {app.translator.trans('fof-terms.forum.accept-modal.close')}
+        </Button>
       );
     }
 
-    return policies.map((policy) =>
-      m('div', [
-        m('h2', policy.name()),
-        app.forum.attribute('fof-terms.hide-updated-at')
-          ? null
-          : m(
-              'p',
-              policy.terms_updated_at()
-                ? app.translator.trans('fof-terms.forum.accept-modal.updated-at', {
-                    date: dayjs(policy.terms_updated_at()).format(app.forum.attribute('fof-terms.date-format')),
-                  })
-                : app.translator.trans('fof-terms.forum.accept-modal.updated-recently')
-            ),
-        policy.update_message() ? m('p', policy.update_message()) : null,
-        m(
-          '.Form-group',
-          m(
-            '.FoF-Terms-Check.FoF-Terms-Check--login',
-            m('label.checkbox', [
-              m('input', {
-                type: 'checkbox',
-                checked: this[policy.form_key()],
-                onchange: () => {
+    return policies.map((policy) => (
+      <div>
+        <h2>{policy.name()}</h2>
+        {app.forum.attribute('fof-terms.hide-updated-at') ? null : (
+          <p>
+            {policy.terms_updated_at()
+              ? app.translator.trans('fof-terms.forum.accept-modal.updated-at', {
+                  date: dayjs(policy.terms_updated_at()).format(app.forum.attribute('fof-terms.date-format')),
+                })
+              : app.translator.trans('fof-terms.forum.accept-modal.updated-recently')}
+          </p>
+        )}
+        {policy.update_message() ? <p>{policy.update_message()}</p> : null}
+        <div className="Form-group">
+          <div className="FoF-Terms-Check FoF-Terms-Check--login">
+            <label className="checkbox">
+              <input
+                type="checkbox"
+                checked={this[policy.form_key()]}
+                onchange={() => {
                   this[policy.form_key()] = !this[policy.form_key()];
-                },
-              }),
-              app.translator.trans('fof-terms.forum.accept-modal.i-accept', {
+                }}
+              />
+              {app.translator.trans('fof-terms.forum.accept-modal.i-accept', {
                 policy: policy.name(),
-                a: policy.url()
-                  ? m('a', {
-                      href: policy.url(),
-                      target: '_blank',
-                    })
-                  : m('span'),
-              }),
-            ])
-          )
-        ),
-        Button.component(
-          {
-            className: 'Button Button--primary',
-            disabled: !this[policy.form_key()] && !policy.optional(),
-            onclick: () => {
-              // We need to save the "must accept" property before performing the request
-              // Because an updated user serializer will be returned
-              const hadToAcceptToInteract = app.session.user.fofTermsPoliciesMustAccept();
+                a: policy.url() ? <a href={policy.url()} target="_blank" /> : <span />,
+              })}
+            </label>
+          </div>
+        </div>
+        <Button
+          className="Button Button--primary"
+          disabled={!this[policy.form_key()] && !policy.optional()}
+          onclick={() => {
+            // We need to save the "must accept" property before performing the request
+            // Because an updated user serializer will be returned
+            const hadToAcceptToInteract = app.session.user.fofTermsPoliciesMustAccept();
 
-              app
-                .request({
-                  url: app.forum.attribute('apiUrl') + policy.apiEndpoint() + (this[policy.form_key()] ? '/accept' : '/decline'),
-                  method: 'POST',
-                  errorHandler: this.onerror.bind(this),
-                })
-                .then((updated) => {
-                  app.store.pushPayload(updated);
+            app
+              .request({
+                url: app.forum.attribute('apiUrl') + policy.apiEndpoint() + (this[policy.form_key()] ? '/accept' : '/decline'),
+                method: 'POST',
+                errorHandler: this.onerror.bind(this),
+              })
+              .then((updated) => {
+                app.store.pushPayload(updated);
 
-                  // If this was the last policy to accept, close the modal
-                  if (policies.length === 1) {
-                    if (hadToAcceptToInteract) {
-                      // If the user was previously not allowed to interact with the forum,
-                      // we refresh to get updated permissions in the frontend
-                      window.location.reload();
-                    } else {
-                      app.modal.close();
-                    }
+                // If this was the last policy to accept, close the modal
+                if (policies.length === 1) {
+                  if (hadToAcceptToInteract) {
+                    // If the user was previously not allowed to interact with the forum,
+                    // we refresh to get updated permissions in the frontend
+                    window.location.reload();
+                  } else {
+                    app.modal.close();
                   }
+                }
 
-                  m.redraw();
-                });
-            },
-          },
-          app.translator.trans('fof-terms.forum.accept-modal.accept')
-        ),
-      ])
-    );
+                m.redraw();
+              });
+          }}
+        >
+          {app.translator.trans('fof-terms.forum.accept-modal.accept')}
+        </Button>
+      </div>
+    ));
   }
 }
diff --git a/resources/locale/en.yml b/resources/locale/en.yml
@@ -71,7 +71,7 @@ fof-terms:
 
         update-alert:
             must-accept-message: We've temporarily restricted access to your account while you check out the new terms.
-            can-accept-message: We recently updated the terms. You can accept them to continue using this website.
+            can-accept-message: We recently updated the terms. You must accept them to continue using this website.
             review: Click here to review and accept the new terms
             close: Close