authd/client/user-configuration-panel.ls

226 lines
5.2 KiB
Plaintext
Raw Normal View History

2019-12-07 00:43:45 +01:00
{h} = require "maquette"
AuthWS = require "./authws.ls"
2019-12-07 00:43:45 +01:00
get-full-name = (self) ->
full-name = self.profile && self.profile.full-name || ""
if full-name == ""
self.user.login
else
full-name
2019-12-07 00:43:45 +01:00
default-side-bar-renderer = (self) ->
h \div { key: \side-bar } [
h \figure.image.is-128x128.is-clipped [
if self.profile && self.profile.avatar
h \img {
src: self.profile.avatar
alt: "Avatar of #{get-full-name self}"
}
]
]
default-heading-renderer = (self) ->
full-name = get-full-name self
h \div.section {key: \heading} [
h \div.title.is-2 [ full-name ]
if full-name != self.user.login
h \div.title.is-3.subtitle [
self.user.login
]
]
Fields = {
render-text-input: (token, auth-ws, key, inputs, model) ->
upload = ->
console.log "clickity click", key, inputs[key], inputs
return unless inputs[key]
payload = {}
for _key, value of model
payload[_key] = value
payload[key] = inputs[key]
inputs[key] := void
auth-ws.set-extra token, "profile", payload
h \div.field.has-addons {key: key} [
h \div.control.is-expanded [
h \input.input {
value: inputs[key] || model[key]
oninput: (e) ->
console.log "input for",key
inputs[key] := e.target.value
}
]
h \div.control [
h \div.button {
onclick: upload
} [ "Update" ]
]
]
}
UserConfigurationPanel = (args) ->
self = {
user: args.user || {}
profile: args.profile
token: args.token
authws-url: args.authws-url ||
((if location.protocol == 'https' then 'wss' else 'ws') +
'://' + location.hostname + ":9999/auth.JSON")
side-bar-renderer: args.side-bar-renderer || default-side-bar-renderer
heading-renderer: args.heading-renderer || default-heading-renderer
2019-12-07 00:43:45 +01:00
on-model-update: args.on-model-update || ->
model: args.model || [
["fullName", "Full Name", "string"]
["avatar", "Profile Picture", "image-url"]
["email", "Mail Address", "string"]
]
input: {}
}
auth-ws = AuthWS self.authws-url
auth-ws.add-event-listener \extra, (message) ->
if message.name == "profile"
console.log "got profile", message.extra
self.profile = message.extra || {}
self.on-model-update!
auth-ws.add-event-listener \extra-updated, (message) ->
if message.name == "profile"
console.log "got profile", message.extra
self.profile = message.extra || {}
self.on-model-update!
unless self.profile
auth-ws.socket.onopen = ->
auth-ws.get-extra self.token, "profile"
self.render = ->
2019-12-07 00:43:45 +01:00
h \div.columns {
key: self
} [
h \div.column.is-narrow [
self.side-bar-renderer self
2019-12-07 00:43:45 +01:00
]
h \div.column [
self.heading-renderer self
2019-12-07 00:43:45 +01:00
if self.profile
h \div.box {key: \profile} [
h \div.form [
h \div.title.is-4 [ "Profile" ]
for element in self.model
[key, label, type] = element
switch type
when "string", "image-url"
h \div.field { key: key } [
h \div.label [ label ]
Fields.render-text-input self.token, auth-ws, key, self.input, self.profile
]
]
2019-12-07 00:43:45 +01:00
]
else
# FIXME: urk, ugly loader.
h \div.button.is-loading
h \div.box { key: \password } [
h \div.title.is-4 [ "Password" ]
h \div.label [ "Old #{label}" ]
h \div.control [
h \input.input {
type: \password
oninput: (e) ->
self.input["password.old"] = e.target.value
}
]
h \div.label [ "New #{label}" ]
h \div.control [
h \input.input {
type: \password
oninput: (e) ->
self.input["password.new"] = e.target.value
}
]
h \div.label [ "New #{label} (repeat)" ]
h \div.field.has-addons [
h \div.control.is-expanded [
h \input.input {
type: \password
oninput: (e) ->
self.input["password.new2"] = e.target.value
}
]
h \div.control [
h \div.button {
classes: {
"is-danger": self.input["password.new"] && self.input["password.new"] != self.input["password.new2"]
"is-static": (!self.input["password.new"]) && self.input["password.new"] != self.input["password.new2"]
}
onclick: ->
if self.input["password.new"] != self.input["password.new2"]
return
auth-ws.update-password self.user.login, self.input["password.old"], self.input["password.new"]
} [ "Update" ]
]
]
]
if self.show-developer
h \div.box {key: \passwd} [
h \div.title.is-4 [ "Permissions" ]
h \div.form [
h \div.field {key: \uid} [
h \div.label [ "User ID" ]
h \div.control [ self.user.uid.to-string! ]
]
h \div.field {key: \gid} [
h \div.label [ "Group ID" ]
h \div.control [ self.user.gid.to-string! ]
]
h \div.field {key: \groups} [
h \div.label [ "Groups" ]
h \div.control.is-grouped [
h \div.tags self.user.groups.map (group) ->
h \div.tag [ group ]
]
]
]
]
else
h \a.is-pulled-right.is-small.has-text-grey {
key: \passwd
onclick: ->
self.show-developer := true
self.on-model-update!
} [
"Show developer data!"
]
2019-12-07 00:43:45 +01:00
]
]
self
module.exports = UserConfigurationPanel