init login

frontend/static/js/api/client.js

@@ -0,0 +1,32 @@
+class Client
+{
+	constructor(url)
+	{
+		this._url = url;
+		this._token = undefined; 
+	}
+
+	get isAuthentificate()
+	{
+		return this.token != undefined;
+	}
+
+    async _post(uri, data)
+    {
+        let response = await fetch(this._url + uri, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			  },		  
+			body: JSON.stringify(data),
+		});
+        return response;
+    }
+
+	async login(username, password)
+	{
+		return this._post("/api/accounts/login", {username: username, password: password})
+	}
+}
+
+export {Client}

frontend/static/js/index.js

@@ -1,8 +1,13 @@
+import LoginView from "./views/accounts/LoginView.js";
 import Dashboard from "./views/Dashboard.js";
 import Posts from "./views/Posts.js";
 import PostView from "./views/PostView.js";
 import Settings from "./views/Settings.js";
 
+import { Client } from "./api/client.js";
+
+let client = new Client(location.protocol + "//" + location.host)
+
 const pathToRegex = path => new RegExp("^" + path.replace(/\//g, "\\/").replace(/:\w+/g, "(.+)") + "$");
 
 const getParams = match => {
@@ -24,7 +29,8 @@ const router = async () => {
         { path: "/", view: Dashboard },
         { path: "/posts", view: Posts },
         { path: "/posts/:id", view: PostView },
-        { path: "/settings", view: Settings }
+        { path: "/settings", view: Settings },
+        { path: "/login", view: LoginView },
     ];
 
     // Test each route for potential match
@@ -61,3 +67,5 @@ document.addEventListener("DOMContentLoaded", () => {
 
     router();
 });
+
+export { client }

frontend/static/js/views/accounts/LoginView.js

@@ -0,0 +1,38 @@
+import AbstractView from "../AbstractView.js";
+import { client } from "../../index.js";
+
+async function login()
+{
+	let username = document.getElementById("username").value;
+	let password = document.getElementById("password").value;
+	
+	let response = await client.login(username, password);
+	let errors = await response.json();
+
+	errors.user.forEach(error => {
+		console.log(error)
+	});
+}
+
+export default class extends AbstractView {
+    constructor(params) {
+        super(params);
+        this.setTitle("Login");
+		document.body.addEventListener("click", e => {
+			e.preventDefault();
+			if (e.target.type == "button")
+			{
+				login();
+			}
+		});
+	}
+
+    async getHtml() {
+        return `
+			<input type="text" id="username" placeholder="username">
+			<input type="password" id="password" placeholder="password">
+			<input type="button" value="login">
+			<span id="login_failed"></span>
+        `;
+    }
+}

frontend/templates/index.html

@@ -12,6 +12,7 @@
         <a href="/" class="nav__link" data-link>Dashboard</a>
         <a href="/posts" class="nav__link" data-link>Posts</a>
         <a href="/settings" class="nav__link" data-link>Settings</a>
+        <a href="/login" class="nav__link" data-link>Login</a>
     </nav>
     <div id="app"></div>
 	<script type="module" src="{% static 'js/index.js' %}"></script>