synced-timer/theme.php

<?php

defined('L_EXEC') or die();

class LandingpageTheme
{

    private $_storageHelper;
    private $_globalConfig;
    private $_translations;
    private $_resultLevels;

    public function __construct($config, $storageHelper, $translations)
    {
        $this->_globalConfig = $config;
        $this->_storageHelper = $storageHelper;
        $this->_translations = $translations;

        $this->_resultLevels['loginSuccess'] = "success";
        $this->_resultLevels['loginFailed'] = "danger";
        $this->_resultLevels['ldapConnectFailed'] = "danger";
        $this->_resultLevels['ldapSearchFailed'] = "danger";
        $this->_resultLevels['ldapTlsInitializationFailed'] = "danger";
        $this->_resultLevels['bindingToLdapAdminFailed'] = "danger";
        $this->_resultLevels['loginRequired'] = "warning";
        $this->_resultLevels['oldPasswordIsWrong'] = "danger";
        $this->_resultLevels['newPasswordMustNotBeEqualToOldPassword'] = "danger";
        $this->_resultLevels['newPasswordAndRepeatDidNotMatch'] = "danger";
        $this->_resultLevels['passwordIsTooShort'] = "danger";
        $this->_resultLevels['passwordDoesNotContainANumberOrSpecialCharacter'] = "danger";
        $this->_resultLevels['passwordDoesNotContainALetter'] = "danger";
        $this->_resultLevels['passwordDoesNotContainAnUppercaseLetter'] = "danger";
        $this->_resultLevels['passwordDoesNotContainALowercaseLetter'] = "danger";
        $this->_resultLevels['passwordChangeLdapError'] = "danger";
        $this->_resultLevels['newPasswordMustNotBeOldPassword'] = "danger";
        $this->_resultLevels['passwordChangedSuccessfully'] = 'success';
        $this->_resultLevels['emailChangedSuccessfully'] = 'success';
        $this->_resultLevels['emailChangeLdapError'] = 'danger';
        $this->_resultLevels['invalidEmailError'] = 'danger';
        $this->_resultLevels['permissionDenied'] = 'danger';
        $this->_resultLevels['generateJitsiLinkRoomMustNotBeEmpty'] = 'danger';
        $this->_resultLevels['generateJitsiLinkSuccessfull'] = 'success';
        $this->_resultLevels['timerSetSuccessfully'] = 'success';
    }

    public function printPage($page, $parameters)
    {
        switch ($page) {
            case 'login':
                $this->_printLogin();
                break;
            case "manage":
                $this->_printManagePage();
                break;
            case "t":
                $this->_printTimerPage($parameters);
        }
    }

    private function _printLogin()
    {
        $this->_printHeader(true);
?>

        <style>
            html,
            body {
                height: 100%;
            }

            body {
                display: flex;
                align-items: center;
                padding-top: 40px;
                padding-bottom: 40px;
                background-color: #f5f5f5;
            }

            .form-signin {
                width: 100%;
                max-width: 330px;
                padding: 15px;
                margin: auto;
            }

            .form-signin .checkbox {
                font-weight: 400;
            }

            .form-signin .form-control {
                position: relative;
                box-sizing: border-box;
                height: auto;
                padding: 10px;
                font-size: 16px;
            }

            .form-signin .form-control:focus {
                z-index: 2;
            }

            .form-signin input[type="email"] {
                margin-bottom: -1px;
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 0;
            }

            .form-signin input[type="password"] {
                margin-bottom: 10px;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }

            .bd-placeholder-img {
                font-size: 1.125rem;
                text-anchor: middle;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none;
            }
        </style>
        </head>

        <body class="text-center">
            <main class="form-signin">
                <form action="login/submit" method="post">
                    <img class="mb-4" src="<?= $this->_globalConfig['mainIcon'] ?>" alt="" height="150">
                    <h1 class="h3 mb-3 fw-normal"><?= $this->_trId("login.title"); ?></h1>
                    <?php $this->_printResultAlert(); ?>
                    <label for="inputEmail" class="visually-hidden"><?= $this->_trId("globals.usernameLabel"); ?></label>
                    <input type="text" id="inputUsername" class="form-control" placeholder="<?= $this->_trId("globals.usernameLabel"); ?>" name="username" required autofocus>
                    <label for="inputPassword" class="visually-hidden"><?= $this->_trId("globals.passwordLabel"); ?></label>
                    <input type="password" id="inputPassword" class="form-control" placeholder="<?= $this->_trId("globals.passwordLabel"); ?>" name="password" required>
                    <button class="w-100 btn btn-lg btn-primary" type="submit"><?= $this->_trId("login.submitLabel"); ?></button>
                    <p class="mt-5 mb-3 text-muted"><?= $this->_trId("login.footnote"); ?></p>
                </form>
            </main>
        </body>
    <?php
        $this->_printFooter();
    }

