Skip to content

C
cbdiscord
Commit 64e546a6 authored by Geovanny's avatar Geovanny
Browse files
Options

View, controller and sync for login/register

parent bdddedf3
Show whitespace changes
Inline Side-by-side
Showing with 77 additions and 30 deletions
web/login/controller.js
View file @ 64e546a6
import Sync from './sync' import Sync from './sync.js'
class LoginPageController{ class LoginPageController{
constructor(view){ constructor(view){
this.view = view; this.view = view;
this.sync = new Sync(); this.sync = new Sync();
this.view.addEventListener('login_attempt', this.login(event.detail.credentials)); this.view.addEventListener('login_attempt', event => this.login(event.detail));
this.view.addEventListener('register_attempt', this.login(event.detail.credentials)) this.view.addEventListener('register_attempt', event => this.register(event.detail))
} }
async login(credentials){ async login(credentials){
try{ try{
const user_data = await this.sync.login(credentials); console.log(credentials)
localStorage.setItem('username', user_data.user_name); if(credentials.username==="" || credentials.password===""){
location.replace('/'); alert("Fields can't be empty")
}
// const user_data = await this.sync.login(credentials);
// localStorage.setItem('username', user_data.user_name);
// location.replace('/');
}catch(error){ }catch(error){
console.log(error); console.log(error);
alert('Failed to login') alert('Failed to login')
} }
} }
async login(credentials){ async register(credentials){
try{ try{
const user_data = await this.sync.register(credentials); console.log(credentials)
localStorage.setItem('username', user_data.user_name); if(credentials.username==="" || credentials.password==="" || credentials.confirm_password===""){
location.replace('/'); alert("Fields can't be empty")
return;
}
if(credentials.password !== credentials.confirm_password){
alert("Passwords don't match")
return;
}
// const user_data = await this.sync.register(credentials);
// localStorage.setItem('username', user_data.user_name);
// location.replace('/');
}catch(error){ }catch(error){
console.log(error); console.log(error);
alert('Failed to register') alert('Failed to register')
......
web/login/index.html
View file @ 64e546a6
...@@ -5,7 +5,8 @@ ...@@ -5,7 +5,8 @@
<link rel="stylesheet" href="./stylesheets/main.css"/> <link rel="stylesheet" href="./stylesheets/main.css"/>
<script src="sugar.js"></script> <script src="sugar.js"></script>
<script>Sugar.extend()</script> <script>Sugar.extend()</script>
<script src="/main.js" type="module"></script> <!-- <script src="/main.js" type="module"></script> -->
<script src="./login/module.js" type="module"></script>
</head> </head>
<body> <body>
...@@ -20,15 +21,19 @@ ...@@ -20,15 +21,19 @@
<!-- Tab content --> <!-- Tab content -->
<div id="Login" class="tabcontent" style="display: block;"> <div id="Login" class="tabcontent" style="display: block;">
<login-form> <login-form>
<input type="text" name="login" placeholder="Login"/> <input type="text" name="username" placeholder="Geo"/>
<input type="password" name="password" placeholder="********"/> <input type="password" name="password" placeholder="********"/>
<button id="login_button">Log In</button> <button id="login_button">Log In</button>
</login-form> </login-form>
</div> </div>
<div id="Register" class="tabcontent"> <div id="Register" class="tabcontent">
<h3>Paris</h3> <register-form>
<p>Paris is the capital of France.</p> <input type="text" name="username" placeholder="Geo"/>
<input type="password" name="password" placeholder="********"/>
<input type="password" name="confirm_password" placeholder="********"/>
<button id="register_button">Log In</button>
</register-form>
</div> </div>
</center-div> </center-div>
</content-body> </content-body>
......
web/login/login_view.js
View file @ 64e546a6
...@@ -3,13 +3,12 @@ class LoginView extends EventTarget { ...@@ -3,13 +3,12 @@ class LoginView extends EventTarget {
super() super()
this.element = element this.element = element
this.login_field = this.element.querySelector("[name=login]") this.username_field = this.element.querySelector("[name=username]")
this.password_field = this.element.querySelector("[name=password]") this.password_field = this.element.querySelector("[name=password]")
this.login_button = this.element.querySelector("#login_button") this.login_button = this.element.querySelector("#login_button")
this.login_button.addEventListener("click", () => { this.login_button.addEventListener("click", () => {
this.dispatchEvent(new CustomEvent("login_attempt", {detail: { this.dispatchEvent(new CustomEvent("login_attempt", {detail: {
login: this.login_field.value, username: this.username_field.value,
password: this.password_field.value } password: this.password_field.value }
})) }))
}) })
...@@ -26,4 +25,3 @@ class LoginView extends EventTarget { ...@@ -26,4 +25,3 @@ class LoginView extends EventTarget {
} }
export default LoginView export default LoginView
\ No newline at end of file
\ No newline at end of file
web/login/module.js 0 → 100644
View file @ 64e546a6
import LoginPageView from "./view.js"
import LoginPageController from "./controller.js"
new LoginPageController(new LoginPageView())
\ No newline at end of file
web/login/register_view.js 0 → 100644
View file @ 64e546a6
class RegisterView extends EventTarget {
constructor(element){
super()
this.element = element
this.username_field = this.element.querySelector("[name=username]")
this.password_field = this.element.querySelector("[name=password]")
this.login_button = this.element.querySelector("#register_button")
this.login_button.addEventListener("click", () => {
this.dispatchEvent(new CustomEvent("register_attempt", {detail: {
username: this.username_field.value,
password: this.password_field.value }
}))
})
}
show(){
this.element.style.display = ""
}
hide(){
this.element.style.display = "none"
}
}
export default RegisterView
\ No newline at end of file
web/login/sync.js
View file @ 64e546a6
class Server{ class Sync{
async login(credentials){ async login(credentials){
const login_response = await fetch('/user/login', { const login_response = await fetch('/user/login', {
method: "POST", method: "POST",
...@@ -31,3 +31,5 @@ class Server{ ...@@ -31,3 +31,5 @@ class Server{
return user_data; return user_data;
} }
} }
export default Sync
\ No newline at end of file
web/login/view.js
View file @ 64e546a6
import LoginView from "./login_view.js" import LoginView from "./login_view.js"
import RegisterView from "./register_view.js"
class LoginPageView extends EventTarget { class LoginPageView extends EventTarget {
constructor(){ constructor(){
super();
this.login_form = new LoginView(document.querySelector('login-form'));
this.register_form = new RegisterView(document.querySelector('register-form'));
this.login_form = new LoginView(document.querySelector('login-form'))
this.login_form.addEventListener("login_attempt", (event) => { this.login_form.addEventListener("login_attempt", (event) => {
this.dispatchEvent(new CustomEvent("login_attempt", {detail: {login: event.detail.login, password: event.detail.password}})) this.dispatchEvent(new CustomEvent("login_attempt", {detail: event.detail}))
}) })
this.register_form.addEventListener("register_attempt", (event) => { this.register_form.addEventListener("register_attempt", (event) => {
this.dispatchEvent(new CustomEvent("register_attempt", {detail: { this.dispatchEvent(new CustomEvent("register_attempt", {detail: event.detail}))
login: event.detail.login,
password: event.detail.password,
confirm_password: event.detail.confirm_password}
}))
}) })
} }
} }
......
web/navbar/navbar.js
View file @ 64e546a6
...@@ -8,7 +8,6 @@ function loadPage(href) ...@@ -8,7 +8,6 @@ function loadPage(href)
const nav_placeholder = document.querySelector('nav-placeholder') const nav_placeholder = document.querySelector('nav-placeholder')
nav_placeholder.innerHTML = loadPage('/navbar/navbar.html') nav_placeholder.innerHTML = loadPage('/navbar/navbar.html')
const bar_user = document.querySelector('bar-user a'); const bar_user = document.querySelector('bar-user a');
console.log(bar_user)
const saved_user = localStorage.getItem('username'); const saved_user = localStorage.getItem('username');
if(saved_user){ if(saved_user){
bar_user.innerText = saved_user; bar_user.innerText = saved_user;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment