Add app icon to login flow

api/actions/getloginkey.php

@@ -6,7 +6,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-$code = LoginKey::generate($VARS['appname']);
+$appicon = null;
+if (!empty($VARS['appicon'])) {
+    $appicon = $VARS['appicon'];
+}
+
+$code = LoginKey::generate($VARS['appname'], $appicon);
 
 if (strpos($SETTINGS['url'], "http") === 0) {
     $url = $SETTINGS['url'] . "login/";

api/apisettings.php

@@ -215,7 +215,8 @@ $APIS = [
     "getloginkey" => [
         "load" => "getloginkey.php",
         "vars" => [
-            "appname" => "string"
+            "appname" => "string",
+            "appicon (optional)" => "string"
         ]
     ],
     "checkloginkey" => [

database_upgrade/2.1_3.0.sql

@@ -25,4 +25,5 @@ ENGINE = InnoDB
 DEFAULT CHARACTER SET = utf8;
 
 ALTER TABLE `userloginkeys`
-ADD COLUMN `appname` VARCHAR(255) NOT NULL AFTER `uid`;
+ADD COLUMN `appname` VARCHAR(255) NOT NULL AFTER `uid`;
+ADD COLUMN `appicon` TINYTEXT NULL DEFAULT NULL AFTER `appname`;

index.php

@@ -26,16 +26,14 @@ if (!empty($_GET['logout'])) {
 
     <link href="static/css/bootstrap.min.css" rel="stylesheet">
     <link href="static/css/svg-with-js.min.css" rel="stylesheet">
-    <style nonce="<?php echo $SECURE_NONCE; ?>">
-        .display-5 {
-            font-size: 3rem;
-            font-weight: 300;
-            line-height: 1.2;
-        }
-    </style>
+    <link href="static/css/login.css" rel="stylesheet">
 
     <div class="container mt-4">
         <div class="row justify-content-center">
+            <div class="col-12 text-center">
+                <img class="banner-image" src="./static/img/logo.svg" />
+            </div>
+
             <div class="col-12 text-center">
                 <h1 class="display-5 mb-4"><?php $Strings->get("You have been logged out.") ?></h1>
             </div>
@@ -73,7 +71,7 @@ if (empty($_SESSION["login_code"])) {
 
 if ($redirecttologin) {
     try {
-        $code = LoginKey::generate($SETTINGS["site_title"]);
+        $code = LoginKey::generate($SETTINGS["site_title"], "../static/img/logo.svg");
 
         $_SESSION["login_code"] = $code;
 

lib/LoginKeys.lib.php

@@ -8,13 +8,13 @@
 
 class LoginKey {
 
-    public static function generate(string $appname): string {
+    public static function generate(string $appname, $appicon = null): string {
         global $database;
         do {
             $code = base64_encode(random_bytes(32));
         } while ($database->has('userloginkeys', ['key' => $code]));
 
-        $database->insert('userloginkeys', ['key' => $code, 'expires' => date("Y-m-d H:i:s", time() + 600), 'appname' => $appname]);
+        $database->insert('userloginkeys', ['key' => $code, 'expires' => date("Y-m-d H:i:s", time() + 600), 'appname' => $appname, 'appicon' => $appicon]);
 
         return $code;
     }

login/index.php

@@ -21,7 +21,9 @@ if (!$database->has("userloginkeys", ["AND" => ["key" => $_GET["code"]], "expire
     die("Invalid auth code.");
 }
 
-$APPNAME = $database->get("userloginkeys", "appname", ["key" => $_GET["code"]]);
+$APPINFO = $database->get("userloginkeys", ["appname", "appicon"], ["key" => $_GET["code"]]);
+$APPNAME = $APPINFO["appname"];
+$APPICON = $APPINFO["appicon"];
 
 if (empty($_SESSION['thisstep'])) {
     $_SESSION['thisstep'] = "username";

login/parts/header.php

@@ -26,6 +26,21 @@ header("Link: <../static/js/fontawesome-all.min.js>; rel=preload; as=script", fa
 
 <div class="container mt-4">
     <div class="row justify-content-center">
+        <?php
+        if (!empty($APPICON)) {
+            ?>
+            <div class="col-12 text-center">
+                <img class="banner-image" src="<?php echo $APPICON; ?>" />
+            </div>
+            <?php
+        } else {
+            ?>
+        <div class="col-12">
+            <div class="blank-image"></div>
+        </div>
+        <?php
+        }
+        ?>
         <div class="col-12 text-center">
             <h1 class="display-5 mb-4"><?php $Strings->build("Login to {app}", ["app" => htmlentities($APPNAME)]); ?></h1>
         </div>

static/css/login.css

@@ -5,7 +5,19 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 
 .display-5 {
-    font-size: 3rem;
+    font-size: 2.5rem;
     font-weight: 300;
     line-height: 1.2;
+}
+
+.banner-image {
+    max-height: 100px;
+    margin: 2em auto;
+    border: 1px solid grey;
+    border-radius: 15%;
+}
+
+.blank-image {
+    height: 100px;
+    margin: 2em auto;
 }