Add the github Oauth option to the dev login page

Signed-off-by: Brent Salisbury <bsalisbu@redhat.com>

Author: nerdalert

src/app/login/page.tsx

@@ -3,13 +3,13 @@
 
 import React, { useState, useEffect } from 'react';
 import { signIn } from 'next-auth/react';
-import GithubLogin from './githublogin';
 import { Grid, GridItem } from '@patternfly/react-core/dist/dynamic/layouts/Grid';
 import { Text, TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
 import { Form, FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
 import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
 import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
+import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon';
 import './githublogin.css';
 
 const Login: React.FunctionComponent = () => {
@@ -49,6 +49,10 @@ const Login: React.FunctionComponent = () => {
     setPassword(value);
   };
 
+  const handleGitHubLogin = () => {
+    signIn('github', { callbackUrl: '/' });
+  };
+
   const loginForm = (
     <Form onSubmit={handleLogin}>
       <FormGroup label="Username" fieldId="username" className="login-label">
@@ -85,12 +89,24 @@ const Login: React.FunctionComponent = () => {
       <Grid hasGutter span={12}>
         <GridItem span={6} className="login-container">
           <TextContent>
-            <Text className="sign-in-text">Login locally with admin username and password</Text>
+            <Text className="sign-in-text">Login locally with a username and password or via Github OAuth</Text>
           </TextContent>
           <TextContent>
             <Text className="description-text">Join the novel, community-based movement to create truly open-source LLMs</Text>
           </TextContent>
-          <div className="login-container">{loginForm}</div>
+          <div className="login-container">
+            <Button
+              variant="primary"
+              icon={<GithubIcon />}
+              iconPosition="left"
+              size="lg"
+              style={{ backgroundColor: 'black', marginBottom: '1rem' }}
+              onClick={handleGitHubLogin}
+            >
+              Sign in with GitHub
+            </Button>
+            {loginForm}
+          </div>
           <TextContent>
             <Text className="urls-text">
               <a href="https://github.com/instructlab/" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
@@ -128,7 +144,13 @@ const Login: React.FunctionComponent = () => {
     </div>
   );
 
-  return isProd ? <GithubLogin /> : devModeContent;
+  return isProd ? (
+    <Button variant="primary" icon={<GithubIcon />} iconPosition="left" onClick={handleGitHubLogin}>
+      Sign in with GitHub
+    </Button>
+  ) : (
+    devModeContent
+  );
 };
 
 export default Login;

src/components/Contribute/Knowledge/knowledge.css

@@ -23,7 +23,7 @@
   border-color: #45a049;
 }
 
-.spinner-container{
+.spinner-container {
   display: flex;
   justify-content: center;
   align-items: center;