hotfix organization 2fa settings as should not display method selection

This commit is contained in:
Ronald A. Richardson
2024-01-24 15:53:18 +08:00
parent 7f900fe218
commit 3fc5bdb32e
4 changed files with 29 additions and 16 deletions

View File

@@ -11,19 +11,21 @@
<Toggle @isToggled={{this.isTwoFaEnforced}} @onToggle={{this.onTwoFaEnforcedToggled}} />
</div>
{{/if}}
<label class="text-base font-medium">Choose an authentication method</label>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">In addition to your username and password, you'll have to enter a code (delivered via app or SMS) to sign in to your account</p>
{{#each @twoFaMethods as |method|}}
<div class="border rounded-lg px-4 py-3 mt-2 transition duration-300 {{if (eq this.selectedTwoFaMethod method.key) 'border-blue-500' 'border-gray-200 dark:border-gray-700'}}">
<input type="radio" name="2fa-method" id="{{method.name}}" checked={{eq this.selectedTwoFaMethod method.key}} {{on "change" (fn this.onTwoFaSelected method.key)}} />
<label for="{{method.name}}">
{{method.name}}
{{#if method.recommended}}
<span class="bg-blue-500 rounded-xl text-white px-2 py-1 ml-2 text-xs font-semibold">Recommended</span>
{{/if}}
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">{{method.description}}</p>
</label>
</div>
{{/each}}
{{#if this.showMethodSelection}}
<label class="text-base font-medium">Choose an authentication method</label>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">In addition to your username and password, you'll have to enter a code (delivered via app or SMS) to sign in to your account</p>
{{#each @twoFaMethods as |method|}}
<div class="border rounded-lg px-4 py-3 mt-2 transition duration-300 {{if (eq this.selectedTwoFaMethod method.key) 'border-blue-500' 'border-gray-200 dark:border-gray-700'}}">
<input type="radio" name="2fa-method" id="{{method.name}}" checked={{eq this.selectedTwoFaMethod method.key}} {{on "change" (fn this.onTwoFaSelected method.key)}} />
<label for="{{method.name}}">
{{method.name}}
{{#if method.recommended}}
<span class="bg-blue-500 rounded-xl text-white px-2 py-1 ml-2 text-xs font-semibold">Recommended</span>
{{/if}}
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">{{method.description}}</p>
</label>
</div>
{{/each}}
{{/if}}
</div>
{{/if}}

View File

@@ -68,6 +68,15 @@ export default class TwoFaSettingsComponent extends Component {
*/
@tracked showEnforceOption;
/**
* Indicates whether the settings should render an option to select 2fa `mn=ethod`
* Method is a flag that indicates which method users can receive a 2FA code from.
*
* @property {boolean} showEnforceOption
* @public
*/
@tracked showMethodSelection;
/**
* Class constructor to initialize the component.
*
@@ -77,11 +86,12 @@ export default class TwoFaSettingsComponent extends Component {
* @param {Object} options.twoFaSettings - The current Two-Factor Authentication settings.
* @param {Array} options.twoFaMethods - Available Two-Factor Authentication methods.
*/
constructor(owner, { twoFaSettings, twoFaMethods, showEnforceOption }) {
constructor(owner, { twoFaSettings, twoFaMethods, showEnforceOption, showMethodSelection = true }) {
super(...arguments);
const userSelectedMethod = isArray(twoFaMethods) ? twoFaMethods.find(({ key }) => key === twoFaSettings.method) : null;
this.showMethodSelection = showMethodSelection === true;
this.showEnforceOption = showEnforceOption === true;
this.isTwoFaEnabled = twoFaSettings.enabled === true;
this.isTwoFaEnforced = twoFaSettings.enforced === true;

View File

@@ -17,5 +17,5 @@
{{!-- Add Locale Selector to Header --}}
<EmberWormhole @to="view-header-actions">
<LocaleSelector />
<LocaleSelector class="mr-0.5" />
</EmberWormhole>

View File

@@ -9,6 +9,7 @@
{{#if this.loadCompanyTwoFaSettings.isIdle}}
<TwoFaSettings
@showEnforceOption={{true}}
@showMethodSelection={{false}}
@twoFaMethods={{this.methods}}
@twoFaSettings={{this.twoFaSettings}}
@onTwoFaToggled={{this.onTwoFaToggled}}