    private function _printManagePage()
    {
        $userData = $this->_storageHelper->loadUserdata()[$_SESSION["auth"]["username"]];
        $this->_printHeader();
    ?>
        <style>
            .flex-equal>* {
                flex: 1;
            }

            @media (min-width: 768px) {
                .flex-md-equal>* {
                    flex: 1;
                }
            }
        </style>

        <body>
            <main>
                <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                    <div class="container-fluid">
                        <a class="navbar-brand" href="#"><?= $this->_trId("globals.title") ?></a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                            <ul class="navbar-nav nav-pills me-auto mb-2 mb-lg-0">
                                <li class="nav-item">
                                    <a class="nav-link active" aria-current="page" href="#"><?= $this->_trId("home.menu.manageTimerLabel") ?></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" aria-current="page" target="blank" href="<?= $this->_globalConfig["basePath"] ?>/t/<?= $_SESSION["auth"]["username"] ?>"><?= $this->_trId("home.menu.openTimerLabel") ?></a>
                                </li>
                            </ul>
                            <form action="logout/submit" method="post" class="d-felx">
                                <input type="submit" value="<?= $this->_trId("home.menu.logoutLabel") ?>" class="btn btn-secondary">
                            </form>
                        </div>
                    </div>
                </nav>

                <div class="container mt-3">
                    <div class="card text-white bg-dark mb-3">
                        <div class="card-header"><?= $this->_trId("currentTimer") ?></div>
                        <div class="card-body">
                            <h3 id="header"><?= $this->_trId("loading") ?></h3>
                            <h1 class="card-title" id="timer">00:00:00</h1>
                        </div>
                    </div>

                    <div class="card text-dark bg-light mb-3">
                        <div class="card-header w-100"><?= $this->_trId("manageTimer") ?></div>
                        <div class="card-body w-100" style="text-align: left;">
                            <?php $this->_printResultAlert(); ?>
                            <form method="post" action="manage/submit">
                                <div class="mb-3">
                                    <label for="header"><?= $this->_trId("header") ?></label>
                                    <textarea class="form-control" name="header" rows="3" required><?= $userData["header"] ?></textarea>
                                </div>
                                <div class="mb-3">
                                    <label for="time"><?= $this->_trId("time") ?></label>
                                    <input type="number" name="time" class="form-control" value="<?= $userData["time"] ?>" required>
                                </div>
                                <button type="submit" class="btn btn-primary"><?= $this->_trId("startTimer") ?></button>
                            </form>
                        </div>
                    </div>
                </div>
            </main>
        </body>
    <?php
        $this->_printTimerJs($_SESSION["auth"]["username"]);
        $this->_printFooter();
    }

    private function _printTimerPage($username)
    {
        $userData = $this->_storageHelper->loadUserdata();
        if (!array_key_exists($username, $userData)) {
            $this->_printNotFoundPage();
        }

    ?>
        <html lang="en" class="h-100">

        <style>
            .bd-placeholder-img {
                font-size: 1.125rem;
                text-anchor: middle;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none;
            }

            @media (min-width: 768px) {
                .bd-placeholder-img-lg {
                    font-size: 3.5rem;
                }
            }

            body {
                text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
                box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
            }

            .cover-container {
                max-width: 42em;
            }
        </style>

        <!-- Bootstrap -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

        </head>

        <body class="d-flex h-100 text-center text-white bg-dark">

            <div class="d-flex w-100 h-100 p-3 mx-auto flex-column">
                <main class="px-3 h-100 mt-auto w-100">
                    <h4 id="header"><?= $this->_trId("loading") ?></h4>
                    <div class="h-80" style="justify-content:center; align-items:center; display:flex;">
                        <h4 id="timer">00:00:00</h4>
                    </div>
                </main>

                <footer class="mt-auto text-white-50">
                    <p>Synced timer by Itsblue Development. <a href="https://www.itsblue.de" class="text-white">www.itsblue.de</a></p>
                </footer>
            </div>
        </body>

        <footer>
            <?= $this->_printTimerJs($username); ?>
            <script>
                var textElem = document.getElementById("timer");
                var headerTextElem = document.getElementById("header");
                var targetWidth = 0.9; // Proportion of full screen width
                var curFontSize = 20; // Do not change
                function updateTextSize() {
                    for (var i = 0; 3 > i; i++) { // Iterate for better better convergence
                        curFontSize *= targetWidth / (textElem.offsetWidth / textElem.parentNode.offsetWidth);
                        textElem.style.fontSize = curFontSize + "pt";
                        headerTextElem.style.fontSize = curFontSize * 0.3 + "pt"
                    }
                }
                updateTextSize();
                window.onresize = updateTextSize;
            </script>
        </footer>

        </html>
    <?php
    }

