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{
constructor(view){
this.view = view;
this.sync = new Sync();
this.view.addEventListener('login_attempt', this.login(event.detail.credentials));
this.view.addEventListener('register_attempt', this.login(event.detail.credentials))
this.view.addEventListener('login_attempt', event => this.login(event.detail));
this.view.addEventListener('register_attempt', event => this.register(event.detail))
}
async login(credentials){
try{
const user_data = await this.sync.login(credentials);
localStorage.setItem('username', user_data.user_name);
location.replace('/');
console.log(credentials)
if(credentials.username==="" || credentials.password===""){
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){
console.log(error);
alert('Failed to login')
}
}
async login(credentials){
async register(credentials){
try{
const user_data = await this.sync.register(credentials);
localStorage.setItem('username', user_data.user_name);
location.replace('/');
console.log(credentials)
if(credentials.username==="" || credentials.password==="" || credentials.confirm_password===""){
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){
console.log(error);
alert('Failed to register')
......
web/login/index.html
View file @ 64e546a6
......@@ -5,7 +5,8 @@
<link rel="stylesheet" href="./stylesheets/main.css"/>
<script src="sugar.js"></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>
<body>
......@@ -20,15 +21,19 @@
<!-- Tab content -->
<div id="Login" class="tabcontent" style="display: block;">
<login-form>
<input type="text" name="login" placeholder="Login"/>
<input type="text" name="username" placeholder="Geo"/>
<input type="password" name="password" placeholder="********"/>
<button id="login_button">Log In</button>
</login-form>
</div>
<div id="Register" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
<register-form>
<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>
</center-div>
</content-body>
......
web/login/login_view.js
View file @ 64e546a6
......@@ -3,13 +3,12 @@ class LoginView extends EventTarget {
super()
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.login_button = this.element.querySelector("#login_button")
this.login_button.addEventListener("click", () => {
this.dispatchEvent(new CustomEvent("login_attempt", {detail: {
login: this.login_field.value,
username: this.username_field.value,
password: this.password_field.value }
}))
})
......@@ -26,4 +25,3 @@ class LoginView extends EventTarget {
}
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){
const login_response = await fetch('/user/login', {
method: "POST",
......@@ -31,3 +31,5 @@ class Server{
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 RegisterView from "./register_view.js"
class LoginPageView extends EventTarget {
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.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.dispatchEvent(new CustomEvent("register_attempt", {detail: {
login: event.detail.login,
password: event.detail.password,
confirm_password: event.detail.confirm_password}
}))
this.dispatchEvent(new CustomEvent("register_attempt", {detail: event.detail}))
})
}
}
......
web/navbar/navbar.js
View file @ 64e546a6
......@@ -8,7 +8,6 @@ function loadPage(href)
const nav_placeholder = document.querySelector('nav-placeholder')
nav_placeholder.innerHTML = loadPage('/navbar/navbar.html')
const bar_user = document.querySelector('bar-user a');
console.log(bar_user)
const saved_user = localStorage.getItem('username');
if(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