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

@using eSuite.API.Translation
@model eSuite.API.Controllers.ProfileViewModel

@{
    var passwordMinLength = 12;
    var t = await Model.TranslatorFactory.Use(Namespaces.Common);
    Layout = null;
}


@if (Model.Profile.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.Profile.SsoProviderId, t.T("LoginMethod"))
            @Html.DropDownListFor(m => m.Profile.SsoProviderId,
                new SelectList(
                    new List<KeyValuePair<long, string>>
                    {
                        new(-1, "Password")
            }.Concat(Model.Profile.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.Profile.Password, t.T("Password"))
                @Html.EditorFor(m => m.Profile.Password, new
                {
                    htmlAttributes = new
                    {
                        @class = "form-control",
                        autocomplete = "new-password"
                    }
                })
                @Html.ValidationMessageFor(m => m.Profile.Password, default)
            </div>

            <div>Passwords require:</div>
            <ul>
            <li id="minCharacters">@t.T("PasswordMinLength", new { minPasswordLength = 12 })</li>
            <li id="minSymbols">@t.T("PasswordMinSymbols", new { minSymbols = 1 })</li>
                <li id="minNumbers">@t.T("PasswordMinNumbers", new { minNumbers = 1 })</li>
                <li id="minLowerCase">@t.T("PasswordMinLowercase", new { minLowercase = 1 })</li>
            <li id="minUppserCase">@t.T("PasswordMinUppercase", new { minUppercase = 1 })</li>
            </ul>

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

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

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

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

                <div class="form-group">
                @Html.LabelFor(m => m.Profile.SecurityCode, t.T("AuthenticationCode"))
                    @Html.EditorFor(m => m.Profile.SecurityCode, new
                    {
                        htmlAttributes = new
                        {
                            @class = "form-control",
                            autocomplete = "one-time-code"
                        }
                    })
                    @Html.ValidationMessageFor(m => m.Profile.SecurityCode)
                </div>
            </div>
        </div>
        <div id="ssoLinkDiv">
        @t.T("SaveChangesToLinkSSOAccount")
            
        </div>
    </div>
}

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

    function UpdatePasswordDivVisibility()
    {
        var value = $('#Profile_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 = $('#Profile_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 = $('#Profile_Password').val();
        if (value !== '')
        {
            $('#confirmPasswordDiv').show();
        }
        else
        {
            $('#confirmPasswordDiv').hide();
        }

        UpdatePasswordValidationList();
    }

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

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

    UpdatePasswordDivVisibility();
    UpdateConfirmPasswordDivVisibility();
    TwoFactorAuthenticationEnabledVisibility();
    $('#Profile_Password').on('input', UpdateConfirmPasswordDivVisibility);
    $('#Profile_UsingTwoFactorAuthentication').change(TwoFactorAuthenticationEnabledVisibility);
    $('#Profile_SsoProviderId').change(UpdatePasswordDivVisibility);
</script>