Skip to content

Commit 09b0968

Browse files
vishnoianilvishnoianil
authored
Merge pull request #313 from nerdalert/local-login-page
Align the local dev login page with the Oauth login page
2 parents f118c89 + 1cc5022 commit 09b0968

File tree

3 files changed

+174
-111
lines changed

3 files changed

+174
-111
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/locallogin.tsx‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
// src/app/login/LocalLogin.tsx
2+
// 'use client';
3+
4+
import React, { useState } from 'react';
5+
import { signIn } from 'next-auth/react';
6+
import { Grid, GridItem, Text, TextContent, Form, FormGroup, TextInput, Button, HelperText, HelperTextItem } from '@patternfly/react-core';
7+
import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon';
8+
import './githublogin.css';
9+
10+
const LocalLogin: React.FunctionComponent = () => {
11+
const [, setShowHelperText] = useState(false);
12+
const [username, setUsername] = useState('');
13+
const [isValidUsername, setIsValidUsername] = useState(true);
14+
const [password, setPassword] = useState('');
15+
const [isValidPassword, setIsValidPassword] = useState(true);
16+
17+
const handleLogin = async (e: React.FormEvent) => {
18+
e.preventDefault();
19+
const result = await signIn('credentials', { redirect: false, username, password });
20+
if (result?.error) {
21+
setShowHelperText(true);
22+
setIsValidUsername(false);
23+
setIsValidPassword(false);
24+
} else {
25+
window.location.href = '/';
26+
}
27+
};
28+
29+
const handleUsernameChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
30+
setUsername(value);
31+
};
32+
33+
const handlePasswordChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
34+
setPassword(value);
35+
};
36+
37+
const handleGitHubLogin = () => {
38+
signIn('github', { callbackUrl: '/' });
39+
};
40+
41+
return (
42+
<div className="login-page-background">
43+
<Grid hasGutter span={12}>
44+
<GridItem span={6} className="login-container">
45+
<TextContent>
46+
<Text className="sign-in-text">Login locally with a username and password or via GitHub OAuth</Text>
47+
</TextContent>
48+
<TextContent>
49+
<Text className="description-text">Join the novel, community-based movement to create truly open-source LLMs</Text>
50+
</TextContent>
51+
<div className="login-container">
52+
<Button
53+
variant="primary"
54+
icon={<GithubIcon />}
55+
iconPosition="left"
56+
size="lg"
57+
style={{ backgroundColor: 'black', marginBottom: '1rem' }}
58+
onClick={handleGitHubLogin}
59+
>
60+
Sign in with GitHub
61+
</Button>
62+
<Form onSubmit={handleLogin}>
63+
<FormGroup label="Username" fieldId="username" className="login-label">
64+
<TextInput
65+
value={username}
66+
onChange={handleUsernameChange}
67+
id="username"
68+
isRequired
69+
validated={isValidUsername ? 'default' : 'error'}
70+
/>
71+
{!isValidUsername && (
72+
<HelperText>
73+
<HelperTextItem variant="error">Invalid Username</HelperTextItem>
74+
</HelperText>
75+
)}
76+
</FormGroup>
77+
<FormGroup label="Password" fieldId="password" className="login-label">
78+
<TextInput
79+
value={password}
80+
onChange={handlePasswordChange}
81+
id="password"
82+
type="password"
83+
isRequired
84+
validated={isValidPassword ? 'default' : 'error'}
85+
/>
86+
{!isValidPassword && (
87+
<HelperText>
88+
<HelperTextItem variant="error">Invalid password</HelperTextItem>
89+
</HelperText>
90+
)}
91+
</FormGroup>
92+
<Button type="submit" style={{ backgroundColor: 'black', color: 'white' }}>
93+
Login
94+
</Button>
95+
</Form>
96+
</div>
97+
<TextContent>
98+
<Text className="urls-text">
99+
<a
100+
href="https://github.com/instructlab/"
101+
style={{ color: 'white', textDecoration: 'underline' }}
102+
target="_blank"
103+
rel="noopener noreferrer"
104+
>
105+
GitHub
106+
</a>{' '}
107+
|{' '}
108+
<a
109+
href="https://github.com/instructlab/community/blob/main/Collaboration.md"
110+
style={{ color: 'white', textDecoration: 'underline' }}
111+
target="_blank"
112+
rel="noopener noreferrer"
113+
>
114+
Collaborate
115+
</a>{' '}
116+
|{' '}
117+
<a
118+
href="https://github.com/instructlab/community/blob/main/CODE_OF_CONDUCT.md"
119+
style={{ color: 'white', textDecoration: 'underline' }}
120+
target="_blank"
121+
rel="noopener noreferrer"
122+
>
123+
Code Of Conduct
124+
</a>
125+
</Text>
126+
<Text className="urls-text-medium">
127+
<a
128+
href="https://www.redhat.com/en/about/terms-use"
129+
style={{ color: 'white', textDecoration: 'underline' }}
130+
target="_blank"
131+
rel="noopener noreferrer"
132+
>
133+
Terms of use
134+
</a>{' '}
135+
|{' '}
136+
<a
137+
href="https://www.redhat.com/en/about/privacy-policy"
138+
style={{ color: 'white', textDecoration: 'underline' }}
139+
target="_blank"
140+
rel="noopener noreferrer"
141+
>
142+
Privacy Policy
143+
</a>
144+
</Text>
145+
</TextContent>
146+
</GridItem>
147+
</Grid>
148+
</div>
149+
);
150+
};
151+
152+
export default LocalLogin;

