chore: setup tailwindcss with nodejs in the server-side

hdev14 · Feb 18, 2024 · 337f39b · 337f39b
1 parent 6b0b9ff
commit 337f39b
Show file tree

Hide file tree

Showing 9 changed files with 1,590 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,14 +4,16 @@
   "description": "Application to create alerts of B3's stocks",
   "main": "dist/index.js",
   "scripts": {
-    "start:dev": "dotenv -e .env -- npx ts-node-dev -r tsconfig-paths/register --watch ./src --inspect --transpile-only ./src/index.ts",
+    "start:dev": "dotenv -e .env -- npx ts-node-dev -r tsconfig-paths/register --watch ./src --inspect --transpile-only ./src/index.ts ",
     "start:e2e": "dotenv -e .env.e2e -- npx ts-node-dev -r tsconfig-paths/register --watch ./src --inspect --transpile-only ./src/index.ts",
     "start:prod": "dotenv -e .env -- node -r ./tsconfig-paths-bootstrap.js ./build/src/index.js",
     "build": "tsc --project tsconfig.build.json && ./minify.sh ",
     "test:unit": "dotenv -e .env.test -- npx jest unit --passWithNoTests --watch --silent=false --config=jest.unit.config.js",
     "test:int": "dotenv -e .env.test -- npx jest int --passWithNoTests --watch --silent=false --detectOpenHandles --config=jest.int.config.js",
     "test:e2e:api": "dotenv -e .env.test -- npx jest e2e --passWithNoTests --watch --silent=false --detectOpenHandles --runInBand --config=jest.e2e.config.js",
-    "test:e2e:web": "dotenv -e .env.test -- npx playwright test --ui"
+    "test:e2e:web": "dotenv -e .env.test -- npx playwright test --ui",
+    "css:dev": "tailwindcss -i ./src/application/public/css/tailwindcss.css -o ./src/application/public/css/global.css",
+    "css:prod": "tailwindcss -i ./src/application/public/css/tailwindcss.css -o ./build/src/application/public/css/global.css --minifiy"
   },
   "keywords": [],
   "author": "",
@@ -41,6 +43,7 @@
     "lint-staged": "^15.2.2",
     "nodemon": "^3.0.2",
     "supertest": "^6.3.3",
+    "tailwindcss": "^3.4.1",
     "ts-jest": "^29.1.1",
     "ts-node-dev": "^2.0.0",
     "tsconfig-paths": "^4.2.0",

diff --git a/src/application/pages/login.html b/src/application/pages/login.html
@@ -34,7 +34,7 @@ <h1 class="text-center text-xl mb-10">Entrar no B3 Alertas</h1>
       <div class="flex justify-between">
         <a class="text-blue-700 hover:text-blue-800" href="/pages/forgot-password">Esqueceu a senha?</a>
 
-        <button class="my-2 self-end px-8 py-2 rounded text-white font-semibold bg-blue-600 hover:bg-blue-700 w-auto"
+        <button class="my-2 self-end px-8 py-2 rounded-md text-white font-semibold bg-blue-600 hover:bg-blue-700 w-auto"
           type="submit" data-testid="login-submit">
           Entrar
         </button>

diff --git a/src/application/pages/partials/_head.html b/src/application/pages/partials/_head.html
@@ -23,7 +23,6 @@
   <script type="application/javascript" src="https://unpkg.com/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
   <script src="https://cdn.tailwindcss.com"></script>
 
-  {{> components/styles}}
   {{> components/scripts}}
 </head>
 

diff --git a/src/application/pages/signup.html b/src/application/pages/signup.html
@@ -1,24 +1,69 @@
 {{> _head}}
-<main>
-  <h1>{{title}}</h1>
+<main class="w-screen h-screen text-gray-900 bg-gradient-to-r from-indigo-500 via-blue-500 to-blue-900">
+  <div class="p-4 mx-auto w-2/5 h-full flex flex-col justify-center items-center gap-10">
 
