Redesign login page + hide login form when SSO is enabled (#4610)

* Display only SSO buttons if SSO is enabled
* renamed sign in to login/log in

Author: bilalabbad

frontend/app/cypress/support/e2e.ts

@@ -25,8 +25,8 @@ Cypress.Commands.add("login", (username: string, password: string) => {
   cy.session(
     [username, password],
     () => {
-      cy.visit("/signin");
-      cy.contains("Sign in to your account").should("be.visible");
+      cy.visit("/login");
+      cy.contains("Log in to your account").should("be.visible");
 
       cy.get(":nth-child(1) > .relative > .block").type(username);
 

frontend/app/package-lock.json

@@ -87,6 +87,7 @@
     "sha1": "^1.1.1",
     "subscriptions-transport-ws": "^0.11.0",
     "tailwind-merge": "^2.2.2",
+    "tailwindcss-animate": "^1.0.7",
     "unidiff": "^1.0.4",
     "use-query-params": "^2.2.1",
     "vite": "^5.2.8",

frontend/app/package.json

@@ -78,7 +78,7 @@ const UnauthenticatedAccountMenu = () => {
     <DropdownMenu>
       <Link
         className="flex items-center h-14 rounded-lg p-2 gap-2 hover:bg-indigo-50"
-        to="/signin"
+        to="/login"
         state={{ from: location }}
       >
         <div className="bg-indigo-50 rounded-full h-10 w-10 flex items-center justify-center overflow-hidden border border-white">
@@ -111,7 +111,7 @@ const UnauthenticatedAccountMenu = () => {
         <CommonMenuItems />
         <DropdownMenuDivider />
         <DropdownMenuItem asChild>
-          <Link to="/signin" state={{ from: location }}>
+          <Link to="/login" state={{ from: location }}>
             <Icon icon="mdi:login" className="text-base" />
             Log in
           </Link>

frontend/app/src/components/account-menu.tsx

@@ -60,10 +60,10 @@ export const AddComment = forwardRef<FormRef, tAddComment>(({ onSubmit, onCancel
       <LinkButton
         size="sm"
         variant="primary"
-        to={constructPath("/signin")}
+        to={constructPath("/login")}
         state={{ from: location }}
       >
-        Sign in
+        Login
       </LinkButton>{" "}
       to be able to add a comment.
     </div>

frontend/app/src/components/conversations/add-comment.tsx

@@ -31,7 +31,7 @@ export const CONFIG = {
   SEARCH_URL: (query: string, limit: number = 3) =>
     `${INFRAHUB_API_SERVER_URL}/api/search/docs?query=${query}&limit=${limit}`,
   INFO_URL: `${INFRAHUB_API_SERVER_URL}/api/info`,
-  AUTH_SIGN_IN_URL: `${INFRAHUB_API_SERVER_URL}/api/auth/login`,
+  AUTH_LOGIN_URL: `${INFRAHUB_API_SERVER_URL}/api/auth/login`,
   SCHEMA_SUMMARY_URL: (branch?: string | null) =>
     branch
       ? `${INFRAHUB_API_SERVER_URL}/api/schema/summary?branch=${branch}`

frontend/app/src/config/config.ts

@@ -30,7 +30,7 @@ export type AuthContextType = {
   isAuthenticated: boolean;
   isLoading: boolean;
   permissions?: PermissionsType;
-  signIn: (data: { username: string; password: string }, callback?: () => void) => Promise<void>;
+  login: (data: { username: string; password: string }, callback?: () => void) => Promise<void>;
   signOut: (callback?: () => void) => void;
   setToken: (token: UserToken) => void;
   user: User | null;
@@ -90,7 +90,7 @@ export const AuthContext = createContext<AuthContextType>({
     isAdmin: false,
     write: false,
   },
-  signIn: async () => {},
+  login: async () => {},
   signOut: () => {},
   setToken: () => {},
   user: null,
@@ -113,7 +113,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     };
 
     const result: components["schemas"]["UserToken"] = await fetchUrl(
-      CONFIG.AUTH_SIGN_IN_URL,
+      CONFIG.AUTH_LOGIN_URL,
       payload
     );
 
@@ -147,7 +147,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
       write: WRITE_ROLES.includes(data?.user_claims?.role),
       isAdmin: ADMIN_ROLES.includes(data?.user_claims?.role),
     },
-    signIn,
+    login: signIn,
     signOut,
     setToken,
     user: data?.sub ? { id: data?.sub } : null,
@@ -167,9 +167,9 @@ export function RequireAuth({ children }: { children: ReactElement }) {
 
   if (isAuthenticated || config?.main?.allow_anonymous_access) return children;
 
-  // Redirect them to the /signin page, but save the current location they were
+  // Redirect them to the /login page, but save the current location they were
   // trying to go to when they were redirected. This allows us to send them
   // along to that page after they log in, which is a nicer user experience
   // than dropping them off on the home page.
-  return <Navigate to="/signin" state={{ from: location }} replace />;
+  return <Navigate to="/login" state={{ from: location }} replace />;
 }

frontend/app/src/hooks/useAuth.tsx

@@ -42,11 +42,11 @@ function AuthCallback() {
   }, [config, protocol, provider]);
 
   if (!config || !config.sso.enabled) {
-    return <Navigate to="/signin" replace />;
+    return <Navigate to="/login" replace />;
   }
 
   if (errors) {
-    return <Navigate to="/signin" state={{ errors }} replace />;
+    return <Navigate to="/login" state={{ errors }} replace />;
   }
 
   if (isAuthenticated) {

frontend/app/src/pages/auth-callback.tsx

@@ -0,0 +1,37 @@
+import { useAuth } from "@/hooks/useAuth";
+import { ReactComponent as InfrahubLogo } from "@/images/Infrahub-SVG-hori.svg";
+import { Login } from "@/screens/authentification/login";
+import Content from "@/screens/layout/content";
+import { Navigate, useLocation } from "react-router-dom";
+
+function LoginPage() {
+  const location = useLocation();
+  const { isAuthenticated } = useAuth();
+
+  if (isAuthenticated) {
+    const from = (location.state?.from?.pathname || "/") + (location.state?.from?.search ?? "");
+    return <Navigate to={from} replace />;
+  }
+
+  return (
+    <Content className="bg-stone-100 h-screen w-screen pt-[25vh]">
+      <div className="flex flex-col items-center gap-6 w-full max-w-sm m-auto">
+        <InfrahubLogo className="h-12" alt="Intrahub logo" />
+
+        <h1 className="text-xl font-semibold text-neutral-900">Log in to your account</h1>
+
+        <Login />
+
+        {location?.state?.errors?.map(
+          (error: { extensions: { code: number }; message: string }, index: number) => (
+            <p key={index} className="text-red-500 text-sm mt-2">
+              ({error.extensions.code}) {error.message}
+            </p>
+          )
+        )}
+      </div>
+    </Content>
+  );
+}
+
+export const Component = LoginPage;