user bin listing
This commit is contained in:
@@ -16,12 +16,12 @@ import {
|
||||
|
||||
|
||||
function App(vnode_init){
|
||||
const {state, dispatch} = vnode_init.attrs;
|
||||
const o = function(handler){ return handler.bind(null, state, dispatch); }
|
||||
const {dispatch} = vnode_init.attrs;
|
||||
//load_notes(state, dispatch);
|
||||
return {
|
||||
view: function(vnode){
|
||||
const s = vnode.attrs.state;
|
||||
const o = function(handler){ return handler.bind(null, s, dispatch); }
|
||||
return m('.app', {key: 'app'}, [
|
||||
m('.top', {key: 'top'}, [
|
||||
m('.top-left', {key: 'top-left'}, [
|
||||
@@ -33,7 +33,8 @@ function App(vnode_init){
|
||||
])
|
||||
]),
|
||||
m('.top-right', {key: 'top-right'}, [
|
||||
(s.login.is_logged_in
|
||||
(s.login.showing
|
||||
? (s.login.is_logged_in
|
||||
? m('.login-info', {key:'login-info'}, [
|
||||
m('.text', 'Logged in as '+s.login.user.username),
|
||||
m('button', {onclick: o(logout_request_handler)}, 'Logout')
|
||||
@@ -43,6 +44,8 @@ function App(vnode_init){
|
||||
m('input.password[type=password]', {key:'password', value: s.login.password, onchange: o(password_change_handler)}),
|
||||
m('button', {key:'login-button', onclick: o(login_request_handler)}, 'Login/Auto-Register')
|
||||
])
|
||||
)
|
||||
: m('.empty', {key:'empty'})
|
||||
),
|
||||
m('.buttons', {key:'buttons'}, [
|
||||
(s.is_editing_bin_name
|
||||
@@ -54,12 +57,15 @@ function App(vnode_init){
|
||||
? m('button', {key:'save-bin-name-button', onclick: o(bin_name_commit_handler)}, 'Save')
|
||||
: m('button', {key:'rename-bin-button', onclick: o(bin_name_editing_toggle_button_handler)}, 'Rename')
|
||||
)
|
||||
])
|
||||
]),
|
||||
m('ul.bin-list', {key:'bin-list'}, s.login.bins.map(b=>
|
||||
m('li.bin', b.name)
|
||||
))
|
||||
])
|
||||
]),
|
||||
m('.main', {key: 'main'}, [
|
||||
m('.notes', s.notes.map(note_state =>
|
||||
m(Note, {state, note_state, dispatch, key: note_state.note.id})
|
||||
m(Note, {state:s, note_state, dispatch, key: note_state.note.id})
|
||||
))
|
||||
])
|
||||
]);
|
||||
|
||||
@@ -5,8 +5,15 @@ const api = {};
|
||||
|
||||
// not `/api` (relative to domain root) nor `//api` (results in https:///api/...)
|
||||
let prefix = "api";
|
||||
let store = null;
|
||||
|
||||
api.setStore = function(s){
|
||||
store=s;
|
||||
};
|
||||
|
||||
api.post = function(url, body){
|
||||
body = body || {};
|
||||
body.session_id = store.getState().login.session_id;
|
||||
return m.request({
|
||||
method: 'POST',
|
||||
url: prefix+url,
|
||||
|
||||
@@ -32,7 +32,7 @@ const new_bin_handler = function(state, dispatch){
|
||||
const id = nanoid();
|
||||
// change browser location in address bar:
|
||||
window.history.pushState(null,'','#'+id);
|
||||
dispatch('new-bin', {id});
|
||||
dispatch('new-bin', {id, name:id});
|
||||
};
|
||||
const username_change_handler = function(state, dispatch, e){
|
||||
dispatch('update-username', e.target.value);
|
||||
@@ -45,7 +45,8 @@ const login_request_handler = function(state, dispatch, e){
|
||||
api.post('/login', {username: state.login.username, password: state.login.password})
|
||||
.then(res=>{
|
||||
if(res.success===true){
|
||||
dispatch('login-succeeded', res.user, res.session_id);
|
||||
dispatch('login-succeeded', {user:res.user, session_id:res.session_id});
|
||||
dispatch('user-bin-list-loaded', res.bins);
|
||||
}
|
||||
else{
|
||||
dispatch('login-failed');
|
||||
@@ -54,8 +55,9 @@ const login_request_handler = function(state, dispatch, e){
|
||||
.catch(e=>{ dispatch('login-failed'); });
|
||||
};
|
||||
const logout_request_handler = function(state, dispatch, e){
|
||||
api.post('/logout', {});
|
||||
// we dispatch after the API call because the logout action clears the session_id, which is needed to logout
|
||||
dispatch('logout-requested');
|
||||
api.post('/logout', {session_id: state.login.session_id});
|
||||
};
|
||||
const bin_name_editing_toggle_button_handler = function(state, dispatch){
|
||||
dispatch('update-bin-name-editing', !state.is_editing_bin_name);
|
||||
@@ -64,6 +66,7 @@ const bin_name_change_handler = function(state, dispatch, e){
|
||||
dispatch('update-bin-name', e.target.value);
|
||||
};
|
||||
const bin_name_commit_handler = function(state, dispatch){
|
||||
api.post('/bin-rename', {bin_id:state.bin.id, name:state.temp_bin_name});
|
||||
dispatch('commit-bin-name');
|
||||
};
|
||||
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import api from '../api.js';
|
||||
|
||||
const load_bin_handler = function(state, dispatch, bin_id){
|
||||
/*
|
||||
api.post('/load-bin', {id: bin_id})
|
||||
const initial_load_bin_handler = function(state, dispatch, bin_id){
|
||||
api.post('/load-bin', {bin_id})
|
||||
.then(res => {
|
||||
dispatch('bin-loaded', {bin:res.bin, _notes:res.notes});
|
||||
dispatch('bin-loaded', res.bin);
|
||||
});
|
||||
*/
|
||||
api.post('/load-notes', {bin_id})
|
||||
.then(res => {
|
||||
dispatch('notes-loaded', res.notes);
|
||||
@@ -22,6 +20,10 @@ const hash_change_handler = function(state, dispatch, e){
|
||||
}
|
||||
else{
|
||||
dispatch('bin-requested', bin_id);
|
||||
api.post('/load-bin', {bin_id})
|
||||
.then(res=>{
|
||||
dispatch('bin-loaded', res.bin);
|
||||
});
|
||||
api.post('/load-notes', {bin_id})
|
||||
.then(res => {
|
||||
dispatch('notes-loaded', res.notes);
|
||||
@@ -29,4 +31,4 @@ const hash_change_handler = function(state, dispatch, e){
|
||||
}
|
||||
};
|
||||
|
||||
export {load_bin_handler, hash_change_handler};
|
||||
export {initial_load_bin_handler, hash_change_handler};
|
||||
+27
-10
@@ -1,6 +1,7 @@
|
||||
import api from './api.js';
|
||||
import App from './App.js';
|
||||
import nanoid from './nanoid.min.js';
|
||||
import {load_bin_handler, hash_change_handler} from './handlers/index.js';
|
||||
import {initial_load_bin_handler, hash_change_handler} from './handlers/index.js';
|
||||
import {bin, note} from './models.js';
|
||||
const produce = immer.produce;
|
||||
immer.setAutoFreeze(false); // needed for high-frequency updated values, like onkeyup->note.temp_text; only once 'save' is called will it produce a new immutable state tree
|
||||
@@ -23,14 +24,25 @@ if(bin_id === ''){
|
||||
}
|
||||
// the actual loading from server is done later, after store and dispatch are defined
|
||||
|
||||
function addToBinListIfLoggedIn(state){
|
||||
const s = state;
|
||||
// if user is logged in:
|
||||
if(s.login.is_logged_in){
|
||||
// if bin is not already in the list:
|
||||
if(s.login.bins.filter(b=>b.id===s.bin.id).length===0){
|
||||
s.login.bins.push({id: s.bin.id, name: s.bin.name});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const reducer = handleActions({
|
||||
'new-bin': (s, bin) => { s.bin=bin; s.notes=[]; },
|
||||
'new-bin': (s, bin) => { s.bin=bin; s.notes=[]; s.temp_bin_name=bin.id; },
|
||||
'bin-requested': (s, bin_id) => { s.bin={id:bin_id}; s.notes = []; },
|
||||
'bin-loaded': (s, {bin, _notes}) => { s.bin=bin; s.temp_bin_name=bin.name; s.notes=_notes.map(n=>({is_editing: false, temp_text: n.text, bin_id: bin.id, note:n})); },
|
||||
'bin-loaded': (s, bin) => { s.bin=bin; s.temp_bin_name=bin.name; },
|
||||
'update-search-term': (s, search_term) => { s.search_term=search_term; },
|
||||
'update-search-results': (s, _notes) => { s.notes =_notes.map(n=>({is_editing: false, temp_text: '', bin_id: s.bin.id, note:n})); },
|
||||
'add-note': (s, {id, date}) => { s.notes.unshift({is_editing: true, temp_text: '', bin_id: s.bin.id, is_focused:true, note: {id: id, text: '', modified: date}}); },
|
||||
'notes-loaded': (s, _notes) => { s.notes = _notes.map(n=>({is_editing: false, temp_text: n.text, bin_id: s.bin_id, note:n})); },
|
||||
'notes-loaded': (s, _notes) => { s.notes = _notes.map(n=>({is_editing: false, temp_text: n.text, bin_id: s.bin.id, note:n})); },
|
||||
'update-note-text': (s, {id, text}) => { const note_s=s.notes.find(n=>n.note.id===id); note_s.note.text=text; }, // updates underlying note text (i.e. the "model", not the app note_state) "in the background" (e.g. from a server-pushed update), regardless of whether it's being edited; "save" is a separate action, below
|
||||
'update-note-editing': (s, {id, is_editing}) => { const note_s=s.notes.find(n=>n.note.id===id); note_s.is_editing=is_editing; note_s.temp_text=note_s.note.text; },
|
||||
'save-note-edit': (s, {id, text}) => { const note_s=s.notes.find(n=>n.note.id===id); note_s.note.text=text; note_s.temp_text=text; note_s.is_editing=false; },
|
||||
@@ -38,12 +50,13 @@ const reducer = handleActions({
|
||||
'update-username': (s, username) => { s.login.username=username; },
|
||||
'update-password': (s, password) => { s.login.password=password; },
|
||||
'login-requested': (s) => { s.login.showing=false; },
|
||||
'login-succeeded': (s, user, session_id) => { s.login.is_logged_in=true; s.login.showing=false; s.login.password=''; s.login.user=user; s.login.session_id=session_id; },
|
||||
'login-succeeded': (s, {user, session_id}) => { s.login.is_logged_in=true; s.login.showing=true; s.login.password=''; s.login.user=user; s.login.session_id=session_id; },
|
||||
'login-failed': (s) => { s.login.showing=true; s.login.password=''; },
|
||||
'logout-requested': (s) => { s.login.is_logged_in=false; s.login.showing=true; s.login.username=''; s.login.password=''; s.login.session_id=''; },
|
||||
'logout-requested': (s) => { s.login.is_logged_in=false; s.login.showing=true; s.login.username=''; s.login.password=''; s.login.session_id=''; s.login.bins=[]; },
|
||||
'user-bin-list-loaded': (s, bins) => { s.login.bins=bins; },
|
||||
'update-bin-name-editing': (s, is_editing) => { s.is_editing_bin_name=is_editing; },
|
||||
'update-bin-name': (s, name) => { s.temp_bin_name=name; },
|
||||
'commit-bin-name': (s) => { s.bin.name=s.temp_bin_name; s.is_editing_bin_name=false; }
|
||||
'commit-bin-name': (s) => { s.bin.name=s.temp_bin_name; s.is_editing_bin_name=false; addToBinListIfLoggedIn(s); }
|
||||
}, {
|
||||
bin: {id: bin_id, name: bin_id, user_id: ''},
|
||||
is_editing_bin_name: false,
|
||||
@@ -62,7 +75,8 @@ const reducer = handleActions({
|
||||
id: '',
|
||||
username: ''
|
||||
}*/,
|
||||
session_id: ''
|
||||
session_id: '',
|
||||
bins: []
|
||||
}
|
||||
//search_result_notes: []
|
||||
});
|
||||
@@ -73,13 +87,16 @@ const store = Redux.createStore(reducer, /* preloadedState, */
|
||||
const dispatch = function(action_type, payload){ store.dispatch({type:action_type, payload}); };
|
||||
|
||||
store.subscribe(()=>{
|
||||
m.render(root, m(App, {state: store.getState(), dispatch}));
|
||||
const state = store.getState();
|
||||
m.render(root, m(App, {state, dispatch}));
|
||||
});
|
||||
|
||||
api.setStore(store);
|
||||
|
||||
window.addEventListener("hashchange", (e)=>hash_change_handler(store.getState(), dispatch, e), false);
|
||||
|
||||
let state = store.getState();
|
||||
load_bin_handler(state, dispatch, bin_id);
|
||||
initial_load_bin_handler(state, dispatch, bin_id);
|
||||
|
||||
// we don't want Mithril auto-redraw system in place, since Redux will manually re-render when necessary with store.subscribe():
|
||||
// m.mount(root, App);
|
||||
|
||||
@@ -11,6 +11,7 @@ function note(o){
|
||||
n.id = o.id;
|
||||
n.text = o.text || '';
|
||||
n.modified = o.modified || 0;
|
||||
n.bin_id = o.bin_id || '';
|
||||
return n;
|
||||
}
|
||||
|
||||
|
||||
+83
-16
@@ -14,19 +14,17 @@ const db = new Pool({
|
||||
const app = express();
|
||||
const port = 80;
|
||||
|
||||
db.query("CREATE TABLE IF NOT EXISTS bin (id VARCHAR PRIMARY KEY);"
|
||||
db.query("CREATE TABLE IF NOT EXISTS bin (id VARCHAR PRIMARY KEY, name VARCHAR);"
|
||||
+ "CREATE TABLE IF NOT EXISTS note (id VARCHAR PRIMARY KEY, text TEXT, modified TIMESTAMPTZ);"
|
||||
+ "CREATE TABLE IF NOT EXISTS bin_note (bin_id VARCHAR REFERENCES bin (id), note_id VARCHAR REFERENCES note (id), PRIMARY KEY (bin_id, note_id));"
|
||||
+ "CREATE TABLE IF NOT EXISTS user_ (id VARCHAR PRIMARY KEY, username TEXT, password TEXT);" // table 'user' is already taken
|
||||
+ "CREATE TABLE IF NOT EXISTS bin_user (bin_id VARCHAR REFERENCES bin (id), user_id VARCHAR REFERENCES user_ (id), PRIMARY KEY (bin_id, user_id));"
|
||||
+ "CREATE TABLE IF NOT EXISTS session (id VARCHAR PRIMARY KEY, user_id VARCHAR REFERENCES user_ (id));"
|
||||
);
|
||||
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
router.get('/', (req, res)=>{
|
||||
res.send('Feh')
|
||||
});
|
||||
|
||||
const load_notes_stmt =
|
||||
"SELECT n.id, n.text, n.modified FROM bin_note AS bn"
|
||||
+" JOIN note AS n"
|
||||
@@ -37,7 +35,26 @@ router.post('/load-notes', (req, res)=>{
|
||||
const bin_id = req.body.bin_id;
|
||||
db.query(load_notes_stmt, [bin_id])
|
||||
.then(result => {
|
||||
res.json({status: 'ok', bin:{id:bin_id}, notes:result.rows})
|
||||
res.json({success:true, notes:result.rows})
|
||||
});
|
||||
});
|
||||
|
||||
const load_bin_stmt =
|
||||
"SELECT b.id, b.name FROM bin AS b"
|
||||
+" WHERE b.id = $1";
|
||||
// {bin_id}
|
||||
router.post('/load-bin', (req, res)=>{
|
||||
const bin_id = req.body.bin_id;
|
||||
db.query(load_bin_stmt, [bin_id])
|
||||
.then(result => {
|
||||
const bin = result.rows[0];
|
||||
// if a bin with given id was found:
|
||||
if(result.rows.length>0){
|
||||
res.json({success:true, bin:{id:bin.id, name:bin.name}});
|
||||
}
|
||||
else{
|
||||
res.json({success:false, bin:{id:bin_id, name:bin_id}});
|
||||
}
|
||||
});
|
||||
// {status: 'ok', bin:{id:bin.id}, notes: bin.notes}
|
||||
});
|
||||
@@ -61,24 +78,33 @@ const upsert_note_stmt =
|
||||
+" ON CONFLICT (id)"
|
||||
+" DO UPDATE SET text = EXCLUDED.text, modified = EXCLUDED.modified";
|
||||
const upsert_bin_stmt =
|
||||
"INSERT INTO bin (id) VALUES ($1)"
|
||||
"INSERT INTO bin (id, name) VALUES ($1, $1)"
|
||||
+" ON CONFLICT (id)"
|
||||
+" DO NOTHING";
|
||||
const upsert_bin_note_stmt =
|
||||
"INSERT INTO bin_note (bin_id, note_id) VALUES ($1, $2)"
|
||||
+" ON CONFLICT (bin_id, note_id)"
|
||||
+" DO NOTHING";
|
||||
|
||||
const upsert_bin_user_stmt =
|
||||
"INSERT INTO bin_user (bin_id, user_id)"
|
||||
+" (SELECT $1, s.user_id FROM session AS s WHERE s.id = $2)"
|
||||
+" ON CONFLICT (bin_id, user_id)"
|
||||
+" DO NOTHING";
|
||||
// {bin_id, note_id, text}
|
||||
router.post('/save', (req, res)=>{
|
||||
const {bin_id, note_id, text} = req.body;
|
||||
const {bin_id, note_id, text, session_id} = req.body;
|
||||
db.connect().then(async (client)=>{
|
||||
// TODO: make the following into a transaction:
|
||||
await client.query(upsert_note_stmt, [note_id, text]);
|
||||
await client.query(upsert_bin_stmt, [bin_id]);
|
||||
await client.query(upsert_bin_note_stmt, [bin_id, note_id]);
|
||||
// if the user is signed-in, ensure the bin and user are associated:
|
||||
if(session_id !== ''){
|
||||
await client.query(upsert_bin_user_stmt, [bin_id, session_id]);
|
||||
}
|
||||
// don't forget to release back into the Pool:
|
||||
client.release();
|
||||
res.json({status: 'ok'});
|
||||
res.json({success:true});
|
||||
});
|
||||
// {status: 'ok'}
|
||||
});
|
||||
@@ -88,17 +114,32 @@ const login_check_stmt =
|
||||
+" WHERE u.username = $1";
|
||||
const register_stmt =
|
||||
"INSERT INTO user_ (id, username, password) VALUES ($1, $2, $3)";
|
||||
const session_create_stmt =
|
||||
"INSERT INTO session (id, user_id) VALUES ($1, $2)";
|
||||
const user_bin_list_stmt =
|
||||
"SELECT b.id, b.name FROM bin_user AS bu"
|
||||
+" INNER JOIN bin AS b"
|
||||
+" ON bu.bin_id = b.id"
|
||||
+" WHERE bu.user_id = $1";
|
||||
router.post('/login', (req, res)=>{
|
||||
const {username, password_from_client} = req.body;
|
||||
const {username, password} = req.body;
|
||||
const password_from_client=password;
|
||||
db.query(login_check_stmt, [username])
|
||||
.then(result=>{
|
||||
// if there is such a username:
|
||||
if(result.rows.length > 0){
|
||||
const row = result.rows[0];
|
||||
const id=row.id, password_from_db=row.password;
|
||||
const user_id=row.id, password_from_db=row.password;
|
||||
// if the passwords match:
|
||||
// TODO: replace `===` with a constant-time comparison function to prevent timing attacks; or better, store passwords as salted hashes and use `===` on that:
|
||||
if(password_from_client === password_from_db){
|
||||
res.json({success:true, user:{id, username}, session_id:nanoid()});
|
||||
const session_id = nanoid();
|
||||
db.query(session_create_stmt, [session_id, user_id]);
|
||||
db.query(user_bin_list_stmt, [user_id])
|
||||
.then(result=>{
|
||||
const bins = result.rows;
|
||||
res.json({success:true, user:{id:user_id, username}, session_id, bins});
|
||||
});
|
||||
}
|
||||
else{
|
||||
res.json({success: false});
|
||||
@@ -106,15 +147,41 @@ router.post('/login', (req, res)=>{
|
||||
}
|
||||
// if no such user exists:
|
||||
else{
|
||||
const id = nanoid();
|
||||
db.query(register_stmt, [id, username, password_from_client])
|
||||
const user_id = nanoid();
|
||||
const session_id = nanoid();
|
||||
db.query(register_stmt, [user_id, username, password_from_client])
|
||||
.then(r=>{
|
||||
res.json({success: true, user:{id, username}, session_id:nanoid()});
|
||||
db.query(session_create_stmt, [session_id, user_id]);
|
||||
res.json({success: true, user:{id:user_id, username}, session_id, bins:[]});
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const delete_session_stmt =
|
||||
"DELETE FROM session WHERE id = $1";
|
||||
router.post('/logout', (req, res)=>{
|
||||
db.query(delete_session_stmt, [req.body.session_id]);
|
||||
res.json({success:true});
|
||||
});
|
||||
|
||||
const rename_bin_stmt =
|
||||
"INSERT INTO bin (id, name) VALUES ($1, $2)"
|
||||
+" ON CONFLICT (id)"
|
||||
+" DO UPDATE SET name = EXCLUDED.name;";
|
||||
router.post('/bin-rename', (req,res)=>{
|
||||
const {bin_id, name, session_id} = req.body;
|
||||
db.query(rename_bin_stmt, [bin_id, name])
|
||||
.then(x=>{
|
||||
// ensure user and bin are associated if necessary:
|
||||
if(session_id !== ''){
|
||||
// `upsert_bin_user_stmt` is defined above:
|
||||
db.query(upsert_bin_user_stmt, [bin_id, session_id]);
|
||||
}
|
||||
res.json({success:true});
|
||||
});
|
||||
});
|
||||
|
||||
app.use('/', express.json(), router);
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user