Initialize Repo

assets/style.css

@@ -0,0 +1,136 @@
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-family: 'Open Sans';
+}
+
+body {
+  background: -webkit-gradient(linear, left top, left bottom, from(#000000f0), to(#00000070)), url("bg.jpg") no-repeat center center fixed;
+  background: linear-gradient(#000000f0, #00000070), url("bg.jpg") no-repeat center center fixed;
+  background-size: cover;
+  height: 100vh;
+  margin: 0;
+  color: #363636;
+}
+
+body #wrapper {
+  padding-top: 20px;
+}
+
+body a {
+  font-size: 12px;
+  color: #363636;
+  text-decoration: none;
+}
+
+body a:hover {
+  text-decoration: underline;
+}
+
+body a#home {
+  display: inline-block;
+  width: 50%;
+  text-align: left;
+}
+
+body a#login {
+  display: inline-block;
+  width: 50%;
+  text-align: right;
+}
+
+body #banner {
+  background-image: url(banner.png);
+  background-size: contain;
+  height: 63px;
+  width: 300px;
+  margin: 60px auto;
+}
+
+body #footer {
+  max-width: 500px;
+  padding: 15px 35px;
+  font-size: 12px;
+  background-color: #f0f0f0;
+  color: #7a7b76;
+  margin: auto;
+  text-align: center;
+}
+
+body #footer a {
+  color: #0066cc;
+}
+
+body #form {
+  background-color: white;
+  padding: 20px 40px 30px 40px;
+  max-width: 500px;
+  margin: auto;
+  border-top: 4px solid #0066cc;
+}
+
+body #form h1 {
+  font-weight: 300;
+  font-size: 24px;
+  text-align: center;
+}
+
+body #form p {
+  text-align: center;
+}
+
+body #form p a {
+  color: #0066cc;
+  font-size: inherit;
+}
+
+body #form p.error {
+  color: #c40233;
+}
+
+body #form label {
+  display: inline-block;
+  font-size: 12px;
+  margin-top: 15px;
+}
+
+body #form input[type='email'],
+body #form textarea {
+  width: 100%;
+  height: 2.25rem;
+  border: 1px solid #ededed;
+  border-bottom-color: #8a8d90;
+  padding: 5px 8px;
+}
+
+body #form input[type='email']:hover,
+body #form textarea:hover {
+  border-bottom-width: 2px;
+  border-bottom-color: #0066cc;
+}
+
+body #form textarea {
+  resize: none;
+  height: 10rem;
+}
+
+body #form input[type='submit'] {
+  width: 100%;
+  background-color: #0066cc;
+  color: white;
+  padding: 6px 16px;
+  border: none;
+  margin-top: 15px;
+  cursor: pointer;
+}
+
+body #form input[type='submit']:hover {
+  background-color: #004080;
+}
+
+body .small {
+  font-size: 12px;
+}
+/*# sourceMappingURL=style.css.map */

assets/style.css.map

@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "style.scss"
+    ],
+    "names": [],
+    "file": "style.css"
+}

assets/style.scss

@@ -0,0 +1,137 @@
+$accent: #0066cc;
+$accent-d: #004080;
+$text: #363636;
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+  font-family: 'Open Sans';
+}
+
+body {
+  background: linear-gradient(#000000f0, #00000070),
+    url('bg.jpg') no-repeat center center fixed;
+  background-size: cover;
+  height: 100vh;
+  margin: 0;
+  color: $text;
+
+  #wrapper {
+    padding-top: 20px;
+  }
+
+  a {
+    font-size: 12px;
+    color: $text;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &#home {
+      display: inline-block;
+      width: 50%;
+      text-align: left;
+    }
+
+    &#login {
+      display: inline-block;
+      width: 50%;
+      text-align: right;
+    }
+  }
+
+  #banner {
+    background-image: url(banner.png);
+    background-size: contain;
+    height: 63px;
+    width: 300px;
+    margin: 60px auto;
+  }
+
+  #footer {
+    max-width: 500px;
+    padding: 15px 35px;
+    font-size: 12px;
+    background-color: #f0f0f0;
+    color: #7a7b76;
+    margin: auto;
+    text-align: center;
+
+    a {
+      color: $accent;
+    }
+  }
+
+  #form {
+    background-color: white;
+    padding: 20px 40px 30px 40px;
+    max-width: 500px;
+    margin: auto;
+    border-top: 4px solid $accent;
+
+    h1 {
+      font-weight: 300;
+      font-size: 24px;
+      text-align: center;
+    }
+
+    p {
+      text-align: center;
+
+      a {
+        color: $accent;
+        font-size: inherit;
+      }
+
+      &.error {
+        color: #c40233;
+      }
+    }
+
+    label {
+      display: inline-block;
+      font-size: 12px;
+      margin-top: 15px;
+    }
+
+    input[type='email'],
+    textarea {
+      width: 100%;
+      height: 2.25rem;
+      border: 1px solid #ededed;
+      border-bottom-color: #8a8d90;
+      padding: 5px 8px;
+
+      &:hover {
+        border-bottom-width: 2px;
+        border-bottom-color: $accent;
+      }
+    }
+
+    textarea {
+      resize: none;
+      height: 10rem;
+    }
+
+    input[type='submit'] {
+      width: 100%;
+      background-color: $accent;
+      color: white;
+      padding: 6px 16px;
+      border: none;
+      margin-top: 15px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: $accent-d;
+      }
+    }
+  }
+
+  .small {
+    font-size: 12px;
+  }
+}

