Updated login page appearance #9425

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

Closes #9430

Change Description

Description

In this PR, I made the following changes:

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.
- Moved down the login modal on the page.
- Removed the login title from the modal because the button already has the word "Login".
Fixed TypeScript errors in login.tsx.

Old lakeFS login page:

New lakeFS login page:

yonipeleg33

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

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

webui/src/pages/auth/login.tsx

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.

webui/src/lib/components/navbar.jsx

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.

you're right, updated it

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

webui/src/styles/auth.css

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


What is vh?
Do we use it anywhere else?

removed the login-container

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?

The login-widget was already here before my changes. I saw that there’s no actual CSS class with that name, and the only reference I found was in the design/accepted/ui-testing.md document, where it was used as a selector in this old design doc. So I removed it.

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.

I agree I removed it. Let's see what @nopcoder thinks about that and the whole appearance change.

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

Annaseli · 2025-09-11T10:36:20Z

Now the propesed login page looks like this:

itaigilo

LGTM 👍

itaigilo · 2025-09-12T22:21:50Z

webui/src/pages/auth/login.tsx

+                            setLoginError(null);
+                            const username = formData.get('username');
+                            const password = formData.get('password');
+                            if (typeof username === 'string' && typeof password === 'string') {


Does this allow empty strings?

@itaigilo
Yes, this check allows empty strings, but I actually removed this:

if (typeof username === 'string' && typeof password === 'string')

before the call to:

await auth.login(username, password);

because in the previous code we didn’t have this check, and I don’t want to change the logic. If formData.get('username') or formData.get('password') are not strings, the auth.login() call will handle them the same way it did before (resulting in a 401 response for the request).

nopcoder · 2025-09-14T05:41:21Z

Getting the following error while Login page is loaded:

Navigated to http://localhost:3000/auth/login?next=%2Frepositories&redirected=true
index.js:81  GET http://localhost:3000/api/v1/config 401 (Unauthorized)
apiRequest @ index.js:81
getConfig @ index.js:1085
(anonymous) @ configProvider.tsx:64
commitHookEffectListMount @ chunk-SKXUPSEW.js?v=2ac58ab6:16931
commitPassiveMountOnFiber @ chunk-SKXUPSEW.js?v=2ac58ab6:18174
commitPassiveMountEffects_complete @ chunk-SKXUPSEW.js?v=2ac58ab6:18147
commitPassiveMountEffects_begin @ chunk-SKXUPSEW.js?v=2ac58ab6:18137
commitPassiveMountEffects @ chunk-SKXUPSEW.js?v=2ac58ab6:18127
flushPassiveEffectsImpl @ chunk-SKXUPSEW.js?v=2ac58ab6:19511
flushPassiveEffects @ chunk-SKXUPSEW.js?v=2ac58ab6:19468
(anonymous) @ chunk-SKXUPSEW.js?v=2ac58ab6:19349
workLoop @ chunk-SKXUPSEW.js?v=2ac58ab6:197
flushWork @ chunk-SKXUPSEW.js?v=2ac58ab6:176
performWorkUntilDeadline @ chunk-SKXUPSEW.js?v=2ac58ab6:384
pluginsContext.tsx:20 Warning: React has detected a change in the order of Hooks called by LoginPage. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. useContext                 useContext
3. useContext                 useContext
4. useContext                 useContext
5. useContext                 useContext
6. useContext                 useContext
7. useContext                 useContext
8. useContext                 useContext
9. useContext                 useContext
10. useContext                useContext
11. useContext                useContext
12. useContext                useContext
13. useRef                    useRef
14. useContext                useContext
15. useLayoutEffect           useLayoutEffect
16. useCallback               useCallback
17. useContext                useContext
18. useContext                useContext
19. useContext                useContext
20. useContext                useContext
21. useContext                useContext
22. useContext                useContext
23. useContext                useContext
24. useContext                useContext
25. useContext                useContext
26. useContext                useContext
27. useContext                useContext
28. useContext                useContext
29. useRef                    useRef
30. useContext                useContext
31. useLayoutEffect           useLayoutEffect
32. useCallback               useCallback
33. useState                  useState
34. useState                  useState
35. useEffect                 useEffect
36. useEffect                 useEffect
37. undefined                 useContext
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 Error Component Stack
    at LoginPage (login.tsx:119:20)
    at RenderedRoute (react-router-dom.js?v=2ac58ab6:3491:5)
    at Outlet (react-router-dom.js?v=2ac58ab6:3812:26)
    at div (<anonymous>)
    at ConfigProvider (configProvider.tsx:58:59)
    at Layout (layout.tsx:9:41)
    at RenderedRoute (react-router-dom.js?v=2ac58ab6:3491:5)
    at Routes (react-router-dom.js?v=2ac58ab6:3872:5)
    at WithLoginConfigContext (conf.tsx:28:41)
    at WithAppContext (appContext.tsx:53:36)
    at Router (react-router-dom.js?v=2ac58ab6:3819:15)
    at BrowserRouter (react-router-dom.js?v=2ac58ab6:4526:5)
    at IndexPage (<anonymous>)
    at PluginManagerProvider (pluginsContext.tsx:11:78)
    at LakeFSApp (lakefsApp.tsx:10:41)
overrideMethod @ hook.js:608
printWarning @ chunk-SKXUPSEW.js?v=2ac58ab6:521
error @ chunk-SKXUPSEW.js?v=2ac58ab6:505
warnOnHookMismatchInDev @ chunk-SKXUPSEW.js?v=2ac58ab6:12146
updateHookTypesDev @ chunk-SKXUPSEW.js?v=2ac58ab6:12116
useContext @ chunk-SKXUPSEW.js?v=2ac58ab6:13348
useContext @ chunk-EFTEWGEA.js?v=2ac58ab6:1062
usePluginManager @ pluginsContext.tsx:20
LoginPage @ login.tsx:148
renderWithHooks @ chunk-SKXUPSEW.js?v=2ac58ab6:12199
updateFunctionComponent @ chunk-SKXUPSEW.js?v=2ac58ab6:14605
beginWork @ chunk-SKXUPSEW.js?v=2ac58ab6:15940
beginWork$1 @ chunk-SKXUPSEW.js?v=2ac58ab6:19774
performUnitOfWork @ chunk-SKXUPSEW.js?v=2ac58ab6:19219
workLoopSync @ chunk-SKXUPSEW.js?v=2ac58ab6:19158
renderRootSync @ chunk-SKXUPSEW.js?v=2ac58ab6:19137
performConcurrentWorkOnRoot @ chunk-SKXUPSEW.js?v=2ac58ab6:18696
workLoop @ chunk-SKXUPSEW.js?v=2ac58ab6:197
flushWork @ chunk-SKXUPSEW.js?v=2ac58ab6:176
performWorkUntilDeadline @ chunk-SKXUPSEW.js?v=2ac58ab6:384
index.js:81  GET http://localhost:3000/api/v1/config 401 (Unauthorized)
apiRequest @ index.js:81
getConfig @ index.js:1085
(anonymous) @ configProvider.tsx:64
commitHookEffectListMount @ chunk-SKXUPSEW.js?v=2ac58ab6:16931
commitPassiveMountOnFiber @ chunk-SKXUPSEW.js?v=2ac58ab6:18174
commitPassiveMountEffects_complete @ chunk-SKXUPSEW.js?v=2ac58ab6:18147
commitPassiveMountEffects_begin @ chunk-SKXUPSEW.js?v=2ac58ab6:18137
commitPassiveMountEffects @ chunk-SKXUPSEW.js?v=2ac58ab6:18127
flushPassiveEffectsImpl @ chunk-SKXUPSEW.js?v=2ac58ab6:19511
flushPassiveEffects @ chunk-SKXUPSEW.js?v=2ac58ab6:19468
(anonymous) @ chunk-SKXUPSEW.js?v=2ac58ab6:19349
workLoop @ chunk-SKXUPSEW.js?v=2ac58ab6:197
flushWork @ chunk-SKXUPSEW.js?v=2ac58ab6:176
performWorkUntilDeadline @ chunk-SKXUPSEW.js?v=2ac58ab6:384

nopcoder

Add comment with error found in console while login page is loaded.

…fore calling to auth.login()

Annaseli · 2025-09-15T10:59:56Z

Getting the following error while Login page is loaded:

Navigated to http://localhost:3000/auth/login?next=%2Frepositories&redirected=true
index.js:81  GET http://localhost:3000/api/v1/config 401 (Unauthorized)
apiRequest @ index.js:81
getConfig @ index.js:1085
(anonymous) @ configProvider.tsx:64
commitHookEffectListMount @ chunk-SKXUPSEW.js?v=2ac58ab6:16931
commitPassiveMountOnFiber @ chunk-SKXUPSEW.js?v=2ac58ab6:18174
commitPassiveMountEffects_complete @ chunk-SKXUPSEW.js?v=2ac58ab6:18147
commitPassiveMountEffects_begin @ chunk-SKXUPSEW.js?v=2ac58ab6:18137
commitPassiveMountEffects @ chunk-SKXUPSEW.js?v=2ac58ab6:18127
flushPassiveEffectsImpl @ chunk-SKXUPSEW.js?v=2ac58ab6:19511
flushPassiveEffects @ chunk-SKXUPSEW.js?v=2ac58ab6:19468
(anonymous) @ chunk-SKXUPSEW.js?v=2ac58ab6:19349
workLoop @ chunk-SKXUPSEW.js?v=2ac58ab6:197
flushWork @ chunk-SKXUPSEW.js?v=2ac58ab6:176
performWorkUntilDeadline @ chunk-SKXUPSEW.js?v=2ac58ab6:384
pluginsContext.tsx:20 Warning: React has detected a change in the order of Hooks called by LoginPage. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. useContext                 useContext
3. useContext                 useContext
4. useContext                 useContext
5. useContext                 useContext
6. useContext                 useContext
7. useContext                 useContext
8. useContext                 useContext
9. useContext                 useContext
10. useContext                useContext
11. useContext                useContext
12. useContext                useContext
13. useRef                    useRef
14. useContext                useContext
15. useLayoutEffect           useLayoutEffect
16. useCallback               useCallback
17. useContext                useContext
18. useContext                useContext
19. useContext                useContext
20. useContext                useContext
21. useContext                useContext
22. useContext                useContext
23. useContext                useContext
24. useContext                useContext
25. useContext                useContext
26. useContext                useContext
27. useContext                useContext
28. useContext                useContext
29. useRef                    useRef
30. useContext                useContext
31. useLayoutEffect           useLayoutEffect
32. useCallback               useCallback
33. useState                  useState
34. useState                  useState
35. useEffect                 useEffect
36. useEffect                 useEffect
37. undefined                 useContext
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 Error Component Stack
    at LoginPage (login.tsx:119:20)
    at RenderedRoute (react-router-dom.js?v=2ac58ab6:3491:5)
    at Outlet (react-router-dom.js?v=2ac58ab6:3812:26)
    at div (<anonymous>)
    at ConfigProvider (configProvider.tsx:58:59)
    at Layout (layout.tsx:9:41)
    at RenderedRoute (react-router-dom.js?v=2ac58ab6:3491:5)
    at Routes (react-router-dom.js?v=2ac58ab6:3872:5)
    at WithLoginConfigContext (conf.tsx:28:41)
    at WithAppContext (appContext.tsx:53:36)
    at Router (react-router-dom.js?v=2ac58ab6:3819:15)
    at BrowserRouter (react-router-dom.js?v=2ac58ab6:4526:5)
    at IndexPage (<anonymous>)
    at PluginManagerProvider (pluginsContext.tsx:11:78)
    at LakeFSApp (lakefsApp.tsx:10:41)
overrideMethod @ hook.js:608
printWarning @ chunk-SKXUPSEW.js?v=2ac58ab6:521
error @ chunk-SKXUPSEW.js?v=2ac58ab6:505
warnOnHookMismatchInDev @ chunk-SKXUPSEW.js?v=2ac58ab6:12146
updateHookTypesDev @ chunk-SKXUPSEW.js?v=2ac58ab6:12116
useContext @ chunk-SKXUPSEW.js?v=2ac58ab6:13348
useContext @ chunk-EFTEWGEA.js?v=2ac58ab6:1062
usePluginManager @ pluginsContext.tsx:20
LoginPage @ login.tsx:148
renderWithHooks @ chunk-SKXUPSEW.js?v=2ac58ab6:12199
updateFunctionComponent @ chunk-SKXUPSEW.js?v=2ac58ab6:14605
beginWork @ chunk-SKXUPSEW.js?v=2ac58ab6:15940
beginWork$1 @ chunk-SKXUPSEW.js?v=2ac58ab6:19774
performUnitOfWork @ chunk-SKXUPSEW.js?v=2ac58ab6:19219
workLoopSync @ chunk-SKXUPSEW.js?v=2ac58ab6:19158
renderRootSync @ chunk-SKXUPSEW.js?v=2ac58ab6:19137
performConcurrentWorkOnRoot @ chunk-SKXUPSEW.js?v=2ac58ab6:18696
workLoop @ chunk-SKXUPSEW.js?v=2ac58ab6:197
flushWork @ chunk-SKXUPSEW.js?v=2ac58ab6:176
performWorkUntilDeadline @ chunk-SKXUPSEW.js?v=2ac58ab6:384
index.js:81  GET http://localhost:3000/api/v1/config 401 (Unauthorized)
apiRequest @ index.js:81
getConfig @ index.js:1085
(anonymous) @ configProvider.tsx:64
commitHookEffectListMount @ chunk-SKXUPSEW.js?v=2ac58ab6:16931
commitPassiveMountOnFiber @ chunk-SKXUPSEW.js?v=2ac58ab6:18174
commitPassiveMountEffects_complete @ chunk-SKXUPSEW.js?v=2ac58ab6:18147
commitPassiveMountEffects_begin @ chunk-SKXUPSEW.js?v=2ac58ab6:18137
commitPassiveMountEffects @ chunk-SKXUPSEW.js?v=2ac58ab6:18127
flushPassiveEffectsImpl @ chunk-SKXUPSEW.js?v=2ac58ab6:19511
flushPassiveEffects @ chunk-SKXUPSEW.js?v=2ac58ab6:19468
(anonymous) @ chunk-SKXUPSEW.js?v=2ac58ab6:19349
workLoop @ chunk-SKXUPSEW.js?v=2ac58ab6:197
flushWork @ chunk-SKXUPSEW.js?v=2ac58ab6:176
performWorkUntilDeadline @ chunk-SKXUPSEW.js?v=2ac58ab6:384

@nopcoder
This error also appears on master, so it’s unrelated to the changes in this PR. And it only occurs when running with npm run dev, and not on localhost:8000. I’ll address this issue in a separate PR.

Annaseli · 2025-09-15T11:03:52Z

@treeverse/product

In this PR, I changed the appearance of the login page. The description includes screenshots of both the old and new versions for comparison. Do you approve this change or have any feedback?

ozkatz · 2025-09-15T12:30:41Z

Looks better! Thank you :)

