Merge pull request #36 from bcgov/tasks/ECER-652

src/ECER.Clients.RegistryPortal/ECER.Clients.RegistryPortal.Server/Users/UserInfoEndpoints.cs

@@ -3,6 +3,7 @@
 using ECER.Managers.Registry;
 using ECER.Utilities.Hosting;
 using Microsoft.AspNetCore.Http.HttpResults;
+using Microsoft.OpenApi.Models;
 using Wolverine;
 
 namespace ECER.Clients.RegistryPortal.Server.Users;
@@ -34,6 +35,12 @@ public void Register(IEndpointRouteBuilder endpointRouteBuilder)
             await bus.InvokeAsync<string>(new RegisterNewUserCommand(mapper.Map<Managers.Registry.UserProfile>(request.Profile), new Login(login.Value.identityProvider, login.Value.id)));
 
             return TypedResults.Ok();
+        }).WithOpenApi(op =>
+        {
+                op.OperationId = "CreateUserInfo";
+                op.Summary = "Create user profile information";
+                op.Description = "Create new user";
+                return op;
         }).RequireAuthorization();
     }
 }

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/.prettierrc

@@ -1 +1,4 @@
-{ "printWidth": 160 }
+{
+  "printWidth": 160,
+  "htmlWhitespaceSensitivity": "ignore"
+}

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/App.vue

@@ -18,9 +18,11 @@ import { useRouter } from "vue-router";
 
 import { useUserStore } from "@/store/user";
 
+import { getUserInfo } from "./api/user";
 import EceFooter from "./components/Footer.vue";
 import NavigationBar from "./components/NavigationBar.vue";
 import { useOidcStore } from "./store/oidc";
