huntingclubroster/xsl/createAccount.xsl

<?xml version='1.0' encoding='UTF-8'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    
    <xsl:output method="html" encoding="UTF-8" indent="yes"/>
    
    <xsl:param name="APPLICATION_NAME">MyHuntRoster</xsl:param>
    <xsl:param name="PAGE_TITLE">Create your account to get started.</xsl:param>
    <xsl:param name="FORM_NAME">signUp</xsl:param>
    <xsl:param name="BTN_SUBMIT"></xsl:param>
    <xsl:param name="REGISTER_ACTION"></xsl:param>
    <xsl:param name="BTN_SIGNIN">?Xaction=signin</xsl:param>
    <xsl:param name="SIGNUP_ERROR"></xsl:param>
    <xsl:param name="SIGNUP_SUCCESSFUL"></xsl:param>
    <xsl:param name="USER_FIRST_NAME"></xsl:param>
    <xsl:param name="USER_LAST_NAME"></xsl:param>
    <xsl:param name="USER_EMAIL"></xsl:param>
    <xsl:param name="REGISTRATION_KIND">new_club</xsl:param>
    <xsl:param name="CLUB_NAME"/>
    <xsl:param name="USER_NAME"></xsl:param>
    <xsl:param name="CSRF_TOKEN"></xsl:param>
    <xsl:param name="VERSION"></xsl:param>
    
    <xsl:template match="/">
        <xsl:text disable-output-escaping="yes">&lt;!DOCTYPE html&gt;</xsl:text>
        
        <html lang="en" data-bs-theme="light">
            <head>
                <meta charset="utf-8"/>
                <meta name="viewport" content="width=device-width, initial-scale=1"/>
                <meta name="robots" content="noindex"/>
                
                <title>Create account · <xsl:value-of select="$APPLICATION_NAME"/></title>
                
                <link href="css/themes/MyHuntingClubRoster/bootstrap.css?version={$VERSION}" rel="stylesheet"/>
                <link href="css/bootstrap-icons.min.css?version={$VERSION}"                  rel="stylesheet"/>
                <link href="css/login.css?version={$VERSION}"                                rel="stylesheet"/>
                <link href="images/MyHuntRoster_Logo.png"                                    rel="icon" type="image/png"/>
                
                <script src="js/jquery-3.7.1.min.js"></script>
                <script src="js/login.js"></script>
            </head>
            <body>
                <div class="login-shell">
                    <aside class="login-story" aria-label="About MyHuntRoster">
                        <a href="./" class="login-brand">
                            <svg class="brand-mark" viewBox="0 0 36 40" aria-hidden="true">
                                <path fill="currentColor" d="M18 1 5 18h7L2 31h13v8h6v-8h13L24 18h7Z"/>
                            </svg>
                            <span>
                                <xsl:value-of select="$APPLICATION_NAME"/>
                            </span>
                        </a>
                        <div class="story-copy">
                            <div class="eyebrow">Less paperwork. More outdoors.</div>
                            <h1>Your club.<br/>Your people.<br/>Your season.</h1>
                            <p>A simpler way to keep your hunting club connected, organized, and ready for what's next.</p>
                        </div>
                        <svg class="landscape" viewBox="0 0 600 400" preserveAspectRatio="xMidYMax slice" aria-hidden="true">
                            <path fill="#254e3c" d="M0 180Q150 70 320 200T600 140V400H0Z"/>
                            <path fill="#102e24" d="M0 300Q200 160 380 280T600 210V400H0Z"/>
                            <g fill="#0d291f">
                                <path d="m70 145-45 100h27l-39 75h44v80h25v-80h44l-39-75h28Z"/>
                                <path d="m505 105-50 120h30l-44 90h50v85h28v-85h50l-44-90h30Z"/>
                                <path d="m400 205-32 75h18l-27 60h31v60h20v-60h31l-27-60h18Z"/>
                            </g>
                        </svg>
                        <div class="story-footer">Built around the way your club works.</div>
                    </aside>
                    <main class="login-panel" id="main-content">
                        <div class="login-form-wrap">
                            <a href="./" class="login-brand mobile-brand">
                                <svg class="brand-mark" viewBox="0 0 36 40" aria-hidden="true">
                                    <path fill="currentColor" d="M18 1 5 18h7L2 31h13v8h6v-8h13L24 18h7Z"/>
                                </svg>
                                <span>
                                    <xsl:value-of select="$APPLICATION_NAME"/>
                                </span>
                            </a>
                            <div class="panel-label">Create account</div>
                            <h2>Your next season starts here.</h2>
                            <p class="login-intro">
                                <xsl:value-of select="$PAGE_TITLE"/>
                            </p>
                            <xsl:if test="string-length(normalize-space($SIGNUP_ERROR)) &gt; 0">
                                <div class="alert alert-danger" role="alert">
                                    <xsl:value-of select="$SIGNUP_ERROR"/>
                                </div>
                            </xsl:if>
                            <xsl:if test="$SIGNUP_SUCCESSFUL = 'TRUE'">
                                <div class="alert alert-success" role="alert">Your account has been created. <xsl:choose><xsl:when test="$REGISTRATION_KIND = 'invited'">Verify your email, then sign in and accept your club invitation.</xsl:when><xsl:otherwise>Your new club is registered. Verify your email, then sign in and set up an authenticator to start managing it.</xsl:otherwise></xsl:choose> Check your email, or <a href="main.php?Xaction=verifyemail">request a verification link</a>.</div>
                            </xsl:if>
                            <xsl:if test="$SIGNUP_SUCCESSFUL != 'TRUE'">
                                <form action="{$BTN_SUBMIT}" name="{$FORM_NAME}" id="{$FORM_NAME}" method="post" data-create-account="true">
                                    <xsl:if test="string-length(normalize-space($REGISTER_ACTION)) &gt; 0">
                                        <input type="hidden" name="action" value="{$REGISTER_ACTION}"/>
                                    </xsl:if>
                                    <xsl:if test="string-length($CSRF_TOKEN) &gt; 0">
                                        <input type="hidden" name="csrf_token" value="{$CSRF_TOKEN}"/>
                                    </xsl:if>
                                    <input type="hidden" name="registration_kind" value="{$REGISTRATION_KIND}"/>
                                    <xsl:choose><xsl:when test="$REGISTRATION_KIND = 'invited'"><p>Use the email address your club administrator invited. After verifying your email, accept the invitation under Invitations.</p></xsl:when><xsl:otherwise><p>Register your hunting club and become its administrator. Verify your email and set up an authenticator before managing the club.</p></xsl:otherwise></xsl:choose>
                                    <div class="row g-3">
                                        <xsl:if test="$REGISTRATION_KIND != 'invited'"><div class="col-12"><label for="club_name" class="form-label">New club name</label><input type="text" id="club_name" name="club_name" class="form-control" maxlength="128" required="required" value="{$CLUB_NAME}"/><div class="form-text">This creates a separate club. Entering an existing club's name does not grant access to it.</div></div></xsl:if>
                                        <div class="col-sm-6">
                                            <label for="user_first_name" class="form-label">First name</label>
                                            <input type="text" id="user_first_name" name="user_first_name" class="form-control" autocomplete="given-name" required="required" value="{$USER_FIRST_NAME}"/>
                                        </div>
                                        <div class="col-sm-6">
                                            <label for="user_last_name" class="form-label">Last name</label>
                                            <input type="text" id="user_last_name" name="user_last_name" class="form-control" autocomplete="family-name" required="required" value="{$USER_LAST_NAME}"/>
                                        </div>
                                        <div class="col-12">
                                            <label for="user_email" class="form-label">Email address</label>
                                            <input type="email" id="user_email" name="user_email" class="form-control" autocomplete="email" required="required" value="{$USER_EMAIL}" autocapitalize="none" spellcheck="false"/>
                                        </div>
                                        <div class="col-12">
                                            <label for="user_name" class="form-label">Username</label>
                                            <input type="text" id="user_name" name="user_name" class="form-control" autocomplete="username" required="required" value="{$USER_NAME}" autocapitalize="none" spellcheck="false"/>
                                        </div>
                                        <div class="col-12">
                                            <label for="user_password" class="form-label">Password</label>
                                            <input type="password" id="user_password" name="user_password" class="form-control" autocomplete="new-password" required="required"/>
                                        </div>
                                        <div class="col-12">
                                            <label for="user_password_confirm" class="form-label">Confirm password</label>
                                            <input type="password" id="user_password_confirm" name="user_password_confirm" class="form-control" autocomplete="new-password" required="required" aria-describedby="confirm-password-help"/>
                                            <div id="confirm-password-help" class="form-text">Enter your password again.</div>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary w-100 mt-4">Create account</button>
                                    <p class="small text-secondary mt-3 mb-0">Club access requires a verified email. Administrators also use an authenticator.</p>
                                </form>
                            </xsl:if>
                            <p class="login-help"><xsl:choose><xsl:when test="$REGISTRATION_KIND = 'invited'"><a href="main.php?Xaction=signup">Register a new club instead</a></xsl:when><xsl:otherwise>Invited to a club? <a href="main.php?Xaction=signup&amp;membership=invited">Create your member account</a>.</xsl:otherwise></xsl:choose></p>
                            <p class="login-help">Already have an account? <a href="{$BTN_SIGNIN}">Sign in</a></p>
                            <div class="login-bottom">
                                <div class="mb-2">Unauthorized Access is Prohibited</div>
                                <span>OneSource IT Solutions · </span>
                                <xsl:value-of select="$APPLICATION_NAME"/>
                            </div>
                        </div>
                    </main>
                </div>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>