Spotlight

<script>
    //<![CDATA[
    function handleForm(xhr, status, args) {
        if (args.validationFailed)
            PF('spot').show();
        else
            PF('spot').hide();
    }

    //]]>
</script>


<div class="card">
    <h:form>
        <p:growl id="growl"/>

        <p:panel id="pnl" header="New User">
            <p:messages id="messages"/>
            <h:panelGroup id="grid" layout="block" styleClass="formgrid grid p-fluid">
                <div class="field col-12 md:col-6">
                    <p:outputLabel for="username" value="Username"/>
                    <p:inputText id="username" value="#{spotlightView.username}" required="true">
                        <f:validateLength minimum="2"/>
                    </p:inputText>
                    <p:message for="username"/>
                </div>
                <div class="field col-12 md:col-6">
                    <p:outputLabel for="email" value="Surname"/>
                    <p:inputText id="email" value="#{spotlightView.email}" required="true"/>
                    <p:message for="email"/>
                </div>
            </h:panelGroup>

            <p:commandButton value="Save" icon="pi pi-check" action="#{spotlightView.save}" update="growl grid"
                             oncomplete="handleForm(xhr, status, args)" styleClass="mt-3"/>
        </p:panel>

        <p:spotlight target="pnl" widgetVar="spot"/>
    </h:form>
</div>