+import type { Components } from "./types/openapi";
 
 export default defineComponent({
   name: "App",
@@ -36,14 +38,19 @@ export default defineComponent({
     // Watch for changes to isAuthenticated flag
     watch(
       () => userStore.isAuthenticated,
-      (newValue: boolean) => {
+      async (newValue: boolean) => {
         if (!newValue) {
           // If not authenticated, navigate to the login page
           router.push("/login");
         } else {
-          // If authenticated, navigate to the dashboard page
-          // TODO: Once ECER-494 is complete, this should be changed to direct first time users to "/new-user" page and returning users to the dashboard "/"
-          router.push("/new-user");
+          // If authenticated, check if new user
+          const userProfile: Components.Schemas.UserProfile | null = await getUserInfo();
+          if (userProfile) {
+            userStore.setUserProfile(userProfile);
+            router.push("/");
+          } else {
+            router.push("/new-user");
+          }
         }
       },
     );

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/api/client.ts

@@ -12,7 +12,7 @@ export const getClient = async (appendToken: boolean = true) => {
 
   if (appendToken) {
     const userStore = useUserStore();
-    const access_token = userStore.getAccessToken;
+    const access_token = userStore.accessToken;
 
     // Add a request interceptor to append the access token to the request
     axiosClient.interceptors.request.use((config) => {

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/api/user.ts

@@ -1,9 +1,36 @@
+import axios from "axios";
+
 import { getClient } from "@/api/client";
 import type { Components } from "@/types/openapi";
 
 const getUserInfo = async (): Promise<Components.Schemas.UserProfile | null> => {
-  const client = await getClient();
-  return (await client.GetUserInfo()).data?.userInfo ?? null;
+  try {
+    const client = await getClient();
+    const response = await client.GetUserInfo();
+
+    // Check if the response has data and userInfo property
+    return response?.data?.userInfo ?? null;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      if (error.response?.status === 404) {
+        console.log("User not found:", error);
+      } else {
+        console.log("Error fetching user info:", error);
+      }
+    }
+    return null;
+  }
+};
+
+const createUser = async (user: Components.Schemas.NewUserRequest): Promise<boolean> => {
+  try {
+    const client = await getClient();
+    const response = await client.CreateUserInfo({}, user);
+    return response.status === 200;
+  } catch (error) {
+    console.log("Error creating user:", error);
+    return false;
+  }
 };
 
-export { getUserInfo };
+export { createUser, getUserInfo };

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/Footer.vue

@@ -1,10 +1,10 @@
 <template>
   <v-footer app color="primary" absolute :style="{ 'min-height': '50px' }">
     <v-row justify="start" class="ga-1 ms-2 my-1">
-      <router-link v-for="link in links" :key="link.name" :to="link.path"
-        ><v-btn variant="text"
-          ><p class="white small">{{ link.name }}</p></v-btn
-        >
+      <router-link v-for="link in links" :key="link.name" :to="link.path">
+        <v-btn variant="text">
+          <p class="white small">{{ link.name }}</p>
+        </v-btn>
       </router-link>
     </v-row>
   </v-footer>

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/FormContainer.vue

@@ -1,6 +1,6 @@
 <template>
   <div :style="{ 'max-width': '600px' }" class="px-2">
-    <slot> </slot>
+    <slot></slot>
   </div>
 </template>
 

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/LoginCard.vue

@@ -4,10 +4,11 @@
       <p class="white"><b>Preferred Login Method</b></p>
     </div>
     <div class="d-flex flex-column align-center">
-      <v-card width="97%" height="500px" color="white" class="mt-3 rounded-lg"><slot></slot></v-card></div
-  ></v-card>
+      <v-card width="97%" height="500px" color="white" class="mt-3 rounded-lg"><slot></slot></v-card>
+    </div>
+  </v-card>
   <v-card v-else color="white" width="450px" height="500px" class="mt-11 rounded-lg">
-    <slot> </slot>
+    <slot></slot>
   </v-card>
 </template>
 

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/NavigationBar.vue

@@ -3,9 +3,13 @@
     height="80"
     elevation="0"
     color="primary"
-    :style="{
-      'border-bottom': '2px solid #FCBA19',
-    }"
+    :style="
+      $vuetify.display.mobile
+        ? {}
+        : {
+            'border-bottom': '2px solid #FCBA19',
+          }
+    "
   >
     <router-link to="/">
       <img src="../assets/bc-gov-logo.svg" width="155" class="logo ms-6" alt="B.C. Government Logo" />
@@ -26,7 +30,6 @@ export default defineComponent({
   setup() {
     const userStore = useUserStore();
     const oidcStore = useOidcStore();
-
     return { userStore, oidcStore };
   },
   methods: {

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/PageContainer.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container class="my-6">
-    <slot> </slot>
+    <slot></slot>
   </v-container>
 </template>
 

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Dashboard.vue

@@ -2,12 +2,14 @@
   <v-app>
     <v-navigation-drawer v-model="drawer" floating class="bg-white">
       <v-list>
-        <v-list-item prepend-icon="mdi-account-edit " title="Sandra Adams" subtitle="[email protected]">
+        <v-list-item prepend-icon="mdi-account-edit " :title="userStore.fullName" subtitle="[email protected]">
           <template #subtitle>
-            <v-list-item-title><p class="small">[email protected]</p></v-list-item-title>
-            <v-list-item-title
-              ><p class="small">{{ formatPhoneNumber("1231231234") }}</p></v-list-item-title
-            >
+            <v-list-item-title>
+              <p class="small">{{ userStore.email }}</p>
+            </v-list-item-title>
+            <v-list-item-title>
+              <p class="small">{{ formatPhoneNumber(userStore.phoneNumber) }}</p>
+            </v-list-item-title>
           </template>
         </v-list-item>
       </v-list>
@@ -36,7 +38,7 @@
           <v-col cols="12" md="8" lg="8" xl="8">
             <v-card class="rounded-lg fill-height" flat color="white">
               <v-card-item class="ma-4">
-                <h3>Welcome Jane Doe</h3>
+                <h3>Welcome {{ userStore.fullName }}</h3>
                 <p class="small">Complete and submit your application for certification in early childhood education.</p>
               </v-card-item>
               <v-card-actions class="ma-4">
@@ -55,9 +57,12 @@
             </v-card>
           </v-col>
           <v-col cols="12" class="order-first order-lg-last order-xl-last">
-            <v-card class="rounded-lg" flat color="white"
-              ><v-card-item> <router-view></router-view> </v-card-item></v-card
-          ></v-col>
+            <v-card class="rounded-lg" flat color="white">
+              <v-card-item>
+                <router-view></router-view>
+              </v-card-item>
+            </v-card>
+          </v-col>
         </v-row>
       </v-container>
     </v-main>
@@ -67,10 +72,16 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
+import { useUserStore } from "@/store/user";
 import { formatPhoneNumber } from "@/utils/format";
 
 export default defineComponent({
   name: "Dashboard",
+  setup() {
+    const userStore = useUserStore();
+
+    return { userStore };
+  },
   data: () => ({
     navigationOptions: [
       { name: "My Certifications", path: "/my-certifications", icon: "mdi-folder" },

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/NewUser.vue

@@ -25,11 +25,15 @@
               :rules="[Rules.email(), Rules.required()]"
             ></v-text-field>
             <v-checkbox v-model="hasAgreed" label="" color="primary" :rules="hasAgreedRules">
-              <template #label>I have read and accept the&nbsp;<router-link to="/terms-of-use/from-new-user">Terms of Use</router-link></template></v-checkbox
-            >
+              <template #label>
+                I have read and accept the&nbsp;
+                <router-link to="/new-user/terms-of-use">Terms of Use</router-link>
+              </template>
+            </v-checkbox>
             <v-row justify="end">
-              <v-btn variant="outlined" class="mr-2" @click="logout">Cancel</v-btn><v-btn color="primary" @click="submit">Save and Continue</v-btn></v-row
-            >
+              <v-btn variant="outlined" class="mr-2" @click="logout">Cancel</v-btn>
+              <v-btn color="primary" @click="submit">Save and Continue</v-btn>
+            </v-row>
           </div>
         </v-form>
       </div>
@@ -38,8 +42,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, ref } from "vue";
 
+import { createUser } from "@/api/user";
 import { useOidcStore } from "@/store/oidc";
 import { useUserStore } from "@/store/user";
 import { isNumber } from "@/utils/formInput";
@@ -55,13 +60,13 @@ export default defineComponent({
     const userStore = useUserStore();
     const oidcStore = useOidcStore();
 
-    await userStore.setUserProfile();
+    const phoneNumber = ref(userStore.oidcUserAsUserProfile.phone);
+    const email = ref(userStore.oidcUserAsUserProfile.email);
 
-    return { userStore, oidcStore };
+    return { userStore, oidcStore, phoneNumber, email };
   },
+
   data: () => ({
-    phoneNumber: "",
-    email: "",
     hasAgreed: false,
     hasAgreedRules: [(v: boolean) => !!v || "You must read and accept the Terms of Use"],
     Rules,
@@ -71,8 +76,20 @@ export default defineComponent({
     async submit() {
       const { valid } = await (this.$refs.form as any).validate();
       if (valid) {
-        // TODO: Once ECER-494 is complete, call create user with the user's updated email and phone number
-        this.$router.push("/");
+        const userCreated: boolean = await createUser({
+          profile: this.userStore.oidcUserAsUserProfile,
+        });
+
+        // TODO handle error creating user, need clarification from design team
+        if (userCreated) {
+          this.userStore.setUserProfile({
+            ...this.userStore.oidcUserAsUserProfile,
+            phone: this.phoneNumber,
+            email: this.email,
+          });
+
+          this.$router.push("/");
+        }
       }
     },
 

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/TermsOfUse.vue

@@ -14,20 +14,22 @@
           </v-row>
         </v-btn>
       </v-row>
-      <v-row
-        ><v-card variant="outlined" color="grey-lightest" class="pa-10 mt-5">
+      <v-row>
+        <v-card variant="outlined" color="grey-lightest" class="pa-10 mt-5">
           <p class="small">
             <b>Notification of Collection</b>
             <br />
             <br />
             The personal information collected through My Early Childhood Educator Registry is collected under the authority of Section 26(c) of
-            <a href="https://bclaws.gov.bc.ca/civix/document/id/complete/statreg/96165_00">the Freedom of Information and Protection of Privacy Act</a> and is
-            subject to all of the provisions of that Act. Your information will be used under Section 32(a) of the Act to communicate with you, determine or
-            audit your eligibility.
+            <a href="https://bclaws.gov.bc.ca/civix/document/id/complete/statreg/96165_00">the Freedom of Information and Protection of Privacy Act</a>
+            and is subject to all of the provisions of that Act. Your information will be used under Section 32(a) of the Act to communicate with you, determine
+            or audit your eligibility.
             <br />
             <br />
             If you have any specific questions concerning the collection, use or disclosure of personal information, please contact the Early Childhood Educator
-            Registry at <a href="tel:18883386622">1 (888) 338-6622</a>.
+            Registry at
+            <a href="tel:18883386622">1 (888) 338-6622</a>
+            .
             <br />
             <br />
             <b>User Agreement</b>
@@ -37,10 +39,12 @@
             holding a basic BCeID or BC Services Card. By accessing My Early Childhood Educator Registry, you confirm that you are the registered authorized
             user associated with the electronic login information provided to gain access to My Early Childhood Educator Registry, and acknowledge that you are
             bound by the terms of your
-            <a href="https://www.bceid.ca/aboutbceid/tou_basic.aspx#:~:text=1)%20You%20agree%20to%20abide,using%20your%20Basic%20BCeID%20account."
-              >BCeID Terms of Use Agreement</a
-            >
-            or the <a href="https://www2.gov.bc.ca/gov/content/governments/government-id/bcservicescardapp/terms-of-use">BC Login Service Terms of Use</a>.
+            <a href="https://www.bceid.ca/aboutbceid/tou_basic.aspx#:~:text=1)%20You%20agree%20to%20abide,using%20your%20Basic%20BCeID%20account.">
+              BCeID Terms of Use Agreement
+            </a>
+            or the
+            <a href="https://www2.gov.bc.ca/gov/content/governments/government-id/bcservicescardapp/terms-of-use">BC Login Service Terms of Use</a>
+            .
             <br />
             <br />
             You acknowledge that sharing your password or failing to log out of your session may compromise your personal information, and may be construed as