feat: init login & register from frontend

front/pages/login.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Layout from "../components/ui/layout";
 import { Title } from "../components/ui/styles/title";
+import { loginAndGetToken } from "../services/auth";
 
 const Login = () => {
   const [email, setEmail] = React.useState("");
@@ -10,6 +11,7 @@ const Login = () => {
     e.preventDefault();
     console.log({ email, password });
     alert(JSON.stringify({ email, password }));
+    loginAndGetToken(email, password);
   };
 
   const handleEmailChange = (e: any) => {

front/pages/signup.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Layout from "../components/ui/layout";
 import { Title } from "../components/ui/styles/title";
+import { signup } from "../services/auth";
 
 const SignUp = () => {
   const [email, setEmail] = React.useState("");
@@ -11,6 +12,7 @@ const SignUp = () => {
     e.preventDefault();
     console.log({ email, password, username });
     alert(JSON.stringify({ email, password, username }));
+    signup({ email, password, username });
   };
 
   const handleEmailChange = (e: any) => {

front/services/auth.ts

@@ -0,0 +1,61 @@
+import { getAPIUrl } from "./config";
+
+interface LoginAndGetTokenResponse {
+  access_token: "string";
+  token_type: "string";
+}
+
+// TODO : everything in this file need to be refactored / mvp phase
+
+export async function loginAndGetToken(username: string, password: string): Promise<LoginAndGetTokenResponse> {
+  // Request Config
+  const HeadersConfig = new Headers({ "Content-Type": "application/x-www-form-urlencoded", Origin: "http://localhost:3000" });
+  const urlencoded = new URLSearchParams({ username: username, password: password });
+
+  const requestOptions: any = {
+    method: "POST",
+    headers: HeadersConfig,
+    body: urlencoded,
+    redirect: "follow",
+  };
+
+  return fetch(`${getAPIUrl()}auth/token`, requestOptions)
+    .then((result) => result.json())
+    .catch((error) => console.log("error", error));
+}
+
+export async function getUserInfo(token: string): Promise<any> {
+  const HeadersConfig = new Headers({ Authorization: `Bearer ${token}`, Origin: "http://localhost:3000" });
+  const requestOptions: any = {
+    method: "GET",
+    headers: HeadersConfig,
+    redirect: "follow",
+  };
+
+  return fetch(`${getAPIUrl()}auth/users/me`, requestOptions)
+    .then((result) => result.json())
+    .catch((error) => console.log("error", error));
+}
+
+// signup
+
+interface NewAccountBody {
+  username: string;
+  email: string;
+  password: string;
+}
+
+export async function signup(body: NewAccountBody): Promise<any> {
+  const HeadersConfig = new Headers({ "Content-Type": "application/json" });
+  
+  const requestOptions: any = {
+    method: "POST",
+    headers: HeadersConfig,
+    body: JSON.stringify(body),
+    redirect: "follow",
+  };
+
+  return fetch(`${getAPIUrl()}users/`, requestOptions)
+    .then((result) => result.json())
+    .catch((error) => console.log("error", error));
+}

front/services/config.ts

@@ -0,0 +1,3 @@
+const LEARNHOUSE_API_URL = "http://localhost:1338/api/";
+
+export const getAPIUrl = () => LEARNHOUSE_API_URL;