Add proponent Housing landing page. New navbar functionality

Further clarified route names

frontend/src/assets/main.scss

@@ -119,6 +119,10 @@ label {
   }
 }
 
+.app-primary-color {
+  color: $app-primary !important;
+}
+
 .app-error-color {
   color: $app-error !important;
 }

frontend/src/components/guards/RequireAuth.vue

@@ -19,7 +19,7 @@ const router = useRouter();
 
 onBeforeMount(async () => {
   if (!getIsAuthenticated.value) {
-    router.push({ name: RouteNames.LOGIN });
+    router.push({ name: RouteNames.OIDC_LOGIN });
   } else {
     ready.value = true;
   }

frontend/src/components/intake/CollectionDisclaimer.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { Card, Divider } from '@/lib/primevue';
+</script>
+
+<template>
+  <Card>
+    <template #title>
+      <span class="section-header">Notice for collection, use and disclosure of personal information</span>
+      <Divider type="solid" />
+    </template>
+    <template #content>
+      <p class="disclaimer">
+        This information is being collected under the legal authority of section 26 (c) and 27 (1)(a)(i) of the Freedom
+        of Information and Protection of Privacy Act (the Act) and is being used for the purpose of creating a client
+        relationship between you or your organization and Government of British Columbia. It may also be shared when
+        strictly necessary with partner agencies that are also subject to the provisions of the Act. Personal
+        information may be used by the Permitting Solutions Branch for survey purposes. If you have any questions
+        regarding the use of this personal information, please contact Housing Authorizations at
+        <a href="mailto:[email protected]">[email protected].</a>
+      </p>
+    </template>
+  </Card>
+</template>
+
+<style scoped lang="scss">
+.disclaimer {
+  font-weight: 500;
+}
+
+.p-card {
+  border-color: rgb(242, 241, 241);
+  border-radius: 8px;
+  border-style: solid;
+  border-width: 1px;
+  margin-bottom: 1rem;
+
+  .section-header {
+    padding-left: 1rem;
+    padding-right: 0.5rem;
+  }
+
+  :deep(.p-card-title) {
+    font-size: 1rem;
+  }
+
+  :deep(.p-card-body) {
+    padding-bottom: 0.5rem;
+
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  :deep(.p-card-content) {
+    padding-bottom: 0;
+    padding-top: 0;
+
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+</style>

frontend/src/components/intake/ShasEnquiryForm.vue

@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router';
 import { object } from 'yup';
 
 import { Dropdown, InputMask, RadioList, InputText, StepperNavigation, TextArea } from '@/components/form';
+import CollectionDisclaimer from '@/components/intake/CollectionDisclaimer.vue';
 import { Button, Card, Divider, Message, useConfirm, useToast } from '@/lib/primevue';
 import { enquiryService, submissionService } from '@/services';
 import { ContactPreferenceList, ProjectRelationshipList, RouteNames, YesNo } from '@/utils/constants';
@@ -26,6 +27,17 @@ const confirm = useConfirm();
 const router = useRouter();
 const toast = useToast();
 
+function confirmLeave() {
+  confirm.require({
+    message: 'Are you sure you want to leave this page? Any unsaved changes will be lost. Please save as draft first.',
+    header: 'Leave this page?',
+    acceptLabel: 'Leave',
+    acceptClass: 'p-button-danger',
+    rejectLabel: 'Cancel',
+    accept: () => router.push({ name: RouteNames.HOUSING })
+  });
+}
+
 function confirmNext(data: any) {
   confirm.require({
     /* eslint-disable max-len */
@@ -110,7 +122,7 @@ async function onSubmit(data: any) {
 
     if (data.basic.applyForPermitConnect === BASIC_RESPONSES.YES) {
       router.push({
-        name: RouteNames.INTAKE,
+        name: RouteNames.HOUSING_INTAKE,
         query: {
           activityId: submissionResponse?.data.activityId,
           submissionId: submissionResponse?.data.submissionId
@@ -128,6 +140,20 @@ onBeforeMount(async () => {
 
 <template>
   <div v-if="!assignedActivityId">
+    <Button
+      class="mb-3 p-0"
+      text
+      @click="confirmLeave"
+    >
+      <font-awesome-icon
+        icon="fa fa-arrow-circle-left"
+        class="mr-1"
+      />
+      <span>Back to Housing</span>
+    </Button>
+
+    <CollectionDisclaimer />
+
     <Form
       v-if="initialFormValues"
       v-slot="{ values }"
@@ -339,8 +365,8 @@ onBeforeMount(async () => {
 </template>
 
 <style scoped lang="scss">
-.no-shadow {
-  box-shadow: none;
+.disclaimer {
+  font-weight: 500;
 }
 
 .p-card {

frontend/src/components/intake/ShasIntakeForm.vue

@@ -2,6 +2,7 @@
 import { storeToRefs } from 'pinia';
 import { Form, FieldArray, ErrorMessage } from 'vee-validate';
 import { onBeforeMount, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 import FileUpload from '@/components/file/FileUpload.vue';
 import {
@@ -16,6 +17,7 @@ import {
   StepperNavigation,
   TextArea
 } from '@/components/form';
+import CollectionDisclaimer from '@/components/intake/CollectionDisclaimer.vue';
 import { intakeSchema } from '@/components/intake/ShasIntakeSchema';
 import {
   Accordion,
@@ -77,15 +79,22 @@ const validationErrors: Ref<string[]> = ref([]);
 
 // Actions
 const confirm = useConfirm();
+const router = useRouter();
 const toast = useToast();
 
 const checkSubmittable = (stepNumber: number) => {
   if (stepNumber === 3) isSubmittable.value = true;
 };
 
-function displayErrors(a: any) {
-  validationErrors.value = Array.from(new Set(a.errors ? Object.keys(a.errors).map((x) => x.split('.')[0]) : []));
-  document.getElementById('form')?.scrollIntoView({ behavior: 'smooth' });
+function confirmLeave() {
+  confirm.require({
+    message: 'Are you sure you want to leave this page? Any unsaved changes will be lost. Please save as draft first.',
+    header: 'Leave this page?',
+    acceptLabel: 'Leave',
+    acceptClass: 'p-button-danger',
+    rejectLabel: 'Cancel',
+    accept: () => router.push({ name: RouteNames.HOUSING })
+  });
 }
 
 function confirmSubmit(data: any) {
@@ -98,6 +107,11 @@ function confirmSubmit(data: any) {
   });
 }
 
+function displayErrors(a: any) {
+  validationErrors.value = Array.from(new Set(a.errors ? Object.keys(a.errors).map((x) => x.split('.')[0]) : []));
+  document.getElementById('form')?.scrollIntoView({ behavior: 'smooth' });
+}
+
 function onPermitsHasAppliedChange(e: BASIC_RESPONSES, fieldsLength: number, push: Function, setFieldValue: Function) {
   if (e === BASIC_RESPONSES.YES || e === BASIC_RESPONSES.UNSURE) {
     if (fieldsLength === 0) {
@@ -191,6 +205,18 @@ onBeforeMount(async () => {
 
 <template>
   <div v-if="!assignedActivityId">
+    <Button
+      class="p-0"
+      text
+      @click="confirmLeave"
+    >
+      <font-awesome-icon
+        icon="fa fa-arrow-circle-left"
+        class="mr-1"
+      />
+      <span>Back to Housing</span>
+    </Button>
+
     <Form
       v-if="initialFormValues"
       id="form"
@@ -235,6 +261,8 @@ onBeforeMount(async () => {
             />
           </template>
           <template #content="{ nextCallback }">
+            <CollectionDisclaimer />
+
             <Message
               v-if="validationErrors.length"
               severity="error"
@@ -244,6 +272,7 @@ onBeforeMount(async () => {
             >
               {{ VALIDATION_BANNER_TEXT }}
             </Message>
+
             <Card>
               <template #title>
                 <span class="section-header">Applicant Info</span>
@@ -386,6 +415,8 @@ onBeforeMount(async () => {
             />
           </template>
           <template #content="{ prevCallback, nextCallback }">
+            <CollectionDisclaimer />
+
             <Message
               v-if="validationErrors.length"
               severity="error"
@@ -395,6 +426,7 @@ onBeforeMount(async () => {
             >
               {{ VALIDATION_BANNER_TEXT }}
             </Message>
+
             <Card>
               <template #title>
                 <span class="section-header">Help us learn more about your housing project</span>
@@ -754,6 +786,8 @@ onBeforeMount(async () => {
             />
           </template>
           <template #content="{ prevCallback, nextCallback }">
+            <CollectionDisclaimer />
+
             <Message
               v-if="validationErrors.length"
               severity="error"
@@ -763,6 +797,7 @@ onBeforeMount(async () => {
             >
               {{ VALIDATION_BANNER_TEXT }}
             </Message>
+
             <Card>
               <template #title>
                 <div class="flex">
@@ -1019,6 +1054,8 @@ onBeforeMount(async () => {
             />
           </template>
           <template #content="{ prevCallback }">
+            <CollectionDisclaimer />
+
             <Message
               v-if="validationErrors.length"
               severity="error"
@@ -1028,6 +1065,7 @@ onBeforeMount(async () => {
             >
               {{ VALIDATION_BANNER_TEXT }}
             </Message>
+
             <Card>
               <template #title>
                 <div class="flex">
@@ -1359,4 +1397,25 @@ onBeforeMount(async () => {
 :deep(.p-message-wrapper) {
   padding: 0.5rem;
 }
+
+:deep(.p-stepper-header:first-child) {
+  padding-left: 0;
+
+  .p-button {
+    padding-left: 0;
+  }
+}
+
+:deep(.p-stepper-header:last-child) {
+  padding-right: 0;
+
+  .p-button {
+    padding-right: 0;
+  }
+}
+
+:deep(.p-stepper-panels) {
+  padding-left: 0;
+  padding-right: 0;
+}
 </style>

frontend/src/components/layout/LoginButton.vue

@@ -12,11 +12,11 @@ const authStore = useAuthStore();
 const { getIsAuthenticated } = storeToRefs(authStore);
 
 function login() {
-  router.push({ name: RouteNames.LOGIN });
+  router.push({ name: RouteNames.OIDC_LOGIN });
 }
 
 function logout() {
-  router.push({ name: RouteNames.LOGOUT });
+  router.push({ name: RouteNames.OIDC_LOGOUT });
 }
 </script>