From 4af3bb780f031538e4802b341f3ba9ba4599e229 Mon Sep 17 00:00:00 2001
From: yibaebi <elliot.yibaebi@yahoo.com>
Date: Fri, 6 Sep 2024 09:36:52 +0100
Subject: [PATCH] complete account settings global css migration

---
 .../security/multi-factor-auth/index.hbs      | 277 +++++++++---------
 .../security/multi-factor-auth/index.scss     |  42 +--
 .../security/multi-factor-auth/index.ts       |  21 ++
 app/styles/_component-variables.scss          |  15 +-
 4 files changed, 191 insertions(+), 164 deletions(-)

diff --git a/app/components/account-settings/security/multi-factor-auth/index.hbs b/app/components/account-settings/security/multi-factor-auth/index.hbs
index 83aa05589..0d00cb3e4 100644
--- a/app/components/account-settings/security/multi-factor-auth/index.hbs
+++ b/app/components/account-settings/security/multi-factor-auth/index.hbs
@@ -1,143 +1,128 @@
-<div class='mfa is-two-third'>
-  <h5 class='bold black-text is-fullwidth'>
+<AkStack @direction='column' @width='8/12'>
+  <AkTypography @variant='h5' @gutterBottom={{true}} class='mb-4'>
     {{t 'multiFactorAuth'}}
