decauthy/xsl/signIn.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">Base Project Template</xsl:param>
    <xsl:param name="PAGE_TITLE">Base Project Template Sign In</xsl:param>
    <xsl:param name="FORM_NAME">signIn</xsl:param>
    <xsl:param name="BTN_SUBMIT"/>
    <xsl:param name="BTN_RESET_PASSWORD">?Xaction=resetpassword</xsl:param>
    <xsl:param name="INVALID_SIGNIN"/>
    <xsl:param name="RESET_PASSWORD_SUCCESSFUL"/>
    <xsl:param name="VERSION"/>
    <xsl:param name="CSRF_TOKEN"/>

    <xsl:template match="/">
        <xsl:text disable-output-escaping="yes">&lt;!DOCTYPE html&gt;</xsl:text>

        <html lang="en">
            <head>
                <meta charset="utf-8"/>
                <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
                <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

                <title>
                    <xsl:value-of select="$APPLICATION_NAME"/>
                </title>

                <link rel="icon" type="image/x-icon" href="images/baseproject-logo.png"/>

                <link href="css/themes/Sandstone/bootstrap.min.css?version={$VERSION}" rel="stylesheet"/>
                <link href="css/bootstrap-icons.min.css?version={$VERSION}" rel="stylesheet"/>
                <link href="css/signIn.css?version={$VERSION}" rel="stylesheet"/>

                <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/signIn.js?version={$VERSION}"></script>
            </head>

            <body class="bg-light">

                <main class="min-vh-100 d-flex align-items-center justify-content-center px-3">

                    <div class="card shadow-sm border-0 login-card">

                        <div class="card-body p-4">

                            <div class="text-center mb-2">
                                <img src="images/dec-international-logo.png"
                                     alt="DEC International Logo"
                                     class="mb-1"
                                     style="max-width: 200px;"/>

<!--                                <h1 class="h5 fw-bold mb-1">
                                    <xsl:value-of select="$PAGE_TITLE"/>
                                </h1>-->

<!--                                <div class="text-muted small">
                                    Please sign in to continue
                                </div>-->
                            </div>

                            <xsl:if test="$INVALID_SIGNIN = 'TRUE'">
                                <div class="alert alert-danger d-flex align-items-center py-2" role="alert">
                                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                                    <div>Invalid username or password.</div>
                                </div>
                            </xsl:if>

                            <xsl:if test="$RESET_PASSWORD_SUCCESSFUL = 'TRUE'">
                                <div class="alert alert-info d-flex align-items-start py-2" role="alert">
                                    <i class="bi bi-info-circle-fill me-2 mt-1"></i>
                                    <div>
                                        If an account exists for the username provided, you will receive an email containing a temporary password. Return here to sign in and choose a new password.
                                    </div>
                                </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-3">
                                    <label for="user_name" class="form-label small fw-semibold">Username</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="bi bi-person-fill" aria-hidden="true"></i>
                                        </span>
                                        <input type="text"
                                               id="user_name"
                                               name="user_name"
                                               class="form-control"
                                               placeholder="Enter username"
                                               maxlength="128"
                                               autofocus="autofocus"
                                               autocomplete="username"/>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="user_password" class="form-label small fw-semibold">Password</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="bi bi-lock-fill" aria-hidden="true"></i>
                                        </span>
                                        <input id="user_password"
                                               name="user_password"
                                               type="password"
                                               class="form-control"
                                               placeholder="Enter password"
                                               maxlength="128"
                                               autocomplete="current-password"/>
                                    </div>
                                </div>

                                <div class="d-grid gap-2 mt-4">
                                    <button type="submit" class="btn btn-primary btnSignIn">
                                        <i class="bi bi-box-arrow-in-right me-1"></i>
                                        Sign In
                                    </button>

                                    <button type="button" class="btn btn-outline-secondary btnForgot">
                                        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_name" name="user_name"/>
                                <input type="hidden" name="csrf_token" value="{$CSRF_TOKEN}"/>
                            </form>

                        </div>

                        <div class="card-footer text-center bg-white border-0 pb-4">
                            <small class="text-muted">
                                <i class="bi bi-shield-lock me-1"></i>
                                Unauthorized Access is Prohibited
                            </small>
                        </div>

                    </div>

                </main>

            </body>
        </html>
    </xsl:template>

</xsl:stylesheet>