…election_feature-9424

…nd centered position

nopcoder

LGTM. not. comment.

nopcoder · 2025-09-16T11:56:03Z

webui/src/lib/components/navbar.jsx

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

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


code style - can we !logged and return early or return logged && the component so it will take the code indent a bit left.

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

webui/src/extendable/plugins/impls/DefaultLoginMethodSelectionPlugin.tsx Outdated Show resolved Hide resolved

webui/src/pages/auth/login.tsx Outdated Show resolved Hide resolved

itaigilo requested changes Aug 14, 2025

View reviewed changes

webui/src/lib/components/navbar.jsx Outdated Show resolved Hide resolved

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

Addressed the PR comments

fff9879

Annaseli requested review from itaigilo and nopcoder September 10, 2025 17:29

merged master to this branch

ef62d98

itaigilo approved these changes Sep 12, 2025

View reviewed changes

nopcoder requested changes Sep 14, 2025

View reviewed changes

added rerouting for login page from all the remove an if condition be…

4f5a078

…fore calling to auth.login()

Annaseli requested a review from nopcoder September 15, 2025 13:11

Annaseli added 2 commits September 15, 2025 16:16

Merge branch 'master' into task/add_plugin_support_for_login_method_s…

482b44c

…election_feature-9424

made changes to the logo: reduced it's size, use a colored svg file a…

ff6dc59

…nd centered position

nopcoder approved these changes Sep 16, 2025

View reviewed changes

changed code style

9e6dd28

Annaseli merged commit 247e86e into master Sep 16, 2025
41 checks passed

Annaseli deleted the task/add_plugin_support_for_login_method_selection_feature-9424 branch September 16, 2025 16:39

nopcoder pushed a commit that referenced this pull request Sep 18, 2025

Updated login page appearance (#9425)

956300a

Updated login page appearance #9425

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!

Uh oh!

Uh oh!

itaigilo left a comment

Choose a reason for hiding this comment

Uh oh!

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!

Annaseli Sep 10, 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!

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!

Annaseli commented Sep 11, 2025

Uh oh!

itaigilo 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!

nopcoder commented Sep 14, 2025

Uh oh!

nopcoder left a comment

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

Annaseli commented Sep 15, 2025

Uh oh!

ozkatz commented Sep 15, 2025

Uh oh!

nopcoder left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Annaseli commented Aug 13, 2025 •

edited

Loading

itaigilo left a comment •

edited

Loading

Annaseli Sep 10, 2025 •

edited

Loading

Annaseli commented Sep 15, 2025 •

edited

Loading