Feature 46 add org logos

.env.template

@@ -10,4 +10,8 @@ REACT_APP_config_path = /opt/rucio/lib/rucio/web/ui/common/saml/
 
 [oidc]
 REACT_APP_idpsecrets = /opt/rucio/etc/idpsecrets.json
-REACT_APP_admin_issuer = wlcg
+REACT_APP_admin_issuer = wlcg
+
+[login_page_org_images]
+REACT_APP_login_page_image_primary = ./images/atlas.png
+REACT_APP_login_page_image_secondary = ./images/atlas.png

.eslintrc

@@ -26,5 +26,8 @@
     "ignorePatterns": [
       "node_modules",
       "dist"
-    ]
+    ],
+    "rules": {
+      "@typescript-eslint/no-var-requires": 0
+    }
 }

package.json

@@ -21,7 +21,7 @@
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
         "react-router-dom": "^6.3.0",
-        "react-scripts": "5.0.1",
+        "react-scripts": "^5.0.1",
         "typescript": "^4.7.3",
         "web-vitals": "^2.1.4"
     },

src/Login.tsx

@@ -5,14 +5,16 @@ import { Image } from './stories/Image/Image'
 import { Form } from './stories/Form/Form'
 
 import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { NavigateFunction, useNavigate } from 'react-router-dom'
+
+import { env } from './util'
 
 function Login() {
-    const [userNameEntered, setUserNameEntered] = useState('')
-    const [passwordEntered, setPasswordEntered] = useState('')
-    const [userpassEnabled, setUserpassEnabled] = useState(false)
+    const [userNameEntered, setUserNameEntered] = useState('' as string)
+    const [passwordEntered, setPasswordEntered] = useState('' as string)
+    const [userpassEnabled, setUserpassEnabled] = useState(false as boolean)
 
-    const navigate = useNavigate()
+    const navigate: NavigateFunction = useNavigate()
 
     async function handleSubmit(event: any) {
         event.preventDefault()
@@ -27,11 +29,40 @@ function Login() {
                     style={{ backgroundColor: 'black' }}
                 >
                     <div className="wrap-login100 p-l-50 p-r-50 p-t-62 p-b-33">
-                        <Image
-                            src={require('./images/favicon.png')}
-                            height={150}
-                            width={150}
-                        ></Image>
+                        <div className="rucio-flex">
+                            {env('login_page_image_primary') ? (
+                                <div className="rucio-flex-item">
+                                    <Image
+                                        src={require(`${env(
+                                            'login_page_image_primary',
+                                        )}`)}
+                                        height={150}
+                                        width={150}
+                                    ></Image>
+                                </div>
+                            ) : null}
+
+                            <div className="rucio-flex-item">
+                                <Image
+                                    src={require('./images/favicon.png')}
+                                    height={150}
+                                    width={150}
+                                ></Image>
+                            </div>
+
+                            {env('login_page_image_secondary') ? (
+                                <div className="rucio-flex-item">
+                                    <Image
+                                        src={require(`${env(
+                                            'login_page_image_secondary',
+                                        )}`)}
+                                        height={150}
+                                        width={150}
+                                    ></Image>
+                                </div>
+                            ) : null}
+                        </div>
+                        <br></br>
                         <span className="login100-form-title p-b-27">
                             <strong>Rucio Login</strong>
                             <br></br>

src/css/main.css

@@ -382,9 +382,12 @@ iframe {
     }
 }
 
-img {
-    display: block;
-    margin: auto;
-    background-color: hsl(0, 0%, 90%);
-    transition: background-color 300ms;
+.rucio-flex {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+.rucio-flex-item {
+    margin: auto 5px;
 }

src/stories/Image/Image.tsx

@@ -16,7 +16,7 @@ export const Image = ({
 }: ImageProps) => {
     return (
         <img
-            className={`image ${type}`}
+            className={`rucio-image ${type}`}
             src={src}
             height={height}
             width={width}

src/stories/Image/image.scss

@@ -1,3 +1,8 @@
 @import 'bulma/sass/utilities/_all.sass';
 @import 'bulma/sass/base/_all.sass';
 @import 'bulma/sass/elements/_all.sass';
+
+.rucio-image {
+    @extend .image;
+    margin: auto;
+}