<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1"/>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <meta http-equiv="cache-control" content="no-cache,no-store"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="expires" content="-1"/>

    <title>OpenID-Whisperer</title>
    <script type='text/javascript'>
        //<![CDATA[
        function LoginErrors(){
            this.userNameFormatError = 'Enter your user ID in the format \u0026quot;domain\\user\u0026quot; or \u0026quot;user@domain\u0026quot;.';
            this.passwordEmpty = 'Enter your password.';
            this.passwordTooLong = 'Password is too long (\u0026gt; 128 characters).';
            this.codeChallengeEmpty = 'Enter your user code';
        };
        var maxPasswordLength = 128;

        function InputUtil(errTextElementID, errDisplayElementID) {
            if (!errTextElementID)  errTextElementID = 'errorText';
            if (!errDisplayElementID)  errDisplayElementID = 'error';
            this.hasFocus = false;
            this.errLabel = document.getElementById(errTextElementID);
            this.errDisplay = document.getElementById(errDisplayElementID);
        };
        InputUtil.prototype.canDisplayError = function () {
            return this.errLabel && this.errDisplay;
        }
        InputUtil.prototype.checkError = function () {
            if (!this.canDisplayError){
                throw new Error ('Error element not present');
            }
            if (this.errLabel?.innerHTML) {
                this.errDisplay.style.display = '';
                var cause = this.errLabel.getAttribute('for');
                if (cause) {
                    var causeNode = document.getElementById(cause);
                    if (causeNode?.value) {
                        causeNode.focus();
                        this.hasFocus = true;
                    }
                }
            }
            else {
                this.errDisplay.style.display = 'none';
            }
        };
        InputUtil.prototype.setInitialFocus = function (input) {
            if (this.hasFocus) return;
            var node = document.getElementById(input);
            if (node) {
                if ((/^\s*$/).test(node.value)) {
                    node.focus();
                    this.hasFocus = true;
                }
            }
        };
        InputUtil.prototype.setError = function (input, errorMsg) {
            if (!this.canDisplayError) {
                throw new Error('Error element not present');
            }
            input.focus();

            if (errorMsg) {
                this.errLabel.innerHTML = errorMsg;
            }
            this.errLabel.setAttribute('for', input.id);
            this.errDisplay.style.display = '';
        };
        InputUtil.makePlaceholder = function (input) {
            var ua = navigator.userAgent;

            if (ua != null &&
                (ua.match(/MSIE 9.0/) != null ||
                    ua.match(/MSIE 8.0/) != null ||
                    ua.match(/MSIE 7.0/) != null)) {
                var node = document.getElementById(input);
                if (node) {
                    var placeholder = node.getAttribute("placeholder");
                    if (placeholder != null && placeholder != '') {
                        var label = document.createElement('input');
                        label.type = "text";
                        label.value = placeholder;
                        label.readOnly = true;
                        label.style.position = 'absolute';
                        label.style.borderColor = 'transparent';
                        label.className = node.className + ' hint';
                        label.tabIndex = -1;
                        label.onfocus = function () { this.nextSibling.focus(); };

                        node.style.position = 'relative';
                        node.parentNode.style.position = 'relative';
                        node.parentNode.insertBefore(label, node);
                        node.onkeyup = function () { InputUtil.showHint(this); };
                        node.onblur = function () { InputUtil.showHint(this); };
                        node.style.background = 'transparent';

                        node.setAttribute("placeholder", "");
                        InputUtil.showHint(node);
                    }
                }
            }
        };
        InputUtil.focus = function (inputField) {
            var node = document.getElementById(inputField);
            if (node) node.focus();
        };
        InputUtil.hasClass = function(node, clsName) {
            return node.className.match(new RegExp('(\\s|^)' + clsName + '(\\s|$)'));
        };
        InputUtil.addClass = function(node, clsName) {
            if (!this.hasClass(node, clsName)) node.className += " " + clsName;
        };
        InputUtil.removeClass = function(node, clsName) {
            if (this.hasClass(node, clsName)) {
                var reg = new RegExp('(\\s|^)' + clsName + '(\\s|$)');
                node.className = node.className.replace(reg, ' ');
            }
        };
        InputUtil.showHint = function (node, gotFocus) {
            if (node.value && node.value != '') {
                node.previousSibling.style.display = 'none';
            }
            else {
                node.previousSibling.style.display = '';
            }
        };
        InputUtil.updatePlaceholder = function (input, placeholderText) {
            var node = document.getElementById(input);
            if (node) {
                var ua = navigator.userAgent;
                if (ua != null &&
                    (ua.match(/MSIE 9.0/) != null ||
                        ua.match(/MSIE 8.0/) != null ||
                        ua.match(/MSIE 7.0/) != null)) {
                    var label = node.previousSibling;
                    if (label != null) {
                        label.value = placeholderText;
                    }
                }
                else {
                    node.placeholder = placeholderText;
                }
            }
        };

        //]]>
    </script>
    <link rel="stylesheet" type="text/css" href="{{url_for('openid.static', filename='style.css') }}" />
