feat: improvement on login

marcelocampanelli · Nov 2, 2023 · f53fede · f53fede
1 parent b7e91aa
commit f53fede
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 144 deletions.
diff --git a/api/docker-compose.yaml b/api/docker-compose.yaml
@@ -11,7 +11,6 @@ services:
     networks:
       - net_service
 
-
   app:
     image: cosmtrek/air:v1.28.0
     working_dir: /app

diff --git a/api/internal/usecase/user/generate_jwt.go b/api/internal/usecase/user/generate_jwt.go
@@ -13,7 +13,10 @@ type CreateJWTInputDTO struct {
 }
 
 type CreateJWTOutputDTO struct {
-	Token string `json:"token"`
+	Token     string `json:"token"`
+	FirstName string `json:"first_name"`
+	LastName  string `json:"last_name"`
+	Email     string `json:"email"`
 }
 
 type CreateJWTUseCase struct {
@@ -46,6 +49,9 @@ func (useCase *CreateJWTUseCase) Execute(input *CreateJWTInputDTO) (*CreateJWTOu
 	})
 
 	return &CreateJWTOutputDTO{
-		Token: tokenString,
+		Token:     tokenString,
+		FirstName: user.FirstName,
+		LastName:  user.LastName,
+		Email:     user.Email,
 	}, nil
 }
diff --git a/api/requests/user.http b/api/requests/user.http
@@ -7,12 +7,12 @@ Content-Type: application/json
   "nickname": "jhondoezim",
   "email": "[email protected]",
   "password": "teste@test",
-  "cpf": "76118993092"
+  "cpf": "30062029029"
 }
 
 ###
 