demo.vars.ini

@@ -0,0 +1,12 @@
+page_title          = 
+
+this_url            = 
+target_url          = 
+
+mail_noreply        = 
+mail_target         = 
+
+; include token for Gotify!
+gotify_url          = 
+keycloak_url        = 
+keycloak_realm      = 

index.php

@@ -0,0 +1,91 @@
+<?php
+$ini = parse_ini_file("tokens.ini");
+?>
+<!DOCTYPE html>
+<html lang="de">
+
+<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">
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="./assets/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
+    <title>Anfrage | <?= $ini["page_title"] ?></title>
+
+    <script src="<?= $ini["keycloak_url"] ?>/js/keycloak.js" type="text/javascript"></script>
+    <script type="text/javascript">
+    const keycloak = Keycloak({
+        "realm": <?= $ini["keycloak_realm"] ?>,
+        "auth-server-url": <?= $ini["keycloak_url"] ?>,
+        "ssl-required": "external",
+        "resource": "account",
+        "public-client": true,
+        "confidential-port": 0,
+        "url": <?= $ini["keycloak_url"] ?>,
+        "clientId": "requestform",
+        "enable-cors": true
+    });
+    const loadData = () => {
+        console.log(keycloak.subject);
+        if (keycloak.idToken) {
+            document.getElementById("login").href =
+                "<?= $ini["keycloak_url"] ?>/realms/<?= $ini["keycloak_realm"] ?>/account";
+            document.getElementById("login").innerHTML = "[" + keycloak.idTokenParsed.preferred_username + "]";
+            document.getElementById("username").value = keycloak.idTokenParsed.preferred_username;
+            document.getElementById("email").value = keycloak.idTokenParsed.email;
+        } else {
+            keycloak.loadUserProfile(function() {
+                document.getElementById("login").href =
+                    "<?= $ini["keycloak_url"] ?>/realms/<?= $ini["keycloak_realm"] ?>/account";
+                document.getElementById("login").innerHTML = "[" + keycloak.profile.username + "]";
+                document.getElementById("username").value = keycloak.profile.username;
+                document.getElementById("email").value = keycloak.profile.email;
+            }, function() {
+                // console.log('Failed to retrieve user details. Please enable claims or account role');
+            });
+        }
+    };
+    const loadFailure = () => {
+        // console.log('Failed to load data.  Check console log');
+    };
+    const reloadData = () => {
+        keycloak.updateToken(10)
+            .success(loadData)
+            .error(() => {
+                // console.log('Failed to load data.  User is logged out.');
+            });
+    }
+    keycloak.init({
+        onLoad: 'check-sso'
+    }).success(reloadData);
+    </script>
+</head>
+
+<body>
+    <div id="wrapper">
+        <div id="banner"></div>
+        <div id="form">
+            <a id="home" href="<?= $ini["target_url"] ?>">← Home</a><a id="login"
+                href="<?= $ini["keycloak_url"] ?>/realms/<?= $ini["keycloak_realm"] ?>/protocol/openid-connect/auth?client_id=requestform&response_type=code">Login
+                →</a>
+            <h1>Anfrage</h1>
+            <form action="mail.php" method="post">
+                <input type="hidden" name="username" id="username" value="anon">
+                <label for="email">E-Mail</label>
+                <input type="email" name="email" id="email" required>
+                <label for="request">Beschreibung</label>
+                <textarea name="request" id="request" cols="30" rows="10" minlength="3" required
+                    placeholder="Titel, ISBN, Goodreads Link..."></textarea>
+                <input type="submit" value="Absenden">
+            </form>
+        </div>
+        <div id="footer">
+            Oder sende eine E-Mail:<br><a href="mailto:<?= $ini["mail_target"] ?>"><?= $ini["mail_target"] ?></a>
+        </div>
+    </div>
+</body>
+
+</html>

mail.php

