Fix validations

cypress/integration/auth.test.js

@@ -46,6 +46,14 @@ describe('Auth', () => {
         cy.wrap($el.checkValidity()).should('to.be', false)
       })
     })
+
+    it('should not allow visiting login page when the user is logged in', () => {
+      cy.login()
+
+      cy.visit('/#/login')
+
+      cy.url().should('match', /\/#\/$/)
+    })
   })
 
   describe('Register', () => {
@@ -81,5 +89,13 @@ describe('Auth', () => {
       cy.contains('email has already been taken')
       cy.contains('username has already been taken')
     })
+
+    it('should not allow visiting register page when the user is logged in', () => {
+      cy.login()
+
+      cy.visit('/#/register')
+
+      cy.url().should('match', /\/#\/$/)
+    })
   })
 })

src/pages/Login.vue

@@ -75,6 +75,8 @@ const form = reactive<PostLoginForm>({
 const errors = ref<PostLoginErrors>({})
 
 const login = async () => {
+  errors.value = {}
+
   if (!formRef.value?.checkValidity()) return
 
   const result = await postLogin(form)

src/pages/Register.vue

@@ -83,6 +83,8 @@ const form = reactive<PostRegisterForm>({
 const errors = ref<PostRegisterErrors>({})
 
 const register = async () => {
+  errors.value = {}
+
   if (!formRef.value?.checkValidity()) return
 
   const result = await postRegister(form)

src/router.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory, RouteParams } from 'vue-router'
 import Home from './pages/Home.vue'
+import { isAuthorized } from './store/user'
 
 export type AppRouteNames = 'global-feed'
 | 'my-feed'
@@ -50,11 +51,13 @@ export const router = createRouter({
       name: 'login',
       path: '/login',
       component: () => import('./pages/Login.vue'),
+      beforeEnter: () => !isAuthorized.value,
     },
     {
       name: 'register',
       path: '/register',
       component: () => import('./pages/Register.vue'),
+      beforeEnter: () => !isAuthorized.value,
     },
     {
       name: 'profile',

src/utils/map-checkable-response.spec.ts

@@ -1,3 +1,4 @@
+import wrapTests from 'src/utils/test/wrap-tests'
 import { ValidationError, AuthorizationError, NetworkError } from 'src/types/error'
 import { Either, fail, isEither, success } from './either'
 import { mapAuthorizationResponse, mapValidationResponse } from './map-checkable-response'
@@ -53,19 +54,24 @@ describe('# mapValidationResponse', function () {
     expect(result.value).toEqual(RESPONSE)
   })
 
-  it('should return Either with ValidationError and failed Response', async function () {
-    const RESPONSE = { ok: false, status: 422, json: () => Promise.resolve({ errors: { foo: 'bar' } }) }
-    const response = createCheckableResponse(RESPONSE)
-
-    const result = mapValidationResponse<ValidationErrors, Partial<Response>>(response)
-
-    expect(isEither(result)).toBe(true)
-    expect(result.isFail()).toBe(true)
-    expect(result.value).toBeInstanceOf(ValidationError)
-    expect(result.isFail() && await result.value.getErrors()).toEqual((await RESPONSE.json()).errors)
+  wrapTests({
+    task: 'should return Either with ValidationError and failed Response',
+    list: [422, 403],
+    testName: (status) => `status code ${status}`,
+    fn: async (status) => {
+      const RESPONSE = { ok: false, status, json: () => Promise.resolve({ errors: { foo: 'bar' } }) }
+      const response = createCheckableResponse(RESPONSE)
+
+      const result = mapValidationResponse<ValidationErrors, Partial<Response>>(response)
+
+      expect(isEither(result)).toBe(true)
+      expect(result.isFail()).toBe(true)
+      expect(result.value).toBeInstanceOf(ValidationError)
+      expect(result.isFail() && await result.value.getErrors()).toEqual((await RESPONSE.json()).errors)
+    },
   })
 
-  it('should throw NetworkError when Response is failed with status != 422', function () {
+  it('should throw NetworkError when Response is failed with status other than 422 and 403', function () {
     const RESPONSE = { ok: false, status: 400 }
     const response = createCheckableResponse(RESPONSE)
 

src/utils/map-checkable-response.ts

@@ -15,7 +15,7 @@ export const mapAuthorizationResponse = <T>(result: Either<NetworkError, T>): Ei
 export const mapValidationResponse = <E, T>(result: Either<NetworkError, T>): Either<ValidationError<E>, T> => {
   if (result.isOk()) {
     return success(result.value)
-  } else if (result.value.response.status === 422) {
+  } else if ([422, 403].includes(result.value.response.status)) {
     return fail(new ValidationError<E>(result.value.response))
   } else {
     throw result.value