new login form, user management
This commit is contained in:
Philippe PITTOLI
parent
73b76c0852
commit
97fa65be3d
@ -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,6 +240,7 @@ render-navbar = ->
|
||||
h \div.navbar-start [
|
||||
h \a.navbar-item.is-size-2 {
|
||||
onclick: ->
|
||||
if model.viewed-project
|
||||
model.todod-ws.unsubscribe model.viewed-project.id
|
||||
model.todod-ws.list-lists!
|
||||
model.viewed-project := void
|
||||
@ -282,15 +248,16 @@ render-navbar = ->
|
||||
} [ "⌂" ]
|
||||
]
|
||||
|
||||
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 [
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 = ->
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 }
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user