diff --git a/src/middlewares/validation.middleware.ts b/src/middlewares/validation.middleware.ts index be592d4c9b39e912d92e2d4010bf652b8b44d7f3..726f9201f1e0e4bd14155c554e7a3c68ca57a611 100644 --- a/src/middlewares/validation.middleware.ts +++ b/src/middlewares/validation.middleware.ts @@ -2,6 +2,8 @@ import { NextFunction, Request, Response } from 'express'; import { AnyZodObject } from 'zod'; import { IRequestResponseHandler } from '@interfaces/http.interface'; import { ErrorMiddleware } from '.'; +import { HttpException } from '@exceptions/http.exception'; +import { HttpStatusCode } from '@constants/http.enum'; class ValidationMiddleware { public static validate(schema: AnyZodObject) { @@ -21,10 +23,19 @@ class ValidationMiddleware { public static exceptionGuard(handler: IRequestResponseHandler) { return async (req: Request, res: Response) => { + const { email } = req.body; try { await handler(req, res); } catch (error) { - ErrorMiddleware.handle(res, error); + if (error instanceof HttpException && error.statusCode === HttpStatusCode.Unauthorized) { + res.render('login', { + title: "SSO Salman ITB | Login", + error: error.message, + email: email + }); + } else { + ErrorMiddleware.handle(res, error); + } } }; } diff --git a/src/services/auth.service.ts b/src/services/auth.service.ts index 9999e4aa28c5644402c2161398d3f7136a6a9b4b..3543625806a0e7b050eb0d43d2cbd75b851f9af5 100644 --- a/src/services/auth.service.ts +++ b/src/services/auth.service.ts @@ -29,7 +29,9 @@ export class AuthService { } return res.render("login", { - title: "SSO Server | Login" + title: "SSO Salman ITB | Login", + error: null, + email: null }); } diff --git a/src/views/login.ejs b/src/views/login.ejs index 7632682dc6d6fbc62ae5653ba311d975c0dd59e5..f94879d7fd765707f45ed34891b18ad270fc3c90 100644 --- a/src/views/login.ejs +++ b/src/views/login.ejs @@ -52,10 +52,22 @@ input{ <script src="https://cdn.tailwindcss.com"></script> </head> - <body class="text-center w-screen flex items-center justify-center fixed"> - <div class="bg-white flex flex-col w-fit h-fit min-w-4/6 min-h-4/6 rounded-lg border-2 shadow-lg"> - <form class="flex flex-col items-center px-20 py-10" method="post"> - <div class="flex flex-row justify-center item-center pr-2 pt-"> + <body class="text-center w-screen flex flex-col items-center justify-center fixed"> + <% if (error) { %> + <div class="flex items-center w-[27.5%] p-4 mb-4 text-sm text-red-700 border border-red-300 rounded-lg bg-red-50" role="alert"> + <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> + <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/> + </svg> + <span class="sr-only">Info</span> + <div> + <span class="font-medium"><%= error %></span> + </div> + </div> + <% } %> + + <div class="bg-white flex flex-col w-[27.5%] rounded-lg border shadow-lg"> + <form class="flex flex-col items-center py-10" method="post"> + <div class="flex flex-row justify-center item-center pr-1 mb-2"> <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="54.000000pt" height="54pt" viewBox="0 0 154.000000 152.000000" preserveAspectRatio="xMidYMid meet"> @@ -74,13 +86,15 @@ input{ </g> </svg> </div> - <label for="inputEmail" class="sr-only">Email address</label> - <input type="email" name="email" id="inputEmail" class="border-2 border my-2 p-2 rounded-lg" placeholder="Email address" required autofocus> - <label for="inputPassword" class="sr-only">Password</label> - <input type="password" name="password" id="inputPassword" class="border-2 border p-2 my-2 rounded-lg" placeholder="Password" required> - <div class="checkbox mb-3"> - </div> - <button class="btn btn-lg btn-primary btn-block border-2 w-fit px-4 py-2 font-mono rounded-lg bg-[#957c54] text-white hover:bg[#000000]" type="submit">Sign in</button> + <div class="w-3/5 flex flex-col items-start mb-2"> + <label for="inputEmail" class="block text-sm font-medium text-gray-700">Email</label> + <input type="email" name="email" id="inputEmail" class="w-full border my-2 p-3 rounded-lg text-sm" placeholder="Email Address" value="<%= email %>" required autofocus> + </div> + <div class="w-3/5 flex flex-col items-start mb-6"> + <label for="inputPassword" class="block text-sm font-medium text-gray-700">Password</label> + <input type="password" name="password" id="inputPassword" class="w-full border my-2 p-3 rounded-lg text-sm" placeholder="••••••••" required> + </div> + <button class="btn btn-lg btn-primary btn-block border w-fit px-4 py-2 rounded-lg bg-[#957c54] text-white text-sm" type="submit">Sign in</button> </form> </div> </body>