core: support oauth bind/unbind account (#971)

Co-authored-by: panda <panda_dtdyy@outlook.com>

packages/ui-default/pages/home_security.page.styl

@@ -20,7 +20,7 @@
     line-height: rem($form-control-height)
     color: green
 
-  .autherlist
+  .autherlist, .platform-list
     font-size: rem($font-size-secondary)
 
   .autherlist__icon
@@ -33,13 +33,34 @@
     padding: rem(10px 0)
 
     &:not(:last-child)
-    border-bottom: 1px solid #DDD
+      border-bottom: 1px solid #DDD
 
     input
       margin: 0
 
+  .platform-list__item
+    margin: rem(6px 0)
+    padding: rem(6px 0)
+
+    &:not(:first-child)
+      border-top: 1px solid #DDD
+    
+    .button
+      margin: 0
+
+    .media__left
+      width: rem(48px)
+      text-align: center
+
+      svg
+        width: rem(30px)
+        height: rem(30px)
+        color: #888
+        fill: #888
+        margin: rem(0 20px)
+
   +mobile()
-    .sessionlist__item
+    .sessionlist__item, .platform-list__item
       .media__left
         display: none
 

packages/ui-default/pages/home_security.page.ts

@@ -11,6 +11,59 @@ import {
 
 const t = (s) => escape(i18n(s));
 
+async function changeMail() {
+  const changeMailDialog = new ActionDialog({
+    $body: tpl`
+      <div class="typo">
+        <p>${i18n('Please enter your current password and new email address:')}</p>
+        <label>${i18n('Current Password')}
+          <div class="textbox-container">
+            <input class="textbox" type="password" name="password" data-autofocus required></input>
+          </div>
+        </label>
+        <label>${i18n('Current Email')}
+          <div class="textbox-container">
+            <input class="textbox" type="text" name="currentEmail" value="${UserContext.mail}" disabled></input>
+          </div>
+        </label>
+        <label>${i18n('New Email')}
+          <div class="textbox-container">
+            <input class="textbox" type="text" name="mail" required></input>
+          </div>
+        </label>
+      </div>
+    `,
+    onDispatch(action) {
+      if (action === 'ok') {
+        const $password = $('[name="password"]');
+        const $mail = $('[name="mail"]');
+        if (!$password.val() || !$mail.val()) {
+          if (!$password.val()) $password.focus();
+          else $mail.focus();
+          return false;
+        }
+      }
+      return true;
+    },
+  }).open();
+  const action = await changeMailDialog;
+  if (action !== 'ok') return;
+  try {
+    await request.post('', {
+      operation: 'change_mail',
+      password: $('[name="password"]').val(),
+      mail: $('[name="mail"]').val(),
+    });
+  } catch (err) {
+    Notification.error(err.message);
+    console.error(err);
+    return;
+  }
+  Notification.success(i18n('Successfully changed.'));
+  await delay(2000);
+  window.location.reload();
+}
+
 async function enableTfa() {
   const enableTFA = new ActionDialog({
     $body: tpl`
@@ -143,4 +196,9 @@ export default new NamedPage('home_security', () => {
     if (action === 'tfa') enableTfa();
     else enableAuthn(action);
   });
+
+  $(document).on('click', '[data-operation="change_mail"]', async (ev) => {
+    ev.preventDefault();
+    await changeMail();
+  });
 });