feat: change logo (#292)

Co-authored-by: Łukasz Goral <[email protected]>

Author: andreaskienle

public/co-logo-orchestrating.png

@@ -1,9 +1,9 @@
 {
-  "Login": {
-    "welcomeMessage": "Welcome to openMCP UI",
-    "description": "Your place to manage your openMCPs, see your installed components and managed resources!",
-    "learnMore": "Learn more in our documentation",
-    "signInButton": "Sign in"
+  "SignInPage": {
+    "welcomeMessage": "Welcome to ManagedControlPlane UI",
+    "subtitle": "Your central hub to orchestrate control planes, components, and managed resources",
+    "learnMoreLink": "Learn about ManagedControlPlanes",
+    "signInButton": "Sign In"
   },
   "Entities": {
     "ManagedControlPlane": "ManagedControlPlane",

public/locales/en.json

@@ -3,7 +3,7 @@ import { useAuthOnboarding } from './spaces/onboarding/auth/AuthContextOnboardin
 import '@ui5/webcomponents-icons/dist/AllIcons.d.ts';
 import { useEffect } from 'react';
 import { useFrontendConfig } from './context/FrontendConfigContext.tsx';
-import LoginView from './views/Login.tsx';
+import { SignInPage } from './spaces/onboarding/pages/SignInPage/SignInPage.tsx';
 import { BusyIndicator } from '@ui5/webcomponents-react';
 import * as Sentry from '@sentry/react';
 
@@ -22,7 +22,7 @@ function App() {
   }
 
   if (!auth.isAuthenticated) {
-    return <LoginView />;
+    return <SignInPage />;
   }
 
   Sentry.setUser({

src/App.tsx

@@ -0,0 +1,49 @@
+import { SignInPage } from './SignInPage.tsx';
+import { useAuthOnboarding } from '../../auth/AuthContextOnboarding.tsx';
+import { useLink } from '../../../../lib/shared/useLink.ts'; // if useLink relies on router
+
+describe('SignInPage', () => {
+  let logInCalled = false;
+  const fakeUseAuthOnboarding = (() => ({
+    login: () => {
+      logInCalled = true;
+    },
+  })) as typeof useAuthOnboarding;
+
+  beforeEach(() => {
+    logInCalled = false;
+  });
+
+  it('renders the SignInPage', () => {
+    cy.mount(<SignInPage useAuthOnboarding={fakeUseAuthOnboarding} />);
+
+    cy.get('ui5-title').should('exist');
+  });
+
+  it('calls the login function when the user clicks the "Sign In" button', () => {
+    cy.mount(<SignInPage useAuthOnboarding={fakeUseAuthOnboarding} />);
+
+    cy.wrap(null).then(() => {
+      expect(logInCalled).to.equal(false);
+    });
+
+    cy.get('ui5-button').eq(0).should('contain', 'Sign In').click();
+
+    cy.wrap(null).then(() => {
+      expect(logInCalled).to.equal(true);
+    });
+  });
+
+  it('contains a link to the documentation', () => {
+    const fakeUseLink = (() => ({
+      documentationHomepage: 'https://link-to-documentation.com',
+    })) as typeof useLink;
+
+    cy.mount(<SignInPage useAuthOnboarding={fakeUseAuthOnboarding} useLink={fakeUseLink} />);
+
+    cy.get('a')
+      .should('have.attr', 'target', '_blank')
+      .and('have.attr', 'rel', 'noreferrer')
+      .and('have.attr', 'href', 'https://link-to-documentation.com');
+  });
+});

src/assets/images/co-logo-orchestrating-dark.png

@@ -0,0 +1,21 @@
+.container {
+  height: 100vh;
+}
+
+.cardContent {
+  padding: 2rem 3rem;
+}
+
+.heading {
+  margin-bottom: 0.75rem;
+}
+
+.description {
+  font-size: 1.25em;
+}
+
+.logo {
+  width: 240px;
+  height: 290px;
+  margin: 3rem;
+}

src/assets/images/co-logo-orchestrating.png

@@ -0,0 +1,64 @@
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import * as Sentry from '@sentry/react';
+
+import { Button, Card, FlexBox, Text, Title } from '@ui5/webcomponents-react';
+import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
+
+import { useAuthOnboarding as _useAuthOnboarding } from '../../auth/AuthContextOnboarding';
+import { useLink as _useLink } from '../../../../lib/shared/useLink';
+import { useTheme } from '../../../../hooks/useTheme';
+
+import LogoLight from '../../../../assets/images/co-logo-orchestrating.png';
+import LogoDark from '../../../../assets/images/co-logo-orchestrating-dark.png';
+
+import styles from './SignInPage.module.css';
+
+export interface SignInPageProps {
+  useAuthOnboarding?: typeof _useAuthOnboarding;
+  useLink?: typeof _useLink;
+}
+export function SignInPage({ useAuthOnboarding = _useAuthOnboarding, useLink = _useLink }: SignInPageProps) {
+  const { login } = useAuthOnboarding();
+  const { documentationHomepage } = useLink();
+  const { t } = useTranslation();
+  const { isDarkTheme } = useTheme();
+
+  useEffect(() => {
+    Sentry.addBreadcrumb({
+      category: 'auth',
+      message: 'Visit SignInPage',
+      level: 'info',
+    });
+  }, []);
+  return (
+    <FlexBox className={styles.container} justifyContent="Center" alignItems="Center" direction="Column">
+      <FlexBox direction="Column" gap="1em">
+        <Card>
+          <FlexBox alignItems="Center" direction="Column" className={styles.cardContent}>
+            <Title level="H1" size="H2" className={styles.heading}>
+              {t('SignInPage.welcomeMessage')}
+            </Title>
+
+            <Text className={styles.description}> {t('SignInPage.subtitle')}</Text>
+
+            <img className={styles.logo} src={isDarkTheme ? LogoDark : LogoLight} alt="" />
+
+            <FlexBox direction="Column" alignItems="Center" gap="1em">
+              <Button design={ButtonDesign.Emphasized} onClick={() => void login()}>
+                {t('SignInPage.signInButton')}
+              </Button>
+            </FlexBox>
+          </FlexBox>
+        </Card>
+        <FlexBox justifyContent="End">
+          <a href={documentationHomepage} target="_blank" rel="noreferrer">
+            <Button tabIndex={-1} design="Transparent">
+              {t('SignInPage.learnMoreLink')}
+            </Button>
+          </a>
+        </FlexBox>
+      </FlexBox>
+    </FlexBox>
+  );
+}