From 66165b2acd387cfc299c658d0ed12e73ea901809 Mon Sep 17 00:00:00 2001
From: Don Walizer <12420708+dwalizer@users.noreply.github.com>
Date: Wed, 19 Jun 2024 10:54:48 -0400
Subject: [PATCH 1/2] #2490 Add email verification pages, store, routes

---
 .../access/EmailVerificationSent.vue          | 36 ++++++++
 .../access/EmailVerifiedConfirmation.vue      | 89 +++++++++++++++++++
 .../src/components/access/Login.vue           |  6 +-
 .../src/components/access/RequestAccount.vue  |  5 +-
 .../access/RequestEmailVerification.vue       | 59 ++++++++++++
 .../access/UseEmailVerificationInfo.js        | 23 +++++
 dashboard-prime/src/router/index.js           | 39 ++++++++
 e2e-tests/cypress/e2e/verify_email_spec.js    | 36 ++++----
 8 files changed, 273 insertions(+), 20 deletions(-)
 create mode 100644 dashboard-prime/src/components/access/EmailVerificationSent.vue
 create mode 100644 dashboard-prime/src/components/access/EmailVerifiedConfirmation.vue
 create mode 100644 dashboard-prime/src/components/access/RequestEmailVerification.vue
 create mode 100644 dashboard-prime/src/components/access/UseEmailVerificationInfo.js

diff --git a/dashboard-prime/src/components/access/EmailVerificationSent.vue b/dashboard-prime/src/components/access/EmailVerificationSent.vue
new file mode 100644
index 0000000000..6cf04a1764
--- /dev/null
+++ b/dashboard-prime/src/components/access/EmailVerificationSent.vue
@@ -0,0 +1,36 @@
+<script setup>
+import Logo1 from "@/components/brand/Logo1.vue";
+import {useEmailVerificationInfo} from "@/components/access/UseEmailVerificationInfo.js";
+
+const emailVerificationInfo = useEmailVerificationInfo()
+
+</script>
+
+<template>
+  <div class="container-fluid">
+    <div class="flex justify-content-center text-center" data-cy="emailVerificationSentConfirmation">
+      <div class="" style="min-width: 20rem;">
+        <div class="mt-5">
+          <logo1 />
+          <div class="h3 mt-4 text-primary">Email Verification Sent!</div>
+        </div>
+        <Card>
+          <template #content>
+            <p>An email verification code has been sent to <span class="text-primary font-weight-bold">{{ emailVerificationInfo.email }}</span>.</p>
+            <p>Please check your email and confirm your email address to complete your SkillTree account creation.</p>
+            <div class="text-center">
+              <router-link to="/skills-login">
+                <SkillsButton class="p-2" data-cy="loginPage" icon="fas fa-sign-in-alt" label="Return to Login Page"></SkillsButton>
+              </router-link>
+            </div>
+          </template>
+        </Card>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/dashboard-prime/src/components/access/EmailVerifiedConfirmation.vue b/dashboard-prime/src/components/access/EmailVerifiedConfirmation.vue
new file mode 100644
index 0000000000..f8afc3c5a8
--- /dev/null
+++ b/dashboard-prime/src/components/access/EmailVerifiedConfirmation.vue
@@ -0,0 +1,89 @@
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import AccessService from "@/components/access/AccessService.js";
+import LoadingContainer from "@/components/utils/LoadingContainer.vue";
+import Logo1 from "@/components/brand/Logo1.vue";
+import {useEmailVerificationInfo} from "@/components/access/UseEmailVerificationInfo.js";
+
+const emailVerificationInfo = useEmailVerificationInfo()
+const router = useRouter();
+
+const props = defineProps({
+  countDown: {
+    type: Number,
+    default: 10,
+  },
+  token: {
+    type: String,
+    default: '',
+  },
+  email: {
+    type: String,
+    default: '',
+  },
+});
+
+const timer = ref(-1);
+const loading = ref(true);
+
+onMounted(() => {
+  verifyEmail();
+});
+
+const verifyEmail = () => {
+  const verification = { token: props.token, email: props.email };
+  AccessService.verifyEmail(verification).then(() => {
+    loading.value = false;
+    timer.value = props.countDown;
+  }).catch((err) => {
+    const params = {
+      email: props.email,
+      explanation: 'GeneralError',
+    };
+    if (err && err.response && err.response.data && err.response.data.errorCode === 'UserTokenExpired') {
+      params.explanation = 'UserTokenExpired';
+    }
+    emailVerificationInfo.setEmail(params.email)
+    emailVerificationInfo.setReason(params.explanation)
+    router.push({ name: 'RequestEmailVerification' });
+  });
+};
+
+watch(() => timer.value, (newValue) => {
+  if (newValue > 0) {
+    setTimeout(() => {
+      timer.value -= 1;
+    }, 1000);
+  } else {
+    router.push({ name: 'Login' });
+  }
+})
+</script>
+
+<template>
+  <loading-container :is-loading="loading" class="container-fluid">
+    <div class="flex justify-content-center text-center" data-cy="emailConfirmation">
+      <div class="" style="min-width: 20rem;">
+        <div class="mt-5">
+          <logo1 />
+          <div class="h3 mt-4 text-primary">Email Address Successfully Confirmed!</div>
+        </div>
+        <Card>
+          <template #content>
+            <p>Your email address has been confirmed! You will be forwarded to the login page in {{ timer }} seconds.</p>
+            <div class="text-center">
+              <router-link to="/skills-login">
+                <SkillsButton class="p-2" data-cy="loginPage" icon="fas fa-sign-in-alt" label="Return to Login Page"></SkillsButton>
+              </router-link>
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </loading-container>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/dashboard-prime/src/components/access/Login.vue b/dashboard-prime/src/components/access/Login.vue
index 9d00a2f8eb..4063b36aa8 100644
--- a/dashboard-prime/src/components/access/Login.vue
+++ b/dashboard-prime/src/components/access/Login.vue
@@ -9,8 +9,10 @@ import Logo1 from '@/components/brand/Logo1.vue'
 import AccessService from '@/components/access/AccessService.js'
 import InputGroup from 'primevue/inputgroup'
 import InputGroupAddon from 'primevue/inputgroupaddon'
