Finalize Typescript restructure

resources/scripts-v2/features/auth/views/RegisterWithInvitationView.vue

@@ -1,123 +1,128 @@
 <template>
-  <div class="flex items-center justify-center min-h-screen bg-surface-secondary">
-    <div class="w-full max-w-md p-8">
-      <!-- Logo -->
-      <div class="mb-8 text-center">
-        <MainLogo
-          v-if="!loginPageLogo"
-          class="inline-block w-48 h-auto text-primary-500"
-        />
-        <img
-          v-else
-          :src="loginPageLogo"
-          class="inline-block w-48 h-auto"
-        />
-      </div>
+  <!-- Loading -->
+  <div v-if="isLoading" class="mt-12 text-center">
+    <BaseSpinner class="w-8 h-8 text-primary-400 mx-auto" />
+    <p class="text-muted mt-4 text-sm">Loading invitation details...</p>
+  </div>
 
-      <!-- Loading -->
-      <div v-if="isLoading" class="text-center">
-        <p class="text-muted">Loading invitation details...</p>
-      </div>
+  <!-- Invalid/Expired -->
+  <div v-else-if="error" class="mt-12 text-center">
+    <BaseIcon
+      name="ExclamationCircleIcon"
+      class="w-12 h-12 mx-auto text-red-400 mb-4"
+    />
+    <h2 class="text-lg font-semibold text-heading mb-2">
+      Invalid Invitation
+    </h2>
+    <p class="text-sm text-muted mb-4">{{ error }}</p>
+    <router-link
+      to="/login"
+      class="text-sm text-primary-400 hover:text-primary-500"
+    >
+      Go to Login
+    </router-link>
+  </div>
 
-      <!-- Invalid/Expired -->
-      <div v-else-if="error" class="text-center">
-        <BaseIcon
-          name="ExclamationCircleIcon"
-          class="w-16 h-16 mx-auto text-red-400 mb-4"
+  <!-- Registration Form -->
+  <div v-else class="mt-12">
+    <div class="mb-8">
+      <h1 class="text-2xl font-semibold text-heading">
+        Create Your Account
+      </h1>
+      <p class="text-sm text-muted mt-2">
+        You've been invited to join
+        <strong class="text-heading">{{ invitationDetails.company_name }}</strong>
+        as <strong class="text-heading">{{ invitationDetails.role_name }}</strong>
+      </p>
+    </div>
+
+    <form @submit.prevent="submitRegistration">
+      <BaseInputGroup
+        label="Name"
+        :error="v$.name.$error && v$.name.$errors[0].$message"
+        class="mb-4"
+        required
+      >
+        <BaseInput
+          v-model="form.name"
+          :invalid="v$.name.$error"
+          focus
+          @input="v$.name.$touch()"
         />
-        <h1 class="text-xl font-semibold text-heading mb-2">
-          Invalid Invitation
-        </h1>
-        <p class="text-muted">{{ error }}</p>
-        <router-link to="/login" class="text-primary-500 mt-4 inline-block">
-          Go to Login
+      </BaseInputGroup>
+
+      <BaseInputGroup label="Email" class="mb-4">
+        <BaseInput
+          v-model="form.email"
+          type="email"
+          disabled
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        label="Password"
+        :error="v$.password.$error && v$.password.$errors[0].$message"
+        class="mb-4"
+        required
+      >
+        <BaseInput
+          v-model="form.password"
+          :type="isShowPassword ? 'text' : 'password'"
+          :invalid="v$.password.$error"
+          @input="v$.password.$touch()"
+        >
+          <template #right>
+            <BaseIcon
+              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
+              class="mr-1 text-muted cursor-pointer"
+              @click="isShowPassword = !isShowPassword"
+            />
+          </template>
+        </BaseInput>
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        label="Confirm Password"
+        :error="
+          v$.password_confirmation.$error &&
+          v$.password_confirmation.$errors[0].$message
+        "
+        class="mb-4"
+        required
+      >
+        <BaseInput
+          v-model="form.password_confirmation"
+          :type="isShowConfirmPassword ? 'text' : 'password'"
+          :invalid="v$.password_confirmation.$error"
+          @input="v$.password_confirmation.$touch()"
+        >
+          <template #right>
+            <BaseIcon
+              :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
+              class="mr-1 text-muted cursor-pointer"
+              @click="isShowConfirmPassword = !isShowConfirmPassword"
+            />
+          </template>
+        </BaseInput>
+      </BaseInputGroup>
+
+      <div class="mt-5 mb-8">
+        <router-link
+          to="/login"
+          class="text-sm text-primary-400 hover:text-body"
+        >
+          Already have an account? Log in
         </router-link>
       </div>
 
