fix(login) simpler oidc login screen (#1825)

## Done

- fix(login) simpler oidc login screen

When OIDC is configured, use a simpler login screen with fewer
explanations:

<img width="3840" height="1916" alt="image"
src="https://github.com/user-attachments/assets/d4175bab-0433-41ba-94f8-e82705838e57"
/>

Author: edlerd

src/pages/login/Login.tsx

@@ -1,12 +1,16 @@
 import { type FC } from "react";
 import { Icon, Spinner, CustomLayout } from "@canonical/react-components";
-import { Navigate } from "react-router-dom";
+import { Link, Navigate } from "react-router-dom";
 import { useAuth } from "context/auth";
 import { ROOT_PATH } from "util/rootPath";
 import AuthenticationOptions from "components/AuthenticationOptions";
+import { useSettings } from "context/useSettings";
+import { AUTH_METHOD } from "util/authentication";
 
 const Login: FC = () => {
   const { isAuthenticated, isAuthLoading } = useAuth();
+  const { data: settings } = useSettings();
+  const hasOidc = settings?.auth_methods?.includes(AUTH_METHOD.OIDC);
 
   if (isAuthLoading) {
     return <Spinner className="u-loader" text="Loading..." isMainComponent />;
@@ -20,9 +24,32 @@ const Login: FC = () => {
     <>
       <CustomLayout contentClassName="login">
         <div className="empty-state login-page">
-          <Icon name="cluster-host" className="lxd-icon" />
-          <h1 className="p-heading--4 u-sv1">Choose your login method</h1>
-          <AuthenticationOptions />
+          {hasOidc && (
+            <>
+              <div className="u-sv2">
+                <Icon name="cluster-host" className="lxd-icon" />
+              </div>
+              <div className="auth-container">
+                <a
+                  className="p-button--positive has-icon"
+                  href={`${ROOT_PATH}/oidc/login`}
+                >
+                  <Icon name="security" light />
+                  <span>Login with SSO</span>
+                </a>
+                <Link to={`${ROOT_PATH}/ui/login/certificate-generate`}>
+                  <span>Set up TLS login</span>
+                </Link>
+              </div>
+            </>
+          )}
+          {!hasOidc && (
+            <>
+              <Icon name="cluster-host" className="lxd-icon" />
+              <h1 className="p-heading--4 u-sv1">Choose your login method</h1>
+              <AuthenticationOptions />
+            </>
+          )}
         </div>
       </CustomLayout>
     </>

src/sass/_login.scss

@@ -11,6 +11,15 @@
     .p-login-method {
       max-width: unset;
     }
+
+    .auth-container {
+      a,
+      button {
+        display: block;
+        margin-bottom: $spv--small;
+        width: 100%;
+      }
+    }
   }
 }