You are an expert in writing code in many different languages. Your goal is to perform code completion for the following code, keeping in mind the rest of the code and the file meta data.
    Metadata details:
    filename: passkey.rs
    path of file: ./repos/kanidm/server/web_ui/user/src/credential
    
    the code of the file until where you have to start completion: use gloo::console;
use kanidm_proto::internal::{CURegState, CURequest, CUSessionToken, CUStatus};
use kanidm_proto::webauthn::{CreationChallengeResponse, RegisterPublicKeyCredential};
use kanidmd_web_ui_shared::constants::CLASS_BUTTON_SUCCESS;
use kanidmd_web_ui_shared::error::FetchError;
use serde::Serialize;
use wasm_bindgen::UnwrapThrowExt;
use wasm_bindgen_futures::JsFuture;
use yew::prelude::*;

use super::reset::{EventBusMsg, PasskeyClass, PasskeyModalProps};

use kanidmd_web_ui_shared::{do_request,
    
    fn view(&self, ctx: &Context<Self>) -> Html {
        console::debug!("passkey modal::view");

        let label_val = self.label_val.clone();

        let passkey_state = match &self.state {
            State::Init | State::Submitting | State::FetchingChallenge => {
                html! {
                      <div class="spinner-border text-dark" role="status">
                        <span class="visually-hidden">{ "Loading..." }</span>
                      </div>
                }
            }
            State::ChallengeReady(_challenge) => {
                let allowed_devices = ctx.props().allowed_devices.clone();
                // This works around a bug in safari :(
                html! {
                    <>
                        {
                            if let Some(allowed_devices) = allowed_devices {
                                html! {
                                    <>
                                        <p>{ "The following devices are allowed to register" }</p>
                                        <ul>
                                        {
                                            for allowed_devices.iter().map(|dev|
                                                html!{
                                                    <li> { dev } </li>
                                                }
                                            )
                                        }
                                        </ul>
                                    </>
                                }
                            } else {
                                html!{ <></> }
                            }
                        }
                        <button id="passkey-generate" type="button" class="btn btn-primary"
                            onclick={
                                ctx.link()
                                    .callback(move |_| {
                                        Msg::CredentialCreate
                                    })
                            }
                        >{ "Begin Passkey Enrollment" }</button>
                    </>
                }
            }
            State::CredentialReady(_) => {
                html! {
                    <h3>{ "Passkey Created!" }</h3>
                }
            }
        };

        let submit_enabled =
            !label_val.is_empty() && matches!(self.state, State::CredentialReady(_));

        let submit_state = match &self.state {
            State::CredentialReady(_rpkc) => {
                html! {
                    <>
                    <form class="row needs-validation" novalidate=true
                        onsubmit={ ctx.link().callback(move |e: SubmitEvent| {
                            #[cfg(debug_assertions)]
                            console::debug!("passkey modal::on form submit prevent default");
                            e.prevent_default();
                            if submit_enabled {
                                Msg::Submit
                            } else {
                                Msg::Cancel
                            }
                        } ) }
                    >
                      <label for="passkey-label" class="form-label">{ "Please name this Passkey" }</label>
                      <input
                        type="text"
                        class="form-control"
                        id="passkey-label"
                        placeholder=""
                        value={ label_val }
                        required=true
                        oninput={
                            ctx.link()
                                .callback(move |_| {
                                    Msg::LabelCheck
                                })
                        }
                      />
                    </form>
                    <button id="passkey-submit" type="button" class={CLASS_BUTTON_SUCCESS}
                        disabled={ !submit_enabled }
                        onclick={
                            ctx.link()
                                .callback(move |_| {
                                    Msg::Submit
                                })
                        }
                    >{ "Submit" }</button>
                    </>
                }
            }
            _ => {
                html! {
                    <button id="passkey-cancel" type="button" class="btn btn-secondary"
                        onclick={
                            ctx.link()
                                .callback(move |_| {
                                    Msg::Cancel
                                })
                        }
                    >{ "Cancel" }</button>
                }
            }
        };

        html! {
          <>
            <button type="button"
                class="btn btn-primary"
                data-bs-toggle="modal"
                data-bs-target="#staticPasskeyCreate"
                onclick={
                    ctx.link()
                        .callback(move |_| {
                            Msg::Generate
                        })
                }
            >
              { "Add Passkey" }
            </button>
            <div class="modal fade" id="staticPasskeyCreate" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticPasskeyLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="staticPasskeyLabel">{ "Add a New Passkey" }</h5>
                    <button type="button" class="btn-close" aria-label="Close"
                        onclick={
                            ctx.link()
                                .callback(move |_| {
                                    Msg::Cancel
                                })
                        }
                    ></button>
                  </div>
                  <div class="modal-body">

                    <div class="container">
                      <div class="row">
                        { passkey_state }
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer">
                    { submit_state }
                  </div>
                </div>
              </div>
            </div>
          </>
        }
    }