new login form, user management

dev
Philippe PITTOLI 2019-12-12 01:25:36 +01:00
parent 73b76c0852
commit 97fa65be3d
6 changed files with 107 additions and 91 deletions

View File

@ -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 [

View File

@ -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 {

View File

@ -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

View File

@ -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 = ->

View File

@ -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 {

View File

@ -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 }