) => void
+}
+
+export function Url(props: Props): JSX.Element {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
Modal content
+ const mockOnClose = jest.fn()
+ let overlayElement: HTMLElement | null
+
+ beforeEach(() => {
+ overlayElement = document.createElement('div')
+ overlayElement.setAttribute('id', 'overlay')
+ document.body.appendChild(overlayElement)
+ })
+
+ afterEach(() => {
+ overlayElement?.remove()
+ overlayElement = null
+ jest.restoreAllMocks()
+ })
+
+ test('renders the backdrop and modal overlay', async () => {
+ const { getByText } = render({mockChildren})
+ await waitFor(() => {
+ expect(getByText('Modal content')).toBeInTheDocument()
+ expect(document.querySelector('.backdrop')).toBeInTheDocument()
+ expect(document.querySelector('.modal')).toBeInTheDocument()
+ })
+ })
+
+ test('calls onClose function when backdrop is clicked', async () => {
+ render({mockChildren})
+
+ await waitFor(() => {
+ const backdropElement = document.querySelector('.backdrop')
+ expect(backdropElement).toBeInTheDocument()
+
+ if (backdropElement) {
+ fireEvent.click(backdropElement)
+ }
+
+ expect(mockOnClose).toHaveBeenCalledTimes(1)
+ })
+ })
+})
diff --git a/src/components/UI/Modal/Modal.tsx b/src/components/UI/Modal/Modal.tsx
new file mode 100644
index 00000000..0cc34b84
--- /dev/null
+++ b/src/components/UI/Modal/Modal.tsx
@@ -0,0 +1,42 @@
+import css from './Modal.module.css'
+import ReactDOM from 'react-dom'
+
+export interface PropsBackdrop {
+ onClose: () => void
+}
+
+function Backdrop(props: PropsBackdrop): JSX.Element {
+ return
+}
+
+interface modalProps {
+ children: React.ReactNode
+}
+
+function ModalOverlay(props: modalProps): JSX.Element {
+ return (
+
+ )
+}
+
+export interface Props {
+ children: React.ReactNode
+ onClose: () => void
+}
+
+export function Modal(props: Props): JSX.Element {
+ const overlayElement: HTMLElement | null = document.getElementById('overlay')
+
+ if (!overlayElement) {
+ throw new Error('The element #overlay was not found')
+ }
+
+ return (
+ <>
+ {ReactDOM.createPortal(, overlayElement)}
+ {ReactDOM.createPortal({props.children}, overlayElement)}
+
+ )
+}
diff --git a/src/components/UI/Modal/pages/LoginModal.module.css b/src/components/UI/Modal/pages/LoginModal.module.css
new file mode 100644
index 00000000..4231d7f6
--- /dev/null
+++ b/src/components/UI/Modal/pages/LoginModal.module.css
@@ -0,0 +1,59 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ color: rgb(242, 243, 245);
+ font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue';
+ line-height: 40px;
+ padding: 8px;
+ margin-top: 30px;
+}
+
+.welcome {
+ color: rgb(242, 243, 245);
+ font-size: 15px;
+ font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.text {
+ color: rgb(165, 175, 187);
+ font-size: 11px;
+ line-height: 1.5;
+}
+
+.textBold {
+ font-weight: 700;
+}
+
+.closeBtn {
+ display: flex;
+ position: absolute;
+ top: 16px;
+ right: 12px;
+ height: 26px;
+ padding: 4px;
+ opacity: 0.5;
+ color: rgba(255, 255, 255, 0.8);
+ cursor: pointer;
+ border-radius: 3px;
+ box-sizing: content-box;
+ background: transparent;
+ border: none;
+}
+
+.autoConnectBtn {
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 6px 11px;
+ min-width: 90px;
+ min-height: 35px;
+ color: #ffffff;
+ background: rgb(35, 39, 42);
+ border-radius: 30px;
+ border: none;
+ position: relative;
+ cursor: pointer;
+ transition: all 0.1s ease;
+ margin-top: 30px;
+ font-size: small;
+}
diff --git a/src/components/UI/Modal/pages/LoginModal.test.tsx b/src/components/UI/Modal/pages/LoginModal.test.tsx
new file mode 100644
index 00000000..050fac9e
--- /dev/null
+++ b/src/components/UI/Modal/pages/LoginModal.test.tsx
@@ -0,0 +1,356 @@
+import { render, fireEvent, waitFor } from '@testing-library/react'
+import { LoginModal } from './LoginModal'
+import { ILoginPage, LoginProgressStatus, LoginConnectionType, PageType } from '../../../../model'
+import { eventManagerContext } from '../../../../store/eventContext'
+import { TestEventManager } from '../../../../utils/testUtils'
+import { WebviewSendEventType } from '../../../../api'
+import { SendLoginEvent } from '../../../../api/sendEvent/login'
+
+describe('LoginModal component', () => {
+ const mockOnClose = jest.fn()
+
+ let overlayElement: HTMLElement | null
+
+ beforeEach(() => {
+ overlayElement = document.createElement('div')
+ overlayElement.setAttribute('id', 'overlay')
+ document.body.appendChild(overlayElement)
+ })
+
+ afterEach(() => {
+ overlayElement?.remove()
+ overlayElement = null
+
+ jest.restoreAllMocks()
+ jest.clearAllMocks()
+ })
+
+ describe('JFrog CLI', () => {
+ const mockLoginData: ILoginPage = {
+ status: LoginProgressStatus.Verifying,
+ connectionType: LoginConnectionType.Cli,
+ url: 'example.com',
+ pageType: PageType.Login
+ }
+
+ test('renders the login modal correctly', async () => {
+ const { getByText } = render()
+ await waitFor(() => {
+ expect(
+ getByText('You have a predefined JFrog CLI. Would you like to sign-in to')
+ ).toBeInTheDocument()
+ expect(getByText('example.com')).toBeInTheDocument()
+ expect(getByText('Verifying...')).toBeInTheDocument()
+ expect(document.querySelector('.closeBtn')).toBeInTheDocument()
+ expect(document.querySelector('.text')).toBeInTheDocument()
+ expect(document.querySelector('.welcome')).toBeInTheDocument()
+ expect(document.querySelector('.autoConnectBtn')).not.toBeInTheDocument()
+ })
+ })
+
+ test('calls onClose function when the close button is clicked', async () => {
+ render()
+ await waitFor(() => {
+ const closeButton = document.querySelector('.closeBtn')
+ expect(closeButton).toBeInTheDocument()
+
+ if (closeButton) {
+ fireEvent.click(closeButton)
+ }
+
+ expect(mockOnClose).toHaveBeenCalledTimes(1)
+ })
+ })
+
+ test('calls eventManager Login function when the auto connect button is clicked', async () => {
+ const mockLogin = jest.fn()
+ const mockEventManager = new TestEventManager(mockLogin, mockLogin)
+ const mockLoginDataWithAutoConnect: ILoginPage = {
+ ...mockLoginData,
+ status: LoginProgressStatus.AutoConnect
+ }
+ render(
+
+
+
+ )
+
+ await waitFor(() => {
+ const autoConnectButton = document.querySelector('.autoConnectBtn')
+ expect(autoConnectButton).toBeInTheDocument()
+
+ if (autoConnectButton) {
+ fireEvent.click(autoConnectButton)
+ }
+
+ expect(mockLogin).toHaveBeenCalledWith({
+ type: WebviewSendEventType.Login,
+ data: { loginConnectionType: LoginConnectionType.Cli }
+ } as SendLoginEvent)
+ })
+ })
+ })
+ describe('Env Vars', () => {
+ const mockLoginData: ILoginPage = {
+ status: LoginProgressStatus.Verifying,
+ connectionType: LoginConnectionType.EnvVars,
+ url: 'example.com',
+ pageType: PageType.Login
+ }
+
+ test('renders the login modal correctly', async () => {
+ const { getByText } = render()
+ await waitFor(() => {
+ expect(
+ getByText('You have a predefined Environment Variable. Would you like to sign-in to')
+ ).toBeInTheDocument()
+ expect(getByText('example.com')).toBeInTheDocument()
+ expect(getByText('Verifying...')).toBeInTheDocument()
+ expect(document.querySelector('.closeBtn')).toBeInTheDocument()
+ expect(document.querySelector('.text')).toBeInTheDocument()
+ expect(document.querySelector('.welcome')).toBeInTheDocument()
+ expect(document.querySelector('.autoConnectBtn')).not.toBeInTheDocument()
+ })
+ })
+
+ test('calls eventManager Login function when the auto connect button is clicked', async () => {
+ const mockLogin = jest.fn()
+ const mockEventManager = new TestEventManager(mockLogin, mockLogin)
+ const mockLoginDataWithAutoConnect: ILoginPage = {
+ ...mockLoginData,
+ status: LoginProgressStatus.AutoConnect
+ }
+ render(
+
+
+
+ )
+
+ await waitFor(() => {
+ const autoConnectButton = document.querySelector('.autoConnectBtn')
+ expect(autoConnectButton).toBeInTheDocument()
+
+ if (autoConnectButton) {
+ fireEvent.click(autoConnectButton)
+ }
+
+ expect(mockLogin).toHaveBeenCalledWith({
+ type: WebviewSendEventType.Login,
+ data: { loginConnectionType: LoginConnectionType.EnvVars }
+ } as SendLoginEvent)
+ })
+ })
+ })
+
+ describe('BasicAuthOrToken', () => {
+ const mockLoginData: ILoginPage = {
+ status: LoginProgressStatus.Verifying,
+ connectionType: LoginConnectionType.BasicAuthOrToken,
+ url: 'example.com',
+ pageType: PageType.Login
+ }
+
+ test('renders the login modal correctly', async () => {
+ const { getByText, queryByText } = render(
+
+ )
+ await waitFor(() => {
+ expect(
+ queryByText('You have a predefined Environment Variable. Would you like to sign-in to')
+ ).not.toBeInTheDocument()
+ expect(queryByText('example.com')).not.toBeInTheDocument()
+ expect(getByText('Verifying...')).toBeInTheDocument()
+ expect(document.querySelector('.closeBtn')).toBeInTheDocument()
+ expect(document.querySelector('.text')).toBeInTheDocument()
+ expect(document.querySelector('.welcome')).toBeInTheDocument()
+ expect(document.querySelector('.autoConnectBtn')).not.toBeInTheDocument()
+ })
+ })
+
+ test('calls eventManager Login function when the auto connect button is clicked', async () => {
+ const mockLogin = jest.fn()
+ const mockEventManager = new TestEventManager(mockLogin, mockLogin)
+ const mockLoginDataWithAutoConnect: ILoginPage = {
+ ...mockLoginData,
+ status: LoginProgressStatus.AutoConnect
+ }
+ render(
+
+
+
+ )
+
+ await waitFor(() => {
+ const autoConnectButton = document.querySelector('.autoConnectBtn')
+ expect(autoConnectButton).toBeInTheDocument()
+
+ if (autoConnectButton) {
+ fireEvent.click(autoConnectButton)
+ }
+
+ expect(mockLogin).toHaveBeenCalledWith({
+ type: WebviewSendEventType.Login,
+ data: { loginConnectionType: LoginConnectionType.BasicAuthOrToken }
+ } as SendLoginEvent)
+ })
+ })
+ })
+ describe('Sso', () => {
+ const mockLoginData: ILoginPage = {
+ status: LoginProgressStatus.Verifying,
+ connectionType: LoginConnectionType.Sso,
+ url: 'example.com',
+ pageType: PageType.Login
+ }
+
+ test('renders the login modal correctly', async () => {
+ const { getByText, queryByText } = render(
+
+ )
+ await waitFor(() => {
+ expect(
+ queryByText('You have a predefined Environment Variable. Would you like to sign-in to')
+ ).not.toBeInTheDocument()
+ expect(getByText('Almost there!')).toBeInTheDocument()
+ expect(getByText('Waiting for you to sign in...')).toBeInTheDocument()
+ expect(document.querySelector('.closeBtn')).toBeInTheDocument()
+ expect(document.querySelector('.text')).toBeInTheDocument()
+ expect(document.querySelector('.welcome')).toBeInTheDocument()
+ expect(document.querySelector('.autoConnectBtn')).not.toBeInTheDocument()
+ })
+ })
+
+ test('calls eventManager Login function when the auto connect button is clicked', async () => {
+ const mockLogin = jest.fn()
+ const mockEventManager = new TestEventManager(mockLogin, mockLogin)
+ const mockLoginDataWithAutoConnect: ILoginPage = {
+ ...mockLoginData,
+ status: LoginProgressStatus.AutoConnect
+ }
+ render(
+
+
+
+ )
+
+ await waitFor(() => {
+ const autoConnectButton = document.querySelector('.autoConnectBtn')
+ expect(autoConnectButton).toBeInTheDocument()
+
+ if (autoConnectButton) {
+ fireEvent.click(autoConnectButton)
+ }
+
+ expect(mockLogin).toHaveBeenCalledWith({
+ type: WebviewSendEventType.Login,
+ data: { loginConnectionType: LoginConnectionType.Sso }
+ } as SendLoginEvent)
+ })
+ })
+
+ test('should render fail to sign in', async () => {
+ const mockLogin = jest.fn()
+ const mockEventManager = new TestEventManager(mockLogin, mockLogin)
+ const mockLoginDataWithAutoConnect: ILoginPage = {
+ ...mockLoginData,
+ status: LoginProgressStatus.Failed
+ }
+ const { getByText } = render(
+
+
+
+ )
+
+ await waitFor(() => {
+ expect(getByText('Connection could not be established.')).toBeInTheDocument()
+ })
+ })
+ test('should render FailedBadCredentials', async () => {
+ const mockLogin = jest.fn()
+ const mockEventManager = new TestEventManager(mockLogin, mockLogin)
+ const mockLoginDataWithAutoConnect: ILoginPage = {
+ ...mockLoginData,
+ status: LoginProgressStatus.FailedBadCredentials
+ }
+ const { getByText } = render(
+
+
+
+ )
+
+ await waitFor(() => {
+ expect(getByText('Invalid credentials.')).toBeInTheDocument()
+ })
+ })
+ test('should render FailedTimeout', async () => {
+ const mockLogin = jest.fn()
+ const mockEventManager = new TestEventManager(mockLogin, mockLogin)
+ const mockLoginDataWithAutoConnect: ILoginPage = {
+ ...mockLoginData,
+ status: LoginProgressStatus.FailedTimeout
+ }
+ const { getByText } = render(
+
+
+
+ )
+
+ await waitFor(() => {
+ expect(getByText('A timeout occurred. Please try again.')).toBeInTheDocument()
+ })
+ })
+ test('should render FailedServerNotFound', async () => {
+ const mockLogin = jest.fn()
+ const mockEventManager = new TestEventManager(mockLogin, mockLogin)
+ const mockLoginDataWithAutoConnect: ILoginPage = {
+ ...mockLoginData,
+ status: LoginProgressStatus.FailedServerNotFound
+ }
+ const { getByText } = render(
+
+
+
+ )
+
+ await waitFor(() => {
+ expect(getByText('Server not found.')).toBeInTheDocument()
+ })
+ })
+ test('should render FailedServerNotSupported', async () => {
+ const mockLogin = jest.fn()
+ const mockEventManager = new TestEventManager(mockLogin, mockLogin)
+ const mockLoginDataWithAutoConnect: ILoginPage = {
+ ...mockLoginData,
+ status: LoginProgressStatus.FailedServerNotSupported
+ }
+ const { getByText } = render(
+
+
+
+ )
+
+ await waitFor(() => {
+ expect(getByText('The server is not compatible with SSO login.')).toBeInTheDocument()
+ })
+ })
+ test('should render FailedServerNotFound', async () => {
+ const mockLogin = jest.fn()
+ const mockEventManager = new TestEventManager(mockLogin, mockLogin)
+ const mockLoginDataWithAutoConnect: ILoginPage = {
+ ...mockLoginData,
+ status: LoginProgressStatus.Success
+ }
+ const { getByText } = render(
+
+
+
+ )
+
+ await waitFor(() => {
+ expect(
+ getByText('Your credentials will be securely stored on the machine for future use.')
+ ).toBeInTheDocument()
+ })
+ })
+ })
+})
diff --git a/src/components/UI/Modal/pages/LoginModal.tsx b/src/components/UI/Modal/pages/LoginModal.tsx
new file mode 100644
index 00000000..5032459b
--- /dev/null
+++ b/src/components/UI/Modal/pages/LoginModal.tsx
@@ -0,0 +1,145 @@
+import { EventManager } from '../../../../api/eventManager'
+import {
+ ILoginPage,
+ LoginProgressStatus,
+ LoginConnectionType,
+ ISendLoginEventData
+} from '../../../../model'
+import { eventManagerContext } from '../../../../store/eventContext'
+import { Spinner, State } from '../../Spinner/Spinner'
+import { Modal } from '../Modal'
+import css from './LoginModal.module.css'
+import { useContext } from 'react'
+import { XMark } from './../../Icons/XMark'
+
+export interface Props {
+ onClose: () => void
+ loginData: ILoginPage
+}
+
+export function LoginModal(props: Props): JSX.Element {
+ const ctx: EventManager = useContext(eventManagerContext)
+ return (
+
+
+
+
+
+
+
+
+
+ {createTitle(props.loginData)}
+ {createBody(props.loginData)}
+ {props.loginData.status === LoginProgressStatus.AutoConnect && (
+
+ )}
+
+
+ You have a predefined JFrog CLI. Would you like to sign-in to
+ {data.url}?
+
+ )
+ break
+ case LoginConnectionType.EnvVars:
+ pageBody = (
+
+ You have a predefined Environment Variable. Would you like to sign-in to
+ {data.url}?
+
+ )
+ break
+ case LoginConnectionType.Sso:
+ pageBody = Waiting for you to sign in...
+ break
+ }
+
+ switch (data.status) {
+ case LoginProgressStatus.Failed:
+ pageBody = Connection could not be established.
+ break
+ case LoginProgressStatus.FailedBadCredentials:
+ pageBody = Invalid credentials.
+ break
+ case LoginProgressStatus.FailedTimeout:
+ pageBody = A timeout occurred. Please try again.
+ break
+ case LoginProgressStatus.FailedServerNotFound:
+ pageBody = Server not found.
+ break
+ case LoginProgressStatus.FailedServerNotSupported:
+ pageBody = The server is not compatible with SSO login.
+ break
+ case LoginProgressStatus.Success:
+ pageBody = Your credentials will be securely stored on the machine for future use.
+ break
+ }
+
+ return {pageBody}
+}
+
+function createTitle(data: ILoginPage): JSX.Element {
+ let title = <>
+
+ switch (data.status) {
+ case LoginProgressStatus.Failed:
+ case LoginProgressStatus.FailedBadCredentials:
+ case LoginProgressStatus.FailedTimeout:
+ case LoginProgressStatus.FailedServerNotFound:
+ title = Sign in failed
+ break
+ case LoginProgressStatus.Success:
+ title = You're in!
+ break
+ case LoginProgressStatus.AutoConnect:
+ title = JFrog Server Found
+ break
+ case LoginProgressStatus.Verifying:
+ title =
+ data.connectionType === LoginConnectionType.Sso ? (
+ Almost there!
+ ) : (
+ Verifying...
+ )
+ }
+
+ return {title}
+}
diff --git a/src/components/UI/Spinner/Spinner.module.css b/src/components/UI/Spinner/Spinner.module.css
new file mode 100644
index 00000000..84b6b313
--- /dev/null
+++ b/src/components/UI/Spinner/Spinner.module.css
@@ -0,0 +1,120 @@
+/* Variables */
+:root {
+ --scale: 36px;
+ --speed: 2s;
+ --angle: 25;
+ --color-element: hsl(123, 50%, 50%);
+}
+
+@keyframes loader-spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+.loader {
+ display: inline-block;
+ border: calc(var(--scale) * 0.1) solid var(--color-element);
+ overflow: hidden;
+ border-radius: 30px;
+ width: var(--scale);
+ height: var(--scale);
+ animation: loader-spin var(--speed) linear infinite reverse;
+ filter: url(#goo);
+ box-shadow: 0 0 0 1px var(--color-element) inset;
+}
+
+.loader:before {
+ content: '';
+ position: absolute;
+ animation: loader-spin var(--speed) cubic-bezier(0.59, 0.25, 0.4, 0.69) infinite;
+ background: var(--color-element);
+ transform-origin: top center;
+ border-radius: 50%;
+ width: 150%;
+ height: 150%;
+ top: 50%;
+ left: -12.5%;
+}
+
+.checkmark {
+ stroke: var(--color-element);
+ stroke-width: calc(var(--scale) * 0.1);
+ display: inline-block;
+ border: calc(var(--scale) * 0.1) solid var(--color-element);
+ overflow: hidden;
+ border-radius: 30px;
+ width: var(--scale);
+ height: var(--scale);
+ box-shadow: 0 0 0 1px var(--color-element) inset;
+}
+
+.checkmark path {
+ transform: translate(-1%, -2%) scale(1.5);
+ animation: checkmark-draw var(--speed) ease-in-out forwards;
+ stroke-dasharray: 100;
+ stroke-dashoffset: 100;
+}
+
+@keyframes checkmark-draw {
+ 0% {
+ stroke-dashoffset: 100;
+ }
+
+ 100% {
+ stroke-dashoffset: 0;
+ }
+}
+
+/* Failure animation */
+@keyframes failure-animation {
+ 0% {
+ transform: scale(0);
+ opacity: 0;
+ }
+
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+.xmark {
+ display: inline-block;
+ overflow: hidden;
+ width: var(--scale);
+ height: var(--scale);
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ border: calc(var(--scale) * 0.1) solid red;
+ border-radius: 50%;
+ animation: failure-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+
+.xmark::before,
+.xmark::after {
+ content: '';
+ position: absolute;
+ background-color: red;
+}
+
+.xmark::before,
+.xmark::after {
+ width: calc(var(--scale) * 0.7);
+ height: calc(var(--scale) * 0.08);
+ top: calc(var(--scale) * 0.48);
+ left: calc(var(--scale) * 0.16);
+}
+
+.xmark::before {
+ transform: rotate(45deg);
+}
+
+.xmark::after {
+ transform: rotate(-45deg);
+}
diff --git a/src/components/UI/Spinner/Spinner.tsx b/src/components/UI/Spinner/Spinner.tsx
new file mode 100644
index 00000000..e23a1db7
--- /dev/null
+++ b/src/components/UI/Spinner/Spinner.tsx
@@ -0,0 +1,57 @@
+import { InfoIcon } from '../Icons/InfoIcon'
+import css from './Spinner.module.css'
+
+export enum State {
+ Loading = 0,
+ Fail = 1,
+ Success = 2,
+ AutoConnect = 3
+}
+
+export interface Props {
+ state: State
+}
+
+export function Spinner(props: Props): JSX.Element {
+ let className = css.loader
+
+ if (props.state === State.Success) {
+ className = css.checkmark
+ }
+
+ if (props.state === State.Fail) {
+ className = css.xmark
+ }
+
+ let body = <>
+
+ if (props.state === State.AutoConnect) {
+ body =
+ } else {
+ body = (
+
+
+