Skip to content

Commit

Permalink
Merge pull request #1452 from appknox/PD-1428-account-settings-mfa-re…
Browse files Browse the repository at this point in the history 
…factor-remove-global-styles-css

Account Settings MFA Global CSS Migration
  • Loading branch information
@future-pirate-king
future-pirate-king authored Sep 9, 2024
2 parents 61d1126 + 4af3bb7 commit 041576b
Show file tree
Hide file tree
Showing 4 changed files with 191 additions and 164 deletions.
277 changes: 132 additions & 145 deletions app/components/account-settings/security/multi-factor-auth/index.hbs
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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}}
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
42 changes: 25 additions & 17 deletions app/components/account-settings/security/multi-factor-auth/index.scss
View file
Original file line number Diff line number Diff line change
@@ -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);
}
21 changes: 21 additions & 0 deletions app/components/account-settings/security/multi-factor-auth/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading

0 comments on commit 041576b

Please sign in to comment.