Merge pull request #115 from vishnoianil/login-redesign

Improve the UI login page

src/app/api/envConfig/route.ts

@@ -13,7 +13,8 @@ export async function GET() {
     MERLINITE_API: process.env.IL_MERLINITE_API || '',
     MERLINITE_MODEL_NAME: process.env.IL_MERLINITE_MODEL_NAME || '',
     UPSTREAM_REPO_OWNER: process.env.NEXT_PUBLIC_TAXONOMY_REPO_OWNER || '',
-    UPSTREAM_REPO_NAME: process.env.NEXT_PUBLIC_TAXONOMY_REPO || ''
+    UPSTREAM_REPO_NAME: process.env.NEXT_PUBLIC_TAXONOMY_REPO || '',
+    DEPLOYMENT_TYPE: process.env.IL_UI_DEPLOYMENT || ''
   };
 
   return NextResponse.json(envConfig);

src/app/login/githublogin.css

@@ -0,0 +1,52 @@
+a {
+	color: white; /* Change the text color to white */
+	text-decoration: underline; /* Ensure the text is underlined */
+}
+
+.login-page-background {
+	background-image: url('../../../public/InstructLab-Background-Image.png');
+	/* Replace with your background image URL */
+	background-size: cover;
+	background-position: center;
+	height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.login-container {
+	text-align: center;
+}
+
+.sign-in-text {
+	margin-top: 1rem;
+	color: white;
+	padding: 20px;
+	text-align: center;
+	font-size: xx-large;
+}
+
+.description-text {
+	margin-top: 1rem;
+	color: white;
+	padding-bottom: 50px;
+	font-size: x-large;
+	font-style: italic;
+	text-align: center;
+}
+
+.urls-text {
+	margin-top: 1rem;
+	color: white;
+	padding: 20px;
+	text-align: center;
+	font-size: large;
+}
+
+.policy-text {
+	margin-top: 1rem;
+	color: white;
+	padding-top: 20px;
+	text-align: center;
+	font-size: large;
+}

src/app/login/githublogin.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Page } from '@patternfly/react-core/dist/dynamic/components/Page';
+import { PageSection } from '@patternfly/react-core/dist/dynamic/components/Page';
+import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
+import { Text } from '@patternfly/react-core/dist/dynamic/components/Text';
+import { TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
+import { Grid } from '@patternfly/react-core/dist/dynamic/layouts/Grid';
+import { GridItem } from '@patternfly/react-core/dist/dynamic/layouts/Grid';
+import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon';
+import './githublogin.css';
+import { signIn } from 'next-auth/react';
+
+const GithubLogin: React.FC = () => {
+  const handleGitHubLogin = () => {
+    signIn('github', { callbackUrl: '/' }); // Redirect to home page after login
+  };
+
+  return (
+    <Page>
+      <PageSection isFilled className="login-page-background">
+        <Grid hasGutter span={12}>
+          <GridItem span={6} className="login-container">
+            <div>
+              <TextContent>
+                <Text className="sign-in-text">Sign in to your account</Text>
+              </TextContent>
+              <TextContent>
+                <Text className="description-text">
+                  Join the novel, community based movement to <br></br>create truly open source LLMs
+                </Text>
+              </TextContent>
+              <div className="login-container">
+                <Button variant="primary" icon={<GithubIcon />} iconPosition="left" size="lg" onClick={handleGitHubLogin}>
+                  Sign in with GitHub
+                </Button>
+              </div>
+              <TextContent>
+                <Text className="urls-text">
+                  <a href="https://github.com/instructlab/" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
+                    GitHub
+                  </a>{' '}
+                  |{' '}
+                  <a
+                    href="https://github.com/instructlab/community/blob/main/Collaboration.md"
+                    style={{ color: 'white', textDecoration: 'underline' }}
+                    target="_blank"
+                  >
+                    Collaborate
+                  </a>{' '}
+                  |{' '}
+                  <a
+                    href="https://github.com/instructlab/community/blob/main/CODE_OF_CONDUCT.md"
+                    style={{ color: 'white', textDecoration: 'underline' }}
+                    target="_blank"
+                  >
+                    Code Of Conduct
+                  </a>
+                </Text>
+              </TextContent>
+            </div>
+          </GridItem>
+        </Grid>
+      </PageSection>
+    </Page>
+  );
+};
+
+export default GithubLogin;

src/app/login/page.tsx

@@ -5,6 +5,7 @@ import React, { useState } from 'react';
 import { signIn } from 'next-auth/react';
 import { LoginFooterItem, LoginForm, LoginMainFooterLinksItem, LoginPage } from '@patternfly/react-core/dist/dynamic/components/LoginPage';
 import { ListItem, ListVariant } from '@patternfly/react-core/dist/dynamic/components/List';
+import GithubLogin from './githublogin';
 
 const Login: React.FunctionComponent = () => {
   const [showHelperText, setShowHelperText] = useState(false);
@@ -13,6 +14,20 @@ const Login: React.FunctionComponent = () => {
   const [password, setPassword] = useState('');
   const [isValidPassword, setIsValidPassword] = useState(true);
   const [isRememberMeChecked, setIsRememberMeChecked] = useState(false);
+  const [isProd, setIsProd] = useState(true);
+
+  React.useEffect(() => {
+    const chooseLoginPage = async () => {
+      const res = await fetch('/api/envConfig');
+      const envConfig = await res.json();
+      if (envConfig.DEPLOYMENT_TYPE === 'dev') {
+        setIsProd(false);
+      } else {
+        setIsProd(true);
+      }
+    };
+    chooseLoginPage();
+  }, []);
 
   const handleUsernameChange = (event: React.FormEvent<HTMLInputElement>, value: string) => {
     setUsername(value);
@@ -88,6 +103,10 @@ const Login: React.FunctionComponent = () => {
     />
   );
 
+  if (isProd) {
+    return <GithubLogin />;
+  }
+
   return (
     <LoginPage
       footerListVariants={ListVariant.inline}
@@ -96,7 +115,7 @@ const Login: React.FunctionComponent = () => {
       backgroundImgSrc="/login-bg.svg"
       footerListItems={listItem}
       textContent="InstructLab Taxonomy Submissions"
-      loginTitle="Login Securely with Github OAuth"
+      loginTitle="Login Securely with admin username and password"
       loginSubtitle="Local Account"
       socialMediaLoginContent={socialMediaLoginContent}
       socialMediaLoginAriaLabel="Log in with GitHub"