From b98371cf70d9c8b6aaa208091c4901d743c56e45 Mon Sep 17 00:00:00 2001 From: starnakin Date: Mon, 27 Nov 2023 13:55:05 +0100 Subject: [PATCH 1/4] display error, and add style --- frontend/static/css/accounts/login.css | 16 ++++++++++ .../static/js/views/accounts/LoginView.js | 30 +++++++++++++------ 2 files changed, 37 insertions(+), 9 deletions(-) create mode 100644 frontend/static/css/accounts/login.css diff --git a/frontend/static/css/accounts/login.css b/frontend/static/css/accounts/login.css new file mode 100644 index 0000000..72e58a9 --- /dev/null +++ b/frontend/static/css/accounts/login.css @@ -0,0 +1,16 @@ +#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: 1px black solid; +} + +#app { + background-color: green; +} \ No newline at end of file diff --git a/frontend/static/js/views/accounts/LoginView.js b/frontend/static/js/views/accounts/LoginView.js index 1f83d90..3484610 100644 --- a/frontend/static/js/views/accounts/LoginView.js +++ b/frontend/static/js/views/accounts/LoginView.js @@ -7,10 +7,18 @@ async function login() let password = document.getElementById("password").value; let response = await client.login(username, password); - let errors = await response.json(); + 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 = ""; + }); - errors.user.forEach(error => { - console.log(error) + 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]; }); } @@ -21,18 +29,22 @@ export default class extends AbstractView { document.body.addEventListener("click", e => { e.preventDefault(); if (e.target.type == "button") - { login(); - } }); } async getHtml() { return ` - - - - +
+ + + + + + + + Register +
`; } } \ No newline at end of file From 6a4e161d71d8ed3a78892523633bfbcb742875e3 Mon Sep 17 00:00:00 2001 From: starnakin Date: Mon, 27 Nov 2023 14:09:18 +0100 Subject: [PATCH 2/4] add: db instruction readme --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 089432f..69e2f03 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,11 @@ source .env/bin/activate ``` bash pip install -r requirements.txt ``` +- Setup database +``` +python manage.py runserver makemigrations profiles +python manage.py migrate profiles +``` - Start the developpement server ``` python manage.py runserver 0.0.0.0:8000 From a965adfdce9db4312cb7df625b350c83edeb9b80 Mon Sep 17 00:00:00 2001 From: starnakin Date: Mon, 27 Nov 2023 15:32:17 +0100 Subject: [PATCH 3/4] add: register page --- frontend/static/css/accounts/register.css | 12 +++++ frontend/static/js/api/accounts.js | 15 ++++++ frontend/static/js/api/client.js | 18 ++++++- frontend/static/js/index.js | 2 + .../static/js/views/accounts/RegisterView.js | 51 +++++++++++++++++++ 5 files changed, 97 insertions(+), 1 deletion(-) create mode 100644 frontend/static/css/accounts/register.css create mode 100644 frontend/static/js/api/accounts.js create mode 100644 frontend/static/js/views/accounts/RegisterView.js 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 ` +
+ + + + + + + + + Login +
+ `; + } +} \ No newline at end of file From 27e75c4497b378358ab1738a7c8765cea5a783ac Mon Sep 17 00:00:00 2001 From: starnakin Date: Mon, 27 Nov 2023 15:32:33 +0100 Subject: [PATCH 4/4] login style --- frontend/static/css/accounts/login.css | 6 +----- frontend/static/js/views/accounts/LoginView.js | 1 + 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/frontend/static/css/accounts/login.css b/frontend/static/css/accounts/login.css index 72e58a9..ddcda9a 100644 --- a/frontend/static/css/accounts/login.css +++ b/frontend/static/css/accounts/login.css @@ -8,9 +8,5 @@ margin-left: auto; margin-right: auto; margin-top: 90px; - border: 1px black solid; -} - -#app { - background-color: green; + border: 15px black solid; } \ No newline at end of file diff --git a/frontend/static/js/views/accounts/LoginView.js b/frontend/static/js/views/accounts/LoginView.js index 3484610..ce3df84 100644 --- a/frontend/static/js/views/accounts/LoginView.js +++ b/frontend/static/js/views/accounts/LoginView.js @@ -36,6 +36,7 @@ export default class extends AbstractView { async getHtml() { return `
+