Updated login page appearance #9425

Annaseli · 2025-08-13T20:01:55Z

Change Description

Description

This PR previously included changes that I moved to this PR. It now contains only appearance-related updates and TypeScript error fixes. The comments provided here have been addressed in the other PR.

Fixed TypeScript errors in login.tsx.
Updated the appearance of the login page:
- Removed the simplified top navbar when the user is logged out.
- Added a lakeFS logo inside the login modal.
- Centered the login modal on the page.
- Centered the login title within the modal.

Old lakeFS login page:

New lakeFS login page:

yonipeleg33

Partial review, of course. I don't have enough context to approve

yonipeleg33 · 2025-08-14T05:59:15Z

webui/src/extendable/plugins/impls/DefaultLoginMethodSelectionPlugin.tsx

+
+class DefaultLoginMethodSelectionPlugin implements PluginLoginMethodSelection {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    renderMethodSelection(_loginConfig: LoginConfig | undefined): React.ReactElement | null {


Following my proposal in the other PR,

Suggested change

renderMethodSelection(_loginConfig: LoginConfig | undefined): React.ReactElement | null {

renderLoginMethod(_loginConfig: LoginConfig | undefined): React.ReactElement | null {

And plugins will check the method string to know which component to return

@yonipeleg33
thanks I renamed it to: renderLoginMethodComponent
and the Plugin name to: PluginLoginMethod
and the default plugin imp to: DefaultLoginMethodPlugin

@yonipeleg33

This PR previously included changes that I moved to this PR. It now contains only appearance-related updates and TypeScript error fixes. The comments provided here have been addressed in the other PR.

yonipeleg33 · 2025-08-14T06:02:43Z

webui/src/pages/auth/login.tsx

+        if (router.query.method === 'local' && loginConfig) {
+            return <LoginForm loginConfig={loginConfig}/>;


If you can ensure LoginConfig isn't false-y, remove | undefined from the plugin's signature

itaigilo

Nice plugin design!

I'd like to see the Enterprise part before completing this review, as some context is missing in this case.

Plus, blocking for the (info) comment atm.

itaigilo · 2025-08-14T08:50:59Z

webui/src/lib/components/navbar.jsx

@@ -64,39 +64,31 @@ const TopNavLink = ({ href, children }) => {
 };

 const TopNav = ({logged = true}) => {
-    if (!logged) {
+    if (logged) {


What happens if !logged?
There's no Navbar? How does the user logs in in this case?

@itaigilo
The TopNav component refers to the black navigation bar at the top, as shown here:

In the new login page, when !logged, TopNav will return nothing, meaning the black top navigation bar will not be displayed.
The only element visible when !logged will be the Login modal, as seen here:

But as requested by Barak, I’ll split this PR to two PR, this one will handle the design changes and the other will cover the plugin functionality.

@itaigilo

This PR previously included changes that I moved to this PR. It now contains only appearance-related updates and TypeScript error fixes.

nopcoder

Is it possible to split the UI change with the functionality to extend. It will enable a quicker way to approve changes.

Annaseli · 2025-08-14T12:09:12Z

The UI feature I was referring to in the description of this PR is linked here.

Annaseli · 2025-08-14T12:38:53Z

Is it possible to split the UI change with the functionality to extend. It will enable a quicker way to approve changes.

@nopcoder
sure i'll split it now.

…lection page

Annaseli · 2025-08-14T17:34:23Z

This PR previously included changes that I moved to this PR. It now contains only appearance-related updates and TypeScript error fixes.

itaigilo

Nice cleanup,
I like this move.

This can / should be cleaned-up and simplified though.
Plus, the image currently looks squashed 🤷

itaigilo · 2025-08-15T08:27:30Z

webui/src/styles/auth.css

+.login-logo {
+  width: 170px;
+  height: 60px;


These are wrong values:
The image itself is 359x82 (if I'm looking at the right one),
Plus, the image looks squashed horizontally.

itaigilo · 2025-08-15T08:27:56Z

webui/src/styles/auth.css

+
+.login-container {
+  height: 100vh;


What is vh?
Do we use it anywhere else?

itaigilo · 2025-08-15T08:32:59Z

webui/src/pages/auth/login.tsx

-                            } catch(err) {
-                                if (err instanceof AuthenticationError && err.status === 401) {
-                                    const contents = {__html: `${loginConfig.login_failed_message}` ||
+        <div className="d-flex align-items-center justify-content-center login-container">


The login-container (and its css) isn't needed, and positioning can / should be simplified.

Just define for the login-card:
margin: 50px auto auto auto

It will place it at a fixed margin from the top, and center it horizontally.

And in addition, vertical centering is tricky with html + css, and prone for errors.

itaigilo · 2025-08-15T08:33:35Z

webui/src/pages/auth/login.tsx

-                                if (err instanceof AuthenticationError && err.status === 401) {
-                                    const contents = {__html: `${loginConfig.login_failed_message}` ||
+        <div className="d-flex align-items-center justify-content-center login-container">
+            <Card className="login-widget shadow-lg border-0 login-card">


Why both login-widget and login-card?

itaigilo · 2025-08-15T08:36:49Z

webui/src/pages/auth/login.tsx

+                    <div className="mb-3">
+                        <img src="/logo.png" alt="lakeFS" className="login-logo" />
+                    </div>
+                    <h4 className="mb-0">Login</h4>


This is more for @nopcoder , I guess, but -
There's already a button that says Login,
So there's no need to repeat it (is creates an unnecessary cognitive load on the user).
IMO this h4 can simply be removed.

remove myself as I wanted to verify this change does not include the functionality related to the login selection.

added plugin support for login method selection feature

3b3804f

Annaseli added the include-changelog PR description should be included in next release changelog label Aug 13, 2025

Annaseli requested review from a team August 13, 2025 20:02

yonipeleg33 reviewed Aug 14, 2025

View reviewed changes

itaigilo requested changes Aug 14, 2025

View reviewed changes

nopcoder previously requested changes Aug 14, 2025

View reviewed changes

added in auth.css color changes for a button

30e9f98

Annaseli changed the title ~~Added plugin support for login method selection in Enterprise and updated login page appearance~~ Updated login page appearance Aug 14, 2025

Removed code related to the plugin system imp for the login method se…

538cea7

…lection page

Annaseli requested review from yonipeleg33, itaigilo and nopcoder August 14, 2025 17:00

itaigilo requested changes Aug 15, 2025

View reviewed changes

nopcoder removed their request for review August 20, 2025 08:35

	renderMethodSelection(_loginConfig: LoginConfig \| undefined): React.ReactElement \| null {
	renderLoginMethod(_loginConfig: LoginConfig \| undefined): React.ReactElement \| null {

		if (router.query.method === 'local' && loginConfig) {
		return <LoginForm loginConfig={loginConfig}/>;

Updated login page appearance #9425

Are you sure you want to change the base?

Updated login page appearance #9425

Uh oh!

Conversation

Annaseli commented Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Change Description

Description

Uh oh!

yonipeleg33 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

itaigilo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Annaseli Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Annaseli Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nopcoder left a comment

Choose a reason for hiding this comment

Uh oh!

Annaseli commented Aug 14, 2025

Uh oh!

Annaseli commented Aug 14, 2025

Uh oh!

Annaseli commented Aug 14, 2025

Uh oh!

itaigilo left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Annaseli commented Aug 13, 2025 •

edited

Loading

Annaseli Aug 14, 2025 •

edited

Loading

Annaseli Aug 14, 2025 •

edited

Loading

itaigilo left a comment •

edited

Loading