Add Login page part 2 (#23)

src/App.module.css

@@ -1,11 +1,11 @@
-.App {
+.app {
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
 		'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 	font-size: 13px;
 	height: calc(100vh);
 }
 
-.AppBody {
+.appBody {
 	color: white;
 	padding: 15px;
 }

src/App.tsx

@@ -44,9 +44,9 @@ function App(): JSX.Element {
 	}
 
 	return (
-		<div className={css.App}>
+		<div className={css.app}>
 			<eventManagerContext.Provider value={eventManager}>
-				<div className={css.AppBody}>{page}</div>
+				<div className={css.appBody}>{page}</div>
 			</eventManagerContext.Provider>
 		</div>
 	)

src/api/eventManager.ts

@@ -40,7 +40,7 @@ export class EventManager {
 		this.sendEvent({ type: WebviewSendEventType.JumpToCode, data: data } as SendJumpToCodeEvent)
 	}
 
-	public Login(data: ISendLoginEventData): void {
+	public login(data: ISendLoginEventData): void {
 		this.sendEvent({ type: WebviewSendEventType.Login, data: data } as SendLoginEvent)
 	}
 }

src/api/index.ts

@@ -14,7 +14,7 @@ export type WebviewSendEvent = SendJumpToCodeEvent | SendLoginEvent
 // Receive events from the IDEs.
 export enum WebviewReceiveEventType {
 	SetEmitter = 'SET_EMITTER',
-	ShowPage = 'SHOW_DATA'
+	ShowPage = 'SHOW_PAGE'
 }
 
 export type WebviewReceiveEvent = ReceiveShowPageEvent | ReceiveSetEmitterEvent

src/components/Page/Login/AccessToken.test.tsx

@@ -27,7 +27,7 @@ describe('AccessToken component', () => {
 
 	test('calls handlePasswordSwitch on button click', () => {
 		const { getByText } = render(<AccessToken {...defaultProps} />)
-		const buttonElement = getByText('Have Password?')
+		const buttonElement = getByText('Using Password')
 
 		fireEvent.click(buttonElement)
 

src/components/Page/Login/AccessToken.tsx

@@ -15,7 +15,7 @@ export function AccessToken(props: Props): JSX.Element {
 					Access Token
 				</label>
 				<button className={css.switchBtn} onClick={props.handlePasswordSwitch}>
-					Have Password?
+					Using Password
 				</button>
 			</div>
 			<input

src/components/Page/Login/Footer.test.tsx

@@ -15,20 +15,20 @@ describe('Footer component', () => {
 	test('renders the default footer when type is not SSO', () => {
 		const { getByText } = render(<Footer {...defaultProps} />)
 
-		expect(getByText('Sign in')).toBeInTheDocument()
+		expect(getByText('Sign In')).toBeInTheDocument()
 		expect(getByText('Continue With SSO')).toBeInTheDocument()
 	})
 
 	test('renders the SSO footer when type is SSO', () => {
 		const { getByText } = render(<Footer {...defaultProps} type={LoginConnectionType.Sso} />)
 
-		expect(getByText('Sign in with SSO')).toBeInTheDocument()
+		expect(getByText('Sign In With SSO')).toBeInTheDocument()
 		expect(getByText('Use Basic-Auth')).toBeInTheDocument()
 	})
 
-	test('calls handleSighIn when "Sign in" button is clicked', () => {
+	test('calls handleSighIn when "Sign In" button is clicked', () => {
 		const { getByText } = render(<Footer {...defaultProps} />)
-		const signInButton = getByText('Sign in')
+		const signInButton = getByText('Sign In')
 
 		fireEvent.click(signInButton)
 

src/components/Page/Login/Footer.tsx

@@ -21,7 +21,7 @@ function SsoFooter(props: HandlersProps): JSX.Element {
 	return (
 		<>
 			<button className={css.webLoginBtn} onClick={props.handleSighIn}>
-				Sign in with SSO
+				Sign In With SSO
 				<SsoIcon />
 			</button>
 			<div className={css.btnContainer}>
@@ -42,7 +42,7 @@ function DefaultFooter(props: HandlersProps): JSX.Element {
 	return (
 		<>
 			<button className={css.webLoginBtn} onClick={props.handleSighIn}>
-				Sign in
+				Sign In
 			</button>
 			<div className={css.btnContainer}>
 				<button

src/components/Page/Login/Form.module.css

@@ -27,7 +27,7 @@
 }
 
 .containerSso {
-	height: 255px
+	height: 255px;
 }
 
 .containerAdvancedUrlWitSso {
@@ -531,4 +531,4 @@
 		-webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
 		transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
 	}
-}
+}

src/components/Page/Login/Form.test.tsx

@@ -14,7 +14,7 @@ describe('Form component', () => {
 			</eventManagerContext.Provider>
 		)
 		const accessTokenInput = getByLabelText('Access Token')
-		const signInButton = getByText('Sign in')
+		const signInButton = getByText('Sign In')
 		expect(accessTokenInput).toBeInTheDocument()
 		expect(signInButton).toBeInTheDocument()
 	})
@@ -45,13 +45,13 @@ describe('Form component', () => {
 		expect(xrayUrlInput.value).toBe('xrayUrl')
 	})
 
-	test('calls handleAccessTokenSwitch when "Have Password?" button is clicked', () => {
+	test('calls handleAccessTokenSwitch when "Using Password" button is clicked', () => {
 		const { getByText } = render(
 			<eventManagerContext.Provider value={mockEventManager}>
 				<Form />
 			</eventManagerContext.Provider>
 		)
-		const switchButton = getByText('Have Password?')
+		const switchButton = getByText('Using Password')
 		expect(switchButton).toBeInTheDocument()
 	})
 
@@ -61,11 +61,11 @@ describe('Form component', () => {
 				<Form />
 			</eventManagerContext.Provider>
 		)
-		const passwordButton = getByText('Have Password?')
+		const passwordButton = getByText('Using Password')
 		fireEvent.click(passwordButton)
 		expect(getByText('Username')).toBeInTheDocument()
 		expect(getByText('Password')).toBeInTheDocument()
-		expect(getByText('Sign in')).toBeInTheDocument()
+		expect(getByText('Sign In')).toBeInTheDocument()
 	})
 
 	test('renders the form with the access token input after "Have Access Token" have been clicked', () => {
@@ -74,11 +74,11 @@ describe('Form component', () => {
 				<Form />
 			</eventManagerContext.Provider>
 		)
-		let button = getByText('Have Password?')
+		let button = getByText('Using Password')
 		fireEvent.click(button)
 		expect(getByText('Username')).toBeInTheDocument()
 		expect(getByText('Password')).toBeInTheDocument()
-		button = getByText('Have Access-Token?')
+		button = getByText('Using Access-Token')
 		fireEvent.click(button)
 		expect(getByText('Access Token')).toBeInTheDocument()
 	})
@@ -100,7 +100,7 @@ describe('Form component', () => {
 				<Form />
 			</eventManagerContext.Provider>
 		)
-		const passwordButton = getByText('Have Password?')
+		const passwordButton = getByText('Using Password')
 		fireEvent.click(passwordButton)
 		const usernameInput = getByLabelText('Username') as HTMLInputElement
 		const passwordInput = getByLabelText('Password') as HTMLInputElement
@@ -110,18 +110,18 @@ describe('Form component', () => {
 		expect(passwordInput.value).toBe('testPassword')
 	})
 
-	test('no calls Login when "Sign in" button is clicked with not valid login data', () => {
+	test('no calls Login when "Sign In" button is clicked with not valid login data', () => {
 		const { getByText } = render(
 			<eventManagerContext.Provider value={mockEventManager}>
 				<Form />
 			</eventManagerContext.Provider>
 		)
-		const signInButton = getByText('Sign in')
+		const signInButton = getByText('Sign In')
 		fireEvent.click(signInButton)
 		expect(mockLogin).toHaveBeenCalledTimes(0)
 	})
 
-	test('calls Login when "Sign in" button is clicked with valid login data', () => {
+	test('calls Login when "Sign In" button is clicked with valid login data', () => {
 		const { getByText, getByLabelText } = render(
 			<eventManagerContext.Provider value={mockEventManager}>
 				<Form />
@@ -131,7 +131,7 @@ describe('Form component', () => {
 		fireEvent.change(accessTokenInput, { target: { value: 'accessToken!' } })
 		const urlInput = getByLabelText('Platform URL') as HTMLInputElement
 		fireEvent.change(urlInput, { target: { value: 'url!' } })
-		const signInButton = getByText('Sign in')
+		const signInButton = getByText('Sign In')
 		fireEvent.click(signInButton)
 		expect(mockLogin).toHaveBeenCalledTimes(1)
 	})
@@ -144,6 +144,6 @@ describe('Form component', () => {
 		)
 		const ssoButton = getByText('Continue With SSO')
 		fireEvent.click(ssoButton)
-		expect(getByText('Requires Artifactory version 7.57 or higher')).toBeInTheDocument()
+		expect(getByText('Requires Artifactory version 7.63.1 or higher')).toBeInTheDocument()
 	})
 })

src/components/Page/Login/Form.tsx

@@ -49,7 +49,7 @@ export function Form(): JSX.Element {
 		if (!isLoginDataValid(loginData)) {
 			setInputError(true)
 		} else {
-			ctx.Login(loginData)
+			ctx.login(loginData)
 		}
 	}
 

src/components/Page/Login/Header.tsx

@@ -1,10 +1,10 @@
-import { JfrogIcon } from '../../UI/Icons/JfrogIcon'
+import { JFrogIcon } from '../../UI/Icons/JfrogIcon'
 import css from './Header.module.css'
 
 export function Header(): JSX.Element {
 	return (
 		<>
-			<JfrogIcon />
+			<JFrogIcon />
 			<div className={css.welcome}>Welcome to JFrog</div>
 			<div className={css.text}> We&apos;re excited to see you!</div>
 		</>

src/components/Page/Login/Password.test.tsx

@@ -16,7 +16,7 @@ describe('Password component', () => {
 	test('renders the Password component', () => {
 		expect(screen.getByLabelText('Username')).toBeInTheDocument()
 		expect(screen.getByLabelText('Password')).toBeInTheDocument()
-		expect(screen.getByRole('button', { name: 'Have Access-Token?' })).toBeInTheDocument()
+		expect(screen.getByRole('button', { name: 'Using Access-Token' })).toBeInTheDocument()
 	})
 
 	test('calls the handleUsername function when username input changes', () => {
@@ -46,7 +46,7 @@ describe('Password component', () => {
 	})
 
 	test('calls the handleAccessTokenSwitch function when access token button is clicked', () => {
-		const accessTokenButton = screen.getByRole('button', { name: 'Have Access-Token?' })
+		const accessTokenButton = screen.getByRole('button', { name: 'Using Access-Token' })
 		fireEvent.click(accessTokenButton)
 		expect(mockProps.handleAccessTokenSwitch).toHaveBeenCalled()
 	})

src/components/Page/Login/Password.tsx

@@ -30,7 +30,7 @@ export function Password(props: Props): JSX.Element {
 						Password
 					</label>
 					<button className={css.switchBtn} onClick={props.handleAccessTokenSwitch}>
-						Have Access-Token?
+						Using Access-Token
 					</button>
 				</div>
 

src/components/Page/Login/Sso.test.tsx

@@ -14,7 +14,7 @@ describe('Sso', () => {
 	})
 
 	test('renders the required Artifactory version paragraph', () => {
-		const versionElement = screen.getByText('Requires Artifactory version 7.57 or higher')
+		const versionElement = screen.getByText('Requires Artifactory version 7.63.1 or higher')
 		expect(versionElement).toBeInTheDocument()
 	})
 

src/components/Page/Login/Sso.tsx

@@ -7,7 +7,7 @@ export function Sso(): JSX.Element {
 				To proceed with authentication, you will be redirected to the SSO login page.
 			</div>
 			<div className={css.paragraph}>
-				Requires Artifactory version 7.57 or higher<span className={css.redStar}>*</span>
+				Requires Artifactory version 7.63.1 or higher<span className={css.redStar}>*</span>
 			</div>
 		</div>
 	)

src/components/UI/Icons/JfrogIcon.tsx

@@ -1,4 +1,4 @@
-export function JfrogIcon(): JSX.Element {
+export function JFrogIcon(): JSX.Element {
 	return (
 		<svg
 			data-testid="jfrog-icon"

src/components/UI/Modal/pages/LoginModal.test.tsx

@@ -36,9 +36,7 @@ describe('LoginModal component', () => {
 		test('renders the login modal correctly', async () => {
 			const { getByText } = render(<LoginModal onClose={mockOnClose} loginData={mockLoginData} />)
 			await waitFor(() => {
-				expect(
-					getByText('You have a predefined JFrog CLI. Would you like to sign-in to')
-				).toBeInTheDocument()
+				expect(getByText('We found a JFrog CLI with connection details for')).toBeInTheDocument()
 				expect(getByText('example.com')).toBeInTheDocument()
 				expect(getByText('Verifying...')).toBeInTheDocument()
 				expect(document.querySelector('.closeBtn')).toBeInTheDocument()
@@ -102,7 +100,7 @@ describe('LoginModal component', () => {
 			const { getByText } = render(<LoginModal onClose={mockOnClose} loginData={mockLoginData} />)
 			await waitFor(() => {
 				expect(
-					getByText('You have a predefined Environment Variable. Would you like to sign-in to')
+					getByText('We found environment variables with connection details for')
 				).toBeInTheDocument()
 				expect(getByText('example.com')).toBeInTheDocument()
 				expect(getByText('Verifying...')).toBeInTheDocument()
@@ -156,7 +154,7 @@ describe('LoginModal component', () => {
 			)
 			await waitFor(() => {
 				expect(
-					queryByText('You have a predefined Environment Variable. Would you like to sign-in to')
+					queryByText('We found environment variables with connection details for')
 				).not.toBeInTheDocument()
 				expect(queryByText('example.com')).not.toBeInTheDocument()
 				expect(getByText('Verifying...')).toBeInTheDocument()
@@ -209,7 +207,7 @@ describe('LoginModal component', () => {
 			)
 			await waitFor(() => {
 				expect(
-					queryByText('You have a predefined Environment Variable. Would you like to sign-in to')
+					queryByText('We found environment variables with connection details for')
 				).not.toBeInTheDocument()
 				expect(getByText('Almost there!')).toBeInTheDocument()
 				expect(getByText('Waiting for you to sign in...')).toBeInTheDocument()
@@ -296,7 +294,7 @@ describe('LoginModal component', () => {
 			)
 
 			await waitFor(() => {
-				expect(getByText('A timeout occurred. Please try again.')).toBeInTheDocument()
+				expect(getByText('A connection timeout occurred. Please try again.')).toBeInTheDocument()
 			})
 		})
 		test('should render FailedServerNotFound', async () => {
@@ -313,7 +311,7 @@ describe('LoginModal component', () => {
 			)
 
 			await waitFor(() => {
-				expect(getByText('Server not found.')).toBeInTheDocument()
+				expect(getByText('JFrog Platform instance not found.')).toBeInTheDocument()
 			})
 		})
 		test('should render FailedServerNotSupported', async () => {
@@ -330,7 +328,9 @@ describe('LoginModal component', () => {
 			)
 
 			await waitFor(() => {
-				expect(getByText('The server is not compatible with SSO login.')).toBeInTheDocument()
+				expect(
+					getByText('The JFrog Platform instance does not support SSO login from VS Code.')
+				).toBeInTheDocument()
 			})
 		})
 		test('should render FailedServerNotFound', async () => {