feat: show modal for deactivated users on POS login

When a deactivated user (active=false) successfully authenticates at the
POS keypad, show a modal explaining their account is deactivated and
that they cannot make purchases. Clicking "I Understand" logs them out
and clears the keypad, preventing entry into the cashier flow.

Refs #813

Author: JustSamuel

apps/point-of-sale/src/components/DeactivatedAccountModalComponent.vue

@@ -0,0 +1,52 @@
+<template>
+  <Dialog
+    class="w-[35rem]"
+    :closable="false"
+    :close-on-escape="false"
+    :dismissable-mask="false"
+    :draggable="false"
+    header="Account deactivated"
+    modal
+    :visible="show"
+  >
+    <Message :closable="false" :icon="undefined" severity="warn">
+      Your account is <span class="font-bold">deactivated</span>.
+      <br />
+      You cannot make purchases at the POS until it is reactivated.
+      <br /><br />
+      Please contact the SudoSOS administrators to resolve this.
+    </Message>
+
+    <div class="flex justify-center items-center mt-4">
+      <Button class="text-xl px-6 py-3 understand-button" @click="emit('dismiss')"> I Understand </Button>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  show: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['dismiss']);
+</script>
+
+<style scoped lang="scss">
+.understand-button {
+  background-color: var(--p-primary-color);
+  border-color: var(--p-primary-color);
+  color: var(--p-primary-inverse-color);
+
+  &:hover:not(:disabled) {
+    background-color: var(--p-primary-hover-color);
+    border-color: var(--p-primary-hover-color);
+  }
+
+  &:focus-visible {
+    outline-color: var(--p-primary-color);
+  }
+}
+</style>

apps/point-of-sale/src/composables/useLoginForm.ts

@@ -15,6 +15,7 @@ export function useLoginForm() {
   const enteringUserId = ref(true);
   const loggingIn = ref(false);
   const wrongPin = ref(false);
+  const showDeactivatedModal = ref(false);
   const maxUserIdLength = 5;
   const maxPasscodeLength = 4;
   const maxUserId = 40000;
@@ -44,6 +45,11 @@ export function useLoginForm() {
     const user = authStore.getUser;
     if (user === null) return;
 
+    if (!user.active) {
+      showDeactivatedModal.value = true;
+      return;
+    }
+
     void useCartStore().setBuyer(user);
     void userStore.fetchCurrentUserBalance(user.id, apiService);
 
@@ -53,6 +59,14 @@ export function useLoginForm() {
     enteringUserId.value = true;
   };
 
+  const dismissDeactivatedModal = () => {
+    authStore.logout();
+    showDeactivatedModal.value = false;
+    userId.value = '';
+    pinCode.value = '';
+    enteringUserId.value = true;
+  };
+
   const loginFail = () => {
     pinCode.value = '';
     wrongPin.value = true;
@@ -112,6 +126,7 @@ export function useLoginForm() {
     enteringUserId,
     loggingIn,
     wrongPin,
+    showDeactivatedModal,
     maxUserIdLength,
     maxPasscodeLength,
     maxUserId,
@@ -124,6 +139,7 @@ export function useLoginForm() {
     loginSuccess,
     loginFail,
     login,
+    dismissDeactivatedModal,
     shouldShowBanner,
   };
 }

apps/point-of-sale/src/views/LoginView.vue

@@ -37,6 +37,7 @@
       <GitInfo />
     </div>
     <ScannersLoginComponent :handle-ean-login="eanLogin" :handle-nfc-login="nfcLogin" />
+    <DeactivatedAccountModalComponent :show="showDeactivatedModal" @dismiss="dismissDeactivatedModal" />
   </div>
 </template>
 
@@ -49,6 +50,7 @@ import KeypadDisplayComponent from '@/components/Keypad/KeypadDisplayComponent.v
 import { posApiService, userApiService } from '@/services/ApiService';
 import BannerComponent from '@/components/Banner/BannerComponent.vue';
 import ScannersLoginComponent from '@/components/ScannersLoginComponent.vue';
+import DeactivatedAccountModalComponent from '@/components/DeactivatedAccountModalComponent.vue';
 import GitInfo from '@/components/GitInfo.vue';
 import PosInfo from '@/components/PosInfo.vue';
 import { useLoginForm } from '@/composables/useLoginForm';
@@ -65,6 +67,7 @@ const {
   enteringUserId,
   loggingIn,
   wrongPin,
+  showDeactivatedModal,
   maxUserIdLength,
   maxPasscodeLength,
   maxUserId,
@@ -76,6 +79,7 @@ const {
   displayContainerClasses,
   loginSuccess,
   login,
+  dismissDeactivatedModal,
   shouldShowBanner,
 } = useLoginForm();