jfa-go/html/login-modal.html

<span class="lg:w-[55%]"></span> <!-- the if statement around the 55% width below messes up tailwind, so we force include it here --!>
<div id="modal-login" class="modal">
    <div class="my-[10%] row items-stretch relative mx-auto w-11/12 sm:w-4/5 lg:w-1/2">
        {{ $hasTwoCards := 0 }}
        {{ if index . "LoginMessageEnabled" }}
            {{ if .LoginMessageEnabled }}
                {{ $hasTwoCards = 1 }}
                <div class="card mx-2 flex-initial w-full lg:w-[35%] mb-4 lg:mb-0 dark:~d_neutral @low content">
                    {{ .LoginMessageContent }}
                </div>
            {{ end }}
        {{ end }}
        {{ if index . "userPageEnabled" }}
            {{ if and .userPageEnabled .showUserPageLink }}
                {{ $hasTwoCards = 1 }}
                <div class="card mx-2 flex-initial w-full lg:w-[35%] mb-4 lg:mb-0 dark:~d_neutral @low content">
                    <span class="heading row">{{ .strings.loginNotAdmin }}</span>
                    <a class="button ~info h-12 w-full" href="{{ .urlBase }}/my/account"><i class="ri-account-circle-fill mr-2"></i>{{ .strings.myAccount }}</a>
                </div>
            {{ end }}
        {{ end }}
        <form class="card mx-2 form-login w-full {{ if eq $hasTwoCards 1 }}lg:w-[55%]{{ end }} mb-0" href=""> 
            <span class="heading">{{ .strings.login }}</span>
            <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="login-user">
            <input type="password" class="field input ~neutral @high mb-4" placeholder="{{ .strings.password }}" id="login-password">
            <label>
                <input type="submit" class="unfocused">
                <span class="button ~urge @low full-width center supra submit">{{ .strings.login }}</span>
                {{ if index . "pwrEnabled" }}
                    {{ if .pwrEnabled }}
                        <span class="button ~info @low full-width center supra submit my-2" id="modal-login-pwr">{{ .strings.resetPassword }}</span>
                    {{ end }}
                {{ end }}
            </label>
        </form>
    </div>
</div>