-  <form id="signup-form" data-testid="signup-form" method="post" action="/forms/signup">
-    <input id="name" type="text" name="name" data-testid="signup-name" />
-    <ul id="name-error-messages" data-testid="name-error-messages"></ul>
+    <form class="flex jusitfy-left flex-col w-2/3 px-10 py-20 rounded-md bg-white shadow-md" id="signup-form"
+      data-testid="signup-form" method="post" action="/forms/signup">
+      <h1 class="text-center text-xl mb-10">Cadastre-se na B3 Alertas</h1>
 
-    <input id="email" type="email" name="email" data-testid="signup-email" />
-    <ul id="email-error-messages" data-testid="email-error-messages"></ul>
+      <div class="flex flex-col mb-2 w-full">
+        <label class="self-start m-1 text-md text-gray-600 font-medium" for="name">
+          Nome
+        </label>
 
-    <input id="phone-number" type="text" name="phone_number" data-testid="signup-phone-number" />
-    <ul id="phone-number-error-messages" data-testid="phone-number-error-messages"></ul>
+        <input class="rounded h-11 px-2 text-gray-700 text-lg border border-gray-400 hover:border-blue-400" id="name"
+          type="text" name="name" data-testid="signup-name" />
 
-    <input id="password" type="password" name="password" data-testid="signup-password" />
-    <ul id="password-error-messages" data-testid="password-error-messages"></ul>
+        <ul class="self-start flex flex-wrap gap-1 justify-start items-start text-red-500 m-1 text-sm"
+          id="name-error-messages" data-testid="name-error-messages"></ul>
+      </div>
 
-    <button type="submit" data-testid="signup-submit">
-      Signup
-    </button>
-  </form>
+      <div class="flex flex-col mb-2 w-full">
+        <label class="self-start m-1 text-md text-gray-600 font-medium" for="email">
+          E-mail
+        </label>
+
+        <input class="rounded h-11 px-2 text-gray-700 text-lg border border-gray-400 hover:border-blue-400" id="email"
+          type="email" name="email" data-testid="signup-email" />
+
+        <ul class="self-start flex flex-wrap gap-1 justify-start items-start text-red-500 m-1 text-sm"
+          id="email-error-messages" data-testid="email-error-messages"></ul>
+      </div>
+
+      <div class="flex flex-col mb-2 w-full">
+        <label class="self-start m-1 text-md text-gray-600 font-medium" for="phone-number">
+          Telefone:
+        </label>
+
+        <input class="rounded h-11 px-2 text-gray-700 text-lg border border-gray-400 hover:border-blue-400"
+          id="phone-number" type="text" name="phone_number" data-testid="signup-phone-number" />
+
+        <ul class="self-start flex flex-wrap gap-1 justify-start items-start text-red-500 m-1 text-sm"
+          id="phone-number-error-messages" data-testid="phone-number-error-messages"></ul>
+      </div>
+
+      <div class="flex flex-col mb-2 w-full">
+        <label class="self-start m-1 text-md text-gray-600 font-medium" for="password">
+          Senha
+        </label>
+
+        <input class="rounded h-11 px-2 text-gray-700 text-lg border border-gray-400 hover:border-blue-400"
+          id="password" type="password" name="password" data-testid="signup-password" />
+
+        <ul class="self-start flex flex-wrap gap-1 justify-start items-start text-red-500 m-1 text-sm"
+          id="password-error-messages" data-testid="password-error-messages"></ul>
+      </div>
+
+      <button class="btn-primary" type="submit" data-testid="signup-submit">
+        Concluir
+      </button>
+
+      <p class="self-center mt-10">
+        Já possue uma conta?
+        <a class="text-blue-700 hover:text-blue-800" href="/pages/login">Fazer login.</a>
+      </p>
+    </form>
+  </div>
 </main>
 
 <script>