From 4a79a94993bfce8470e7a632b25f3dee2b0ce2a1 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Wed, 3 Mar 2021 13:36:40 +0100
Subject: [PATCH] Added site icon to sign in screen

---
 ghost/admin/app/controllers/signin.js   | 12 ++++++++
 ghost/admin/app/styles/layouts/auth.css | 41 +++++++++++++++++--------
 ghost/admin/app/templates/signin.hbs    |  1 +
 3 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/ghost/admin/app/controllers/signin.js b/ghost/admin/app/controllers/signin.js
index 4a3c95cb28..f97273641d 100644
--- a/ghost/admin/app/controllers/signin.js
+++ b/ghost/admin/app/controllers/signin.js
@@ -3,6 +3,7 @@ import Controller, {inject as controller} from '@ember/controller';
 import ValidationEngine from 'ghost-admin/mixins/validation-engine';
 import {alias} from '@ember/object/computed';
 import {computed} from '@ember/object';
+import {htmlSafe} from '@ember/string';
 import {isArray as isEmberArray} from '@ember/array';
 import {isVersionMismatchError} from 'ghost-admin/services/ajax';
 import {inject as service} from '@ember/service';
@@ -39,6 +40,17 @@ export default Controller.extend(ValidationEngine, {
         return color;
     }),
 
+    siteIconStyle: computed('config.icon', function () {
+        let icon = this.get('config.icon');
+
+        if (icon) {
+            return htmlSafe(`background-image: url(${icon})`);
+        }
+
+        icon = 'https://static.ghost.org/v3.0.0/images/ghost-squircle.png';
+        return htmlSafe(`background-image: url(${icon})`);
+    }),
+
     actions: {
         authenticate() {
             return this.validateAndAuthenticate.perform();
diff --git a/ghost/admin/app/styles/layouts/auth.css b/ghost/admin/app/styles/layouts/auth.css
index 50bca4edbf..adf232ac8b 100644
--- a/ghost/admin/app/styles/layouts/auth.css
+++ b/ghost/admin/app/styles/layouts/auth.css
@@ -9,6 +9,34 @@
     text-align: left;
 }
 
+.gh-signin header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.gh-signin .gh-site-icon {
+    margin-bottom: 20px;
+    width: 70px;
+    height: 70px;
+    background-color: transparent;
+    background-size: 70px;
+    border-radius: 3px;
+}
+
+.gh-signin h1 {
+    font-size: 4.1rem;
+    font-weight: 600;
+    letter-spacing: -.025em;
+    line-height: 1.15em;
+    font-weight: 700;
+    color: var(--black);
+    max-width: 620px;
+    width: 100%;
+    text-align: center;
+    margin-bottom: 40px;
+}
+
 .gh-signin .form-group {
     margin-bottom: 1.5rem;
 }
@@ -98,19 +126,6 @@
     border-color: var(--midgrey) !important;
 }
 
-.gh-signin h1 {
-    font-size: 4.1rem;
-    font-weight: 600;
-    letter-spacing: -.025em;
-    line-height: 1.15em;
-    font-weight: 700;
-    color: var(--black);
-    max-width: 620px;
-    width: 100%;
-    text-align: center;
-    margin-bottom: 40px;
-}
-
 /* Email notification */
 /* ---------------------------------------------------------- */
 .gh-auth-animation-container {
diff --git a/ghost/admin/app/templates/signin.hbs b/ghost/admin/app/templates/signin.hbs
index 14fba485d0..a857ddcb75 100644
--- a/ghost/admin/app/templates/signin.hbs
+++ b/ghost/admin/app/templates/signin.hbs
@@ -21,6 +21,7 @@
             {{else}}
             <form id="login" method="post" class="gh-signin" novalidate="novalidate" {{action "authenticate" on="submit"}}>
                 <header>
+                    <div class="gh-site-icon" style="{{this.siteIconStyle}}"></div>
                     <h1>Sign in to {{this.config.blogTitle}}.</h1>
                 </header>
                 <GhFormGroup @errors={{this.signin.errors}} @hasValidated={{this.hasValidated}} @property="identification">