feature(validation) refactor login validation

Author: rohrig

pages/login.vue

@@ -13,31 +13,27 @@ definePageMeta({
   middleware: 'guest'
 })
 
-
-
 async function postLoginForm() {
   response = await loginWithEmail(usernameOrEmail.value, password.value)
   errors.value = response.errors
 }
 </script>
 
 <template>
-  <div class="h-screen bg-white dark:bg-black">
-    <div class="flex items-center justify-center  px-4 sm:px-6 lg:px-8">
-      <div class="max-w-md w-full space-y-8">
+  <div class="dark:bg-black h-screen">
+    <div class="flex items-center justify-center px-4 sm:px-6 lg:px-8">
+      <div class="max-w-md w-full">
+        <div class="lg:flex mt-10">
+          <img class="mx-auto h-24 w-auto" src="/img/logo_clear_fsj.png" alt="full stack jack logo" />
+          <h1 class="py-9 text-center text-5xl font-extrabold text-gray-900 dark:text-gray-400">
+            Full Stack Jack
+          </h1>
+        </div>
         <div>
-          <div class="h-25 w-25">
-          </div>
-          <div class="lg:flex mt-10">
-            <img class="mx-auto h-24 w-auto" src="/img/logo_clear_fsj.png" alt="full stack jack logo" />
-            <br>
-            <h1 class="py-9 text-center text-5xl font-extrabold text-gray-900 dark:text-gray-400">
-              Full Stack Jack</h1>
-          </div>
-
-          <h2 class="mt-6 py-9 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-400">Sign in</h2>
+          <h2 class="text-center text-3xl font-extrabold mt-5 text-gray-900 dark:text-white">
+            Sign In
+          </h2>
         </div>
-
         <div v-if="response?.hasErrors && errors"
           class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mt-3" role="alert">
           <ul class="block sm:inline">
