th-90: Customer sign-up flow be/fe (#153)

* th-90: + various improvements

* th-90: * fix the behaviour of header sign-in button and add default navigate after sign-in

* th-90: * fix frontend issues after merge with development

* th-90: * fix backend routing for customer sign-up

* th-90: * fix dissapearing background image in sign-up

* th-90: * prettify some types

* th-90: + add frontend support of server errors for forms

* th-90: * fix tsconfig in shared folder

* th-90: + add sign-up button to header

* th-90: * change backend auth handler to send distinct errors on violation of email/phone constraints

* th-90: - remove unused import

* th-90: * temporarily revert constraint constants from the tables-schema

* th-90: * move database unique violation error handling to separate error, small fixes

* th-90: * resolve problems after merge developement

* th-90: * change user type inside auth slice, various minor fixes after code review

* th-90: * more minor fixes

* th-90: * change user.group to user.group.key

* th-90: * fix issues after code-review

* th-90: + add error popups near the form elements on validation error, more fixes according to code review

* th-90: + repeat of the previous commit

* th-90: * fix issue with error appearence control

* th-90: - remove thunk serializer wrapper and use rejectWithValue instead

* th-90: * rework error handling to use redux state instead of direct interception

* th-90: * make proper universal error handling hook and extract logic from the form component

* th-90: * cosmetic improvements

* th-90: * add enum to filename

* th-90: * make error in slice possible to be null instead of undefined, other minor fixes

* th-90: * more minor improvements according to review

* th-90: * update auth component logic

* th-90: - remove redundant useEffect

* th-90: + add knexfile back and fix dependencies inside input component

Author: Some14u

backend/src/libs/packages/http/http.ts

@@ -1,4 +1,5 @@
 export { HttpCode } from './libs/enums/enums.js';
 export { HttpMessage } from './libs/enums/enums.js';
+export { HttpHeader } from './libs/enums/enums.js';
 export { HttpError } from './libs/exceptions/exceptions.js';
 export { type HttpMethod } from './libs/types/types.js';

backend/src/libs/packages/http/libs/enums/enums.ts

@@ -1,2 +1 @@
-export { HttpCode } from 'shared/build/index.js';
-export { HttpMessage } from 'shared/build/index.js';
+export { HttpCode, HttpHeader, HttpMessage } from 'shared/build/index.js';

backend/src/libs/types/types.ts

@@ -6,7 +6,6 @@ export {
   type OperationResult,
   type RequireProperty,
   type ServerCommonErrorResponse,
-  type ServerErrorResponse,
   type ServerValidationErrorResponse,
   type ValidationSchema,
   type ValueOf,

backend/src/packages/auth/auth.app-plugin.ts

@@ -1,7 +1,7 @@
 import { type FastifyReply, type FastifyRequest } from 'fastify';
 import fp from 'fastify-plugin';
 
-import { HttpMessage } from '~/libs/packages/http/http.js';
+import { HttpHeader, HttpMessage } from '~/libs/packages/http/http.js';
 import { type ValueOf } from '~/libs/types/types.js';
 
 import { AuthStrategy } from './auth.js';
@@ -23,7 +23,10 @@ const authPlugin = fp<AuthPluginOptions>((fastify, options, done) => {
       done: (error?: Error) => void,
     ): Promise<void> => {
       try {
-        const token = request.headers.authorization?.replace('Bearer ', '');
+        const token = request.headers[HttpHeader.AUTHORIZATION]?.replace(
+          'Bearer ',
+          '',
+        );
 
         if (!token && isJwtRequired) {
           return done(createUnauthorizedError(HttpMessage.UNAUTHORIZED));

backend/src/packages/auth/auth.service.ts

@@ -63,37 +63,46 @@ class AuthService {
   private async checkIsExistingUser({
     email,
     phone,
-  }: CustomerSignUpRequestDto | BusinessSignUpRequestDto): Promise<boolean> {
+  }: CustomerSignUpRequestDto | BusinessSignUpRequestDto): Promise<void> {
     const existingUser = await this.userService.findByPhoneOrEmail(
       phone,
       email,
     );
 
-    return Boolean(existingUser);
+    if (email === existingUser?.email) {
+      throw new HttpError({
+        message: HttpMessage.USER_EMAIL_EXISTS,
+        status: HttpCode.CONFLICT,
+      });
+    }
+
+    if (phone === existingUser?.phone) {
+      throw new HttpError({
+        message: HttpMessage.USER_PHONE_EXISTS,
+        status: HttpCode.CONFLICT,
+      });
+    }
   }
 
   private async checkIsExistingBusiness({
     taxNumber,
-  }: BusinessSignUpRequestDto): Promise<boolean> {
+  }: BusinessSignUpRequestDto): Promise<void> {
     const existingBusiness = await this.businessService.checkIsExistingBusiness(
       { taxNumber },
     );
 
-    return Boolean(existingBusiness);
-  }
-
-  public async signUpCustomer(
-    payload: CustomerSignUpRequestDto,
-  ): Promise<UserEntityObjectWithGroupT> {
-    const isExistingUser = await this.checkIsExistingUser(payload);
-
-    if (isExistingUser) {
+    if (existingBusiness) {
       throw new HttpError({
-        message: HttpMessage.USER_EXISTS,
+        message: HttpMessage.BUSINESS_EXISTS,
         status: HttpCode.CONFLICT,
       });
     }
+  }
 
+  public async signUpCustomer(
+    payload: CustomerSignUpRequestDto,
+  ): Promise<UserEntityObjectWithGroupT> {
+    await this.checkIsExistingUser(payload);
     const group = await this.groupService.findByKey(UserGroupKey.CUSTOMER);
 
     if (!group) {
@@ -106,7 +115,6 @@ class AuthService {
       ...payload,
       groupId: group.id,
     });
-
     const userWithToken = await this.generateAccessTokenAndUpdateUser(
       newUser.id,
     );
@@ -117,22 +125,8 @@ class AuthService {
   public async signUpBusiness(
     payload: BusinessSignUpRequestDto,
   ): Promise<UserEntityObjectWithGroupAndBusinessT> {
-    const isExistingUser = await this.checkIsExistingUser(payload);
-    const isExistingBusiness = await this.checkIsExistingBusiness(payload);
-
-    if (isExistingUser) {
-      throw new HttpError({
-        message: HttpMessage.USER_EXISTS,
-        status: HttpCode.CONFLICT,
-      });
-    }
-
-    if (isExistingBusiness) {
-      throw new HttpError({
-        message: HttpMessage.BUSINESS_EXISTS,
-        status: HttpCode.CONFLICT,
-      });
-    }
+    await this.checkIsExistingUser(payload);
+    await this.checkIsExistingBusiness(payload);
 
     const {
       phone,

backend/src/packages/groups/group.entity.ts

@@ -1,14 +1,18 @@
 import { type IEntity } from '~/libs/interfaces/interfaces.js';
 import { type NullableProperties } from '~/libs/types/types.js';
 
+import {
+  type UserGroupEntityT,
+  type UserGroupKeyT,
+} from '../users/libs/types/types.js';
 import { type GroupEntityT } from './libs/types/types.js';
 
 class GroupEntity implements IEntity {
   private 'id': number | null;
 
   private 'name': string;
 
-  private 'key': string;
+  private 'key': UserGroupKeyT;
 
   private constructor({
     id,
@@ -17,7 +21,7 @@ class GroupEntity implements IEntity {
   }: NullableProperties<GroupEntityT, 'id'>) {
     this.id = id;
     this.name = name;
-    this.key = key;
+    this.key = key as UserGroupKeyT;
   }
 
   public static initialize({
@@ -43,15 +47,15 @@ class GroupEntity implements IEntity {
     });
   }
 
-  public toObject(): GroupEntityT {
+  public toObject(): UserGroupEntityT {
     return {
       id: this.id as number,
       name: this.name,
       key: this.key,
     };
   }
 
-  public toNewObject(): Omit<GroupEntityT, 'id'> {
+  public toNewObject(): Omit<UserGroupEntityT, 'id'> {
     return {
       name: this.name,
       key: this.key,

backend/src/packages/users/libs/types/types.ts

@@ -16,5 +16,4 @@ export {
   type UserGetAllResponseDto,
   type UserGroupEntityT,
   type UserGroupKeyT,
-  type UserGroupNameT,
 } from 'shared/build/index.js';

frontend/package.json

@@ -27,6 +27,7 @@
     "@rollup/pluginutils": "5.0.4",
     "@svgr/core": "8.1.0",
     "@tanstack/react-table": "8.9.3",
+    "balloon-css": "1.2.0",
     "clsx": "2.0.0",
     "modern-normalize": "2.0.0",
     "react": "18.2.0",

frontend/src/assets/css/plugins/balloon-css.plugin.scss

@@ -0,0 +1,30 @@
+@use "sass:color";
+
+@import "../vars.scss";
+@import "balloon-css/src/balloon.scss";
+
+:root [aria-label][data-balloon-pos] {
+  --balloon-border-radius: 4px;
+  --balloon-color: #{color.adjust($red-dark, $lightness: -10%)};
+  --balloon-font-size: 16px;
+  --balloon-move: 30px;
+  --balloon-text-color: #{$white};
+
+  &::before {
+    right: 8px;
+    z-index: 11;
+  }
+
+  &::after {
+    right: 4px;
+    max-width: calc(100% - 8px);
+    font-weight: $font-weight-regular;
+    font-family: $font-family;
+    white-space: normal;
+    box-shadow: 0 3px 6px 0 #{color.adjust(
+        $red-dark,
+        $lightness: - 30%,
+        $alpha: - 0.5
+      )};
+  }
+}

frontend/src/assets/css/plugins/plugins.scss

@@ -0,0 +1 @@
+@import "./balloon-css.plugin.scss";