-PUT http://localhost:8080/api/v1/users/6542d7c967ec844df4ba98fb
+PUT http://localhost:8080/api/v1/users/6544053fcd2eccce67198820
 Content-Type: application/json
 
 {

diff --git a/api/tmp/air.log b/api/tmp/air.log
@@ -0,0 +1 @@
+exit status 1
diff --git a/api/tmp/main b/api/tmp/main
diff --git a/front/src/lib/user/defineUserData.js b/front/src/lib/user/defineUserData.js
@@ -0,0 +1,16 @@
+const defineUserData = async (value) => {
+	const user = {
+		firstName: value.first_name,
+		lastName: value.last_name,
+		email: value.email,
+		token: value.token,
+		cpf: value.cpf,
+		craetedAt: value.created_at,
+		updatedAt: value.updated_at,
+	}
+
+	localStorage.setItem("user", JSON.stringify(user))
+
+};
+
+export default defineUserData;
diff --git a/front/src/lib/user/defineUserToken.js b/front/src/lib/user/defineUserToken.js
diff --git a/front/src/lib/user/tokenIsPresent.js b/front/src/lib/user/tokenIsPresent.js
@@ -1,7 +1,9 @@
 let tokenIsPresent = false;
+let user = localStorage.getItem("user");
 
-if (localStorage.getItem("user_token") !== null) {
-  tokenIsPresent = true;
+
+if (user !== undefined && user !== null) {
+	tokenIsPresent = true;
 }
 
 export default tokenIsPresent;
diff --git a/front/src/routes/login/+page.svelte b/front/src/routes/login/+page.svelte
@@ -1,140 +1,140 @@
 <script lang="js">
-  import axiosApiV1 from "$lib/axios/api/v1/axios";
-  import defineToken from "$lib/user/defineUserToken";
-  import tokenIsPresent from "$lib/user/tokenIsPresent";
-
-  let user = {
-    email: "",
-    password: "",
-  };
-
-  const handleSubmit = async () => {
-    await axiosApiV1
-      .post("/users/auth", user)
-      .then((res) => {
-        defineToken(res.data.token);
-
-        if (tokenIsPresent) {
-          window.location.href = "/boards";
-        }
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
+	import axiosApiV1 from "$lib/axios/api/v1/axios";
+	import defineUserData from "$lib/user/defineUserData.js";
+	import tokenIsPresent from "$lib/user/tokenIsPresent.js";
+
+	let user = {
+		email: "",
+		password: "",
+	};
+
+	const handleSubmit = async () => {
+		await axiosApiV1
+			.post("/users/auth", user)
+			.then((res) => {
+				defineUserData(res.data);
+
+				if (tokenIsPresent == true) {
+					window.location.href = "/boards";
+				}
+			})
+			.catch((err) => {
+				console.log(err);
+			});
+	};
 </script>
 
 <div class="row m-0 p-0">
-  <div
-    class="col-lg-6 col-12 bg-gray-light d-flex justify-content-center align-items-center vh100"
-  >
-    <div class="avatar-login" />
-  </div>
-  <div
-    class="col-12 col-lg-6 d-flex justify-content-center align-items-center flex-column"
-  >
-    <h1 class="mb-5">Acesse sua conta!</h1>
-    <form
-      on:submit={handleSubmit}
-      class="w100 d-flex justify-content-center align-items-center flex-column"
-    >
-      <div class="input-login-container w80">
-        <span class="text-gray">Email</span>
-        <input
-          type="text"
-          placeholder="insira seu email aqui"
-          class="form-control text-gray input-login"
-          bind:value={user.email}
-        />
-      </div>
-      <div class="input-login-container w80 mt-4">
-        <span class="text-gray">Senha</span>
-        <input
-          type="password"
-          placeholder="insira sua senha aqui"
-          class="form-control text-gray input-login"
-          bind:value={user.password}
-        />
-      </div>
-      <button class="btn-login w80 mt-5">login</button>
-
-      <div
-        class="w100 mt-4 d-flex justify-content-center align-items-center flex-column"
-      >
-        <div class="w100 d-flex justify-content-center align-items-center">
-          <div class="detail-or" />
-          <h5 class="color-light-gray">OR</h5>
-          <div class="detail-or" />
-        </div>
-        <h6 class="color-light-gray mt-4">
-          Não tem uma conta?
-          <a href="/" style="text-decoration: none;">Crie uma!</a>
-        </h6>
-      </div>
-    </form>
-  </div>
+	<div
+		class="col-lg-6 col-12 bg-gray-light d-flex justify-content-center align-items-center vh100"
+	>
+		<div class="avatar-login"/>
+	</div>
+	<div
+		class="col-12 col-lg-6 d-flex justify-content-center align-items-center flex-column"
+	>
+		<h1 class="mb-5">Acesse sua conta!</h1>
+		<form
+			class="w100 d-flex justify-content-center align-items-center flex-column"
+			on:submit={handleSubmit}
+		>
+			<div class="input-login-container w80">
+				<span class="text-gray">Email</span>
+				<input
+					bind:value={user.email}
+					class="form-control text-gray input-login"
+					placeholder="insira seu email aqui"
+					type="text"
+				/>
+			</div>
+			<div class="input-login-container w80 mt-4">
+				<span class="text-gray">Senha</span>
+				<input
+					bind:value={user.password}
+					class="form-control text-gray input-login"
+					placeholder="insira sua senha aqui"
+					type="password"
+				/>
+			</div>
+			<button class="btn-login w80 mt-5">login</button>
+
+			<div
+				class="w100 mt-4 d-flex justify-content-center align-items-center flex-column"
+			>
+				<div class="w100 d-flex justify-content-center align-items-center">
+					<div class="detail-or"/>
+					<h5 class="color-light-gray">OR</h5>
+					<div class="detail-or"/>
+				</div>
+				<h6 class="color-light-gray mt-4">
+					Não tem uma conta?
+					<a href="/" style="text-decoration: none;">Crie uma!</a>
+				</h6>
+			</div>
+		</form>
+	</div>
 </div>
 
 <style scoped>
-  .vh100 {
-    height: 100vh;
-  }
-
-  .w100 {
-    width: 100%;
-  }
-
-  .w80 {
-    width: 80%;
-  }
-
-  .avatar-login {
-    background-image: url(../../assets/imgs/login_avatar.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 570px;
-    width: 570px;
-  }
-
-  .bg-gray-light {
-    background-color: #e5eff8;
-  }
-
-  .text-gray {
-    color: #7c838a;
-  }
-
-  .input-login {
-    padding: 8px 8px;
-    width: 100%;
-    border-radius: 14px;
-    background-color: #e3e5e8;
-    font-weight: 200;
-    margin-top: 5px;
-  }
-
-  .btn-login {
-    background-color: #e5eff8;
-    border: none;
-    border-radius: 14px;
-    padding: 10px;
-    cursor: pointer;
-  }
-
-  .btn-login:hover {
-    background-color: #abb4bc;
-    transition: 1.5s;
-  }
-
-  .color-light-gray {
-    color: #b0bac3;
-  }
-
-  .detail-or {
-    height: 3px;
-    width: 3%;
-    border-radius: 10px;
-    background-color: #b0bac3;
-    margin: 0px 20px;
-  }
+	.vh100 {
+		height: 100vh;
+	}
+
+	.w100 {
+		width: 100%;
+	}
+
+	.w80 {
+		width: 80%;
+	}
+
+	.avatar-login {
+		background-image: url(../../assets/imgs/login_avatar.png);
+		background-repeat: no-repeat;
+		background-size: cover;
+		height: 570px;
+		width: 570px;
+	}
+
+	.bg-gray-light {
+		background-color: #e5eff8;
+	}
+
+	.text-gray {
+		color: #7c838a;
+	}
+
+	.input-login {
+		padding: 8px 8px;
+		width: 100%;
+		border-radius: 14px;
+		background-color: #e3e5e8;
+		font-weight: 200;
+		margin-top: 5px;
+	}
+
+	.btn-login {
+		background-color: #e5eff8;
+		border: none;
+		border-radius: 14px;
+		padding: 10px;
+		cursor: pointer;
+	}
+
+	.btn-login:hover {
+		background-color: #abb4bc;
+		transition: 1.5s;
+	}
+
+	.color-light-gray {
+		color: #b0bac3;
+	}
+
+	.detail-or {
+		height: 3px;
+		width: 3%;
+		border-radius: 10px;
+		background-color: #b0bac3;
+		margin: 0px 20px;
+	}
 </style>