enhance(apps/frontend-auth): improve layout of auth page and highligh…

…t ToS (#4107)
uzh-bf · May 2, 2024 · 47a3970 · 47a3970
1 parent 102a8cb
commit 47a3970
Show file tree

Hide file tree

Showing 16 changed files with 84 additions and 60 deletions.
diff --git a/apps/auth/package.json b/apps/auth/package.json
@@ -8,7 +8,7 @@
     "@klicker-uzh/prisma": "workspace:*",
     "@klicker-uzh/shared-components": "workspace:*",
     "@next-auth/prisma-adapter": "1.0.7",
-    "@uzh-bf/design-system": "2.5.1",
+    "@uzh-bf/design-system": "2.5.2",
     "axios": "1.4.0",
     "bcryptjs": "2.4.3",
     "js-cookie": "3.0.5",

diff --git a/apps/auth/src/pages/index.tsx b/apps/auth/src/pages/index.tsx
@@ -1,6 +1,12 @@
 import Footer from '@klicker-uzh/shared-components/src/Footer'
 import LanguageChanger from '@klicker-uzh/shared-components/src/LanguageChanger'
-import { Button, Checkbox, H1, UserNotification } from '@uzh-bf/design-system'
+import {
+  Button,
+  Checkbox,
+  H1,
+  Tooltip,
+  UserNotification,
+} from '@uzh-bf/design-system'
 import { GetStaticPropsContext } from 'next'
 import { signIn, signOut, useSession } from 'next-auth/react'
 import { useTranslations } from 'next-intl'
@@ -45,12 +51,40 @@ function SignInOutButton() {
     )
   }
 
