From 73488092c4e5f88ce22957cc3fc7dc9cf3c7e6d3 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 30 Nov 2023 15:58:10 +0100
Subject: [PATCH] login: add alert when login required

---
 components/BaseAlert.vue  |  2 +-
 components/FormField.vue  |  8 ++++----
 components/YForm.vue      |  2 +-
 locales/en.json           |  3 +++
 middleware/auth.global.ts | 11 ++++++++---
 pages/login.vue           | 18 +++++++++++++-----
 6 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/components/BaseAlert.vue b/components/BaseAlert.vue
index d31dc47..f7a2081 100644
--- a/components/BaseAlert.vue
+++ b/components/BaseAlert.vue
@@ -28,7 +28,7 @@ const classVariant = computed(() => {
   <div
     :aria-live="assertive ? 'assertive' : 'polite'"
     aria-atomic="true"
-    :class="'mt-8 alert ' + classVariant"
+    :class="'alert ' + classVariant"
   >
     <YIcon v-if="icon" :name="icon" size="2em" aria-hidden="true" />
     <slot name="default">
diff --git a/components/FormField.vue b/components/FormField.vue
index 0f22a7e..657c58d 100644
--- a/components/FormField.vue
+++ b/components/FormField.vue
@@ -46,7 +46,7 @@ provide(formGroupExtras, {
     <div
       role="group"
       :aria-invalid="invalid"
-      :class="{ 'is-invalid': invalid, 'flex-col': !row }"
+      :class="{ 'is-invalid': invalid, 'flex-col': !row, 'items-center': row }"
       class="flex"
     >
       <slot name="label">
@@ -54,15 +54,15 @@ provide(formGroupExtras, {
         <label
           :id="name + '__label'"
           :for="name"
-          class="block ms-1 mb-2"
-          :class="{ 'sr-only': srHideLabel, 'flex mb-0': !!icon }"
+          class="block ms-1"
+          :class="{ 'sr-only': srHideLabel, flex: !!icon, 'mb-2': !icon }"
         >
           <YIcon
             v-if="icon"
             :name="icon"
             aria-hidden="true"
             size="2em"
-            class="m-2"
+            class="me-2"
           />
           <span :class="{ 'sr-only': !!icon }">{{ label }}</span>
         </label>
diff --git a/components/YForm.vue b/components/YForm.vue
index 8247251..eb34bd8 100644
--- a/components/YForm.vue
+++ b/components/YForm.vue
@@ -19,7 +19,7 @@ withDefaults(
     <slot name="default" />
 
     <!-- Success + generic error announcement -->
-    <BaseAlert v-show="feedback" v-bind="feedback" class="mb-8" />
+    <BaseAlert v-show="feedback" v-bind="feedback" class="my-8" />
 
     <!-- SR "loading" announcement -->
     <BaseAlert
diff --git a/locales/en.json b/locales/en.json
index 4264c61..dfa33c5 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -48,6 +48,9 @@
         "main_content": "Skip to main content",
         "footer": "Skip to footer"
     },
+    "ssowat": {
+        "protected": "Please log in to access this url."
+    },
     "theme": "Theme",
     "user_profile_updated": "User personal information updated with success!",
     "username": "Username",
diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
index ae9ef9f..5afd1eb 100644
--- a/middleware/auth.global.ts
+++ b/middleware/auth.global.ts
@@ -8,9 +8,14 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
   const isLoggedIn = useIsLoggedIn()
   const settings = await useSettings()
 
-  useRedirectUrl().value = (from.query.r as string) || null
-  if (useRedirectUrl().value && to.name === 'login') {
-    to.query.r = useRedirectUrl().value
+  const redirectUrl = useRedirectUrl()
+  if (to.query.r) {
+    redirectUrl.value = to.query.r as string
+    if (to.name !== 'login') {
+      return navigateTo({ path: '/login', query: { r: to.query.r } })
+    }
+  } else {
+    redirectUrl.value = null
   }
 
   if (to.name === 'login') {
diff --git a/pages/login.vue b/pages/login.vue
index de205c7..57cabf1 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -15,6 +15,7 @@ useHead({
 })
 
 const isLoggedIn = useIsLoggedIn()
+const redirectUrl = useRedirectUrl()
 
 const { handleSubmit, setErrors } = useForm({
   validationSchema: toTypedSchema(
@@ -32,10 +33,8 @@ const login = handleSubmit(async (form) => {
   })
 
   if (!error.value) {
-    const redirectUrl = useRedirectUrl().value
-
-    if (redirectUrl) {
-      await navigateTo(atob(redirectUrl), { external: true })
+    if (redirectUrl.value) {
+      await navigateTo(atob(redirectUrl.value), { external: true })
     }
 
     isLoggedIn.value = true
@@ -50,9 +49,18 @@ const login = handleSubmit(async (form) => {
 </script>
 
 <template>
-  <main class="w-50 m-auto">
+  <main class="w-50 m-auto max-w-[250px]">
     <CustomLogo class="flex-none mx-auto w-1/2 mb-10" />
 
+    <BaseAlert
+      v-if="redirectUrl"
+      variant="warning"
+      icon="alert-outline"
+      :message="t('ssowat.protected')"
+      class="mb-4"
+      assertive
+    />
+
     <form novalidate @submit="login">
       <FormField
         name="username"