@@ -0,0 +1,153 @@
+<?php
+header("Access-Control-Allow-Origin: *");
+$error = false;
+$errorcode = "";
+
+$ini = parse_ini_file("tokens.ini");
+
+if ($_SERVER['REQUEST_METHOD'] == 'POST') {
+    $email = $_POST['email'];
+    $user = htmlspecialchars($_POST['username']);
+    $desc = htmlspecialchars($_POST['request']);
+} else {
+    $email = $_GET['email'];
+    $user = htmlspecialchars($_GET['username']);
+    $desc = htmlspecialchars($_GET['request']);
+}
+
+if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+    $error = true;
+    $errorcode .= "Ungültige E-Mail-Adresse.<br>";
+}
+if (strlen(utf8_decode($user)) < 3) {
+    $error = true;
+    $errorcode .= "Ungültiger Nutzer.<br>";
+}
+if (strlen(utf8_decode($desc)) < 3) {
+    $error = true;
+    $errorcode .= "Ungültige Nachricht.<br>";
+}
+
+if (!$error) {
+    $error = !mail(
+        $ini["mail_target"],
+        "RequestForm: Anfrage von $user",
+        $desc,
+        implode("\r\n", array(
+            "MIME-Version: 1.0",
+            "Content-type: text/plain; charset=utf-8",
+            "From: " + $ini["mail_noreply"],
+            "Reply-To: $user <$email>",
+            "X-Mailer: PHP/" . phpversion(),
+        ))
+    );
+    if ($error) {
+        $errorcode .= "Serverseitiges Problem.";
+        $gotify_data = [
+            "title" => "RequestForm: Error",
+            "message" => "Mail transfer failed.",
+            "priority" => 1
+        ];
+    } else {
+        $gotify_data = [
+            "title" => "RequestForm: Anfrage von $user",
+            "message" => $desc,
+            "priority" => 5
+        ];
+    }
+
+    $ch = curl_init();
+    curl_setopt($ch, CURLOPT_URL, $ini["gotify_url"]);
+    curl_setopt($ch, CURLOPT_POST, 1);
+    curl_setopt($ch, CURLOPT_HTTPHEADER, ["Content-Type: application/json; charset=utf-8"]);
+    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($gotify_data));
+
+    $result = curl_exec($ch);
+    $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+    curl_close($ch);
+
+    switch ($code) {
+        case "200":
+            echo "<strong>Your Message was Submitted</strong>";
+            break;
+        case "400":
+            echo "<strong>Bad Request</strong>";
+            break;
+        case "401":
+            echo "<strong>Unauthorized Error - Invalid Token</strong>";
+            break;
+        case "403":
+            echo "<strong>Forbidden</strong>";
+            break;
+        case "404":
+            echo "<strong>API URL Not Found</strong>";
+            break;
+        default:
+            echo "<strong>Hmm Something Went Wrong or HTTP Status Code is Missing</strong>";
+    }
+}
+?>
+<!DOCTYPE html>
+<html lang="de">
+
+<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">
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="./assets/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
+    <title>Anfrage | <?= $ini["page_title"] ?></title>
+</head>
+
+<?php if (!$error) { ?>
+
+<body>
+    <div id="wrapper">
+        <div id="banner"></div>
+        <div id="form">
+            <h1>Danke!</h1>
+            <p>
+                Deine Nachricht ist eingegangen und wird demnächst™ bearbeitet.
+            </p>
+            <p class="small">
+                <a href="<?= $ini["this_url"] ?>">Weitere Anfrage</a>
+            </p>
+        </div>
+        <div id="footer">
+            <a href="<?= $ini["target_url"] ?>">Home</a>
+        </div>
+    </div>
+</body>
+
+<?php } else { ?>
+
+<body>
+    <div id="wrapper">
+        <div id="banner"></div>
+        <div id="form">
+            <h1>Fehler...</h1>
+            <p class="error">
+                <?= $errorcode ?>
+            </p>
+            <p>
+                Wenn der Fehler weiterhin besteht, sende die Anfrage mit deinem eigenen Mailclient ab:<br><br>
+                <a
+                    href="mailto:<?= $ini["mail_target"] ?>?subject=Anfrage&body=<?= $desc ?>"><?= $ini["mail_target"] ?></a>
+            </p>
+            <p class="small">
+                Deine Nachricht ist im Link enthalten und muss nicht neu verfasst werden.
+            </p>
+        </div>
+        <div id="footer">
+            <a href="<?= $ini["this_url"] ?>">Zurück</a>
+        </div>
+    </div>
+</body>
+<?php } ?>
+
+
+</html>

remember.txt.ini

@@ -0,0 +1,14 @@
+// document.location.href = "?user=" + keycloak.idTokenParsed.preferred_username;
+console.log('IDToken');
+console.log(keycloak.idTokenParsed.preferred_username);
+console.log(keycloak.idTokenParsed.email);
+console.log(keycloak.idTokenParsed.name);
+console.log(keycloak.idTokenParsed.given_name);
+console.log(keycloak.idTokenParsed.family_name);
+
+console.log('Account Service');
+console.log(keycloak.profile.username);
+console.log(keycloak.profile.email);
+console.log(keycloak.profile.firstName + ' ' + keycloak.profile.lastName);
+console.log(keycloak.profile.firstName);
+console.log(keycloak.profile.lastName);