‎src/app/login/page.tsx‎

Lines changed: 18 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,34 @@
11
// src/app/login/page.tsx
22
'use client';
33

4-
import React, { useState } from 'react';
5-
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';
8-
import GithubLogin from './githublogin';
4+
import React, { useState, useEffect } from 'react';
5+
import './githublogin.css';
6+
import LocalLogin from '@/app/login/locallogin';
7+
import GithubLogin from '@/app/login/githublogin';
98

109
const Login: React.FunctionComponent = () => {
11-
const [showHelperText, setShowHelperText] = useState(false);
12-
const [username, setUsername] = useState('');
13-
const [isValidUsername, setIsValidUsername] = useState(true);
14-
const [password, setPassword] = useState('');
15-
const [isValidPassword, setIsValidPassword] = useState(true);
16-
const [isRememberMeChecked, setIsRememberMeChecked] = useState(false);
17-
const [isProd, setIsProd] = useState<boolean | null>(null); // Use null for initial load state
10+
const [isProd, setIsProd] = useState<boolean | null>(null);
1811

19-
React.useEffect(() => {
12+
useEffect(() => {
2013
const chooseLoginPage = async () => {
21-
const res = await fetch('/api/envConfig');
22-
const envConfig = await res.json();
23-
setIsProd(envConfig.DEPLOYMENT_TYPE !== 'dev');
14+
try {
15+
const res = await fetch('/api/envConfig');
16+
const envConfig = await res.json();
17+
setIsProd(envConfig.DEPLOYMENT_TYPE !== 'dev');
18+
} catch (error) {
19+
console.error('Error fetching environment config:', error);
20+
setIsProd(true);
21+
}
2422
};
2523
chooseLoginPage();
2624
}, []);
2725

28-
const handleUsernameChange = (event: React.FormEvent<HTMLInputElement>, value: string) => {
29-
setUsername(value);
30-
};
31-
32-
const handlePasswordChange = (event: React.FormEvent<HTMLInputElement>, value: string) => {
33-
setPassword(value);
34-
};
35-
36-
const onRememberMeClick = () => {
37-
setIsRememberMeChecked(!isRememberMeChecked);
38-
};
39-
40-
const onLoginButtonClick = async (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
41-
event.preventDefault();
42-
const result = await signIn('credentials', {
43-
redirect: false,
44-
username,
45-
password
46-
});
47-
48-
if (result?.error) {
49-
setIsValidUsername(false);
50-
setIsValidPassword(false);
51-
setShowHelperText(true);
52-
} else {
53-
window.location.href = '/';
54-
}
55-
};
56-
57-
const handleGitHubLogin = () => {
58-
signIn('github', { callbackUrl: '/' }); // Redirect to home page after login
59-
};
60-
61-
const socialMediaLoginContent = (
62-
<LoginMainFooterLinksItem href="#" onClick={handleGitHubLogin} linkComponentProps={{ 'aria-label': 'Login with Github' }}>
63-
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="48" height="48">
64-
<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" />
65-
</svg>
66-
</LoginMainFooterLinksItem>
67-
);
68-
69-
const listItem = (
70-
<React.Fragment>
71-
<ListItem>
72-
<LoginFooterItem href="https://instructlab.ai/">Terms of Use </LoginFooterItem>
73-
</ListItem>
74-
<ListItem>
75-
<LoginFooterItem href="https://instructlab.ai/">Help</LoginFooterItem>
76-
</ListItem>
77-
<ListItem>
78-
<LoginFooterItem href="https://instructlab.ai/">Privacy Policy</LoginFooterItem>
79-
</ListItem>
80-
</React.Fragment>
81-
);
82-
83-
const loginForm = (
84-
<LoginForm
85-
showHelperText={showHelperText}
86-
helperText="Invalid login credentials."
87-
usernameLabel="Username"
88-
usernameValue={username}
89-
onChangeUsername={handleUsernameChange}
90-
isValidUsername={isValidUsername}
91-
passwordLabel="Password"
92-
passwordValue={password}
93-
onChangePassword={handlePasswordChange}
94-
isValidPassword={isValidPassword}
95-
isRememberMeChecked={isRememberMeChecked}
96-
onChangeRememberMe={onRememberMeClick}
97-
onLoginButtonClick={onLoginButtonClick}
98-
loginButtonLabel="Login"
99-
/>
100-
);
101-
102-
if (isProd === null) return null; // Render nothing until environment is loaded
103-
104-
if (isProd) {
105-
return <GithubLogin />;
26+
if (isProd === null) {
27+
// Render a loading indicator or null while determining the environment
28+
return null;
10629
}
10730

108-
return (
109-
<LoginPage
110-
suppressHydrationWarning={true}
111-
footerListVariants={ListVariant.inline}
112-
brandImgSrc="/InstructLab-Logo.svg"
113-
brandImgAlt="InstructLab logo"
114-
backgroundImgSrc="/login-bg.svg"
115-
footerListItems={listItem}
116-
textContent="InstructLab Taxonomy Submissions"
117-
loginTitle="Login Securely with admin username and password"
118-
loginSubtitle="Local Account"
119-
socialMediaLoginContent={socialMediaLoginContent}
120-
socialMediaLoginAriaLabel="Log in with GitHub"
121-
>
122-
{loginForm}
123-
</LoginPage>
124-
);
31+
return isProd ? <GithubLogin /> : <LocalLogin />;
12532
};
12633

12734
export default Login;

0 commit comments

Comments
 (0)