Source: site.view [edit]
Function name: login
Arguments:
Description: If args passed in as OPTIONALARGS, try to login with them
Page type: html
Render function:  
Module: sportstreak

Page source:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sports Streak</title>
    <script type="text/javascript">

        var gData = null;


        function postRedirect(url, data) {
            var form = document.createElement('form');
            document.body.appendChild(form);
            form.method = 'post';
            form.action = url;

            for (var name in data) {
                var input = document.createElement('input');
                input.type = 'hidden';
                input.name = name;
                input.value = data[name];
                form.appendChild(input);
            }

            form.submit();
        }

        function getStringAfterPrefix(str, prefix) {
            var index = str.indexOf(prefix);
    
            // Check if the prefix is found
            if (index !== -1) {
                // Add the length of the prefix to the index to start after the prefix
                return str.substring(index + prefix.length);
            }

            // Return the original string if the prefix is not found
            return str;
        }


        // Function to get the value of a specific cookie by name
        // If none found, returns ""
        function getCookie(name) {
            let cookieArray = document.cookie.split(';');
            for(let i = 0; i < cookieArray.length; i++) {
                let cookie = cookieArray[i];
                while (cookie.charAt(0) == ' ') {
                    cookie = cookie.substring(1);
                }
                if (cookie.indexOf(name + '=') == 0) {
                    return cookie.substring(name.length + 1, cookie.length);
                }
            }
            return "";
        }

        // Function to set a cookie
        function setCookie(name, value, expiryDays) {
            let date = new Date();
            date.setTime(date.getTime() + (expiryDays*24*60*60*1000));
            let expires = "expires=" + date.toUTCString();
            document.cookie = name + "=" + value + ";" + expires + ";path=/";
        }


        // Return just the date, in format 12/31/2023
        function formatDate(date) {
           let year = date.getFullYear();
           let month = date.getMonth() + 1; // getMonth() is zero-indexed
           let day = date.getDate();
           return `${month.toString().padStart(2, '0')}/${day.toString().padStart(2, '0')}/${year}`;
        }

        var round = 0;
        var total = 0;
        var today;
        var yesterday;
        var todayCookie;
        var yesterdayCookie;



        // Loads the cookies from today and yesterday.  If yesterday exists, starts total count from then.
        // If today already exists, don't allow playing game, just display a message.
        function onLoad() {
           round = 0;
           total = 0;

           today = formatDate(new Date());   // as formatted string  eg 11/31/2023
           yesterday = formatDate(new Date(new Date().getTime() - 86400000));

           yesterdayCookie = getCookie("ss" + yesterday);
           if (yesterdayCookie != "")
              yesterdayCookie = JSON.parse( atob( yesterdayCookie ) );
           else {
              yesterdayCookie = {}
           }

           if ("total" in yesterdayCookie) {
              total = yesterdayCookie.total
           }

           todayCookie = getCookie("ss" + today);
           if (todayCookie != "")
              todayCookie = JSON.parse( atob( todayCookie ) );
           else {
              todayCookie = {}
           }

           // If we already played today, update screen but don't allow play
           if ("total" in todayCookie) {
              round = todayCookie.round;
              total = todayCookie.total;

              document.getElementById("today").innerText = "Today: " + round;
              document.getElementById("total").innerText = "Total: " + total;      

           } 

           // If variables passed in, try to register and return message.  Otherwise, return empty string.
           var message = "<webl>
             if Size(ToList(EXTRAARGS) ? []) > 0 then
                var username = Str_Trim(EXTRAARGS.username) ? "";
                var pw = Str_Trim(EXTRAARGS.pw) ? "";
                var err = WubCall("siteutil.siteLogin", ["sportstreak", username, pw, "sportstreak.errcmd","sportstreak.home"]);
                if Str_StartsWith(err, "ERR") then
                   err
                else
                   "SUCCESS:" + err
                end;
             else
                ""
             end;
           </webl>";
           if (message.startsWith("ERR")) {
               document.getElementById("username").value = "<webl>Str_Trim(EXTRAARGS.username) ? ""</webl>";
               switch (message) {
                  case "ERR_EMPTY_LOGIN":                  message = "Error: Missing username or password."; break;
                  case "ERR_AUTHENTICATION_ERROR":         message = "Error: login failed."; break;
                  default:                                 message = "Error during login: " + message; break;
               }
           } else if (message.startsWith("SUCCESS:")) {
              var key = getStringAfterPrefix(message, "SUCCESS:");
              setCookie("sssession", key, 90);
              postRedirect("https://sports-streak.com", { key: key });
              message = "";
           }
           document.getElementById("message").innerText = message;
           
        }



    </script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        header, footer {
            background-color: #f4f4f4;
            text-align: center;
            padding: 5px 0;
        }
        main {
            padding: 10px;
            text-align: center;
        }
        .login {
           display: flex;
           justify-content: flex-end;
        }
        .question p {
            font-size: 1.2em;
        }
        .options {
            display: flex;
            justify-content: space-around;
            margin: 10px 0;
        }
        .option {
            text-align: center;
        }
        .streak {
            text-align: center;
            font-size: 1.5em;
            margin: 12px 0;
        }
        .result {
            font-size: 2em;
            margin: 20px 0;
        }
        .option img {
            width: 100px;
            height: auto;
        }
        .feedback {
            margin-top: 20px;
        }
        .pButton {
            padding: 10px;
            margin: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }
        button {
            padding: 10px;
            margin: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 1.2em;
        }
        #stat {
            font-weight: bold;
        }
        button:hover {
            background-color: #0056b3;
        }
        footer p {
            font-size: 0.8em;
        }
    </style>
</head>


<body onload="onLoad()">
    <header>
        <section class="options">
           <div class="option"></div>
           <div class="option">
              <a class="login" href="https://sports-streak.com/site/register">Register</a>
           </div>
        </section>
            <div id="title">
                <img width=250 src="https://sports-streak.com/images/ss-logo.png">
            </div>
        <section class="options">
            <div class="option">
               <p id="today" class="streak">Today: </p>
            </div>
            <div class="option">
               <p id="total" class="streak">Total: </p>
            </div>
        </section>
    </header>
    <main>
        <section class="question">
            <p id="message"></p>
        </section>
        <section class="question">
            <p id="question">Login to Sports Streak</p>
        </section>
        <section class="options">
            <div class="option">
               <table>
               <form action="/site/login" method="post">
                <tr><td>Username: </td><td><input id="username" name="username" value="" size="15" title="Username"/></td></tr>
                <tr><td>Password:</td><td><input type="password" name="pw" value="" size="15" title="Password"/><p></td></tr>
                 <tr><td>&nbsp;</td><td><input type="submit" value="Login"></td></tr>
               </form>
               </table>
            </div>
        </section>
    </main>
    <footer>
        <p>Game Instructions: Choose the correct answer to the question.
               Keep your streak going as long as you can.  Come back tomorrow
               to keep adding to your total streak (skipping a day resets it to 0).</p>
        <p>Copyright (c) 2024 by 52 Productions, Inc.  All rights reserved.</p>
    </footer>
</body>
</html>