-      <!-- Registration Form -->
-      <div v-else>
-        <div class="text-center mb-6">
-          <h1 class="text-2xl font-semibold text-heading">
-            Create Your Account
-          </h1>
-          <p class="text-muted mt-2">
-            You've been invited to join
-            <strong>{{ invitationDetails.company_name }}</strong> as
-            <strong>{{ invitationDetails.role_name }}</strong>
-          </p>
-        </div>
-
-        <BaseCard class="p-6">
-          <form @submit.prevent="submitRegistration">
-            <div class="space-y-4">
-              <BaseInputGroup
-                label="Name"
-                :error="v$.name.$error && v$.name.$errors[0].$message"
-                required
-              >
-                <BaseInput
-                  v-model="form.name"
-                  :invalid="v$.name.$error"
-                  @input="v$.name.$touch()"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup label="Email">
-                <BaseInput
-                  v-model="form.email"
-                  type="email"
-                  disabled
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup
-                label="Password"
-                :error="v$.password.$error && v$.password.$errors[0].$message"
-                required
-              >
-                <BaseInput
-                  v-model="form.password"
-                  type="password"
-                  :invalid="v$.password.$error"
-                  @input="v$.password.$touch()"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup
-                label="Confirm Password"
-                :error="
-                  v$.password_confirmation.$error &&
-                  v$.password_confirmation.$errors[0].$message
-                "
-                required
-              >
-                <BaseInput
-                  v-model="form.password_confirmation"
-                  type="password"
-                  :invalid="v$.password_confirmation.$error"
-                  @input="v$.password_confirmation.$touch()"
-                />
-              </BaseInputGroup>
-            </div>
-
-            <BaseButton
-              :loading="isSubmitting"
-              :disabled="isSubmitting"
-              class="w-full mt-6"
-              type="submit"
-            >
-              Create Account & Join
-            </BaseButton>
-          </form>
-        </BaseCard>
-
-        <div class="text-center mt-4">
-          <router-link to="/login" class="text-sm text-muted hover:text-primary-500">
-            Already have an account? Log in
-          </router-link>
-        </div>
-      </div>
-    </div>
+      <BaseButton
+        :loading="isSubmitting"
+        :disabled="isSubmitting"
+        type="submit"
+      >
+        Create Account & Join
+      </BaseButton>
+    </form>
   </div>
 </template>
 
@@ -127,8 +132,6 @@ import { useRoute, useRouter } from 'vue-router'
 import { helpers, required, minLength, sameAs } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
 import { authService } from '../../../api/services/auth.service'
-import * as ls from '../../../utils/local-storage'
-import MainLogo from '../../../components/icons/MainLogo.vue'
 
 interface InvitationDetailsData {
   email: string
@@ -146,12 +149,10 @@ interface RegistrationForm {
 const route = useRoute()
 const router = useRouter()
 
-const loginPageLogo = computed<string | false>(() => {
-  return (window as Record<string, unknown>).login_page_logo as string || false
-})
-
 const isLoading = ref<boolean>(true)
 const isSubmitting = ref<boolean>(false)
+const isShowPassword = ref<boolean>(false)
+const isShowConfirmPassword = ref<boolean>(false)
 const error = ref<string | null>(null)
 const invitationDetails = ref<InvitationDetailsData>({
   email: '',
@@ -182,7 +183,7 @@ const rules = computed(() => ({
 
 const v$ = useVuelidate(
   rules,
-  computed(() => form)
+  computed(() => form),
 )
 
 const token = computed<string>(() => route.query.invitation as string)
@@ -195,12 +196,11 @@ onMounted(async () => {
   }
 
   try {
-    const response = await authService.getInvitationDetails(token.value)
-    const details = response.data
+    const details = await authService.getInvitationDetails(token.value) as unknown as InvitationDetailsData
     invitationDetails.value = {
       email: details.email,
       company_name: details.company_name,
-      role_name: details.invited_by,
+      role_name: details.role_name,
     }
     form.email = details.email
   } catch {
@@ -217,17 +217,27 @@ async function submitRegistration(): Promise<void> {
   isSubmitting.value = true
 
   try {
-    await authService.registerWithInvitation({
+    const response = await authService.registerWithInvitation({
       name: form.name,
       email: form.email,
       password: form.password,
       password_confirmation: form.password_confirmation,
-      token: token.value,
+      invitation_token: token.value,
     })
 
+    // Save the auth token before navigating (matching old version's pattern)
+    localStorage.setItem('auth.token', `Bearer ${response.token}`)
+
     router.push('/admin/dashboard')
-  } catch {
-    // Validation errors handled by http interceptor
+  } catch (err: unknown) {
+    const { handleApiError } = await import('../../../utils/error-handling')
+    const { useNotificationStore } = await import('../../../stores/notification.store')
+    const normalized = handleApiError(err)
+    const notificationStore = useNotificationStore()
+    notificationStore.showNotification({
+      type: 'error',
+      message: normalized.message,
+    })
   } finally {
     isSubmitting.value = false
   }