Backend/e-suite.API/eSuite.API/Views/Shared/_loginMethodChooser.cshtml

@model eSuite.API.Models.IPasswordInformation


@if (Model.DomainSsoProviderId != null)
{
    <div id="domainLoginMethod">
        Your domain has authorisation from an external source.
    </div>
}
else
{
    <div id="userLoginMethod" class="changePasswordBlock">
        <div class="form-group">
            @Html.LabelFor(m => m.SsoProviderId)
            @Html.DropDownListFor(m => m.SsoProviderId,
                new SelectList(
                    new List<KeyValuePair<long, string>>
                    {
                        new(-1, "Password")
                    }.Concat(Model.SsoProviders.OrderBy(x => x.Value)), nameof(KeyValuePair<long, string>.Key), nameof(KeyValuePair<long, string>.Value)))
        </div>

        <div id="passwordDiv">
            <div class="form-group">
                @Html.LabelFor(m => m.Password)
                @Html.EditorFor(m => m.Password, new
                {
                    htmlAttributes = new
                    {
                        @class = "form-control",
                        autocomplete = "new-password"
                    }
                })
                @Html.ValidationMessageFor(m => m.Password, default)
            </div>

            <div>Passwords require:</div>
            <ul>
                <li id="minCharacters">At least 12 characters </li>
                <li id="minSymbols">At least 1 symbol</li>
                <li id="minNumbers">At least 1 number</li>
                <li id="minLowerCase">At least 1 lowercase letter</li>
                <li id="minUppserCase">At least 1 uppercase letter</li>
            </ul>

            <div id="confirmPasswordDiv">
                <div class="form-group">
                    @Html.LabelFor(m => m.ConfirmPassword)
                    @Html.EditorFor(m => m.ConfirmPassword, new
                    {
                        htmlAttributes = new
                        {
                            @class = "form-control",
                            autocomplete = "new-password"
                        }
                    })
                    @Html.ValidationMessageFor(m => m.ConfirmPassword)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(m => m.UsingTwoFactorAuthentication)
                @Html.EditorFor(m => m.UsingTwoFactorAuthentication, new { htmlAttributes = new { } })
                @Html.ValidationMessageFor(m => m.UsingTwoFactorAuthentication)
            </div>

            <div id="tfaDetailsDiv">
                <div class="form-group">
                    <div>
                        <label>@Model.TwoFactorAuthenticationSettings.ManualEntrySetupCode</label>
                    </div>

                    <div>
                        <img src="@Model.TwoFactorAuthenticationSettings.QrCodeImageUrl" alt="@Model.TwoFactorAuthenticationSettings.ManualEntrySetupCode"/>
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => m.SecurityCode)
                    @Html.EditorFor(m => m.SecurityCode, new
                    {
                        htmlAttributes = new
                        {
                            @class = "form-control",
                            autocomplete = "one-time-code"
                        }
                    })
                    @Html.ValidationMessageFor(m => m.SecurityCode)
                </div>
            </div>
        </div>
        <div id="ssoLinkDiv">
            Save changes to trigger the process that will link your SSO Account.
        </div>
    </div>
}

<script type="text/javascript">
    var CurrentSsoProviderId = $('#SsoProviderId').val();

    function UpdatePasswordDivVisibility()
    {
        var value = $('#SsoProviderId').val();

        var ssoAlreadyLinked = value == CurrentSsoProviderId;

        if (value == -1)
        {
            $('#passwordDiv').show();
            $('#ssoLinkDiv').hide();
        }
        else
        {
            $('#passwordDiv').hide();

            if (!ssoAlreadyLinked)
            {
                $('#ssoLinkDiv').show();
            }
            else
            {
                $('#ssoLinkDiv').hide();
            }
        }
    }

    function UpdatePasswordValidationList()
    {
        var value = $('#Password').val();

        if (value.length >= 12)
        {
            $("#minCharacters:not(.checked)").addClass("checked");
        }
        else
        {
            $("#minCharacters").removeClass("checked");
        }

        if (/[^a-zA-Z0-9]+/.test(value)) {
            $("#minSymbols:not(.checked)").addClass("checked");
        }
        else {
            $("#minSymbols").removeClass("checked");
        }

        if (/\d+/g.test(value)) {
            $("#minNumbers:not(.checked)").addClass("checked");
        }
        else {
            $("#minNumbers").removeClass("checked");
        }

        if (/[a-z]/g.test(value)) {
            $("#minLowerCase:not(.checked)").addClass("checked");
        }
        else {
            $("#minLowerCase").removeClass("checked");
        }

        if (/[A-Z]/g.test(value)) {
            $("#minUppserCase:not(.checked)").addClass("checked");
        }
        else {
            $("#minUppserCase").removeClass("checked");
        }
    }

    function UpdateConfirmPasswordDivVisibility()
    {
        var value = $('#Password').val();
        if (value !== '')
        {
            $('#confirmPasswordDiv').show();
        }
        else
        {
            $('#confirmPasswordDiv').hide();
        }

        UpdatePasswordValidationList();
    }

    var UsingTwoFactorAuthenticationEnabled = $('#UsingTwoFactorAuthentication').is(':checked');

    function TwoFactorAuthenticationEnabledVisibility()
    {
        var enabled = UsingTwoFactorAuthenticationEnabled;
        var wantToEnabled = $('#UsingTwoFactorAuthentication').is(':checked');
        if (!enabled && wantToEnabled)
        {
            $('#tfaDetailsDiv').show();
        }
        else
        {
            $('#tfaDetailsDiv').hide();
        }
    }

    UpdatePasswordDivVisibility();
    UpdateConfirmPasswordDivVisibility();
    TwoFactorAuthenticationEnabledVisibility();
    $('#Password').on('input', UpdateConfirmPasswordDivVisibility);
    $('#UsingTwoFactorAuthentication').change(TwoFactorAuthenticationEnabledVisibility);
    $('#SsoProviderId').change(UpdatePasswordDivVisibility);
</script>