Updated login page appearance #9425
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import React from "react"; | ||
| import { PluginLoginMethodSelection, LoginConfig } from "../pluginLoginMethodSelection"; | ||
|
|
||
| class DefaultLoginMethodSelectionPlugin implements PluginLoginMethodSelection { | ||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| renderMethodSelection(_loginConfig: LoginConfig | undefined): React.ReactElement | null { | ||
| return null; | ||
| } | ||
| } | ||
|
|
||
| export default new DefaultLoginMethodSelectionPlugin(); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import React from "react"; | ||
|
|
||
| export interface LoginConfig { | ||
| login_url: string; | ||
| username_ui_placeholder: string; | ||
| password_ui_placeholder: string; | ||
| login_failed_message?: string; | ||
| fallback_login_url?: string; | ||
| fallback_login_label?: string; | ||
| login_cookie_names: string[]; | ||
| logout_url: string; | ||
| select_login_method?: boolean; | ||
| } | ||
|
|
||
| export interface PluginLoginMethodSelection { | ||
| renderMethodSelection: (loginConfig: LoginConfig | undefined) => React.ReactElement | null; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -64,39 +64,31 @@ const TopNavLink = ({ href, children }) => { | |
| }; | ||
|
|
||
| const TopNav = ({logged = true}) => { | ||
| if (logged) { | ||
|
There was a problem hiding this comment. What happens if There was a problem hiding this comment. @itaigilo In the new login page, when 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. |
||
| return ( | ||
| <Navbar variant="dark" bg="dark" expand="md" className="border-bottom"> | ||
| <Container fluid={true}> | ||
| <Link component={Navbar.Brand} href="/"> | ||
| <img src="/logo.png" alt="lakeFS" className="logo"/> | ||
| </Link> | ||
| <Navbar.Toggle aria-controls="navbarScroll" /> | ||
| <Navbar.Collapse id="navbarScroll"> | ||
|
|
||
| <Nav className="me-auto my-2 my-lg-0" | ||
| style={{ maxHeight: '100px' }} | ||
| navbarScroll> | ||
| <TopNavLink href="/repositories">Repositories</TopNavLink> | ||
| <TopNavLink href="/auth">Administration</TopNavLink> | ||
| </Nav> | ||
|
|
||
| <DarkModeToggle/> | ||
| <NavUserInfo/> | ||
| </Navbar.Collapse> | ||
| </Container> | ||
| </Navbar> | ||
| ); | ||
| } | ||
| return null; | ||
| }; | ||
|
|
||
| export default TopNav; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,19 @@ | ||
| import React, {useState} from "react"; | ||
| import Card from "react-bootstrap/Card"; | ||
| import Form from "react-bootstrap/Form"; | ||
| import Button from "react-bootstrap/Button"; | ||
| import {auth, AuthenticationError, setup, SETUP_STATE_INITIALIZED} from "../../lib/api"; | ||
| import {AlertError} from "../../lib/components/controls" | ||
| import {useRouter} from "../../lib/hooks/router"; | ||
| import {useAPI} from "../../lib/hooks/api"; | ||
| import {useNavigate} from "react-router-dom"; | ||
| import {usePluginManager} from "../../extendable/plugins/pluginsContext"; | ||
|
|
||
| interface SetupResponse { | ||
| state: string; | ||
| comm_prefs_missing?: boolean; | ||
| login_config?: LoginConfig; | ||
| } | ||
|
|
||
| interface LoginConfig { | ||
| login_url: string; | ||
|
|
@@ -19,111 +24,142 @@ interface LoginConfig { | |
| fallback_login_label?: string; | ||
| login_cookie_names: string[]; | ||
| logout_url: string; | ||
| select_login_method?: boolean; | ||
| } | ||
|
|
||
| const LoginForm = ({loginConfig}: {loginConfig: LoginConfig}) => { | ||
| const router = useRouter(); | ||
| const navigate = useNavigate(); | ||
| const [loginError, setLoginError] = useState<React.ReactNode>(null); | ||
| const { next } = router.query; | ||
| const usernamePlaceholder = loginConfig.username_ui_placeholder || "Access Key ID"; | ||
| const passwordPlaceholder = loginConfig.password_ui_placeholder || "Secret Access Key"; | ||
|
|
||
| return ( | ||
| <div className="d-flex align-items-center justify-content-center login-container"> | ||
|
There was a problem hiding this comment. The Just define for the 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. |
||
| <Card className="login-widget shadow-lg border-0 login-card"> | ||
|
There was a problem hiding this comment. Why both |
||
| <Card.Header className="text-center"> | ||
| <div className="mb-3"> | ||
| <img src="/logo.png" alt="lakeFS" className="login-logo" /> | ||
| </div> | ||
| <h4 className="mb-0">Login</h4> | ||
|
There was a problem hiding this comment. This is more for @nopcoder , I guess, but - |
||
| </Card.Header> | ||
| <Card.Body className="p-4"> | ||
| <Form onSubmit={async (e) => { | ||
| e.preventDefault() | ||
| const form = e.target as HTMLFormElement; | ||
| const formData = new FormData(form); | ||
| try { | ||
| setLoginError(null); | ||
| const username = formData.get('username'); | ||
| const password = formData.get('password'); | ||
| if (typeof username === 'string' && typeof password === 'string') { | ||
| await auth.login(username, password); | ||
| } | ||
| router.push(next || '/'); | ||
| navigate(0); | ||
| } catch(err) { | ||
| if (err instanceof AuthenticationError && err.status === 401) { | ||
| const contents = {__html: `${loginConfig.login_failed_message}` || | ||
| "Credentials don't match."}; | ||
| setLoginError(<span dangerouslySetInnerHTML={contents}/>); | ||
| } | ||
| } | ||
| }}> | ||
| <Form.Group controlId="username" className="mb-3"> | ||
| <Form.Control | ||
| name="username" | ||
| type="text" | ||
| placeholder={usernamePlaceholder} | ||
| autoFocus | ||
| className="bg-light" | ||
| /> | ||
| </Form.Group> | ||
|
|
||
| <Form.Group controlId="password" className="mb-3"> | ||
| <Form.Control | ||
| name="password" | ||
| type="password" | ||
| placeholder={passwordPlaceholder} | ||
| className="bg-light" | ||
| /> | ||
| </Form.Group> | ||
|
|
||
| {(!!loginError) && <AlertError error={loginError}/>} | ||
|
|
||
| <Button | ||
| variant="primary" | ||
| type="submit" | ||
| className="w-100 mt-3 py-2" | ||
| > | ||
| Login | ||
| </Button> | ||
| </Form> | ||
| <div className={"mt-2 mb-1"}> | ||
| { loginConfig.fallback_login_url ? | ||
| <Button variant="link" className="text-secondary mt-2" onClick={async ()=> { | ||
| loginConfig.login_cookie_names?.forEach( | ||
| cookie => { | ||
| document.cookie = `${cookie}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`; | ||
| } | ||
| ); | ||
| if (loginConfig.fallback_login_url) { | ||
| window.location.href = loginConfig.fallback_login_url; | ||
| } | ||
| }}>{loginConfig.fallback_login_label || 'Try another way to login'}</Button> | ||
| : "" | ||
| } | ||
| </div> | ||
| </Card.Body> | ||
| </Card> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
|
|
||
|
|
||
| const LoginPage = () => { | ||
| const router = useRouter(); | ||
| const { response, error, loading } = useAPI(() => setup.getState()); | ||
| const pluginManager = usePluginManager(); | ||
|
|
||
| if (loading) { | ||
| return null; | ||
| } | ||
|
|
||
| // if we are not initialized, or we are not done with comm prefs, redirect to 'setup' page | ||
| if (!error && response && ((response as SetupResponse).state !== SETUP_STATE_INITIALIZED || (response as SetupResponse).comm_prefs_missing)) { | ||
| router.push({pathname: '/setup', params: {}, query: router.query as Record<string, string>}) | ||
| return null; | ||
| } | ||
| const setupResponse = response as SetupResponse | null; | ||
| const loginConfig = setupResponse?.login_config; | ||
|
|
||
| const loginMethodSelectionComponent = loginConfig ? pluginManager.loginMethodSelection.renderMethodSelection(loginConfig) : null; | ||
| if (loginMethodSelectionComponent) { | ||
| if (router.query.method === 'local' && loginConfig) { | ||
| return <LoginForm loginConfig={loginConfig}/>; | ||
|
There was a problem hiding this comment. If you can ensure LoginConfig isn't false-y, remove |
||
| } | ||
|
|
||
| return loginMethodSelectionComponent; | ||
| } | ||
|
|
||
| if (router.query.redirected) { | ||
| if(!error && loginConfig?.login_url) { | ||
| window.location.href = loginConfig.login_url; | ||
| return null; | ||
| } | ||
| delete router.query.redirected; | ||
|
|
||
| router.push({pathname: '/auth/login', params: {}, query: router.query as Record<string, string>}) | ||
| } | ||
| if (!loginConfig) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <LoginForm loginConfig={loginConfig}/> | ||
| ); | ||
| }; | ||
|
|
||
| export default LoginPage; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Following my proposal in the other PR,
And plugins will check the method string to know which component to return
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@yonipeleg33
thanks I renamed it to:
renderLoginMethodComponentand the Plugin name to:
PluginLoginMethodand the default plugin imp to:
DefaultLoginMethodPluginThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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.