From 495e5604221f4d0b7411cc99f73de4c236b0347b Mon Sep 17 00:00:00 2001
From: Okke Harsta <oharsta@zilverline.com>
Date: Tue, 28 Jan 2025 10:51:16 +0100
Subject: [PATCH] Login Shib refactor

---
 servicedesk-gui/src/icons/frontdesk.svg |  2 +-
 servicedesk-gui/src/pages/Login.jsx     | 14 +++++---------
 servicedesk-gui/src/pages/Login.scss    |  9 ++++++---
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/servicedesk-gui/src/icons/frontdesk.svg b/servicedesk-gui/src/icons/frontdesk.svg
index adba5cf1..0f500e52 100644
--- a/servicedesk-gui/src/icons/frontdesk.svg
+++ b/servicedesk-gui/src/icons/frontdesk.svg
@@ -1,4 +1,4 @@
-<svg height='300px' width='300px' fill="#000000" xmlns="http://www.w3.org/2000/svg"
+<svg height='300px' width='300px' fill="currentColor" xmlns="http://www.w3.org/2000/svg"
      version="1.1" x="0px" y="0px" viewBox="0 0 100 100"
      enable-background="new 0 0 100 100" xml:space="preserve">
     <path d="M66.55,46.015c5.367,0,9.733-4.367,9.733-9.734s-4.366-9.734-9.733-9.734s-9.733,4.367-9.733,9.734  S61.183,46.015,66.55,46.015z M66.55,29.548c3.713,0,6.733,3.021,6.733,6.734s-3.021,6.734-6.733,6.734s-6.733-3.021-6.733-6.734  S62.837,29.548,66.55,29.548z M23.698,30.048c0-4.222,3.422-7.644,7.645-7.644c4.223,0,7.645,3.422,7.645,7.644  c0,4.222-3.422,7.645-7.645,7.645C27.121,37.692,23.698,34.27,23.698,30.048z M96.021,64.201H83.41v21.783h-3V61.749  c0-6.025-4.902-10.928-10.928-10.928h-3.865c-6.025,0-10.928,4.902-10.928,10.928v24.235h-3V64.201H6.021v-3h12.918v-9.557  c0-6.373,5.166-11.539,11.538-11.539h1.731c6.372,0,11.539,5.166,11.539,11.539v9.557h7.97c0.291-7.425,6.405-13.38,13.9-13.38  h3.865c7.495,0,13.609,5.955,13.9,13.38h12.639V64.201z">
diff --git a/servicedesk-gui/src/pages/Login.jsx b/servicedesk-gui/src/pages/Login.jsx
index 884a8f5f..750ba1aa 100644
--- a/servicedesk-gui/src/pages/Login.jsx
+++ b/servicedesk-gui/src/pages/Login.jsx
@@ -3,18 +3,14 @@ import {Button, ButtonSize, ButtonType} from "@surfnet/sds";
 import './Login.scss';
 import I18n from "../locale/I18n";
 import DOMPurify from "dompurify";
-import students from "../icons/chatgpt/openart-image_raw.jpg";
+import Frontdesk from "../icons/frontdesk.svg";
 import {LandingInfo} from "../components/LandingInfo";
-import {useAppStore} from "../stores/AppStore.js";
 
 export const Login = () => {
 
-    const {config} = useAppStore(state => state);
-
     const doLogin = () => {
-        window.location.href = `${config.loginUrl}?redirect_path=/`;
-        // const encodedQueryParams = `target=${encodeURIComponent("/startSSO")}&redirect_url=${encodeURIComponent(path + "/home")}`
-        // window.location.href = `${path}/Shibboleth.sso/Login?${encodedQueryParams}`;
+        const path = window.location.origin;
+        window.location.href = `${path}/Shibboleth.sso/Login?target=/`;
     }
 
     return (
@@ -22,7 +18,7 @@ export const Login = () => {
             <div className="mod-login-container">
                 <div className="mod-login">
                     <div className="header-left">
-                        <h2 className={"header-title"}
+                        <h1 className={"header-title"}
                             dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(I18n.t("landing.header.title"))}}/>
                         <Button onClick={() => doLogin()}
                                 txt={I18n.t("landing.header.login")}
@@ -32,7 +28,7 @@ export const Login = () => {
                            dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(I18n.t("landing.header.sup"))}}/>
                     </div>
                     <div className="header-right">
-                        <img className="screen" src={students} alt="logo"/>
+                        <Frontdesk/>
                     </div>
                 </div>
             </div>
diff --git a/servicedesk-gui/src/pages/Login.scss b/servicedesk-gui/src/pages/Login.scss
index 5a14398f..1cfe851d 100644
--- a/servicedesk-gui/src/pages/Login.scss
+++ b/servicedesk-gui/src/pages/Login.scss
@@ -17,7 +17,7 @@
         }
 
         .header-title {
-            margin-bottom: 60px;
+            margin-bottom: 40px;
         }
 
         &.bottom {
@@ -91,10 +91,13 @@
                     margin: 25px auto;
                 }
 
-                img {
-                    width: 240px;
+                svg {
+                    width: 160px;
                     height: auto;
                     border-radius: $br;
+                    color: var(--sds--color--blue--400);
+                    padding: 15px;
+                    border: 1px solid var(--sds--color--blue--400);
 
                     @media (max-width: $medium) {
                         width: 180px;