+  const eduIdLoginButton = (
+    <Button
+      fluid
+      disabled={!tosChecked}
+      data={{ cy: 'eduid-login-button' }}
+      className={{ root: 'p-4 disabled:opacity-50' }}
+      onClick={() =>
+        signIn(process.env.NEXT_PUBLIC_EDUID_ID, {
+          callbackUrl:
+            (router.query?.redirectTo as string) ??
+            process.env.NEXT_PUBLIC_DEFAULT_REDIRECT,
+        })
+      }
+    >
+      <Image
+        src="/edu-id-logo.svg"
+        width={300}
+        height={90}
+        alt="Logo"
+        className="mx-auto"
+        data-cy="login-logo"
+      />
+    </Button>
+  )
+
   return (
     <div className="flex flex-col gap-4">
       <p className="px-3 py-2 rounded shadow bg-slate-100 border-slate-300">
         {t('auth.loginInfo')}
       </p>
       <Checkbox
+        className={{
+          root: !tosChecked ? 'border border-red-500 bg-red-100' : undefined,
+        }}
         data={{ cy: 'tos-checkbox' }}
         label={
           <div className="text-sm">
@@ -82,27 +116,13 @@ function SignInOutButton() {
         checked={tosChecked}
       />
 
-      <Button
-        disabled={!tosChecked}
-        data={{ cy: 'eduid-login-button' }}
-        className={{ root: 'p-4 disabled:opacity-50' }}
-        onClick={() =>
-          signIn(process.env.NEXT_PUBLIC_EDUID_ID, {
-            callbackUrl:
-              (router.query?.redirectTo as string) ??
-              process.env.NEXT_PUBLIC_DEFAULT_REDIRECT,
-          })
-        }
-      >
-        <Image
-          src="/edu-id-logo.svg"
-          width={300}
-          height={90}
-          alt="Logo"
-          className="mx-auto"
-          data-cy="login-logo"
-        />
-      </Button>
+      {!tosChecked ? (
+        <Tooltip tooltip={t('auth.tosAgreementRequired')}>
+          {eduIdLoginButton}
+        </Tooltip>
+      ) : (
+        eduIdLoginButton
+      )}
       <Button
         className={{
           root: 'disabled:opacity-50 justify-center italic',

diff --git a/apps/backend-docker/package.json b/apps/backend-docker/package.json
@@ -52,7 +52,7 @@
     "@types/passport-jwt": "^3.0.6",
     "@types/ramda": "^0.29.3",
     "@types/ws": "^8.5.9",
-    "@uzh-bf/design-system": "2.5.1",
+    "@uzh-bf/design-system": "2.5.2",
     "axios": "1.4.0",
     "cross-env": "7.0.3",
     "eslint": "8.45.0",

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -20,7 +20,7 @@
     "@gabrielcsapo/docusaurus-plugin-matomo": "0.1.2",
     "@mdx-js/react": "2.3.0",
     "@tsconfig/docusaurus": "1.0.5",
-    "@uzh-bf/design-system": "2.5.1",
+    "@uzh-bf/design-system": "2.5.2",
     "autoprefixer": "10.4.14",
     "cross-env": "7.0.3",
     "nodemon": "3.0.1",

diff --git a/apps/frontend-control/package.json b/apps/frontend-control/package.json
@@ -17,7 +17,7 @@
     "@klicker-uzh/shared-components": "workspace:*",
     "@sentry/nextjs": "7.61.1",
     "@socialgouv/matomo-next": "1.6.1",
-    "@uzh-bf/design-system": "2.5.1",
+    "@uzh-bf/design-system": "2.5.2",
     "body-parser": "1.20.2",
     "cross-env": "7.0.3",
     "dayjs": "1.11.9",

diff --git a/apps/frontend-manage/package.json b/apps/frontend-manage/package.json
@@ -18,7 +18,7 @@
     "@klicker-uzh/prisma": "workspace:*",
     "@klicker-uzh/shared-components": "workspace:*",
     "@socialgouv/matomo-next": "1.6.1",
-    "@uzh-bf/design-system": "2.5.1",
+    "@uzh-bf/design-system": "2.5.2",
     "d3": "7.8.4",
     "dayjs": "1.11.9",
     "deepmerge": "4.3.1",

diff --git a/apps/frontend-pwa/package.json b/apps/frontend-pwa/package.json
@@ -25,7 +25,7 @@
     "@radix-ui/react-tabs": "1.0.3",
     "@socialgouv/matomo-next": "1.6.1",
     "@uidotdev/usehooks": "2.4.1",
-    "@uzh-bf/design-system": "2.5.1",
+    "@uzh-bf/design-system": "2.5.2",
     "body-parser": "1.20.2",
     "dayjs": "1.11.9",
     "deepmerge": "4.3.1",

diff --git a/apps/func-incoming-responses/package.json b/apps/func-incoming-responses/package.json
@@ -18,7 +18,7 @@
     "@tsconfig/recommended": "^1.0.2",
     "@types/jsonwebtoken": "^9.0.2",
     "@types/node": "^18.17.4",
-    "@uzh-bf/design-system": "2.5.1",
+    "@uzh-bf/design-system": "2.5.2",
     "azure-functions-core-tools": "4.0.5455",
     "cross-env": "7.0.3",
     "dotenv": "16.0.3",

diff --git a/apps/func-response-processor/package.json b/apps/func-response-processor/package.json
@@ -23,7 +23,7 @@
     "@types/md5": "2.3.2",
     "@types/node": "^18.17.4",
     "@types/ramda": "^0.29.3",
-    "@uzh-bf/design-system": "2.5.1",
+    "@uzh-bf/design-system": "2.5.2",
     "azure-functions-core-tools": "4.0.5455",
     "cross-env": "7.0.3",
     "dotenv": "16.0.3",

diff --git a/apps/office-addin/package.json b/apps/office-addin/package.json
@@ -3,7 +3,7 @@
   "version": "3.1.0-rc.32",
   "license": "AGPL-3.0",
   "dependencies": {
-    "@uzh-bf/design-system": "2.5.1",
+    "@uzh-bf/design-system": "2.5.2",
     "core-js": "3.30.2",
     "es6-promise": "4.2.8",
     "formik": "2.4.3",

diff --git a/packages/i18n/messages/de.ts b/packages/i18n/messages/de.ts
@@ -204,6 +204,8 @@ export default {
     signedInAs: 'Sie sind bereits eingelogged als {username}',
     tosAgreement:
       'Ich akzeptiere die KlickerUZH <tos></tos> (aktualisiert am 26.08.2023) und <privacy></privacy> (aktualisiert am 26.08.2023).',
+    tosAgreementRequired:
+      'Bitte akzeptieren Sie die Nutzungsbedingungen und Datenschutzerklärung, bevor Sie sich einloggen.',
     termsOfService: 'Nutzungsbedingungen',
     privacyPolicy: 'Datenschutzerklärung',
     tosUrl: 'https://www.klicker.uzh.ch/nutzungsbedingungen',

diff --git a/packages/i18n/messages/en.ts b/packages/i18n/messages/en.ts
@@ -204,6 +204,8 @@ export default {
     signedInAs: 'You are already logged in as {username}',
     tosAgreement:
       'I consent to the KlickerUZH <tos></tos> (updated on 26.08.2023) and <privacy></privacy> (updated on 26.08.2023).',
+    tosAgreementRequired:
+      'Please accept the terms of service and privacy policy before logging in.',
     termsOfService: 'Terms of Service',
     privacyPolicy: 'Privacy Policy',
     tosUrl: 'https://www.klicker.uzh.ch/terms_of_service',

diff --git a/packages/lti/package.json b/packages/lti/package.json
@@ -24,7 +24,7 @@
     "typescript": "5.0.4"
   },
   "peerDependencies": {
-    "@uzh-bf/design-system": "2.5.1",
+    "@uzh-bf/design-system": "2.5.2",
     "next": "14.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"

diff --git a/packages/markdown/package.json b/packages/markdown/package.json
@@ -44,7 +44,7 @@
     "@fortawesome/free-regular-svg-icons": "6.4.2",
     "@fortawesome/free-solid-svg-icons": "6.4.2",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@uzh-bf/design-system": "2.5.1",
+    "@uzh-bf/design-system": "2.5.2",
     "next": "14.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/packages/shared-components/package.json b/packages/shared-components/package.json
@@ -31,7 +31,7 @@
     "@fortawesome/free-regular-svg-icons": "6.4.2",
     "@fortawesome/free-solid-svg-icons": "6.4.2",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@uzh-bf/design-system": "2.5.1",
+    "@uzh-bf/design-system": "2.5.2",
     "formik": "2.4.3",
     "next": "14.1.0",
     "next-intl": "3.5.4",