diff --git a/frontend/static/css/accounts/register.css b/frontend/static/css/accounts/register.css new file mode 100644 index 0000000..ddcda9a --- /dev/null +++ b/frontend/static/css/accounts/register.css @@ -0,0 +1,12 @@ +#app .form { + background-color: red; + width: 300px; + height: 300px; + display: grid; + grid-template-columns: repeat(1, 1fr); + grid-gap: 10px; + margin-left: auto; + margin-right: auto; + margin-top: 90px; + border: 15px black solid; +} \ No newline at end of file diff --git a/frontend/static/js/api/accounts.js b/frontend/static/js/api/accounts.js new file mode 100644 index 0000000..154a563 --- /dev/null +++ b/frontend/static/js/api/accounts.js @@ -0,0 +1,15 @@ +class Accounts +{ + constructor (client) + { + this.client = client; + } + + async create(username, password) + { + let response = await this.client._post("/api/accounts/register", {username: username, password: password}); + return response + } +} + +export { Accounts } \ No newline at end of file diff --git a/frontend/static/js/api/client.js b/frontend/static/js/api/client.js index 8aa9405..8d2c10e 100644 --- a/frontend/static/js/api/client.js +++ b/frontend/static/js/api/client.js @@ -1,8 +1,20 @@ +import { Accounts } from "./accounts.js"; + +function extract_token(response) +{ + let cookies = response.headers.get("set-cookie"); + if (cookies == null) + return null; + token = cookies.slice(cookies.indexOf("=") + 1, cookies.indexOf(';')) + return token; +} + class Client { constructor(url) { this._url = url; + this.accounts = new Accounts(this); this._token = undefined; } @@ -20,12 +32,16 @@ class Client }, body: JSON.stringify(data), }); + let token = extract_token(response); + if (token != null) + this.token = token; return response; } async login(username, password) { - return this._post("/api/accounts/login", {username: username, password: password}) + let response = await this._post("/api/accounts/login", {username: username, password: password}) + return response } } diff --git a/frontend/static/js/index.js b/frontend/static/js/index.js index d408ae9..1bbc467 100644 --- a/frontend/static/js/index.js +++ b/frontend/static/js/index.js @@ -5,6 +5,7 @@ import PostView from "./views/PostView.js"; import Settings from "./views/Settings.js"; import { Client } from "./api/client.js"; +import RegisterView from "./views/accounts/RegisterView.js"; let client = new Client(location.protocol + "//" + location.host) @@ -31,6 +32,7 @@ const router = async () => { { path: "/posts/:id", view: PostView }, { path: "/settings", view: Settings }, { path: "/login", view: LoginView }, + { path: "/register", view: RegisterView }, ]; // Test each route for potential match diff --git a/frontend/static/js/views/accounts/RegisterView.js b/frontend/static/js/views/accounts/RegisterView.js new file mode 100644 index 0000000..d048321 --- /dev/null +++ b/frontend/static/js/views/accounts/RegisterView.js @@ -0,0 +1,51 @@ +import AbstractView from "../AbstractView.js"; +import { client } from "../../index.js"; + +async function register() +{ + let username = document.getElementById("username").value; + let password = document.getElementById("password").value; + + let response = await client.accounts.create(username, password); + let response_data = await response.json(); + + ["username", "user", "password"].forEach(error_field => { + let error_display = document.getElementById(`error_${error_field}`); + if (error_display != null) + error_display.innerHTML = ""; + }); + + Object.keys(response_data).forEach(error_field => { + let error_display = document.getElementById(`error_${error_field}`); + if (error_display != null) + error_display.innerHTML = response_data[error_field]; + }); +} + +export default class extends AbstractView { + constructor(params) { + super(params); + this.setTitle("register"); + document.body.addEventListener("click", e => { + e.preventDefault(); + if (e.target.type == "button") + register(); + }); + } + + async getHtml() { + return ` +