</head>
<body dir="ltr" class="body">
<div id="noScript" style="position:static; width:100%; height:100%; z-index:100">
    <h1>JavaScript is required</h1>
    <p>This web browser does not support JavaScript or JavaScript in this web browser is not enabled.</p>
    <p>To find out if your web browser supports JavaScript or to enable JavaScript, see web browser help.</p>
</div>
<script type="text/javascript" language="JavaScript">
    document.getElementById("noScript").style.display = "none";
</script>
<div id="fullPage" style="display:none">
    <div id="brandingWrapper" class="float">
        <div id="branding"></div>
    </div>
    <div id="contentWrapper" class="float">
        <div id="content">
            <div id="header">
                <h4>OpenID Whisperer</h4><h5>Identity and Token Service</h5>
            </div>
            <main>
                <div id="workArea">
                    <div id="authArea" class="groupMargin">
                        {% if termination_reply %}
                        <div id="TermMsg">{{ termination_reply }}</div>
                        {% else %}
                        <div id="loginArea">
                            <div id="loginMessage" class="groupMargin">Sign in</div>
                            <form method="post" id="loginForm" autocomplete="off" novalidate="novalidate" onKeyPress="if (event && event.keyCode == 13) Login.submitLoginRequest();" action="{{action}}">
                                <div id="error" class="fieldMargin error smallText">
                                    <span id="errorText" aria-live="assertive" role="alert"></span>
                                </div>
                                <div id="formsAuthenticationArea">
                                    <div id="userNameArea">
                                        <label id="userNameInputLabel" for="userNameInput" class="hidden">User Account</label>
                                        <input id="userNameInput" name="UserName" type="email" value="" tabindex="1" class="text fullWidth"
                                               spellcheck="false" placeholder="someone@example.com" autocomplete="off"/>
                                    </div>
                                    <div id="passwordArea">
                                        <label id="passwordInputLabel" for="passwordInput" class="hidden">Password</label>
                                        <input id="passwordInput" name="Password" type="password" tabindex="2" class="text fullWidth"
                                               placeholder="Password" autocomplete="off"/>
                                    </div>
                                    {% if requires_mfa %}
                                    <div id="mfaArea">
                                        <label id="mfaInputLabel" for="mfaInput" class="hidden">Multi-factor Code</label>
                                        <input id="mfaInput" name="Mfa" type="text" tabindex="2" class="text fullWidth"
                                               placeholder="MFA Code" autocomplete="off"/>
                                    </div>
                                    {% endif %}
                                    {% if allows_kmsi %}
                                    <div id="kmsiArea" style="margin-bottom: 8px">
                                        <input type="checkbox" name="Kmsi" id="kmsiInput" value="true" tabindex="3" />
                                        <label for="kmsiInput">Keep me signed in</label>
                                    </div>
                                    {% endif %}
                                    {% if requires_user_code %}
                                    <div id="codeChallengeArea">
                                        <label id="codeChallengeInputLabel" for="codeChallengeInput" class="hidden">Code Challenge</label>
                                        <input id="codeChallengeInput" name="CodeChallenge" type="text" tabindex="2" class="text fullWidth"
                                               placeholder="User Code" autocomplete="off"/>
                                    </div>
                                    {% endif %}
                                    <div id="submissionArea" class="submitMargin">
                                        <span id="submitButton" class="submit" tabindex="4" role="button"
                                          onKeyPress="if (event && event.keyCode == 32) Login.submitLoginRequest();"
                                          onclick="return Login.submitLoginRequest();">{{ submit_label }}</span>
                                    </div>
                                </div>
                                <input id="optionClientId" type="hidden" name="client_id" value="{{ client_id }}"/>
                                <input id="optionRedirectUri" type="hidden" name="redirect_uri" value="{{ redirect_uri }}"/>
                                <input id="optionNonce" type="hidden" name="nonce" value="{{ nonce }}"/>
                                <input id="optionState" type="hidden" name="state" value="{{ state }}"/>
                                <input id="optionResource" type="hidden" name="resource" value="{{ resource }}"/>
                                {% if requires_pkce %}
                                <input id="optionCodeChallenge" type="hidden" name="code_challenge" value="{{ code_challenge }}"/>
                                {% endif %}
                                <input id="optionCodeChallengeMethod" type="hidden" name="code_challenge_method" value="{{ code_challenge_method }}"/>
                                <input id="optionResponseMode" type="hidden" name="response_mode" value="{{ response_mode }}"/>
                                <input id="optionResponseType" type="hidden" name="response_type" value="{{ response_type }}"/>
                                <input id="optionPrompt" type="hidden" name="prompt" value="{{ prompt }}"/>
                                <input id="optionForms" type="hidden" name="AuthMethod" value="FormsAuthentication"/>
                            </form>

                            <div id="authOptions">
                                <form id="options" method="post" action="{{ action }}}">
                                    <script type="text/javascript">
                                        function SelectOption(option) {
                                            var w = document.getElementById('waitingWheelDiv');
                                            if(w) w.style.display = 'inline';
                                            var i = document.getElementById('optionSelection');
                                            i.value = option;
                                            document.forms['options'].submit();
                                            return false;
                                        }
                                    </script>
                                    <input id="optionSelection" type="hidden" name="AuthMethod" />
                                    <input id="userNameInputOptionsHolder" name="UserName" value="" type="hidden"/>
                                    <div id='authOptionLinks' class='groupMargin'><div id="waitingWheelDiv" style="display: none;"><div id="WaitingWheel">
                                        <!-- NOTE: This style portion is identical to cookie pull page, they are not in shared css file because of legacy dependancies for custom themes-->
                                        <!-- CSS for small "waiting" wheel -->
                                        <style>
                                            #floatingCirclesG {
                                                position: relative;
                                                width: 125px;
                                                height: 125px;
                                                margin: auto;
                                                transform: scale(0.4);
                                                -o-transform: scale(0.4);
                                                -ms-transform: scale(0.4);
                                                -webkit-transform: scale(0.4);
                                                -moz-transform: scale(0.4);
                                            }

                                            .f_circleG {
                                                position: absolute;
                                                height: 22px;
                                                width: 22px;
                                                border-radius: 12px;
                                                -o-border-radius: 12px;
                                                -ms-border-radius: 12px;
                                                -webkit-border-radius: 12px;
                                                -moz-border-radius: 12px;
                                                animation-name: f_fadeG;
                                                -o-animation-name: f_fadeG;
                                                -ms-animation-name: f_fadeG;
                                                -webkit-animation-name: f_fadeG;
                                                -moz-animation-name: f_fadeG;
                                                animation-duration: 1.2s;
                                                -o-animation-duration: 1.2s;
                                                -ms-animation-duration: 1.2s;
                                                -webkit-animation-duration: 1.2s;
                                                -moz-animation-duration: 1.2s;
                                                animation-iteration-count: infinite;
                                                -o-animation-iteration-count: infinite;
                                                -ms-animation-iteration-count: infinite;
                                                -webkit-animation-iteration-count: infinite;
                                                -moz-animation-iteration-count: infinite;
                                                animation-direction: normal;
                                                -o-animation-direction: normal;
                                                -ms-animation-direction: normal;
                                                -webkit-animation-direction: normal;
                                                -moz-animation-direction: normal;
                                            }

                                            #frotateG_01 {
                                                left: 0;
                                                top: 51px;
                                                animation-delay: 0.45s;
                                                -o-animation-delay: 0.45s;
                                                -ms-animation-delay: 0.45s;
                                                -webkit-animation-delay: 0.45s;
                                                -moz-animation-delay: 0.45s;
                                            }

                                            #frotateG_02 {
                                                left: 15px;
                                                top: 15px;
                                                animation-delay: 0.6s;
                                                -o-animation-delay: 0.6s;
                                                -ms-animation-delay: 0.6s;
                                                -webkit-animation-delay: 0.6s;
                                                -moz-animation-delay: 0.6s;
                                            }

                                            #frotateG_03 {
                                                left: 51px;
                                                top: 0;
                                                animation-delay: 0.75s;
                                                -o-animation-delay: 0.75s;
                                                -ms-animation-delay: 0.75s;
                                                -webkit-animation-delay: 0.75s;
                                                -moz-animation-delay: 0.75s;
                                            }

                                            #frotateG_04 {
                                                right: 15px;
                                                top: 15px;
                                                animation-delay: 0.9s;
                                                -o-animation-delay: 0.9s;
                                                -ms-animation-delay: 0.9s;
                                                -webkit-animation-delay: 0.9s;
                                                -moz-animation-delay: 0.9s;
                                            }

                                            #frotateG_05 {
                                                right: 0;
                                                top: 51px;
                                                animation-delay: 1.05s;
                                                -o-animation-delay: 1.05s;
                                                -ms-animation-delay: 1.05s;
                                                -webkit-animation-delay: 1.05s;
                                                -moz-animation-delay: 1.05s;
                                            }

                                            #frotateG_06 {
                                                right: 15px;
                                                bottom: 15px;
                                                animation-delay: 1.2s;
                                                -o-animation-delay: 1.2s;
                                                -ms-animation-delay: 1.2s;
                                                -webkit-animation-delay: 1.2s;
                                                -moz-animation-delay: 1.2s;
                                            }

                                            #frotateG_07 {
                                                left: 51px;
                                                bottom: 0;
                                                animation-delay: 1.35s;
                                                -o-animation-delay: 1.35s;
                                                -ms-animation-delay: 1.35s;
                                                -webkit-animation-delay: 1.35s;
                                                -moz-animation-delay: 1.35s;
                                            }

                                            #frotateG_08 {
                                                left: 15px;
                                                bottom: 15px;
                                                animation-delay: 1.5s;
                                                -o-animation-delay: 1.5s;
                                                -ms-animation-delay: 1.5s;
                                                -webkit-animation-delay: 1.5s;
                                                -moz-animation-delay: 1.5s;
                                            }

                                            @keyframes f_fadeG {
                                                0% {
                                                    background-color: rgb(47, 146, 212);
                                                }

                                                100% {
                                                    background-color: rgb(255, 255, 255);
                                                }
                                            }

                                            @-o-keyframes f_fadeG {
                                                0% {
                                                    background-color: rgb(47, 146, 212);
                                                }

                                                100% {
                                                    background-color: rgb(255, 255, 255);
                                                }
                                            }

                                            @-ms-keyframes f_fadeG {
                                                0% {
                                                    background-color: rgb(47, 146, 212);
                                                }

                                                100% {
                                                    background-color: rgb(255, 255, 255);
                                                }
                                            }

                                            @-webkit-keyframes f_fadeG {
                                                0% {
                                                    background-color: rgb(47, 146, 212);
                                                }

                                                100% {
                                                    background-color: rgb(255, 255, 255);
                                                }
                                            }

                                            @-moz-keyframes f_fadeG {
                                                0% {
                                                    background-color: rgb(47, 146, 212);
                                                }

                                                100% {
                                                    background-color: rgb(255, 255, 255);
                                                }
                                            }
                                        </style>

                                        <!-- Div containing small "waiting" wheel -->
                                        <div id="floatingCirclesG">
                                            <div class="f_circleG" id="frotateG_01"></div>
                                            <div class="f_circleG" id="frotateG_02"></div>
                                            <div class="f_circleG" id="frotateG_03"></div>
                                            <div class="f_circleG" id="frotateG_04"></div>
                                            <div class="f_circleG" id="frotateG_05"></div>
                                            <div class="f_circleG" id="frotateG_06"></div>
                                            <div class="f_circleG" id="frotateG_07"></div>
                                            <div class="f_circleG" id="frotateG_08"></div>
                                        </div>
                                    </div></div></div>
                                </form>
                            </div>

                            <div id="introduction" class="groupMargin">

                            </div>

                            <script type="text/javascript">
                                //<![CDATA[

                                function Login() {
                                    // This is intentional
                                }

                                Login.userNameInput = 'userNameInput';
                                Login.passwordInput = 'passwordInput';
                                Login.codeChallengeInput = 'codeChallengeInput';

                                Login.initialize = function () {

                                    var u = new InputUtil();

                                    u.checkError();
                                    u.setInitialFocus(Login.userNameInput);
                                    u.setInitialFocus(Login.passwordInput);
                                }();

                                Login.submitLoginRequest = function () {
                                    const u = new InputUtil();
                                    const e = new LoginErrors();

                                    const userName = document.getElementById(Login.userNameInput);
                                    const password = document.getElementById(Login.passwordInput);
                                    const codeChallenge = document.getElementById(Login.codeChallengeInput);

                                    if (!userName.value?.match('[@\\\\]')) {
                                        u.setError(userName, e.userNameFormatError);
                                        return false;
                                    }

                                    if (!password.value) {
                                        u.setError(password, e.passwordEmpty);
                                        return false;
                                    }

                                    if (password.value.length > maxPasswordLength) {
                                        u.setError(password, e.passwordTooLong);
                                        return false;
                                    }

                                    if (codeChallenge && !codeChallenge.value) {
                                        u.setError(password, e.codeChallengeEmpty);
                                        return false;
                                    }

                                    document.forms['loginForm'].submit();
                                };

                                InputUtil.makePlaceholder(Login.userNameInput);
                                InputUtil.makePlaceholder(Login.passwordInput);

                                //]]>
                            </script>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </main>
            <div id="footerPlaceholder"></div>
        </div>
        <footer id="footer">
            <div id="footerLinks" class="floatReverse">
                <div><span>OpenID-Whisperer</span></div>
            </div>
        </footer>
    </div>
</div>
<script type="text/javascript" language="JavaScript">
    document.getElementById("fullPage").style.display = "block";
</script>
</body>
</html>