Index: ReserveNGo-backend/src/main/java/mk/ukim/finki/it/reservengo/service/impl/EmailServiceImpl.java =================================================================== --- ReserveNGo-backend/src/main/java/mk/ukim/finki/it/reservengo/service/impl/EmailServiceImpl.java (revision fe4000cb626d81b1f1398bb2351086312873e509) +++ ReserveNGo-backend/src/main/java/mk/ukim/finki/it/reservengo/service/impl/EmailServiceImpl.java (revision beab5bafbe741f9fcb8a5f06db90438edd8a88c6) @@ -70,5 +70,5 @@ @Override public void sendVerificationEmail(String email, String verificationCode) throws MessagingException { - String verificationUrl = frontEndUrl + "/verify?code=" + verificationCode; + String verificationUrl = frontEndUrl + "/register?code=" + verificationCode; String html = """ Index: ReserveNGo-frontend/package-lock.json =================================================================== --- ReserveNGo-frontend/package-lock.json (revision fe4000cb626d81b1f1398bb2351086312873e509) +++ ReserveNGo-frontend/package-lock.json (revision beab5bafbe741f9fcb8a5f06db90438edd8a88c6) @@ -16,4 +16,5 @@ "vue": "^3.5.13", "vue-router": "^4.5.0", + "vue3-otp-input": "^0.5.40", "vuetify": "^3.8.0-beta.0" }, @@ -6779,4 +6780,16 @@ } }, + "node_modules/vue3-otp-input": { + "version": "0.5.40", + "resolved": "https://registry.npmjs.org/vue3-otp-input/-/vue3-otp-input-0.5.40.tgz", + "integrity": "sha512-3AMYHqNz9ZDa9y7ICwcEcsJG7XdZGaLAr6IRLIl3whvseFE95F5Duc9q963HcqEbu8CeMWilkmbAt/0eZOZxow==", + "license": "MIT", + "dependencies": { + "vue": "^3.4.27" + }, + "peerDependencies": { + "vue": "^3.0.*" + } + }, "node_modules/vuetify": { "version": "3.8.0-beta.0", Index: ReserveNGo-frontend/package.json =================================================================== --- ReserveNGo-frontend/package.json (revision fe4000cb626d81b1f1398bb2351086312873e509) +++ ReserveNGo-frontend/package.json (revision beab5bafbe741f9fcb8a5f06db90438edd8a88c6) @@ -20,4 +20,5 @@ "vue": "^3.5.13", "vue-router": "^4.5.0", + "vue3-otp-input": "^0.5.40", "vuetify": "^3.8.0-beta.0" }, Index: ReserveNGo-frontend/src/components/Project/Auth/register_.vue =================================================================== --- ReserveNGo-frontend/src/components/Project/Auth/register_.vue (revision fe4000cb626d81b1f1398bb2351086312873e509) +++ ReserveNGo-frontend/src/components/Project/Auth/register_.vue (revision beab5bafbe741f9fcb8a5f06db90438edd8a88c6) @@ -5,8 +5,9 @@ import LoadingIcon from '@/components/Project/Utility/LoadingIcon.vue' import { useAuth } from '@/repository/Authentication.ts' -import {useToasts} from '@/composables/useToast.js' +import { useToasts } from '@/composables/useToast.js' +import OtpInput from 'vue3-otp-input' export default { - components: { LoadingIcon }, + components: { LoadingIcon, OtpInput }, data() { return { @@ -25,10 +26,15 @@ errorMessage: '', showToast: useToasts().showToast, + // verification flow + registrationSucceeded: false, + otpCode: '', } }, methods: { async register() { + localStorage.setItem('userEmail', this.form_info.email) this.isLoading = true - await useAuth.makeRegister( + await useAuth + .makeRegister( this.form_info.firstName, this.form_info.lastName, @@ -37,23 +43,24 @@ this.form_info.password, this.roleType, - this.tokenRegister + this.tokenRegister, ) - .then((json) => { - if (this.roleType === "local-manager" || this.roleType === "local-worker") { + .then(() => { + if (this.roleType === 'local-manager' || this.roleType === 'local-worker') { router.push('/login') - this.showToast("Successfully registered business account") - - } - else { - this.showToast("Successfully registered user account") - router.push('/login') + this.showToast('Successfully registered business account') + } else { + this.showToast( + 'Successfully registered user account. Please check your email for the 6-digit verification code.', + ) + // Show verification UI instead of redirecting + this.registrationSucceeded = true } }) .catch((err) => { if (err.status === 409) { - this.errorMessage = "It looks like an account already exists with that email address. Do you want to log in instead?" - } - else { - this.errorMessage = err.response || "Something Went wrong"; + this.errorMessage = + 'It looks like an account already exists with that email address. Do you want to log in instead?' + } else { + this.errorMessage = err.response || 'Something Went wrong' } }) @@ -62,21 +69,53 @@ }) }, + async verifyAccount() { + if (!this.otpCode || this.otpCode.length !== 6) { + this.errorMessage = 'Please enter the 6-digit verification code sent to your email.' + return + } + this.isLoading = true + this.errorMessage = '' + try { + await useAuth.verifyAccount(this.form_info.email, this.otpCode) + localStorage.removeItem('userEmail') + this.showToast('Your account has been verified. You can now log in.') + router.push('/login') + } catch (err) { + if (err?.response?.status === 400 || err?.response?.status === 404) { + this.errorMessage = 'Invalid or expired verification code. Please try again.' + } else { + this.errorMessage = + err?.response?.data?.message || 'Verification failed. Please try again.' + } + } finally { + this.isLoading = false + } + }, }, computed: { tokenRegister() { - return this.$route.query.token || null; - }, - roleType(){ - if (this.$route.params.userType) - return `local-${this.$route.params.userType}` - //local-manager + return this.$route.query.token || null + }, + roleType() { + if (this.$route.params.userType) return `local-${this.$route.params.userType}` + //local-manager else { - return "customer" - } - - } - } - - + return 'customer' + } + }, + }, + beforeMount() { + const otpcode = this.$route.query.code; + if (otpcode) { + this.registrationSucceeded = true; + this.otpCode = otpcode; + this.isLoading = true; + this.form_info.email = localStorage.getItem("userEmail") + setTimeout(() => { + this.isLoading = false; + this.verifyAccount(); + }, 2000) + } + }, } @@ -90,6 +129,6 @@
-

Register {{roleType}}

-
+

Register {{ roleType }}

+
@@ -156,5 +195,5 @@ />
-
{{errorMessage}}
+
{{ errorMessage }}
-
+
+ +
+ +
+
{{ errorMessage }}
+
+ +
+
+ Back to Login +
+
@@ -186,2 +254,14 @@ } + + Index: ReserveNGo-frontend/src/repository/Authentication.ts =================================================================== --- ReserveNGo-frontend/src/repository/Authentication.ts (revision fe4000cb626d81b1f1398bb2351086312873e509) +++ ReserveNGo-frontend/src/repository/Authentication.ts (revision beab5bafbe741f9fcb8a5f06db90438edd8a88c6) @@ -26,4 +26,7 @@ return this.httpClient.post("register/" + role, { firstName, lastName, email, phoneNumber, password }, {headers: {'Invite-Token': inviteToken} }) } + verifyAccount(email: String, verificationCode: String) : Promise { + return this.httpClient.patch('verify', { email, verificationCode }) + } reEnableAccount(email: String, password: String) : Promise { return this.httpClient.patch('enable', { email, password })