new login form, user management

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 [

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 {

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

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

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 {

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 }