Skip to content

Commit 18eb91b

Browse files
nerdalertnerdalert
committed
Align the local dev login page with the Oauth login page
Signed-off-by: Brent Salisbury <bsalisbu@redhat.com>
1 parent f7242dd commit 18eb91b

File tree

2 files changed

+100
-90
lines changed

2 files changed

+100
-90
lines changed

‎src/app/login/githublogin.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,7 @@ a {
6363
padding-top: 20px;
6464
font-size: large;
6565
}
66+
67+
.login-label {
68+
color: white;
69+
}

‎src/app/login/page.tsx‎

Lines changed: 96 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,134 @@
11
// src/app/login/page.tsx
22
'use client';
33

4-
import React, { useState } from 'react';
4+
import React, { useState, useEffect } from 'react';
55
import { signIn } from 'next-auth/react';
6-
import { LoginFooterItem, LoginForm, LoginMainFooterLinksItem, LoginPage } from '@patternfly/react-core/dist/dynamic/components/LoginPage';
7-
import { ListItem, ListVariant } from '@patternfly/react-core/dist/dynamic/components/List';
86
import GithubLogin from './githublogin';
7+
import { Grid, GridItem } from '@patternfly/react-core/dist/dynamic/layouts/Grid';
8+
import { Text, TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
9+
import { Form, FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
10+
import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput';
11+
import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
12+
import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
13+
import './githublogin.css';
914

1015
const Login: React.FunctionComponent = () => {
11-
const [showHelperText, setShowHelperText] = useState(false);
16+
const [, setShowHelperText] = useState(false);
1217
const [username, setUsername] = useState('');
1318
const [isValidUsername, setIsValidUsername] = useState(true);
1419
const [password, setPassword] = useState('');
1520
const [isValidPassword, setIsValidPassword] = useState(true);
16-
const [isRememberMeChecked, setIsRememberMeChecked] = useState(false);
1721
const [isProd, setIsProd] = useState(true);
1822

19-
React.useEffect(() => {
23+
useEffect(() => {
2024
const chooseLoginPage = async () => {
2125
const res = await fetch('/api/envConfig');
2226
const envConfig = await res.json();
23-
if (envConfig.DEPLOYMENT_TYPE === 'dev') {
24-
setIsProd(false);
25-
} else {
26-
setIsProd(true);
27-
}
27+
setIsProd(envConfig.DEPLOYMENT_TYPE !== 'dev');
2828
};
2929
chooseLoginPage();
3030
}, []);
3131

32-
const handleUsernameChange = (event: React.FormEvent<HTMLInputElement>, value: string) => {
33-
setUsername(value);
34-
};
35-
36-
const handlePasswordChange = (event: React.FormEvent<HTMLInputElement>, value: string) => {
37-
setPassword(value);
38-
};
39-
40-
const onRememberMeClick = () => {
41-
setIsRememberMeChecked(!isRememberMeChecked);
42-
};
43-
44-
const onLoginButtonClick = async (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
45-
event.preventDefault();
46-
const result = await signIn('credentials', {
47-
redirect: false,
48-
username,
49-
password
50-
});
51-
32+
const handleLogin = async (e: React.FormEvent) => {
33+
e.preventDefault();
34+
const result = await signIn('credentials', { redirect: false, username, password });
5235
if (result?.error) {
36+
setShowHelperText(true);
5337
setIsValidUsername(false);
5438
setIsValidPassword(false);
55-
setShowHelperText(true);
5639
} else {
5740
window.location.href = '/';
5841
}
5942
};
6043

61-
const handleGitHubLogin = () => {
62-
signIn('github', { callbackUrl: '/' }); // Redirect to home page after login
44+
const handleUsernameChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
45+
setUsername(value);
6346
};
6447

65-
const socialMediaLoginContent = (
66-
<LoginMainFooterLinksItem href="#" onClick={handleGitHubLogin} linkComponentProps={{ 'aria-label': 'Login with Github' }}>
67-
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="48" height="48">
68-
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
69-
</svg>
70-
</LoginMainFooterLinksItem>
71-
);
72-
73-
const listItem = (
74-
<React.Fragment>
75-
<ListItem>
76-
<LoginFooterItem href="https://instructlab.ai/">Terms of Use </LoginFooterItem>
77-
</ListItem>
78-
<ListItem>
79-
<LoginFooterItem href="https://instructlab.ai/">Help</LoginFooterItem>
80-
</ListItem>
81-
<ListItem>
82-
<LoginFooterItem href="https://instructlab.ai/">Privacy Policy</LoginFooterItem>
83-
</ListItem>
84-
</React.Fragment>
85-
);
48+
const handlePasswordChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
49+
setPassword(value);
50+
};
8651

8752
const loginForm = (
88-
<LoginForm
89-
showHelperText={showHelperText}
90-
helperText="Invalid login credentials."
91-
usernameLabel="Username"
92-
usernameValue={username}
93-
onChangeUsername={handleUsernameChange}
94-
isValidUsername={isValidUsername}
95-
passwordLabel="Password"
96-
passwordValue={password}
97-
onChangePassword={handlePasswordChange}
98-
isValidPassword={isValidPassword}
99-
isRememberMeChecked={isRememberMeChecked}
100-
onChangeRememberMe={onRememberMeClick}
101-
onLoginButtonClick={onLoginButtonClick}
102-
loginButtonLabel="Login"
103-
/>
53+
<Form onSubmit={handleLogin}>
54+
<FormGroup label="Username" fieldId="username" className="login-label">
55+
<TextInput value={username} onChange={handleUsernameChange} id="username" isRequired validated={isValidUsername ? 'default' : 'error'} />
56+
{!isValidUsername && (
57+
<HelperText>
58+
<HelperTextItem variant="error">Invalid Username</HelperTextItem>
59+
</HelperText>
60+
)}
61+
</FormGroup>
62+
<FormGroup label="Password" fieldId="password" className="login-label">
63+
<TextInput
64+
value={password}
65+
onChange={handlePasswordChange}
66+
id="password"
67+
type="password"
68+
isRequired
69+
validated={isValidPassword ? 'default' : 'error'}
70+
/>
71+
{!isValidPassword && (
72+
<HelperText>
73+
<HelperTextItem variant="error">Invalid password</HelperTextItem>
74+
</HelperText>
75+
)}
76+
</FormGroup>
77+
<Button type="submit" style={{ backgroundColor: 'black', color: 'white' }}>
78+
Login
79+
</Button>
80+
</Form>
10481
);
10582

106-
if (isProd) {
107-
return <GithubLogin />;
108-
}
109-
110-
return (
111-
<LoginPage
112-
footerListVariants={ListVariant.inline}
113-
brandImgSrc="/InstructLab-Logo.svg"
114-
brandImgAlt="InstructLab logo"
115-
backgroundImgSrc="/login-bg.svg"
116-
footerListItems={listItem}
117-
textContent="InstructLab Taxonomy Submissions"
118-
loginTitle="Login Securely with admin username and password"
119-
loginSubtitle="Local Account"
120-
socialMediaLoginContent={socialMediaLoginContent}
121-
socialMediaLoginAriaLabel="Log in with GitHub"
122-
>
123-
{loginForm}
124-
</LoginPage>
83+
const devModeContent = (
84+
<div className="login-page-background">
85+
<Grid hasGutter span={12}>
86+
<GridItem span={6} className="login-container">
87+
<TextContent>
88+
<Text className="sign-in-text">Login locally with admin username and password</Text>
89+
</TextContent>
90+
<TextContent>
91+
<Text className="description-text">Join the novel, community-based movement to create truly open-source LLMs</Text>
92+
</TextContent>
93+
<div className="login-container">{loginForm}</div>
94+
<TextContent>
95+
<Text className="urls-text">
96+
<a href="https://github.com/instructlab/" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
97+
GitHub
98+
</a>{' '}
99+
|{' '}
100+
<a
101+
href="https://github.com/instructlab/community/blob/main/Collaboration.md"
102+
style={{ color: 'white', textDecoration: 'underline' }}
103+
target="_blank"
104+
>
105+
Collaborate
106+
</a>{' '}
107+
|{' '}
108+
<a
109+
href="https://github.com/instructlab/community/blob/main/CODE_OF_CONDUCT.md"
110+
style={{ color: 'white', textDecoration: 'underline' }}
111+
target="_blank"
112+
>
113+
Code Of Conduct
114+
</a>
115+
</Text>
116+
<Text className="urls-text-medium">
117+
<a href="https://www.redhat.com/en/about/terms-use" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
118+
Terms of use
119+
</a>{' '}
120+
|{' '}
121+
<a href="https://www.redhat.com/en/about/privacy-policy" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
122+
Privacy Policy
123+
</a>
124+
</Text>
125+
</TextContent>
126+
</GridItem>
127+
</Grid>
128+
</div>
125129
);
130+
131+
return isProd ? <GithubLogin /> : devModeContent;
126132
};
127133

128134
export default Login;

0 commit comments

Comments
 (0)