@@ -46,55 +42,37 @@ async function postLoginForm() {
             </li>
           </ul>
         </div>
+        <form v-on:submit.prevent class="mt-8 space-y-6" action="#" method="POST">
 
-        <form v-if="true" v-on:submit.prevent class="mt-8 space-y-6" action="#" method="POST">
-          <input type="hidden" name="remember" value="true">
           <div class="rounded-md shadow-sm -space-y-px mb-1">
             <div>
               <label for="email-address" class="sr-only">Username or Email</label>
-              <input v-model="usernameOrEmail" id="email-address" name="email" type="email" autocomplete="email"
-                required
-                class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-                placeholder="Username or Email">
+              <input type="email" v-model="usernameOrEmail" id="username" name="username" required
+                class="dark:bg-slate-500 dark:text-white dark:placeholder-white appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+                :class="errors?.has('username') ? ' border-red-500' : ''" placeholder="username" />
             </div>
           </div>
           <div>
             <label for="password" class="sr-only">Password</label>
-            <input v-model="password" id="password" name="password" required type="password"
-              autocomplete="current-password"
-              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-              placeholder="Password">
-          </div>
-
-          <div class="flex items-center justify-between">
-            <div class="flex items-center">
-              <input id="remember-me" name="remember-me" type="checkbox"
-                class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
-              <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-white"> Remember me </label>
-            </div>
-
-            <div class="text-sm">
-              <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-white"> Forgot your
-                password? </a>
-            </div>
-          </div>
-
-          <div>
-            <button @click.prevent="postLoginForm"
-              class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-              <span class="absolute left-0 inset-y-0 flex items-center pl-3">
-                <!-- Heroicon name: solid/lock-closed -->
-                <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                  <path fill-rule="evenodd"
-                    d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-                    clip-rule="evenodd" />
-                </svg>
-              </span>
-              Sign in
-            </button>
+            <input v-model="password" id="password" name="password" type="password" autocomplete="current-password"
+              required
+              class="dark:bg-slate-500 dark:text-white dark:placeholder-white appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+              :class="errors?.has('password') ? ' border-red-500' : ''" placeholder="Password" />
           </div>
         </form>
+        <button @click.prevent="postLoginForm"
+          class="mt-5 group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+          <span class="absolute left-0 inset-y-0 flex items-center pl-3">
+            <!-- Heroicon name: solid/lock-closed -->
+            <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd"
+                d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+                clip-rule="evenodd" />
+            </svg>
+          </span>
+          register
+        </button>
       </div>
     </div>
   </div>

pages/register.vue

@@ -8,7 +8,6 @@ const password: Ref<string> = ref('');
 const username: Ref<string> = ref('');
 const name: Ref<string> = ref('');
 
-  
 const errors: Ref<Map<string, { message: InputValidation; }> | undefined> = ref(new Map<string, { message: InputValidation }>())
 let response: FormValidation
 

server/App/responses/DefaultErrorsResponse.ts

@@ -1,24 +1,22 @@
 import { readBody, getCookie } from "h3";
 import { createAnswer } from "~/server/database/repositories/askJackRespository";
-import { getUserBySessionToken } from '~/server/services/sessionService'
+import { getUserBySessionToken } from '~/server/app/services/sessionService'
+import sendDefaultErrorResponse from "~/server/app/errors/responses/DefaultErrorsResponse";
 
 export default eventHandler(async (event) => {
     const body = await readBody(event)
     const data: IAnswerPost = body.data
-
     const authToken = getCookie(event, 'auth_token')  ?? null
 
     if(authToken == null) {
-        throw Error('unauthorized')
+        return await sendDefaultErrorResponse(event, 'Unauthorized', 403, 'You must be logged in to answer a question')
     }
 
     const user = await getUserBySessionToken(authToken)
 
-    if(!user) {
-        throw Error('unauthorized')
+    if (!user) {
+        return await sendDefaultErrorResponse(event, 'Unauthorized', 403, 'You must be logged in to answer a question')
     }
 
-    console.log('************ create answer *******************')
-
     return await createAnswer(data, user.id)
 })

server/api/ask-jack/answer.ts

@@ -1,13 +1,22 @@
-import { CompatibilityEvent, defineEventHandler, getCookie, readBody } from "h3";
+import { getCookie, readBody } from "h3";
 import { createQuestion } from "~/server/database/repositories/askJackRespository";
-import { getUserBySessionToken } from '~/server/services/sessionService'
+import { getUserBySessionToken } from '~/server/app/services/sessionService'
+import sendDefaultErrorResponse from "~~/server/app/errors/responses/DefaultErrorsResponse";
 
-export default defineEventHandler(async (event: CompatibilityEvent) => {
+export default eventHandler(async (event) => {
+    //todo: add validation
     const body = await readBody(event)
+    const authToken = getCookie(event, 'auth_token')
 
-    const authToken = getCookie(event, 'auth_token')  
+    if (!authToken) {
+        return await sendDefaultErrorResponse(event, 'Unauthorized', 403, 'You must be logged in to ask a question')
+    }
 
-    const user  = await getUserBySessionToken(authToken)
+    const user = await getUserBySessionToken(authToken)
+
+    if (!user) {
+        return await sendDefaultErrorResponse(event, 'Unauthorized', 403, 'You must be logged in to ask a question')
+    }
 
     const data: IQuestionPost = body.data
 

server/api/ask-jack/ask.ts

@@ -1,22 +1,31 @@
 
 import { defineEventHandler, getCookie, sendError } from "h3";
 import { findQuestion } from "~/server/database/repositories/askJackRespository";
-import { getUserBySessionToken } from '~/server/services/sessionService'
+import { getUserBySessionToken } from '~/server/app/services/sessionService'
 import { deleteQuestion } from "~/server/database/repositories/askJackRespository";
+import sendDefaultErrorResponse from "~~/server/app/errors/responses/DefaultErrorsResponse";
 
 export default defineEventHandler(async (event) => {
     const body = await readBody(event)
+    const question = await findQuestion(parseInt(body.questionId))
+    const authToken = getCookie(event, 'auth_token')
 
-    const question =  await findQuestion(parseInt(body.questionId))
-    const authToken = getCookie(event, 'auth_token')  
-    const user  = await getUserBySessionToken(authToken)
+    //todo: replace everywere with middleware
+    if (authToken == null) {
+        return await sendDefaultErrorResponse(event, 'Unauthorized', 403, 'You must be logged in to answer a question')
+    }
+    const user = await getUserBySessionToken(authToken)
+
+    if (!user) {
+        return await sendDefaultErrorResponse(event, 'Unauthorized', 403, 'You must be logged in to answer a question')
+    }
 
     const isMine = user.id == question.authorId
 
 
-    if(!isMine) {
+    if (!isMine) {
         sendError(event, createError({ statusCode: 403, statusMessage: 'Unauthorized' }))
     }
-    
+
     return await deleteQuestion(question.id)
 })

server/api/ask-jack/delete-question.ts

@@ -1,14 +1,14 @@
 
 import { defineEventHandler, getCookie } from "h3";
 import { findQuestion } from "~/server/database/repositories/askJackRespository";
-import { getUserBySessionToken } from '~/server/services/sessionService'
+import { getUserBySessionToken } from '~/server/app/services/sessionService'
 import { editQuestion } from "~/server/database/repositories/askJackRespository";
 
 export default defineEventHandler(async (event) => {
     const body = await readBody(event)
     const data: IQuestionPost = body.data
     const questionId = data.id
-
+// todo: add validation
     const question =  await findQuestion(questionId)
 
     question.description = data.description

server/api/ask-jack/edit-question.ts

@@ -13,5 +13,5 @@ export default eventHandler(async (event) => {
          return {...question, authName: '@' + user.username};
     }))
 
-    return await questionsWithAuth
+    return questionsWithAuth
 })

server/api/ask-jack/search.ts

@@ -1,8 +1,7 @@
-import { IUser } from '~/types/IUser';
 import { getCookie } from 'h3'
-import { getUserBySessionToken } from '~~/server/services/sessionService'
+import { getUserBySessionToken } from '~~/server/app/services/sessionService'
 
-export default defineEventHandler<IUser|null>(async (event) => {
+export default defineEventHandler(async (event) => {
   const authToken = getCookie(event, 'auth_token')  
 
   if(!authToken) {

server/api/auth/getByAuthToken.ts

@@ -1,13 +1,13 @@
-import { sanitizeUserForFrontend } from '~/server/services/userService';
 import bcrypt from 'bcrypt'
 import { getUserByEmail } from '~/server/database/repositories/userRespository';
 import { sendError, H3Event } from "h3"
-import { makeSession } from '~/server/services/sessionService';
 import { ZodError } from "zod"
-import { getMappedError } from '~/server/helpers/errorMapper';
-import loginRequest from '~/server/App/formRequests/LoginRequest';
-import sendZodErrorResponse from '~/server/App/responses/ZodErrorsResponse';
-import sendDefaultErrorResponse from '~/server/App/responses/DefaultErrorsResponse';
+import loginRequest from '~~/server/app/formRequests/LoginRequest';
+import sendDefaultErrorResponse from '~~/server/app/errors/responses/DefaultErrorsResponse';
+import { getMappedError } from '~~/server/app/errors/errorMapper';
+import { makeSession } from '~~/server/app/services/sessionService';
+import { sanitizeUserForFrontend } from '~~/server/app/services/userService';
+import sendZodErrorResponse from '~~/server/app/errors/responses/ZodErrorsResponse';
 
 const standardAuthError = getMappedError('Authentication', 'Invalid Credentials')
 
@@ -39,6 +39,6 @@ export default eventHandler(async (event: H3Event) => {
       return await sendZodErrorResponse(event, error.data)
     }
 
-    return await sendDefaultErrorResponse(event, 'Unauthenticated', error)
+    return await sendDefaultErrorResponse(event, 'Unauthenticated', 401, error)
   }
 })

server/api/auth/login.ts

@@ -1,6 +1,6 @@
-import {CompatibilityEvent, setCookie} from "h3";
+import { deleteCookie } from "h3";
 
-export default async (event: CompatibilityEvent) => {
-  setCookie(event, 'auth_token', null)
+export default eventHandler((event) => {
+  deleteCookie(event, 'auth_token')
   return 'successfully logged out'
-}
+})

server/api/auth/logout.ts

@@ -2,12 +2,12 @@ import { H3Event, sendError } from 'h3'
 import bcrypt from 'bcrypt'
 import { IUser } from '~/types/IUser';
 import { createUser } from '~/server/database/repositories/userRespository'
-import { makeSession } from '~/server/services/sessionService';
 import { ZodError } from "zod"
-import { validateUser } from '~/server/services/userService';
-import sendZodErrorResponse from '~/server/App/responses/ZodErrorsResponse';
-import sendDefaultErrorResponse from '~/server/App/responses/DefaultErrorsResponse';
-import registerRequest from '~/server/App/formRequests/RegisterRequest';
+import sendDefaultErrorResponse from '~~/server/app/errors/responses/DefaultErrorsResponse';
+import registerRequest from '~/server/app/formRequests/RegisterRequest';
+import { validateUser } from '~/server/app/services/userService';
+import { makeSession } from '~~/server/app/services/sessionService';
+import sendZodErrorResponse from '~~/server/app/errors/responses/ZodErrorsResponse';
 
 export default eventHandler(async (event: H3Event) => {
   try {
@@ -38,6 +38,6 @@ export default eventHandler(async (event: H3Event) => {
       return await sendZodErrorResponse(event, error.data)
     }
 
-    return await sendDefaultErrorResponse(event, 'oops', error)
+    return await sendDefaultErrorResponse(event, 'oops', 500, error)
   }
 })

server/api/auth/register.ts

@@ -1,20 +1,18 @@
 import Stripe from 'stripe';
-import { CompatibilityEvent, defineEventHandler, readBody } from "h3";
+import { readBody } from "h3";
 
 const config = useRuntimeConfig()
 const stripe = new Stripe(config.private.stripeSecretKey, null);
 
-export default defineEventHandler(async (event: CompatibilityEvent) => {
- const body = await readBody(event)
- const session_id = body.session_id
- 
- const returnUrl = config.public.appDomain
+export default eventHandler(async (event) => {
+    const body = await readBody(event)
+    const session_id = body.session_id
+    const returnUrl = config.public.appDomain
+    const checkoutSession = await stripe.checkout.sessions.retrieve(session_id);
+    const portalSession = await stripe.billingPortal.sessions.create({
+        customer: checkoutSession.customer as string,
+        return_url: returnUrl,
+    });
 
- const checkoutSession = await stripe.checkout.sessions.retrieve(session_id);
- const portalSession = await stripe.billingPortal.sessions.create({
-  customer: checkoutSession.customer as string,
-  return_url: returnUrl,
- });
-
- await sendRedirect(event, portalSession.url)
+    await sendRedirect(event, portalSession.url)
 })

server/api/stripe/createPortalSession.ts

@@ -1,5 +1,6 @@
 import Stripe from 'stripe';
-import { handleSubscriptionChange } from '~~/server/services/stripeService';
+import sendDefaultErrorResponse from '~~/server/app/errors/responses/DefaultErrorsResponse';
+import { handleSubscriptionChange } from '~~/server/app/services/stripeService';
 
 export default defineEventHandler(async (event) => {
 
@@ -9,14 +10,10 @@ export default defineEventHandler(async (event) => {
 
   const isSubscriptionEvent = stripeEvent.type.startsWith('customer.subscription')
 
-  if(isSubscriptionEvent){
+  if (isSubscriptionEvent) {
     handleSubscriptionChange(subscription, stripeEvent.created);
     return `handled ${stripeEvent.type}.`
   }
 
-  console.log(`Unhandled event type ${stripeEvent.type}`);
-
-  event.res.statusCode = 400
-  
-  return `could not handle ${stripeEvent.type}. No functionality set.`
+  return sendDefaultErrorResponse(event, 'oops', 400, `could not handle ${stripeEvent.type}. No functionality set.`)
 })