huntingclubroster/xsl/login.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"/>
    
    
    
    <!-- Parameters -->
    <xsl:param name="APPLICATION_NAME">My Hunting Club Roster</xsl:param>
    <xsl:param name="PAGE_TITLE">Sign in to your hunting club workspace.</xsl:param>
    <xsl:param name="FORM_NAME">login</xsl:param>
    <xsl:param name="BTN_SUBMIT"></xsl:param>
    <xsl:param name="BTN_RESET_PASSWORD">./?Xaction=resetpassword</xsl:param>
    <xsl:param name="CSRF_TOKEN"/>
    <xsl:param name="INVALID_SIGNIN"></xsl:param>
    <xsl:param name="RESET_PASSWORD_SUCCESSFUL"></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>Sign in · <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" rel="stylesheet"/>
                <link href="images/MyHuntRoster_Logo.png" rel="icon" type="image/png"/>
                
                <script src="js/jquery-3.2.0.min.js?version={$VERSION}"> </script>
                <script src="js/bootstrap.bundle.min.js?version={$VERSION}"> </script>
                <script src="js/login.js?version={$VERSION}"></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>
                        </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="mb-4">
                                <img src="images/MyHuntRoster_Logo.png"
                                     alt="{$APPLICATION_NAME}"
                                     class="img-fluid"
                                     style="max-width: 340px; max-height: 140px; object-fit: contain;"/>
                            </div>
                            <h2>Welcome!</h2>
                            <p class="login-intro">
                                <xsl:value-of select="$PAGE_TITLE"/>
                            </p>
                            
                            <xsl:if test="$INVALID_SIGNIN = 'TRUE'">
                                <div class="alert alert-danger" role="alert">Invalid email address or password, or too many attempts. Please try again later.</div>
                            </xsl:if>
                            
                            <xsl:if test="$RESET_PASSWORD_SUCCESSFUL = 'TRUE'">
                                <div class="alert alert-info" role="alert">If an account exists for the email address provided, you will receive an email containing a temporary password and a link to reset your password.</div>
                            </xsl:if>
                            
                            <form action="{$BTN_SUBMIT}" name="{$FORM_NAME}" method="post" id="{$FORM_NAME}">
                                <input type="hidden" name="action" value="SignIn.login"/>
                                <input type="hidden" name="step" value="authenticate"/>
                                <input type="hidden" name="csrf_token" value="{$CSRF_TOKEN}"/>
                                <div class="mb-4">
                                    <label class="form-label" for="user_email">Email Address</label>
                                    <input type="email" class="form-control" id="user_email" name="user_email" autocomplete="email" maxlength="128" placeholder="Enter Email Address" autofocus="autofocus"/>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="user_password">Password</label>
                                    <input id="user_password" name="user_password" type="password" class="form-control" autocomplete="current-password" maxlength="128" placeholder="Enter password"/>
                                </div>
                                <div class="d-grid gap-2 mt-4">
                                    <button type="submit" class="btn btn-primary btnSignIn" style="min-height:48px">Sign In</button>
                                    <button type="button" class="btn btn-warning btnSignUp" style="min-height:44px">Sign Up for New Account</button>
                                    <button type="button" class="btn btn-outline-secondary btnForgot" style="min-height:44px">Forgot/Reset Password</button>
                                </div>
                            </form>
                            <form action="{$BTN_RESET_PASSWORD}" name="reset-password" method="post" id="reset-password">
                                <input type="hidden" id="reset_user_email" name="user_email"/>
                                <input type="hidden" name="csrf_token" value="{$CSRF_TOKEN}"/>
                            </form>
                            <p class="login-help">Need access to your club?<br/>Contact your club administrator to get started.</p>
                            <div class="login-bottom">
                                <div class="mb-2">Unauthorized Access is Prohibited</div>
                                <xsl:value-of select="$APPLICATION_NAME"/>
                                <span> · A product of OneSource IT Solutions</span>
                                
                            </div>
                        </div>
                    </main>
                </div>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>