From 97fa65be3d07d8292b4573dca6a797d0cd300d33 Mon Sep 17 00:00:00 2001 From: Philippe PITTOLI Date: Thu, 12 Dec 2019 01:25:36 +0100 Subject: [PATCH] new login form, user management --- client/index.ls | 75 +++++++++++++---------------------- client/project.ls | 18 +++++++-- client/style.sass | 6 +-- client/task-creation-modal.ls | 56 +++++++++++++++++++++++--- client/task.ls | 35 ++++------------ client/todowebsocket.ls | 8 ++-- 6 files changed, 107 insertions(+), 91 deletions(-) diff --git a/client/index.ls b/client/index.ls index 6388ff5..bbfcaea 100644 --- a/client/index.ls +++ b/client/index.ls @@ -1,41 +1,8 @@ -# first: -# connection to authd -# display the authd widget -# -# second: -# connection to todod -# rewrite the whole body component -# page 1: (TODO) list of lists (or todos) -# display: -# navbar -# -# "element 1" button -# "element 2" button -# ... -# "element x" button -# -# "new list" button -# widgets: -# navbar: [return to list button] [logout] -# element button: -# [project list name] -# or -# [project list name] [RIGTHS] [DELETE] -# -# page 2: -# display: -# (TODO) list of tasks (this client has a kanban display of tasks, with columns) -# (TODO) task widget -# widgets: -# task widget: -# TODO -# -# page 3: (TODO) pages about - maquette = require "maquette" nmd = require "nano-markdown" authd = require "./authd.ls" +LoginForm = require "../lib/authd/client/login-form.ls" todows = require "./todowebsocket.ls" bulma = require "./bulma.ls" Task = require "./task.ls" @@ -49,13 +16,10 @@ projector = create-projector! model = { # view: login, project-list, project, network-error (TODO: other views, such as rights) - # XXX FIXME TODO: TESTING THINGS current-view: "login" viewed-project: void - # current-view: "testing-modals" - # list of Project objects project-list: [] @@ -122,13 +86,14 @@ model.authd-ws.user-on-socket-close ++= [ authd-on-websocket-close ] # authd message handlers -model.authd-ws.add-event-listener \token, (message) -> - model.current-view := "project-list" - model.authd-ws.token := message.token - model.todod-ws.token := message.token - model.todod-ws.list-lists! - model.authd-ws.list-users! - projector.schedule-render! +# HANDLED with the "on-login" callback in the LoginForm component +# model.authd-ws.add-event-listener \token, (message) -> +# model.current-view := "project-list" +# model.authd-ws.token := message.token +# model.todod-ws.token := message.token +# model.todod-ws.list-lists! +# model.authd-ws.list-users! +# projector.schedule-render! model.authd-ws.add-event-listener \error, (message) -> console.log "authd error", message @@ -275,22 +240,24 @@ render-navbar = -> h \div.navbar-start [ h \a.navbar-item.is-size-2 { onclick: -> - model.todod-ws.unsubscribe model.viewed-project.id + if model.viewed-project + model.todod-ws.unsubscribe model.viewed-project.id model.todod-ws.list-lists! model.viewed-project := void model.current-view := "project-list" } [ "⌂" ] ] - if model.viewed-project + if model.current-view == "project" && model.viewed-project model.viewed-project.inner-nav-render! h \div.navbar-end [ - if model.viewed-project + if model.current-view == "project" && model.viewed-project model.viewed-project.right-nav-render! h \a.navbar-item { + key: "logout" onclick: -> model.current-view := "login" # TODO: remove anything related to the old session on the client @@ -343,11 +310,23 @@ render-project = (project) -> bulma.title 3 "Error, we did not get the project id " + project.id ] +model.login-form = LoginForm { + authws-url: model.authd-url + on-login: (user, token) -> + model.current-view := "project-list" + model.authd-ws.token := token + model.todod-ws.token := token + model.todod-ws.list-lists! + model.authd-ws.list-users! + projector.schedule-render! +} + render-body = -> h \div.section [ switch model.current-view when "login" - authd.login-page model + # authd.login-page model + model.login-form.render! when "project-list" h \div#project-list [ diff --git a/client/project.ls b/client/project.ls index 335182b..0ad731a 100644 --- a/client/project.ls +++ b/client/project.ls @@ -34,6 +34,10 @@ Project = (self, todod-ws, users) -> if first tasks-to-display ++= orphan-tasks self.tasks, self.extra_properties.columns + # + # COLUMNS + # + h \div.column { key: column.id } [ @@ -53,21 +57,27 @@ Project = (self, todod-ws, users) -> self.right-nav-render = -> [ - h \div.navbar-item [ + h \div.navbar-item { + key: "navbar-new-task" + } [ h \div.button.is-success.is-outlined { onclick: -> - modal := TaskCreationModal self, self.todod-ws + modal := TaskCreationModal self, self.todod-ws, void, self.users } [ "New task" ] ] - h \div.navbar-item [ + h \div.navbar-item { + key: "navbar-edit-project" + } [ h \div.button.is-outlined { onclick: -> modal := ProjectCreationModal self, self.todod-ws, self.users } [ "Edit this project" ] ] - h \div.navbar-item [ + h \div.navbar-item { + key: "navbar-delete-project" + } [ h \div.button.is-danger.is-outlined { onclick: -> modal := Modal { diff --git a/client/style.sass b/client/style.sass index 7183fa3..a61683f 100644 --- a/client/style.sass +++ b/client/style.sass @@ -1,14 +1,14 @@ @charset "utf-8" -@import "../node_modules/bulmaswatch/superhero/_variables.scss" +// @import "../node_modules/bulmaswatch/superhero/_variables.scss" // Import Bulma core @import "../node_modules/bulma/bulma" -@import "../node_modules/bulmaswatch/superhero/_overrides.scss" +// @import "../node_modules/bulmaswatch/superhero/_overrides.scss" .project>.columns - overflow-x: scroll + overflow-x: auto .avatar border-radius: 4px diff --git a/client/task-creation-modal.ls b/client/task-creation-modal.ls index 9dbb91d..6fcd757 100644 --- a/client/task-creation-modal.ls +++ b/client/task-creation-modal.ls @@ -38,36 +38,51 @@ color-to-form-selection = (self, color, current-color) -> selected: current-color && current-color == color } [ color ] -TaskCreationModal = (project, todod-ws, task) -> +user-form-selection = (self, user) -> + h \option { + value: user.uid + } [ user.login ] + +TaskCreationModal = (project, todod-ws, task, users) -> task ||= {} # copy not to override anything on cancel self = { title: task.title || "" description: task.description || "" - extra_properties: { + extra_properties: column: "" background-color: "" - } + assignee-id: task.assignee-id || void + tmp: + users: users || [] } # copy extra properties # currently: column + background-color + assignee + expected duration time for k,v of task.extra_properties - console.log "extra_propertie: " + k + ", value: " + v self.extra_properties[k] = v - modal = Modal { +visible content-render: (self) -> h \div.form [ + + # + # TITLE + # + h \input.input { value: self.title oninput: (e) -> self.title := e.target.value } + + # + # DESCRIPTION + # + h \textarea { value: self.description oninput: (e) -> @@ -84,6 +99,35 @@ TaskCreationModal = (project, todod-ws, task) -> } project.extra_properties.columns.map (column) -> column-form-selection self, column ] + + # + # USER MANAGEMENT + # + + h \hr [] + + h \p [ "Assign someone to the task" ] + + h \div.field.has-addons { + key: "assign-someone-to-task" + } [ + h \div.select.control [ + h \select { + onchange: (e) -> + self.extra_properties.assignee-id := e.target.value + } [ + user-form-selection self, { login: "Choose a user", uid: "-" } + for user-id, user of self.tmp.users + user-form-selection self, user + ] + ] + ] + + + # + # BACKGROUND COLOR + # + h \p [ "Choose the background color" ] h \div.select [ @@ -95,10 +139,12 @@ TaskCreationModal = (project, todod-ws, task) -> ] on-validation: -> + tmp = delete self.tmp if task.id todod-ws.edit-task task.id, self else todod-ws.add-task project.id, self.title, self + self.tmp = tmp }, self self.render = -> diff --git a/client/task.ls b/client/task.ls index e60673c..53df5b7 100644 --- a/client/task.ls +++ b/client/task.ls @@ -1,35 +1,14 @@ -# -# Tasks, previous version of todos -# - h = require 'maquette' .h bulma = require "./bulma.ls" nmd = require "nano-markdown" TaskCreationModal = require './task-creation-modal.ls' TaskRemovalModal = require './task-removal-modal.ls' -# -# generic functions -# - -get-previous = (collection, element) -> - var previous - - for item in collection - if item == element - return previous - - previous = item - -get-next = (collection, element) -> - var found-element - - for item in collection - if found-element - return item - - if item == element - found-element := true +display-login = (task, users) -> + if task.extra_properties && task.extra_properties.assignee-id && users && users[task.extra_properties.assignee-id] && users[task.extra_properties.assignee-id].login + h \p [ '@' + users[task.extra_properties.assignee-id].login ] + else + h \p [ '-' ] Task = (self, project, todod-ws) -> @@ -48,14 +27,14 @@ Task = (self, project, todod-ws) -> h \div.media-left [ # FIXME: assignee card image "LEFT" - h \p [ "@coucou" ] + display-login self, project.users ] h \div.media-content [ self.title ] h \div.button { onclick: -> - modal := TaskCreationModal project, todod-ws, self + modal := TaskCreationModal project, todod-ws, self, project.users } [ "Edit" ] h \div.button.is-danger { diff --git a/client/todowebsocket.ls b/client/todowebsocket.ls index 0e517b5..c4354a4 100644 --- a/client/todowebsocket.ls +++ b/client/todowebsocket.ls @@ -68,10 +68,11 @@ module.exports = { self.socket.onmessage = (event) -> message = JSON.parse(event.data) - console.log "todod message received: ", message + parsed-message = JSON.parse(message.payload) + console.log "todod message #{message.mtype} received: ", parsed-message for f in self.callbacks[message.mtype] - f JSON.parse(message.payload) + f parsed-message self.reopen = -> self.socket.close! @@ -80,7 +81,8 @@ module.exports = { self.open-socket! self.send = (type, opts) -> - console.log JSON.stringify { mtype: type, payload: opts } + console.log "sending message #{type} to todod: ", opts + # console.log JSON.stringify { mtype: type, payload: opts } self.socket.send JSON.stringify { mtype: type, payload: opts }