login: add alert when login required

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">

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>

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

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",

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') {

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"