-  </h5>
-
-  {{t 'mfaDescription'}}
-
-  <div class='margin-t-1'>
-    {{t 'mfaSelect'}}
-  </div>
-
-  <div class='margin-t-1'>
-    <div class='columns'>
-      <div class='column'>
-        <table class='org-table'>
-          <tbody>
-            {{#each this.mfas.records as |mfa|}}
-              <tr class={{if mfa.enabled 'fill-success-box'}}>
-                <td>
-                  <div class='vertical-align-top padding-v-h padding-h-h'>
-                    <div class='div'>
-                      <div class='bold black-text font-medium'>
-                        <AkStack @alignItems='center' @spacing='1'>
-                          {{mfa.display}}
-
-                          {{#if mfa.enabled}}
-                            <AkIcon @iconName='done' @color='success' />
-                          {{/if}}
-                        </AkStack>
-                      </div>
-
-                      {{#if mfa.isApp}}
-                        <div class='text-lightgray margin-t-h'>
-                          {{t 'mfaAppDesc'}}
-                        </div>
-
-                        <ul class='margin-t-1'>
-                          <li>
-                            For Android, iOS, and Blackberry:
-                            <a
-                              href='https://support.google.com/accounts/answer/1066447?hl=en'
-                              target='_blank'
-                              rel='noopener noreferrer'
-                            >
-                              Google Authenticator
-                            </a>
-                          </li>
-
-                          <li>
-                            For Android & iOS:
-                            <a
-                              href='https://guide.duo.com/third-party-accounts'
-                              target='_blank'
-                              rel='noopener noreferrer'
-                            >
-                              Duo Mobile
-                            </a>
-                          </li>
-
-                          <li>
-                            For Windows Phone:
-                            <a
-                              href='https://www.microsoft.com/en-us/store/p/authenticator/9wzdncrfj3rj'
-                              target='_blank'
-                              rel='noopener noreferrer'
-                            >
-                              Authenticator
-                            </a>
-                          </li>
-                        </ul>
-                      {{/if}}
-
-                      {{#if mfa.isEmail}}
-                        <div class='text-lightgray margin-t-h'>
-                          {{t 'mfaEmailDesc'}}
-                        </div>
-                      {{/if}}
-                    </div>
-                  </div>
-                </td>
-
-                <td>
-                  <div class='div'>
-                    {{#if mfa.enabled}}
-                      {{#if this.user.canDisableMfa}}
-                        <button
-                          {{style borderRadius='5px'}}
-                          class='is-primary'
-                          type='button'
-                          {{on 'click' (perform this.disableMFA mfa.method)}}
-                          disabled={{not this.user.canDisableMfa}}
-                        >
-                          {{t 'disable'}}
-                        </button>
-                      {{/if}}
-                    {{else}}
-                      <button
-                        {{style borderRadius='5px'}}
-                        class='is-default is-small'
-                        type='button'
-                        {{on 'click' (perform this.enableMFA mfa.method)}}
-                      >
-                        {{t 'enable'}}
-                      </button>
-                    {{/if}}
-                  </div>
-                </td>
-              </tr>
-            {{/each}}
-          </tbody>
-        </table>
-
-        {{#unless this.user.canDisableMfa}}
-          <div class='alert alert-danger alert-small margin-t-2'>
-            <div class='vertical-align-center'>
-              <AkIcon @iconName='security' />
-
-              <div class='margin-l-1'>
-                {{t 'disableMFADenied'}}
-
-                {{#if this.me.org.is_owner}}
-                  <div>
-                    {{t 'disableThisIn'}}
-
-                    <LinkTo
-                      @route='authenticated.dashboard.organization-settings'
-                      class='alert-link'
-                    >
-                      {{t 'organizationSettings'}}
-                    </LinkTo>
-                  </div>
+  </AkTypography>
+
+  <AkTypography @color='neutral'>{{t 'mfaDescription'}}</AkTypography>
+
+  <AkTypography @color='neutral' class='mt-2'>{{t 'mfaSelect'}}</AkTypography>
+
+  {{#if this.mfas.records.length}}
+    <AkStack
+      @width='full'
+      @direction='column'
+      local-class='mfa-records-container'
+      class='mt-2'
+    >
+      {{#each this.mfas.records as |mfa idx|}}
+        {{#if (gt idx 0)}}
+          <AkDivider @color='dark' />
+        {{/if}}
+
+        <AkStack
+          local-class='{{if mfa.enabled "mfa-enabled"}}'
+          @width='full'
+          class='p-2'
+        >
+          <AkStack @width='full' @alignItems='center' @spacing='2.5'>
+            <AkStack @direction='column' @width='full'>
+              <AkStack @alignItems='center' @spacing='1'>
+                <AkTypography>{{mfa.display}}</AkTypography>
+
+                {{#if mfa.enabled}}
+                  <AkIcon @iconName='done' @color='success' />
                 {{/if}}
-              </div>
-            </div>
-          </div>
-        {{/unless}}
-      </div>
-    </div>
-  </div>
-</div>
+              </AkStack>
+
+              {{#if mfa.isApp}}
+                <AkTypography @variant='body2' @color='neutral' class='mt-1'>
+                  {{t 'mfaAppDesc'}}
+                </AkTypography>
+
+                <AkStack @direction='column' class='mt-2'>
+                  {{#each this.mfaAppRecords as |record|}}
+                    <AkStack @spacing='0.5'>
+                      <AkTypography
+                        @variant='body2'
+                        @color='neutral'
+                        {{style fontSize='0.85714em'}}
+                      >
+                        {{record.osTypes}}
+                      </AkTypography>
+
+                      <a
+                        href={{record.infoURL}}
+                        target='_blank'
+                        rel='noopener noreferrer'
+                        {{style fontSize='0.85714em'}}
+                      >
+                        {{record.app}}
+                      </a>
+                    </AkStack>
+                  {{/each}}
+                </AkStack>
+              {{/if}}
+
+              {{#if mfa.isEmail}}
+                <AkTypography @variant='body2' @color='neutral' class='mt-1'>
+                  {{t 'mfaEmailDesc'}}
+                </AkTypography>
+              {{/if}}
+            </AkStack>
+
+            {{#if mfa.enabled}}
+              {{#if this.user.canDisableMfa}}
+                <AkButton
+                  @variant='outlined'
+                  @disabled={{not this.user.canDisableMfa}}
+                  {{on 'click' (perform this.disableMFA mfa.method)}}
+                >
+                  {{t 'disable'}}
+                </AkButton>
+              {{/if}}
+            {{else}}
+              <AkButton
+                @variant='outlined'
+                @color='neutral'
+                {{on 'click' (perform this.enableMFA mfa.method)}}
+              >
+                {{t 'enable'}}
+              </AkButton>
+            {{/if}}
+          </AkStack>
+        </AkStack>
+      {{/each}}
+    </AkStack>
+  {{/if}}
+
+  {{#unless this.user.canDisableMfa}}
+    <AkStack @alignItems='center' class='my-4 p-2' local-class='alert-warn'>
+      <AkIcon @iconName='security' @color='inherit' />
+
+      <AkStack @direction='column' class='ml-2'>
+        <AkTypography @variant='body2'>{{t 'disableMFADenied'}}</AkTypography>
+
+        {{#if this.me.org.is_owner}}
+          <AkStack @spacing='0.5'>
+            <AkTypography @variant='body2'>
+              {{t 'disableThisIn'}}
+            </AkTypography>
+
+            <AkLink
+              @fontWeight='medium'
+              @typographyVariant='body2'
+              @route='authenticated.dashboard.organization-settings'
+              @underline='always'
+              local-class='alert-warn-link'
+            >
+              {{t 'organizationSettings'}}
+            </AkLink>
+          </AkStack>
+        {{/if}}
+      </AkStack>
+    </AkStack>
+  {{/unless}}
+</AkStack>
 
 {{#if this.showMFADisableModal}}
   <AkModal
@@ -151,16 +136,18 @@
           {{t 'modalCard.enableMFAEmail.sendMailMsg'}}
         </AkTypography>
       {{else}}
-        <div
+        <AkStack
+          @alignItems='center'
+          class='mb-2 p-2'
+          local-class='alert-success'
           {{style width='450px'}}
-          class='alert alert-success alert-small mb-2'
         >
           <AkStack @alignItems='center' @spacing='1'>
-            <AkIcon @iconName='security' />
+            <AkIcon @iconName='security' color='inherit' />
 
             <AkTypography>{{t 'disableMFADenied'}}</AkTypography>
           </AkStack>
-        </div>
+        </AkStack>
       {{/if}}
 
       {{#if this.showDisableMFA}}
@@ -242,7 +229,7 @@
       {{/if}}
 
       {{#if this.showEmailOTPEnter}}
-        <div class='fill-silver px-3 py-2'>
+        <div local-class='info-box' class='px-3 py-2'>
           <AkTypography>
             {{t 'modalCard.enableMFAEmail.description'}}
             <strong>{{this.user.email}}</strong>
@@ -326,7 +313,7 @@
       {{/if}}
 
       {{#if this.staEmailVerifyActive}}
-        <div class='fill-silver px-3 py-2'>
+        <div local-class='info-box' class='px-3 py-2'>
           <AkTypography>
             {{t 'modalCard.enableMFAEmail.description'}}
             <strong>{{this.user.email}}</strong>
@@ -415,7 +402,7 @@
       {{/if}}
 
       {{#if this.showSwitchTOEmailEmailVerify}}
-        <div class='fill-silver px-3 py-2'>
+        <div local-class='info-box' class='px-3 py-2'>
           <AkTypography>
             {{t 'modalCard.enableMFAEmail.description'}}
             <strong>{{this.user.email}}</strong>
diff --git a/app/components/account-settings/security/multi-factor-auth/index.scss b/app/components/account-settings/security/multi-factor-auth/index.scss
index a7fa541cf..d22723f9f 100644
--- a/app/components/account-settings/security/multi-factor-auth/index.scss
+++ b/app/components/account-settings/security/multi-factor-auth/index.scss
@@ -1,26 +1,34 @@
-.mfa__method {
-  border: 1px solid darken(#f3f5f8, 5%);
-  background: #f3f5f8;
-  padding: 0.7em 1em 1em;
+.mfa-records-container {
+  border: 1px solid var(--account-settings-security-mfa-border-color);
 
-  h3 {
-    margin-bottom: 0;
+  .mfa-enabled {
+    background-color: var(
+      --account-settings-security-mfa-alert-success-background
+    );
   }
+}
+
+.alert-warn {
+  border: 1px solid var(--account-settings-security-mfa-alert-warn-border-color);
+  background-color: var(--account-settings-security-mfa-alert-warn-background);
+  color: var(--account-settings-security-mfa-alert-warn-text-color);
 
-  label {
-    cursor: default;
+  .alert-warn-link {
+    color: var(
+      --account-settings-security-mfa-alert-warn-text-color
+    ) !important;
   }
 }
 
-.mfa__method__enabled {
-  background: #80c081;
-  color: white;
-  border-radius: 0.2em;
-  padding: 0.3em 0.8em;
+.alert-success {
+  border: 1px solid
+    var(--account-settings-security-mfa-alert-success-border-color);
+  background-color: var(
+    --account-settings-security-mfa-alert-success-background
+  );
+  color: var(--account-settings-security-mfa-alert-success-text-color);
 }
 
-.ak-btn-loader {
-  :global(.ak-loader-circle-indicator) {
-    stroke: var(--mfa-loader-primary-contrast-text) !important;
-  }
+.info-box {
+  background-color: var(--account-settings-security-mfa-info-box-bg);
 }
diff --git a/app/components/account-settings/security/multi-factor-auth/index.ts b/app/components/account-settings/security/multi-factor-auth/index.ts
index a4b092736..9b4065035 100644
--- a/app/components/account-settings/security/multi-factor-auth/index.ts
+++ b/app/components/account-settings/security/multi-factor-auth/index.ts
@@ -89,6 +89,27 @@ export default class AccountSettingsSecurityMultiFactorAuthComponent extends Com
     return appMFA?.enabled ?? false;
   }
 
+  get mfaAppRecords() {
+    return [
+      {
+        osTypes: 'For Android, iOS, and Blackberry:',
+        app: 'Google Authenticator',
+        infoURL: 'https://support.google.com/accounts/answer/1066447?hl=en',
+      },
+      {
+        osTypes: 'For Android & iOS:',
+        app: 'Duo Mobile',
+        infoURL: 'https://guide.duo.com/third-party-accounts',
+      },
+      {
+        osTypes: 'For Windows Phone:',
+        app: 'Authenticator',
+        infoURL:
+          'https://www.microsoft.com/en-us/store/p/authenticator/9wzdncrfj3rj',
+      },
+    ];
+  }
+
   //------No MFA Enable Email start------
 
   @action
diff --git a/app/styles/_component-variables.scss b/app/styles/_component-variables.scss
index 7e475264a..89576aef7 100644
--- a/app/styles/_component-variables.scss
+++ b/app/styles/_component-variables.scss
@@ -1211,8 +1211,19 @@ body {
     --neutral-grey-200
   );
 
-  // variables for account-settings/mfa
-  --mfa-loader-primary-contrast-text: var(--primary-contrast-text);
+  // variables for account-settings/security
+  --account-settings-security-mfa-border-color: var(--border-color-1);
+  --account-settings-security-mfa-info-box-bg: var(--neutral-grey-100);
+  --account-settings-security-mfa-alert-warn-border-color: var(--warn-dark);
+  --account-settings-security-mfa-alert-warn-text-color: var(--warn-dark);
+  --account-settings-security-mfa-alert-warn-background: var(--warn-light);
+  --account-settings-security-mfa-alert-success-border-color: var(
+    --success-main
+  );
+  --account-settings-security-mfa-alert-success-text-color: var(--success-main);
+  --account-settings-security-mfa-alert-success-background: var(
+    --success-light
+  );
 
   // variables for project-settings/empty-list
   --project-settings-empty-list-border-radius: var(--border-radius);