google sso (SAML) and updated UI

Author: byte888

client/.env

@@ -1,2 +1,3 @@
 # Use to simulate different environments (DEV, UAT, PROD)
+# Shared dev deployment: https://tdm-dev.azurewebsites.net
 VITE_ENV=DEV

client/package-lock.json

@@ -7,6 +7,7 @@ import * as Yup from "yup";
 import * as accountService from "../../services/account.service";
 import Button from "../Button/Button";
 import ContentContainer from "../Layout/ContentContainer";
+import angelenoAccountButton from "../../images/angeleno-account-button-light.svg";
 
 const useStyles = createUseStyles(theme => ({
   warningText: {
@@ -26,6 +27,31 @@ const useStyles = createUseStyles(theme => ({
     justifyContent: "center",
     margin: "16px auto"
   },
+  angelenoAccountSignIn: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  },
+  angelenoAccountButton: {
+    background: "transparent",
+    border: 0,
+    cursor: "pointer",
+    minHeight: "46px",
+    minWidth: "258px",
+    padding: 0,
+    width: "258px"
+  },
+  angelenoAccountButtonImage: {
+    display: "block",
+    height: "auto",
+    width: "258px"
+  },
+  angelenoAccountTagline: {
+    ...theme.typography.paragraph1,
+    margin: 0,
+    textAlign: "center"
+  },
   divider: {
     alignItems: "center",
     display: "flex",
@@ -182,14 +208,24 @@ const Login = () => {
           >
             Sign in with Google SSO (City staff)
           </Button>
-          <Button
-            id="cy-login-angeleno"
-            type="button"
-            variant="primary"
-            onClick={handleAngelenoLogin}
-          >
-            Sign in with Angeleno Account (external users)
-          </Button>
+          <div className={classes.angelenoAccountSignIn}>
+            <button
+              aria-label="Sign in with Angeleno Account"
+              className={classes.angelenoAccountButton}
+              id="cy-login-angeleno"
+              type="button"
+              onClick={handleAngelenoLogin}
+            >
+              <img
+                alt="Sign in with Angeleno Account"
+                className={classes.angelenoAccountButtonImage}
+                src={angelenoAccountButton}
+              />
+            </button>
+            <p className={classes.angelenoAccountTagline}>
+              Your one account to access City of Los Angeles services.
+            </p>
+          </div>
         </div>
         <div className={classes.divider}>or sign in with TDM credentials</div>
         <Formik

client/src/components/Authorization/Login.jsx

@@ -55,8 +55,11 @@ ANGELENO_TOKEN_URL=https://login.sandbox.account.lacity.gov/oauth/token
 ANGELENO_JWKS_URL=https://login.sandbox.account.lacity.gov/.well-known/jwks.json
 ANGELENO_SCOPE=openid profile email
 
-# Google SSO / OIDC for internal City users
-# Set GOOGLE_SSO_DEMO_MODE=true for local demos without OAuth credentials.
+# Google SSO for internal City users
+# GOOGLE_SSO_PROTOCOL=oauth keeps the existing OAuth/OIDC flow.
+# Set GOOGLE_SSO_PROTOCOL=saml to use Google Workspace SAML instead.
+# Set GOOGLE_SSO_DEMO_MODE=true for local OAuth demos without provider credentials.
+GOOGLE_SSO_PROTOCOL=oauth
 GOOGLE_SSO_DEMO_MODE=true
 GOOGLE_SSO_DEMO_EMAIL=
 GOOGLE_SSO_DEMO_FIRST_NAME=
@@ -72,6 +75,15 @@ GOOGLE_SSO_TOKEN_URL=
 GOOGLE_SSO_JWKS_URL=
 GOOGLE_SSO_SCOPE=openid profile email
 
+# Google Workspace SAML (used only when GOOGLE_SSO_PROTOCOL=saml)
+# Configure these values from the Google Workspace custom SAML app.
+GOOGLE_SAML_SP_ENTITY_ID=http://localhost:5001/google-saml
+GOOGLE_SAML_ACS_URL=http://localhost:5001/api/accounts/google/saml/acs
+GOOGLE_SAML_IDP_SSO_URL=
+GOOGLE_SAML_IDP_ENTITY_ID=
+GOOGLE_SAML_IDP_CERT=
+GOOGLE_SAML_CLOCK_SKEW_MS=5000
+
 #########################################
 ## Shared Dev Environment (Azure)      ##
 ## https://tdm-dev.azurewebsites.net   ##
@@ -82,8 +94,11 @@ GOOGLE_SSO_SCOPE=openid profile email
 # SERVER_URL=https://tdm-dev.azurewebsites.net
 # ANGELENO_DEMO_MODE=false
 # ANGELENO_REDIRECT_URI=https://tdm-dev.azurewebsites.net/api/accounts/angeleno/callback
+# GOOGLE_SSO_PROTOCOL=oauth
 # GOOGLE_SSO_DEMO_MODE=false
 # GOOGLE_SSO_REDIRECT_URI=https://tdm-dev.azurewebsites.net/api/accounts/google/callback
+# GOOGLE_SAML_SP_ENTITY_ID=https://tdm-dev.azurewebsites.net/google-saml
+# GOOGLE_SAML_ACS_URL=https://tdm-dev.azurewebsites.net/api/accounts/google/saml/acs
 #
 # Register with Angeleno (sandbox):
 #   Callback URL:       https://tdm-dev.azurewebsites.net/api/accounts/angeleno/callback