From 33a12ec36ff5dc1e7f2e0d719899434f8f603d65 Mon Sep 17 00:00:00 2001
From: Stefan Probst <stefanprobst@posteo.de>
Date: Thu, 4 Jul 2024 13:33:09 +0200
Subject: [PATCH] fix: add message about disabled eosc sign in

---
 src/components/auth/SignInForm.module.css | 19 +++++++++++++++++++
 src/components/auth/SignInForm.tsx        | 11 +++++++++++
 2 files changed, 30 insertions(+)

diff --git a/src/components/auth/SignInForm.module.css b/src/components/auth/SignInForm.module.css
index a7a6d978..7af8f4ff 100644
--- a/src/components/auth/SignInForm.module.css
+++ b/src/components/auth/SignInForm.module.css
@@ -33,6 +33,12 @@
     width: 100%;
     height: 100%;
   }
+
+  &:disabled {
+    opacity: 50%;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
 }
 
 .form-fields {
@@ -78,3 +84,16 @@
   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;
+  }
+}
diff --git a/src/components/auth/SignInForm.tsx b/src/components/auth/SignInForm.tsx
index 7bafcf46..97988adf 100644
--- a/src/components/auth/SignInForm.tsx
+++ b/src/components/auth/SignInForm.tsx
@@ -12,6 +12,8 @@ import { useI18n } from '@/lib/core/i18n/useI18n'
 import { routes } from '@/lib/core/navigation/routes'
 import { isNonEmptyString } from '@/lib/utils'
 import EoscLogo from '~/public/assets/images/eosc.svg?symbol-icon'
+import { Icon } from '@/lib/core/ui/Icon/Icon'
+import AlertIcon from '@/lib/core/ui/icons/alert.svg?symbol-icon'
 
 export type SignInFormValues = SignInInput
 
@@ -23,6 +25,7 @@ export function SignInForm(): JSX.Element {
   const buttonRef = useRef<HTMLButtonElement>(null)
   const { buttonProps } = useButton(
     {
+      isDisabled: true,
       onPress() {
         signInWithOAuth()
       },
@@ -66,6 +69,14 @@ export function SignInForm(): JSX.Element {
         <EoscLogo aria-hidden />
         Sign in with EOSC
       </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']} />