kanidm/server/core/templates/credentials_update_partial.html

<script type="module" src="/pkg/modules/cred_update.mjs" async></script>
<script src="/pkg/external/base64.js" async></script>

<div class="row g-3" id="credentialUpdateDynamicSection" hx-on::before-swap="stillSwapFailureResponse(event)">
    <form class="needs-validation mb-5 pb-5" novalidate>
        (% match ext_cred_portal %)
            (% when CUExtPortal::None %)
            (% when CUExtPortal::Hidden %)
                <hr class="my-4" />
                <p>This account is externally managed. Some features may not be available.</p>
            (% when CUExtPortal::Some(url) %)
                <hr class="my-4" />
                <p>This account is externally managed. Some features may not be available.</p>
                <a href="(( url ))">Visit the external account portal</a>
        (% endmatch %)

        (% if warnings.len() > 0 %)
            <hr class="my-4" >
            (% for warning in warnings %)
                (% let is_danger = [CURegWarning::WebauthnAttestationUnsatisfiable, CURegWarning::Unsatisfiable].contains(warning) %)
                (% if is_danger %)
                    <div class='alert alert-danger' role="alert">
                (% else %)
                    <div class='alert alert-warning' role="alert">
                (% endif %)

                (% match warning %)
                    (% when CURegWarning::MfaRequired %)
                        Multi-Factor Authentication is required for your account. Either add TOTP or remove your password in favour of passkeys to submit.
                    (% when CURegWarning::PasskeyRequired %)
                        Passkeys are required for your account.
                    (% when CURegWarning::AttestedPasskeyRequired %)
                        Attested Passkeys are required for your account.
                    (% when CURegWarning::AttestedResidentKeyRequired %)
                        Attested Resident Keys are required for your account.
                    (% when CURegWarning::WebauthnAttestationUnsatisfiable %)
                        A webauthn attestation policy conflict has occurred and you will not be able to save your credentials
                    (% when CURegWarning::Unsatisfiable %)
                        An account policy conflict has occurred and you will not be able to save your credentials
                (% endmatch %)

                (% if is_danger %)
                    <br><br>
                    <b>Contact support IMMEDIATELY.</b>
                (% endif %)
                </div>
            (% endfor %)
        (% endif %)

        <!-- Attested Passkeys -->
        (% match attested_passkeys_state %)
            (% when CUCredState::Modifiable %)
                (% include "credentials_update_attested_passkeys.html" %)
                <button type="button" class="btn btn-primary" hx-post="/ui/reset/add_passkey" hx-vals='{"class": "Attested"}' hx-target="#credentialUpdateDynamicSection">
                    Add Attested Passkey
                </button>
            (% when CUCredState::DeleteOnly %)
                (% if attested_passkeys.len() > 0 %)
                    (% include "credentials_update_attested_passkeys.html" %)
                (% endif %)
            (% when CUCredState::AccessDeny %)
            (% when CUCredState::PolicyDeny %)
        (% endmatch %)

        <!-- Passkeys -->
        (% match passkeys_state %)
            (% when CUCredState::Modifiable %)
                (% include "credentials_update_passkeys.html" %)
                <!-- Here we are modifiable so we can render the button to add passkeys  -->
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary" hx-post="/ui/reset/add_passkey"
                                hx-vals='{"class": "Any"}'
                                hx-target="#credentialUpdateDynamicSection">
                            Add Passkey
                        </button>
                        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="visually-hidden">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" hx-post="/ui/api/cancel_mfareg" hx-swap="none">Cancel MFA Registration session</a></li>
                        </ul>
                    </div>


            (% when CUCredState::DeleteOnly %)
                (% if passkeys.len() > 0 %)
                    (% include "credentials_update_passkeys.html" %)
                (% endif %)
            (% when CUCredState::AccessDeny %)
            (% when CUCredState::PolicyDeny %)
        (% endmatch %)

        <!-- Password, totp credentials -->
        (% let primary_state = primary_state %)
        (% include "credentials_update_primary.html" %)

        <div id="cred-update-commit-bar" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-body">
                <span class="d-flex align-items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-floppy2-fill" viewBox="0 0 16 16">
                        <path d="M12 2h-2v3h2z"/>
                        <path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v13A1.5 1.5 0 0 0 1.5 16h13a1.5 1.5 0 0 0 1.5-1.5V2.914a1.5 1.5 0 0 0-.44-1.06L14.147.439A1.5 1.5 0 0 0 13.086 0zM4 6a1 1 0 0 1-1-1V1h10v4a1 1 0 0 1-1 1zM3 9h10a1 1 0 0 1 1 1v5H2v-5a1 1 0 0 1 1-1"/>
                    </svg>
                    <b class="px-1">Careful</b>- save when you're done:
                </span>
                <div class="mt-2 pt-2 border-top">
                    <button class="btn btn-danger" hx-post="/ui/api/cu_cancel" hx-target="body">Cancel</button>
                    <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Resolve the warnings at the top.">
                        <button
                                class="btn btn-success"
                                type="submit"
                                hx-post="/ui/api/cu_commit"
                                hx-boost="false"
                                (% if !warnings.is_empty() %)disabled(% endif %)
                        >Save Changes</button>
                    </span>
                </div>
            </div>
        </div>
    </form>
</div>