fix: enable sign-in button for my-access-id (#190)

src/components/auth/SignInForm.module.css

@@ -10,7 +10,7 @@
 .oauth-button {
   display: grid;
   grid-template-rows: var(--size-8);
-  grid-template-columns: var(--size-8) 1fr var(--size-8);
+  grid-template-columns: var(--size-10) 1fr var(--size-10);
   align-items: center;
   padding: var(--space-4);
   border: none;
@@ -34,6 +34,10 @@
     height: 100%;
   }
 
+  & > img {
+    border-radius: 9999px;
+  }
+
   &:disabled {
     opacity: 50%;
     cursor: not-allowed;
@@ -84,16 +88,3 @@
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height-none);
 }
-
-.disabled-note {
-  display: flex;
-  gap: 0.75rem;
-  color: var(--color-negative-600);
-
-  & > svg {
-    flex-shrink: 0;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-block: 4px;
-  }
-}

src/components/auth/SignInForm.tsx

@@ -10,10 +10,7 @@ import { FormButton } from '@/lib/core/form/FormButton'
 import { FormTextField } from '@/lib/core/form/FormTextField'
 import { useI18n } from '@/lib/core/i18n/useI18n'
 import { routes } from '@/lib/core/navigation/routes'
-import { Icon } from '@/lib/core/ui/Icon/Icon'
-import AlertIcon from '@/lib/core/ui/icons/alert.svg?symbol-icon'
 import { isNonEmptyString } from '@/lib/utils'
-import EoscLogo from '~/public/assets/images/eosc.svg?symbol-icon'
 
 export type SignInFormValues = SignInInput
 
@@ -25,11 +22,6 @@ export function SignInForm(): JSX.Element {
   const buttonRef = useRef<HTMLButtonElement>(null)
   const { buttonProps } = useButton(
     {
-      isDisabled:
-        process.env['NEXT_PUBLIC_BASE_URL'] !==
-          'https://sshoc-marketplace-stage.acdh-dev.oeaw.ac.at' &&
-        process.env['NEXT_PUBLIC_BASE_URL'] !== 'https://sshoc-marketplace.acdh-dev.oeaw.ac.at' &&
-        process.env['NEXT_PUBLIC_BASE_URL'] !== 'http://localhost:3000',
       onPress() {
         signInWithOAuth()
       },
@@ -70,17 +62,10 @@ export function SignInForm(): JSX.Element {
         })}
       </p>
       <button {...buttonProps} ref={buttonRef} className={css['oauth-button']}>
-        <EoscLogo aria-hidden />
-        Sign in with EOSC
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src="/assets/images/logo-my-access-id.png" alt="" />
+        Sign in with MyAccessID
       </button>
-      <div className={css['disabled-note']}>
-        <Icon icon={AlertIcon} />
-        <span>
-          We are currently experiencing a technical issue with the EOSC-login that we are working
-          diligently to resolve. Please bear with us as we work to restore access as soon as
-          possible. Thank you for your patience and understanding.
-        </span>
-      </div>
       <div role="separator" className={css['separator']}>
         <span>{t(['common', 'auth', 'sign-in-alternative'])}</span>
         <div className={css['line']} />

src/dictionaries/common/en.ts

@@ -123,7 +123,7 @@ export const dictionary: Dictionary = {
       'not-accepted-terms-of-service': 'Accepting the Privacy policy is required.',
     },
     'sign-in-message-oauth':
-      'Sign in with EOSC using existing accounts such as <Provider>Google</Provider>, <Provider>Dariah</Provider>, <Provider>eduTEAMS</Provider> and multiple academic accounts.',
+      'Sign in with MyAccessID using existing accounts such as <Provider>Google</Provider>, <Provider>ORCID</Provider>, <Provider>DARIAH</Provider>, <Provider>eduTEAMS</Provider> and multiple academic accounts.',
     'sign-in-message-basic-auth':
       'Sign in with a local account is used by maintainers to manage the website.',
     'sign-in-helptext':