    private function _printNotFoundPage()
    {
    ?>
        <h1>Not found!</h1>
    <?php
    }

    // --------------
    // - JavaScript -
    // --------------

    private function _printTimerJs($username)
    {
    ?>
        <script>
            var currentData = {};

            const zeroPad = (num, places) => String(num).padStart(places, '0')
            var processData = function() {
                if (this.readyState === 4 && this.status === 200) {
                    currentData = JSON.parse(this.responseText);
                    if (currentData["status"] === 200) {
                        currentData = currentData["data"]
                    } else {
                        document.getElementById("timer").innerHTML = "error: " + this.status
                    }
                } else if (this.readyState === 4 && this.status !== 0) {
                    document.getElementById("timer").innerHTML = "error: " + this.status
                }
            }

            function loadData() {
                xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = processData;
                xmlhttp.open("GET", "<?= $this->_globalConfig["basePath"] ?>/api/<?= $username ?>", true);
                xmlhttp.send();
            }

            function setTimerText() {
                time = currentData["time"]
                header = currentData["header"]
                startedAt = currentData["startedAt"]

                passedSeconds = (Date.now() / 1000) - startedAt;
                remaningSeconds = parseInt(time * 60 - passedSeconds);

                if (remaningSeconds < 0) {
                    remaningSeconds = 0
                }

                var remaningHours = zeroPad(parseInt(remaningSeconds / 60 / 60) % (60 * 60), 2)
                var remaningMinutes = zeroPad(parseInt(remaningSeconds / 60) % 60, 2)
                var remaningSeconds = zeroPad(remaningSeconds % 60, 2)
                document.getElementById("timer").innerHTML = remaningHours + ":" + remaningMinutes + ":" + remaningSeconds
                document.getElementById("header").innerHTML = header
            }

            loadData();

            var dataLoader = setInterval(function() {
                loadData();
            }, 5000)

            var timerRefresher = setInterval(function() {
                setTimerText()
            }, 1000)
        </script>
    <?php
    }

    // -----------
    // - Helpers -
    // -----------

    private function _printHeader($printOnlySkeleton = false)
    {
    ?>
        <!DOCTYPE html>
        <html>

        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <!-- Bootstrap -->
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

            <style>
                :root {
                    --primary_500: 255, 0, 0;
                }

                .mr-4 {
                    margin-right: 1.5rem !important;
                }

                .ml-4 {
                    margin-left: 1.5rem !important;
                }

                .card {
                    align-items: center;
                    text-align: center;
                }

                .card-footer {
                    width: 100%;
                }

                a:focus {
                    outline: none;
                }
            </style>

            <title><?= $this->_trId("globals.title"); ?></title>
            <?php
            if (!$printOnlySkeleton) :

            ?>
        </head>
    <?php
            endif;
        }

        private function _printResultAlert()
        {
            if (!isset($_SESSION['lastResult']) || $_SESSION['lastResult'] === 'loginSuccess')
                return;

            $this->_printAlert($this->_resultToMessage($_SESSION['lastResult']), $this->_resultLevels[$_SESSION['lastResult']]);
        }

        private function _printAlert($content, $level = 'waring', $dismissible = true)
        {
    ?>
    <div class="alert alert-<?= $level ?> <?php if ($dismissible) echo "alert-dismissible"; ?> fade show" role="alert">
        <strong><?= $content ?></strong>
        <?php if ($dismissible) : ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        <?php endif; ?>
    </div>
<?php
        }

        private function _printFooter()
        {
?>
    <script>
        var forms = document.getElementsByTagName('form')

        for (const form of forms) {
            var formButtons = form.getElementsByTagName("button");
            for (const button of formButtons) {
                if (button.type === "submit") {
                    form.addEventListener("submit", () => {
                        console.log(button)
                        button.innerHTML += ' <div class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></div>'
                        button.disabled = true
                    })
                }
            }

            var formInputs = form.getElementsByTagName("input")
            for (const input of formInputs) {
                form.addEventListener("submit", () => {
                    input.readonly = true
                })
            }
        }
    </script>

        </html>
<?php
        }

        private function _resultToMessage($result)
        {
            return $this->_translations['results'][$result];
        }

        private function _trId($id)
        {
            $result = $this->_translations;
            foreach (explode(".", $id) as $sub) {
                $result = $result[$sub];
            }
            return $result;
        }
    }