Add confirm button to withdraw group membership

src/components/Button.js

@@ -7,6 +7,11 @@ ButtonCSS.addStyle('.blue-button', {
   color_light_text: 'white',
 });
 
+ButtonCSS.addStyle('.flat-button', {
+  color_light_background: 'white',
+  color_light_text: 'gray',
+});
+
 /**
  * Generic button component
  *

src/views/profile.js

@@ -166,43 +166,77 @@ class announceSubscriptionForm {
 
 // shows group memberships and allows to withdraw and enroll for selected groups.
 class groupMemberships {
-  static oninit() {
+  oninit() {
     groups.load({ allow_self_enrollment: true });
     groups.loadMemberships();
     this.busy = [];
+    this.confirm = [];
   }
 
-  static view() {
+  view() {
     return m('div', [
       m(
         'div',
         groups.getMemberships().map(membership => {
-          const buttonArgs = {
-            events: {
-              onclick: () => {
-                this.busy[membership.group._id] = true;
-                groups
-                  .withdraw(membership._id, membership._etag)
-                  .then(() => {
-                    this.busy[membership.group._id] = false;
-                  })
-                  .catch(() => {
-                    this.busy[membership.group._id] = false;
-                  });
-              },
-            },
-          };
+          const buttonArgs = {};
+          let buttons;
 
           if (this.busy[membership.group._id]) {
             buttonArgs.disabled = true;
           }
 
+          if (this.confirm[membership.group._id]) {
+            buttons = [
+              m(Button, {
+                ...buttonArgs,
+                label: 'cancel',
+                className: 'flat-button',
+                events: {
+                  onclick: () => {
+                    this.confirm[membership.group._id] = false;
+                    this.busy[membership.group._id] = false;
+                  },
+                },
+              }),
+              m('span', ' '),
+              m(Button, {
+                ...buttonArgs,
+                label: 'confirm',
+                events: {
+                  onclick: () => {
+                    this.busy[membership.group._id] = true;
+                    groups
+                      .withdraw(membership._id, membership._etag)
+                      .then(() => {
+                        this.busy[membership.group._id] = false;
+                        this.confirm[membership.group._id] = false;
+                      })
+                      .catch(() => {
+                        this.busy[membership.group._id] = false;
+                        this.confirm[membership.group._id] = false;
+                      });
+                  },
+                },
+              }),
+            ];
+          } else {
+            buttons = m(Button, {
+              ...buttonArgs,
+              label: 'withdraw',
+              events: {
+                onclick: () => {
+                  this.confirm[membership.group._id] = true;
+                },
+              },
+            });
+          }
+
           return m('div', [
             m('span', membership.group.name),
             membership.expiry === undefined
               ? undefined
               : m('span', `(expires on ${membership.expiry})`),
-            m(Button, { ...buttonArgs, label: 'withdraw' }),
+            buttons,
           ]);
         })
       ),