feat: auth roles

Author: guiseek

.gitignore

@@ -43,3 +43,5 @@ Thumbs.db
 .env
 
 .angular
+assets/server/**/*
+assets/client/**/*

.prettierignore

@@ -4,3 +4,4 @@
 /.nx/cache
 /.nx/workspace-data
 .angular
+/diagrams

README.md

@@ -1,16 +1,17 @@
 ```
-     _                           
+     _
   __| | _____   ___ __ ___ __  __
  / _` |/ _ \ \ / / '_ ` _ \\ \/ /
-| (_| |  __/\ V /| | | | | |>  < 
+| (_| |  __/\ V /| | | | | |>  <
  \__,_|\___| \_/ |_| |_| |_/_/\_\
 ```
-# dev member experience
 
+# dev member experience
 
 ## Para executar em dev
 
 ### Requisitos
+
 1. [pnpm](https://pnpm.io/installation) instalado
 1. [docker](https://docs.docker.com/engine/install) instalado
 
@@ -48,26 +49,29 @@ pnpm dev
 
 ## Para commits
 
+Os commits podem ser feitos em português, mas use inglês para termos técnicos, não tente traduzi-los quando eles são conhecidos e usados em inglês.
+
 ```sh
 pnpm cmt
 ```
 
 Responda as perguntas para fazer o commit.
 
-
 ## Responsabilidades e relacionamentos
 
-Trata-se de responsabilidade e relacionamentos, ou seja, qual a responsabilidade de cada camada e quais camadas podem depender diretamente uma das outras. Na tabela a seguir vemos que camadas do tipo `util` podem depender apenas de camadas que também sejam do tipo `util`, camadas do tipo `domain` podem depender apenas de camadas do tipo `util` e `api`, camadas do tipo `data-source` podem depender apenas dos tipos `util`, `domain` e `api`, e assim por diante...
+Trata-se de responsabilidade e relacionamentos, ou seja, qual a responsabilidade de cada camada e quais camadas podem depender diretamente uma das outras. Esta é uma convenção chamada [enforce module boundaries](https://nx.dev/features/enforce-module-boundaries#enforce-module-boundaries) e quem permite que as regras sejam aplicadas é o [nx](https://nx.dev).
+
+A tabela a seguir representa a configuração no arquivo [`.eslintrc.json`](.eslintrc.json).
 
-Caso tenha interesse em aprofundar neste assunto e descobrir os motivos, recomendo que leia um conteúdo que escrevi ano passado, você pode fazer download através do link a seguir. [Arquitetura em camadas, uma abordagem sobre responsabilidades e relacionamentos](https://conteudode.dev/pdf/nx)
+|            | api | util | domain | data | ui  | feature | resource | app |
+| ---------: | :-: | :--: | :----: | :--: | :-: | :-----: | :------: | :-: |
+|      `api` |  ✓  |  𝗫   |   𝗫    |  𝗫   |  𝗫  |    𝗫    |    𝗫     |  𝗫  |
+|     `util` |  ✓  |  ✓   |   𝗫    |  𝗫   |  𝗫  |    𝗫    |    𝗫     |  𝗫  |
+|   `domain` |  ✓  |  ✓   |   ✓    |  𝗫   |  𝗫  |    𝗫    |    𝗫     |  𝗫  |
+|     `data` |  ✓  |  ✓   |   ✓    |  ✓   |  𝗫  |    𝗫    |    𝗫     |  𝗫  |
+|       `ui` |  ✓  |  ✓   |   𝗫    |  𝗫   |  ✓  |    𝗫    |    𝗫     |  𝗫  |
+|  `feature` |  ✓  |  ✓   |   𝗫    |  ✓   |  ✓  |    ✓    |    𝗫     |  𝗫  |
+| `resource` |  ✓  |  ✓   |   𝗫    |  ✓   |  𝗫  |    𝗫    |    ✓     |  𝗫  |
+|      `app` |  ✓  |  ✓   |   𝗫    |  ✓   |  ✓  |    ✓    |    ✓     |  𝗫  |
 
-|               | util | domain | data-source | data-access | resource | feature | app | api |
-| ------------: | :--: | :----: | :---------: | :---------: | :------: | :-----: | :-: | :-: |
-|        `util` |  ✓   |   ✓    |      ✓      |      ✓      |    ✓     |    ✓    |  ✓  |  ✓  |
-|      `domain` |  𝗫   |   𝗫    |      ✓      |      ✓      |    𝗫     |    𝗫    |  𝗫  |  ✓  |
-| `data-source` |  𝗫   |   𝗫    |      𝗫      |      𝗫      |    ✓     |    𝗫    |  ✓  |  ✓  |
-| `data-access` |  𝗫   |   𝗫    |      𝗫      |      𝗫      |    𝗫     |    ✓    |  ✓  |  ✓  |
-|    `resource` |  𝗫   |   𝗫    |      𝗫      |      𝗫      |    ✓     |    𝗫    |  ✓  |  ✓  |
-|     `feature` |  𝗫   |   𝗫    |      𝗫      |      𝗫      |    𝗫     |    ✓    |  ✓  |  ✓  |
-|         `app` |  𝗫   |   𝗫    |      𝗫      |      𝗫      |    𝗫     |    𝗫    |  𝗫  |  𝗫  |
-|         `api` |  𝗫   |   ✓    |      ✓      |      ✓      |    ✓     |    ✓    |  ✓  |  ✓  |
+Caso tenha interesse em aprofundar neste assunto e descobrir os motivos, recomendo que leia um conteúdo que escrevi ano passado, você pode fazer download através do link [Arquitetura em camadas, uma abordagem sobre responsabilidades e relacionamentos](https://conteudode.dev/pdf/nx).

apps/devmx/public/figures/roles.png

@@ -1,12 +1,18 @@
 import { HttpErrorResponse } from '@angular/common/http';
+import { MessageService } from '@devmx/shared-ui-global';
 import { ErrorHandler, inject } from '@angular/core';
 import { Router } from '@angular/router';
 
 export class AuthErrorHandler implements ErrorHandler {
   router;
 
+  messageService;
+
   constructor() {
     this.router = inject(Router);
+
+    this.messageService = inject(MessageService);
+
     onstorage = this.#onTokenChanged;
   }
 
@@ -18,10 +24,19 @@ export class AuthErrorHandler implements ErrorHandler {
 
   handleError(error: Error): void {
     if (error instanceof HttpErrorResponse) {
+      const { message } = error.error;
+
+      this.showMessage(error.status, message);
+
       if (error.status === 401) {
+        this.router.navigateByUrl('/account/auth');
         localStorage.removeItem('accessToken');
-        // this.router.navigateByUrl('/account/auth');
       }
     }
   }
+
+  showMessage(status: number, message: string) {
+    const type = status >= 400 && status < 500 ? 'error' : 'warn';
+    this.messageService.open({ message, type });
+  }
 }

apps/devmx/public/figures/roles.svg

@@ -0,0 +1,153 @@
+// This file was generated by running 'ng generate @angular/material:m3-theme'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #39B44D, secondary: #FCC500, tertiary: #6C11F3, neutral: #262626
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #002105,
+    20: #00390e,
+    25: #004613,
+    30: #005318,
+    35: #00601d,
+    40: #006e22,
+    50: #008a2e,
+    60: #27a641,
+    70: #49c259,
+    80: #66df72,
+    90: #83fc8b,
+    95: #c7ffc2,
+    98: #ebffe5,
+    99: #f6fff0,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #241a00,
+    20: #3e2e00,
+    25: #4b3900,
+    30: #594400,
+    35: #674f00,
+    40: #765b00,
+    50: #947200,
+    60: #b38b00,
+    70: #d3a500,
+    80: #f5bf00,
+    90: #ffdf93,
+    95: #ffefd0,
+    98: #fff8f1,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #23005c,
+    20: #3c0091,
+    25: #4900ad,
+    30: #5600c9,
+    35: #6400e7,
+    40: #711ff8,
+    50: #8951ff,
+    60: #a078ff,
+    70: #b89bff,
+    80: #d0bcff,
+    90: #e9ddff,
+    95: #f6edff,
+    98: #fef7ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    4: #0b0b0b,
+    6: #101111,
+    10: #1b1c1c,
+    12: #1f2020,
+    17: #2a2a2a,
+    20: #303030,
+    22: #353434,
+    24: #3a3939,
+    25: #3c3b3b,
+    30: #474746,
+    35: #535252,
+    40: #5f5e5e,
+    50: #787776,
+    60: #929090,
+    70: #adabaa,
+    80: #c8c6c5,
+    87: #dcdad9,
+    90: #e4e2e1,
+    92: #eae8e7,
+    94: #f0edec,
+    95: #f3f0ef,
+    96: #f6f3f2,
+    98: #fcf9f8,
+    99: #fffbfb,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #131e13,
+    20: #283327,
+    25: #333e31,
+    30: #3e4a3c,
+    35: #4a5647,
+    40: #556253,
+    50: #6e7b6b,
+    60: #879484,
+    70: #a2af9e,
+    80: #bdcab8,
+    90: #d9e6d4,
+    95: #e7f5e1,
+    98: #f0fdea,
+    99: #f6fff0,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes,  neutral-variant),
+  error: map.get($_palettes, error),
+);
+$_primary: map.merge(map.get($_palettes, primary), $_rest);
+$_secondary: map.merge(map.get($_palettes, secondary), $_rest);
+$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
+
+$green-palettte: $_primary;
+$yellow-palettte: $_secondary;
+$purple-palettte: $_tertiary;
+
+// $light: mat.define-theme((
+//   color: (
+//     theme-type: light,
+//     primary: $_primary,
+//     tertiary: $_tertiary,
+//     use-system-variables: true,
+//   ),
+//   // typography: (
+//   //   use-system-variables: true,
+//   // ),
+// ));

apps/devmx/src/app/handlers/auth-error.ts

@@ -1,5 +1,6 @@
 // For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
+@use './m3-theme' as custom;
 // Plus imports for other components in your app.
 
 body {
@@ -16,8 +17,10 @@ $light: mat.define-theme(
   (
     color: (
       theme-type: light,
-      primary: mat.$green-palette,
-      tertiary: mat.$spring-green-palette,
+      primary: custom.$green-palettte,
+      tertiary: custom.$purple-palettte,
+      // primary: mat.$green-palette,
+      // tertiary: mat.$spring-green-palette,
     ),
     density: (
       scale: 0,

apps/devmx/src/scss/_m3-theme.scss

@@ -1,9 +1,9 @@
 @use '@angular/cdk/overlay-prebuilt.css';
 @use '@angular/material' as mat;
+// @use '/node_modules/@angular/material/core/theming/color-api-backwards-compatibility' as mat;
 @use './scss/theme' as theme;
 @use './scss/utils';
 
-
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
@@ -13,10 +13,10 @@
 
 // Comment out the line below if you want to use the pre-defined typography utility classes.
 // For more information: https://material.angular.io/guide/typography#using-typography-styles-in-your-application.
-// @include mat.typography-hierarchy($devmx-theme);
+// @include mat.typography-hierarchy(theme.$light);
 
 // Comment out the line below if you want to use the deprecated `color` inputs.
-// @include mat.color-variants-backwards-compatibility($devmx-theme);
+// @include mat.color-variants-backwards-compatibility(theme.$light);
 /* You can add global styles to this file, and also import other style files */
 
 html,
@@ -28,13 +28,17 @@ body {
   font-family: Roboto, 'Helvetica Neue', sans-serif;
 }
 
-a:link,
-a:visited,
-a:active {
-  color: rgb(7, 80, 224);
-  text-decoration: none;
+body {
+  a[href] {
+    color: unset;
+    text-decoration: none;
+  }
 
-  &:hover {
-    text-decoration: underline;
+  .error-message {
+    color: mat.get-theme-color(theme.$light, error, 50);
   }
 }
+
+
+@include mat.color-variants-backwards-compatibility(theme.$light);
+@include mat.typography-hierarchy(theme.$light);

apps/devmx/src/scss/_theme.scss

@@ -10,7 +10,7 @@
       "defaultConfiguration": "development",
       "dependsOn": ["build"],
       "options": {
-        "buildTarget": "server:build",
+        "buildTarget": "server:build:development",
         "runBuildTargetDependencies": false
       },
       "configurations": {

apps/devmx/src/styles.scss

@@ -1,11 +1,13 @@
 import { SharedDatabaseModule, SharedResourceModule } from '@devmx/shared-resource';
 import { PresentationResourceModule } from '@devmx/presentation-resource';
 import { AccountResourceModule } from '@devmx/account-resource';
+import { ServeStaticModule } from '@nestjs/serve-static';
 import { Module } from '@nestjs/common';
 import { env } from './envs/env';
 
 @Module({
   imports: [
+    ServeStaticModule.forRoot(env.static),
     SharedResourceModule.forRoot(env),
     SharedDatabaseModule,
     AccountResourceModule,

apps/server/project.json

@@ -0,0 +1,23 @@
+import { join } from 'node:path';
+
+export const env = {
+  production: false,
+  db: {
+    name: process.env.DB_NAME,
+    host: process.env.DB_HOST,
+    port: process.env.DB_PORT,
+    user: process.env.DB_USER,
+    pass: process.env.DB_PASS,
+  },
+  jwt: {
+    secret: process.env.JWT_SECRET,
+  },
+  multer: {
+    photos: {
+      dest: 'assets/server/photos',
+    },
+  },
+  static: {
+    rootPath: join(__dirname, '..', '..', '..', 'assets', 'server'),
+  }
+};