Remove more unused code
This commit is contained in:
Daoud Clarke
parent
60b27d639e
commit
932579ead3
7 changed files with 6 additions and 344 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -17,6 +17,7 @@ __pycache__/
|
|||
build/
|
||||
develop-eggs/
|
||||
dist/
|
||||
front-end/dist/
|
||||
downloads/
|
||||
eggs/
|
||||
.eggs/
|
||||
|
|
|
|||
|
|
@ -1,69 +0,0 @@
|
|||
import define from '../utils/define.js';
|
||||
import config from "../../config.js";
|
||||
|
||||
const template = () => /*html*/`
|
||||
<form>
|
||||
<h5>Login</h5>
|
||||
<div>
|
||||
<label for="login-email-or-username">Email or Username</label>
|
||||
<div>
|
||||
<input class="form-control" type="text" id="login-email-or-username" autocomplete="email" required="" minlength="3">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="login-password">Password</label>
|
||||
<div>
|
||||
<input type="password" id="login-password" autocomplete="current-password" required="" maxlength="60">
|
||||
<button type="button" disabled="" title="You will not be able to reset your password without an email.">forgot password</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-secondary" type="submit">Login</button>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
export default define('login', class extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.loginForm = null;
|
||||
this.emailOrUsernameInput = null;
|
||||
this.passwordInput = null;
|
||||
this.__setup();
|
||||
this.__events();
|
||||
}
|
||||
|
||||
__setup() {
|
||||
this.innerHTML = template();
|
||||
this.loginForm = this.querySelector('form');
|
||||
this.emailOrUsernameInput = this.querySelector('#login-email-or-username');
|
||||
this.passwordInput = this.querySelector('#login-password');
|
||||
}
|
||||
|
||||
__events() {
|
||||
this.loginForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
this.__handleLogin(e);
|
||||
});
|
||||
}
|
||||
|
||||
__handleLogin = async () => {
|
||||
const response = await fetch(`${config.publicApiURL}user/login`, {
|
||||
method: 'POST',
|
||||
cache: 'no-cache',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({
|
||||
"username_or_email": this.emailOrUsernameInput.value,
|
||||
"password": this.passwordInput.value,
|
||||
})
|
||||
});
|
||||
if (response.status === 200) {
|
||||
const loginData = await response.json();
|
||||
console.log("Login data", loginData);
|
||||
document.cookie = `jwt=${loginData["jwt"]}; SameSite=Strict`;
|
||||
console.log("Login success");
|
||||
} else {
|
||||
console.log("Login error", response);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1,184 +0,0 @@
|
|||
import define from '../../utils/define.js';
|
||||
import config from '../../../config.js';
|
||||
import { globalBus } from '../../utils/events.js';
|
||||
import debounce from '../../utils/debounce.js'
|
||||
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion)').matches;
|
||||
|
||||
const template = () => /*html*/`
|
||||
<form class="search-bar">
|
||||
<i class="ph-magnifying-glass-bold"></i>
|
||||
<input
|
||||
type='search'
|
||||
class='search-bar-input'
|
||||
placeholder='Search on mwmbl...'
|
||||
title='Use "CTRL+K" or "/" to focus.'
|
||||
autocomplete='off'
|
||||
>
|
||||
</form>
|
||||
`;
|
||||
|
||||
export default define('search-bar', class extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.searchInput = null;
|
||||
this.searchForm = null;
|
||||
this.abortController = new AbortController();
|
||||
this.__setup();
|
||||
}
|
||||
|
||||
__setup() {
|
||||
this.innerHTML = template();
|
||||
this.searchInput = this.querySelector('input');
|
||||
this.searchForm = this.querySelector('form');
|
||||
this.__events();
|
||||
}
|
||||
|
||||
__dispatchSearch({ results = null, error = null }) {
|
||||
const searchEvent = new CustomEvent('search', {
|
||||
detail: {
|
||||
results,
|
||||
error,
|
||||
},
|
||||
});
|
||||
globalBus.dispatch(searchEvent)
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the overall layout of the page.
|
||||
*
|
||||
* `home` centers the search bar on the page.
|
||||
* `compact` raises it to the top and makes room for displaying results.
|
||||
*
|
||||
* @param {'compact' | 'home'} mode
|
||||
* @return {void}
|
||||
*/
|
||||
__setDisplayMode(mode) {
|
||||
switch (mode) {
|
||||
case 'compact': {
|
||||
document.body.style.paddingTop = '25px';
|
||||
document.querySelector('.search-menu').classList.add('compact');
|
||||
break;
|
||||
}
|
||||
case 'home': {
|
||||
document.body.style.paddingTop = '30vh';
|
||||
document.querySelector('.search-menu').classList.remove('compact');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async __executeSearch() {
|
||||
this.abortController.abort();
|
||||
this.abortController = new AbortController();
|
||||
// Get response from API
|
||||
const response = await fetch(`${config.publicApiURL}search?s=${encodeURIComponent(this.searchInput.value)}`, {
|
||||
signal: this.abortController.signal
|
||||
});
|
||||
// Getting results from API
|
||||
const search = await (response).json();
|
||||
return search;
|
||||
}
|
||||
|
||||
__handleSearch = async () => {
|
||||
// Update page title
|
||||
document.title = `MWMBL - ${this.searchInput.value || "Search"}`;
|
||||
|
||||
// Update query params
|
||||
const queryParams = new URLSearchParams(document.location.search);
|
||||
// Sets query param if search value is not empty
|
||||
if (this.searchInput.value) queryParams.set(config.searchQueryParam, this.searchInput.value);
|
||||
else queryParams.delete(config.searchQueryParam);
|
||||
// New URL with query params
|
||||
const newURL =
|
||||
document.location.protocol
|
||||
+ "//"
|
||||
+ document.location.host
|
||||
+ document.location.pathname
|
||||
+ (this.searchInput.value ? '?' : '')
|
||||
+ queryParams.toString();
|
||||
// Replace history state
|
||||
window.history.replaceState({ path: newURL }, '', newURL);
|
||||
|
||||
if (this.searchInput.value) {
|
||||
this.__setDisplayMode('compact')
|
||||
|
||||
try {
|
||||
const search = await this.__executeSearch()
|
||||
// This is a guess at an explanation
|
||||
// Check the searcInput.value before setting the results to prevent
|
||||
// race condition where the user has cleared the search input after
|
||||
// submitting an original search but before the search results have
|
||||
// come back from the API
|
||||
this.__dispatchSearch({ results: this.searchInput.value ? search : null });
|
||||
}
|
||||
catch(error) {
|
||||
this.__dispatchSearch({ error })
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.__setDisplayMode('home')
|
||||
this.__dispatchSearch({ results: null });
|
||||
}
|
||||
}
|
||||
|
||||
__events() {
|
||||
/**
|
||||
* Always add the submit event, it makes things feel faster if
|
||||
* someone does not prefer reduced motion and reflexively hits
|
||||
* return once they've finished typing.
|
||||
*/
|
||||
this.searchForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
this.__handleSearch(e);
|
||||
});
|
||||
|
||||
/**
|
||||
* Only add the "real time" search behavior when the client does
|
||||
* not prefer reduced motion; this prevents the page from changing
|
||||
* while the user is still typing their query.
|
||||
*/
|
||||
if (!prefersReducedMotion) {
|
||||
this.searchInput.addEventListener('input', debounce(this.__handleSearch, 500))
|
||||
}
|
||||
|
||||
// Focus search bar when pressing `ctrl + k` or `/`
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if ((e.key === 'k' && e.ctrlKey) || e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
|
||||
// Remove the modal if it's visible
|
||||
document.querySelector('.modal').style.display = 'none';
|
||||
|
||||
this.searchInput.focus();
|
||||
}
|
||||
});
|
||||
|
||||
// Focus first result when pressing down arrow
|
||||
this.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'ArrowDown' && this.searchInput.value) {
|
||||
e.preventDefault();
|
||||
const focusResultEvent = new CustomEvent('focus-result');
|
||||
globalBus.dispatch(focusResultEvent);
|
||||
}
|
||||
});
|
||||
|
||||
globalBus.on('focus-search', (e) => {
|
||||
this.searchInput.focus();
|
||||
});
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
// Focus search input when component is connected
|
||||
this.searchInput.focus();
|
||||
|
||||
const searchQuery = new URLSearchParams(document.location.search).get(config.searchQueryParam);
|
||||
this.searchInput.value = searchQuery;
|
||||
/**
|
||||
* Trigger search handling to coordinate the value pulled from the query string
|
||||
* across the rest of the UI and to actually retrieve the results if the search
|
||||
* value is now non-empty.
|
||||
*/
|
||||
this.__handleSearch();
|
||||
}
|
||||
});
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
import define from '../utils/define.js';
|
||||
import config from "../../config.js";
|
||||
|
||||
const template = () => /*html*/`
|
||||
<form>
|
||||
<h5>Register</h5>
|
||||
<div>
|
||||
<label for="register-email">Email</label>
|
||||
<div>
|
||||
<input class="form-control" type="text" id="register-email" autocomplete="email" required="" minlength="3">
|
||||
</div>
|
||||
<label for="register-username">Username</label>
|
||||
<div>
|
||||
<input class="form-control" type="text" id="register-username" autocomplete="username" required="" minlength="3">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="register-password">Password</label>
|
||||
<div>
|
||||
<input type="password" id="register-password" autocomplete="password" required="" maxlength="60">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="register-password">Confirm password</label>
|
||||
<div>
|
||||
<input type="password" id="register-password-verify" autocomplete="confirm password" required="" maxlength="60">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-secondary" type="submit">Register</button>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
export default define('register', class extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.registerForm = null;
|
||||
this.emailInput = null;
|
||||
this.usernameInput = null;
|
||||
this.passwordInput = null;
|
||||
this.passwordVerifyInput = null;
|
||||
this.__setup();
|
||||
this.__events();
|
||||
}
|
||||
|
||||
__setup() {
|
||||
this.innerHTML = template();
|
||||
this.registerForm = this.querySelector('form');
|
||||
this.emailInput = this.querySelector('#register-email');
|
||||
this.usernameInput = this.querySelector('#register-username');
|
||||
this.passwordInput = this.querySelector('#register-password');
|
||||
this.passwordVerifyInput = this.querySelector('#register-password-verify');
|
||||
}
|
||||
|
||||
__events() {
|
||||
this.registerForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
this.__handleRegister(e);
|
||||
});
|
||||
}
|
||||
|
||||
__handleRegister = async () => {
|
||||
const response = await fetch(`${config.publicApiURL}user/register`, {
|
||||
method: 'POST',
|
||||
cache: 'no-cache',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({
|
||||
"username": this.usernameInput.value,
|
||||
"email": this.emailInput.value,
|
||||
"password": this.passwordInput.value,
|
||||
"password_verify": this.passwordVerifyInput.value,
|
||||
})
|
||||
});
|
||||
if (response.status === 200) {
|
||||
const registerData = await response.json();
|
||||
console.log("Register data", registerData);
|
||||
document.cookie = `jwt=${registerData["jwt"]}; SameSite=Strict`;
|
||||
console.log("Register success");
|
||||
} else {
|
||||
console.log("Register error", response);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
<main class="noscript">
|
||||
<img class="brand-icon" src="/static/images/logo.svg" width="40" height="40" alt="mwmbl logo">
|
||||
<h1>
|
||||
Welcome to mwmbl, the free, open-source and non-profit search engine.
|
||||
Welcome to Mwmbl, the free, open-source and non-profit search engine.
|
||||
</h1>
|
||||
<p>This website requires you to support/enable scripts.</p>
|
||||
<p>
|
||||
|
|
@ -72,10 +72,10 @@
|
|||
|
||||
<main class="jsonly">
|
||||
<header class="search-menu">
|
||||
<ul>
|
||||
<!-- <ul>
|
||||
<li is="${save}"></li>
|
||||
</ul>
|
||||
<div><a href="/accounts/login/">Login</a> <a href="/accounts/signup/">Sign up</a> </div>
|
||||
<div><a href="/accounts/login/">Login</a> <a href="/accounts/signup/">Sign up</a> </div> -->
|
||||
<div class="branding">
|
||||
<img class="brand-icon" src="/static/images/logo.svg" width="40" height="40" alt="mwmbl logo">
|
||||
<span class="brand-title">MWMBL</span>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,6 @@
|
|||
|
||||
if (!redirected) {
|
||||
// Load components only after redirects are checked.
|
||||
import('./components/login.js');
|
||||
import('./components/register.js');
|
||||
import("./components/organisms/search-bar.js");
|
||||
import("./components/organisms/results.js");
|
||||
import("./components/organisms/footer.js");
|
||||
import("./components/organisms/save.js");
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ export default {
|
|||
base: '/static',
|
||||
publicDir: '../assets',
|
||||
build: {
|
||||
outDir: '../dist'
|
||||
outDir: '../dist',
|
||||
minify: false
|
||||
},
|
||||
plugins: [
|
||||
legacy({
|
||||
|
|
|
|||
Loading…
Reference in a new issue