Skip to content

Commit a908df5

Browse files
nerdalertnerdalert
committed
Migrate to Patternfly v6
- Themes are now done via Tokens. The current theme is no longer honored and will need to be resolved via design tokens: https://www.patternfly.org/tokens/about-tokens Signed-off-by: Brent Salisbury <[email protected]>
1 parent f118c89 commit a908df5

File tree

26 files changed

+351
-362
lines changed

26 files changed

+351
-362
lines changed

‎package-lock.json‎

Lines changed: 7 additions & 43 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"dependencies": {
2020
"@fortawesome/fontawesome-svg-core": "^6.6.0",
2121
"@next/env": "^15.0.3",
22-
"@patternfly/react-core": "^5.4.0",
22+
"@patternfly/react-core": "^6.0.0",
2323
"@patternfly/react-icons": "^6.0.0",
2424
"@patternfly/react-styles": "^6.0.0",
2525
"@patternfly/react-table": "^6.0.0",

‎src/app/login/githublogin.tsx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React, { useEffect, useState } from 'react';
22
import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
3-
import { Text } from '@patternfly/react-core/dist/dynamic/components/Text';
4-
import { TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
3+
import { Content } from '@patternfly/react-core/dist/dynamic/components/Content';
4+
55
import { Grid } from '@patternfly/react-core/dist/dynamic/layouts/Grid';
66
import { GridItem } from '@patternfly/react-core/dist/dynamic/layouts/Grid';
77
import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon';
88
import './githublogin.css';
99
import { signIn } from 'next-auth/react';
1010
import { useRouter, useSearchParams } from 'next/navigation';
11-
import { Modal, ModalVariant } from '@patternfly/react-core/dist/esm/components/Modal';
11+
import { Modal, ModalVariant } from '@patternfly/react-core/dist/esm/deprecated/components/Modal';
1212

1313
const GithubLogin: React.FC = () => {
1414
const searchParams = useSearchParams();
@@ -75,14 +75,16 @@ const GithubLogin: React.FC = () => {
7575
<Grid hasGutter span={12}>
7676
<GridItem span={6} className="login-container">
7777
<div>
78-
<TextContent>
79-
<Text className="sign-in-text">Sign in to your account</Text>
80-
</TextContent>
81-
<TextContent>
82-
<Text className="description-text">
78+
<Content>
79+
<Content component="p" className="sign-in-text">
80+
Sign in to your account
81+
</Content>
82+
</Content>
83+
<Content>
84+
<Content component="p" className="description-text">
8385
Join the novel, community based movement to <br></br>create truly open source LLMs
84-
</Text>
85-
</TextContent>
86+
</Content>
87+
</Content>
8688
<div className="login-container">
8789
<Button
8890
variant="primary"
@@ -95,8 +97,8 @@ const GithubLogin: React.FC = () => {
9597
Sign in with GitHub
9698
</Button>
9799
</div>
98-
<TextContent>
99-
<Text className="urls-text">
100+
<Content>
101+
<Content component="p" className="urls-text">
100102
<a href="https://github.com/instructlab/" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
101103
GitHub
102104
</a>{' '}
@@ -116,17 +118,17 @@ const GithubLogin: React.FC = () => {
116118
>
117119
Code Of Conduct
118120
</a>
119-
</Text>
120-
<Text className="urls-text-medium">
121+
</Content>
122+
<Content component="p" className="urls-text-medium">
121123
<a href="https://www.redhat.com/en/about/terms-use" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
122124
Terms of use
123125
</a>{' '}
124126
|{' '}
125127
<a href="https://www.redhat.com/en/about/privacy-policy" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
126128
Privacy Policy
127129
</a>
128-
</Text>
129-
</TextContent>
130+
</Content>
131+
</Content>
130132
</div>
131133
</GridItem>
132134
</Grid>

‎src/app/login/locallogin.tsx‎

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

0 commit comments

Comments
 (0)