+import { useEmailVerificationInfo } from '@/components/access/UseEmailVerificationInfo.js'
 
 const appConfig = useAppConfig()
+const emailVerificationInfo = useEmailVerificationInfo()
 
 const schema = object({
   username: string().required().email().min(appConfig.minUsernameLength).label('Email Address'),
@@ -61,7 +63,9 @@ const onSubmit = handleSubmit((values) => {
   if (appConfig.verifyEmailAddresses) {
     AccessService.userEmailIsVerified(values.username).then((result) => {
       if (!result) {
-        router.push({ name: 'RequestEmailVerification', params: { email: values.username } })
+        emailVerificationInfo.setEmail(values.username)
+        emailVerificationInfo.setReason('NotVerified')
+        router.push({ name: 'RequestEmailVerification' })
       } else {
         performFormLogin(values)
       }
diff --git a/dashboard-prime/src/components/access/RequestAccount.vue b/dashboard-prime/src/components/access/RequestAccount.vue
index f166b4ac14..e232b4099c 100644
--- a/dashboard-prime/src/components/access/RequestAccount.vue
+++ b/dashboard-prime/src/components/access/RequestAccount.vue
@@ -10,11 +10,13 @@ import { string } from 'yup';
 import Logo1 from '@/components/brand/Logo1.vue';
 import AccessService from '@/components/access/AccessService.js';
 import InputGroupAddon from 'primevue/inputgroupaddon';
+import {useEmailVerificationInfo} from "@/components/access/UseEmailVerificationInfo.js";
 
 const authState = useAuthState()
 const route = useRoute()
 const router = useRouter()
 const appConfig = useAppConfig()
+const emailVerificationInfo = useEmailVerificationInfo()
 
 const isRootAccount = route.meta.isRootAccount;
 const createInProgress = ref(false);
@@ -45,7 +47,8 @@ const login = (firstName, lastName, email, password) => {
     authState.configureSkillsClientForInception()
         .then(() => {
           if (verifyEmailAddresses.value) {
-            router.push({name: 'EmailVerificationSent', params: {email}});
+            emailVerificationInfo.setEmail(email)
+            router.push({name: 'EmailVerificationSent'});
           } else if (route.query.redirect) {
             router.push(route.query.redirect);
           } else if (!isProgressAndRankingEnabled.value) {
diff --git a/dashboard-prime/src/components/access/RequestEmailVerification.vue b/dashboard-prime/src/components/access/RequestEmailVerification.vue
new file mode 100644
index 0000000000..d2aaf406ba
--- /dev/null
+++ b/dashboard-prime/src/components/access/RequestEmailVerification.vue
@@ -0,0 +1,59 @@
+<script setup>
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import AccessService from "@/components/access/AccessService.js";
+import Logo1 from "@/components/brand/Logo1.vue";
+import {useEmailVerificationInfo} from "@/components/access/UseEmailVerificationInfo.js";
+
+const emailVerificationInfo = useEmailVerificationInfo()
+
+const router = useRouter();
+
+const explanationReason = computed(() => {
+  if( emailVerificationInfo.reason === 'UserTokenExpired' ) {
+    return 'Your email verification code has expired. Please click the button below to resend a new verification code.';
+  } else if ( emailVerificationInfo.reason === 'GeneralError' ) {
+    return 'An error occurred while verifying your email address. Please click the button below to resend a new verification code.';
+  }
+  return '';
+})
+
+const resend = () => {
+  AccessService.resendEmailVerification(emailVerificationInfo.email).then(() => {
+    router.push({ name: 'EmailVerificationSent' });
+  });
+};
+</script>
+
+<template>
+  <div>
+    <div class="flex w-full justify-content-center">
+      <div class="flex flex-column" style="min-width: 20rem;">
+        <div class="mt-5 mb-5 flex flex-column align-items-center" data-cy="confirmEmailTitle">
+          <logo1 />
+          <div class="h3 mt-4 text-primary">Email Verification is Required!</div>
+        </div>
+        <Card data-cy="confirmEmailExplanation">
+          <template #content>
+            <div v-if="explanationReason">
+              <p>{{explanationReason}}</p>
+            </div>
+            <div v-else>
+              <p>You must first validate your email address in order to start using SkillTree.</p>
+              <p>An email verification code has been sent to {{ emailVerificationInfo.email }}.</p>
+              <p>Please check your email and confirm your email address to complete your SkillTree account creation, or you can click the button below to resend a new verification code.</p>
+            </div>
+            <div class="text-center">
+              <SkillsButton variant="outline-primary" @click="resend" data-cy="resendConfirmationCodeButton" aria-label="Resend Email Confirmation Code" icon="fas fa-arrow-circle-right" label="Resend Email Confirmation Code">
+              </SkillsButton>
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/dashboard-prime/src/components/access/UseEmailVerificationInfo.js b/dashboard-prime/src/components/access/UseEmailVerificationInfo.js
new file mode 100644
index 0000000000..abe470dc7a
--- /dev/null
+++ b/dashboard-prime/src/components/access/UseEmailVerificationInfo.js
@@ -0,0 +1,23 @@
+import { computed, ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useEmailVerificationInfo = defineStore('useEmailVerificationInfo', () => {
+    const emailVal = ref('')
+    const reasonVal = ref('')
+    const setEmail = (newEmail) => {
+        emailVal.value = newEmail
+    }
+    const email = computed(() => emailVal.value)
+
+    const setReason = (newReason) => {
+        reasonVal.value = newReason
+    }
+    const reason = computed(() => reasonVal.value)
+
+    return {
+        email,
+        setEmail,
+        reason,
+        setReason
+    }
+})
\ No newline at end of file
diff --git a/dashboard-prime/src/router/index.js b/dashboard-prime/src/router/index.js
index f81bb98abd..76cefed8d1 100644
--- a/dashboard-prime/src/router/index.js
+++ b/dashboard-prime/src/router/index.js
@@ -66,6 +66,9 @@ import ResetConfirmation from '@/components/access/ResetConfirmation.vue';
 import ResetNotSupportedPage from '@/components/access/ResetNotSupportedPage.vue';
 import RequestAccount from '@/components/access/RequestAccount.vue';
 import UserAgreement from '@/components/access/UserAgreement.vue'
+import EmailVerificationSent from "@/components/access/EmailVerificationSent.vue";
+import EmailVerifiedConfirmation from "@/components/access/EmailVerifiedConfirmation.vue";
+import RequestEmailVerification from "@/components/access/RequestEmailVerification.vue";
 
 const routes = [
   {
@@ -171,6 +174,42 @@ const routes = [
       },
     },
   },
+  {
+    path: '/email-verification-sent',
+    name: 'EmailVerificationSent',
+    component: EmailVerificationSent,
+    props: true,
+    meta: {
+      requiresAuth: false,
+      announcer: {
+        message: 'Email Verification Sent',
+      },
+    },
+  },
+  {
+    path: '/verify-email/:token/:email',
+    name: 'EmailVerifiedConfirmation',
+    component: EmailVerifiedConfirmation,
+    props: true,
+    meta: {
+      requiresAuth: false,
+      announcer: {
+        message: 'Email Verification Confirmation',
+      },
+    },
+  },
+  {
+    path: '/request-email-verification',
+    name: 'RequestEmailVerification',
+    component: RequestEmailVerification,
+    props: true,
+    meta: {
+      requiresAuth: false,
+      announcer: {
+        message: 'Request Email Verification',
+      },
+    },
+  },
   {
     path: '/error',
     name: 'ErrorPage',
diff --git a/e2e-tests/cypress/e2e/verify_email_spec.js b/e2e-tests/cypress/e2e/verify_email_spec.js
index d5aa3f7a26..ff5e4ee416 100644
--- a/e2e-tests/cypress/e2e/verify_email_spec.js
+++ b/e2e-tests/cypress/e2e/verify_email_spec.js
@@ -57,14 +57,14 @@ describe('Verify Email Tests', () => {
       cy.intercept('GET', '/app/userInfo/**').as('getUserInfo')
     });
 
-    it.skip('register dashboard and confirm email address', () => {
+    it('register dashboard and confirm email address', () => {
       cy.visit('/request-account');
       cy.contains('New Account')
       cy.get('#firstName').type("Robert")
       cy.get('#lastName').type("Smith")
       cy.get('#email').type("rob.smith@madeup.org")
       cy.get('#password').type("password")
-      cy.get('#password_confirmation').type("password")
+      cy.get('#passwordConfirmation').type("password")
       cy.contains('Create Account').click()
 
       cy.get('[data-cy="emailVerificationSentConfirmation"]').should('be.visible')
@@ -87,14 +87,14 @@ describe('Verify Email Tests', () => {
       });
     });
 
-    it.skip('cannot use email confirmation link twice', () => {
+    it('cannot use email confirmation link twice', () => {
       cy.visit('/request-account');
       cy.contains('New Account')
       cy.get('#firstName').type("Robert")
       cy.get('#lastName').type("Smith")
       cy.get('#email').type("rob.smith@madeup.org")
       cy.get('#password').type("password")
-      cy.get('#password_confirmation').type("password")
+      cy.get('#passwordConfirmation').type("password")
       cy.contains('Create Account').click()
 
       cy.get('[data-cy="emailVerificationSentConfirmation"]').should('be.visible')
@@ -115,14 +115,14 @@ describe('Verify Email Tests', () => {
       });
     });
 
-    it.skip('user is redirected to confirm email address if login attempted before confirming', () => {
+    it('user is redirected to confirm email address if login attempted before confirming', () => {
       cy.visit('/request-account');
       cy.contains('New Account')
       cy.get('#firstName').type("Robert")
       cy.get('#lastName').type("Smith")
       cy.get('#email').type("rob.smith@madeup.org")
       cy.get('#password').type("password")
-      cy.get('#password_confirmation').type("password")
+      cy.get('#passwordConfirmation').type("password")
       cy.contains('Create Account').click()
 
       cy.get('[data-cy="emailVerificationSentConfirmation"]').should('be.visible')
@@ -139,7 +139,7 @@ describe('Verify Email Tests', () => {
       cy.get('[data-cy=resendConfirmationCodeButton]').should('be.visible')
     });
 
-    it.skip('user is redirected to confirm email address if token has expired', () => {
+    it('user is redirected to confirm email address if token has expired', () => {
       // override timeout setting to 5 seconds
       cy.login('root@skills.org', 'password');
       cy.request({
@@ -159,7 +159,7 @@ describe('Verify Email Tests', () => {
       cy.get('#lastName').type("Smith")
       cy.get('#email').type("rob.smith@madeup.org")
       cy.get('#password').type("password")
-      cy.get('#password_confirmation').type("password")
+      cy.get('#passwordConfirmation').type("password")
       cy.contains('Create Account').click()
 
       cy.get('[data-cy="emailVerificationSentConfirmation"]').should('be.visible')
@@ -197,13 +197,13 @@ describe('Verify Email Tests', () => {
       });
     });
 
-    it.skip('register dashboard and confirm email address', () => {
+    it('register dashboard and confirm email address', () => {
       Cypress.Commands.add('navToSettings', () => {
         cy.get('[data-cy="settings-button"] button')
           .click();
-        cy.get('[data-cy="settingsButton-navToSettings"]')
+        cy.get('[data-pc-section="menuitem"]').contains('Settings')
           .should('not.be.disabled');
-        cy.get('[data-cy="settingsButton-navToSettings"]')
+        cy.get('[data-pc-section="menuitem"]').contains('Settings')
           .click();
       });
       cy.intercept({
@@ -216,12 +216,12 @@ describe('Verify Email Tests', () => {
         cy.navToSettings();
         cy.get('[data-cy="nav-Email"]').click();
         cy.wait('@loadTemplateSettings');
-        cy.get('[data-cy=htmlEmailHeader]').click().type('For {{}{{} community.descriptor {}}{}} Only');
-        cy.get('[data-cy=ptHeaderTitle]').click();
-        cy.get('[data-cy=plaintextEmailHeader]').click().type('For {{}{{}community.descriptor {}}{}} Only');
-        cy.get('[data-cy=htmlEmailFooter]').click().type('For {{}{{} community.descriptor {}}{}} Only');
-        cy.get('[data-cy=ptFooterTitle]').click();
-        cy.get('[data-cy=plaintextEmailFooter]').click().type('For {{}{{}community.descriptor {}}{}} Only');
+        cy.get('[data-cy=htmlHeader]').click().type('For {{}{{} community.descriptor {}}{}} Only');
+
+        cy.get('[data-cy=plainTextHeader]').click().type('For {{}{{}community.descriptor {}}{}} Only');
+        cy.get('[data-cy=htmlFooter]').click().type('For {{}{{} community.descriptor {}}{}} Only');
+
+        cy.get('[data-cy=plainTextFooter]').click().type('For {{}{{}community.descriptor {}}{}} Only');
         cy.get('[data-cy=emailTemplateSettingsSave]').click();
         cy.logout();
 
@@ -231,7 +231,7 @@ describe('Verify Email Tests', () => {
         cy.get('#lastName').type("Smith")
         cy.get('#email').type("rob.smith@madeup.org")
         cy.get('#password').type("password")
-        cy.get('#password_confirmation').type("password")
+        cy.get('#passwordConfirmation').type("password")
         cy.contains('Create Account').click()
         cy.getHeaderFromEmail()
           .then((header) => {

From 16ada2080f6ac53d4c8ed4478ed7d4c60b4c0a5c Mon Sep 17 00:00:00 2001
From: Don Walizer <12420708+dwalizer@users.noreply.github.com>
Date: Wed, 19 Jun 2024 11:55:14 -0400
Subject: [PATCH 2/2] #2490 Remove unneeded class

---
 dashboard-prime/src/components/access/EmailVerificationSent.vue | 2 +-
 .../src/components/access/EmailVerifiedConfirmation.vue         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/dashboard-prime/src/components/access/EmailVerificationSent.vue b/dashboard-prime/src/components/access/EmailVerificationSent.vue
index 6cf04a1764..7ceabc706b 100644
--- a/dashboard-prime/src/components/access/EmailVerificationSent.vue
+++ b/dashboard-prime/src/components/access/EmailVerificationSent.vue
@@ -7,7 +7,7 @@ const emailVerificationInfo = useEmailVerificationInfo()
 </script>
 
 <template>
-  <div class="container-fluid">
+  <div>
     <div class="flex justify-content-center text-center" data-cy="emailVerificationSentConfirmation">
       <div class="" style="min-width: 20rem;">
         <div class="mt-5">
diff --git a/dashboard-prime/src/components/access/EmailVerifiedConfirmation.vue b/dashboard-prime/src/components/access/EmailVerifiedConfirmation.vue
index f8afc3c5a8..874c8bb9c1 100644
--- a/dashboard-prime/src/components/access/EmailVerifiedConfirmation.vue
+++ b/dashboard-prime/src/components/access/EmailVerifiedConfirmation.vue
@@ -62,7 +62,7 @@ watch(() => timer.value, (newValue) => {
 </script>
 
 <template>
-  <loading-container :is-loading="loading" class="container-fluid">
+  <loading-container :is-loading="loading">
     <div class="flex justify-content-center text-center" data-cy="emailConfirmation">
       <div class="" style="min-width: 20rem;">
         <div class="mt-5">