maquette = require "maquette" {h} = maquette bulma = require "maquette-bulma" AuthWS = require "./authws.js" LoginForm = (args) -> args or= {} self = { on-login: args.on-login || -> on-error: args.on-error || -> schedule-render: args.schedule-render || -> current-view: "login" enable-registration: args.enable-registration || false registrating: false input: { login: "" password: "" repeat-password: "" } locked-input: true error: void authws-url: args.authws-url || ((if location.protocol == 'https' then 'wss' else 'ws') + '://' + location.hostname + ":9999/auth.JSON") } auth-ws = AuthWS self.authws-url auth-ws.socket.onopen = -> console.log "socket is open" self.locked-input := false self.schedule-render! auth-ws.user-on-socket-error.push (...) -> self.error = "socket error" self.on-error ... auth-ws.add-event-listener \token, (message) -> self.error := void self.token = message.token self.locked-input := false if self.user self.on-login self.user, self.token auth-ws.add-event-listener \user, (message) -> self.error := void self.user = message.user if self.token self.on-login self.user, self.token auth-ws.add-event-listener \user-added, (message) -> {login, password} = {self.input.login, self.input.password} console.log "user added, duh" self.user := message.user auth-ws.get-token login, password auth-ws.add-event-listener \error, (message) -> # We’ll get another error that’s clearer. Dropping that one. if message.reason == "user not found" return self.error := message.reason self.locked-input := false self.on-error message.reason self.render = -> if self.error == "socket error" return h \div.notification.is-danger [ h \div.title.is-4 [ "WebSocket error!" ] h \p [ "Cannot connect to authd." ] ] h \form.form.login-form { key: self onsubmit: (e) -> {login, password} = {self.input.login, self.input.password} self.locked-input := true if self.registrating auth-ws.register login, password else auth-ws.get-token login, password auth-ws.get-user-by-credentials login, password e.prevent-default! }, [ h \div.field {key: \login} [ bulma.label "Login" bulma.input { type: "text" id: "login" name: "login" classes: { "is-danger": self.error == "invalid credentials" } disabled: self.locked-input oninput: (e) -> self.input.login = e.target.value } ] h \div.field {key: \password} [ bulma.label "Password" bulma.input { type: "password" id: "password" name: "password" classes: { "is-danger": self.error == "invalid credentials" } oninput: (e) -> self.input.password = e.target.value disabled: self.locked-input } ] if self.registrating h \div.field {key: \password-repeat} [ bulma.label "Password (reapeat)" bulma.input { type: \password id: \password-repeat name: \password-repeat classes: { "is-danger": self.input.password != self.input.repeat-password } disabled: self.locked-input oninput: (e) -> self.input.repeat-password = e.target.value } ] if self.error h \div.field {key: \error-notification} [ h \div.notification.is-danger [ self.error ] ] if self.registrating h \div.field.is-grouped {key: \login-button} [ if self.input.login == "" h \button.button.is-static.is-fullwidth { type: \submit } [ "(empty login)" ] else if self.input.password != self.input.repeat-password h \button.button.is-static.is-fullwidth { type: \submit } [ "(passwords don’t match)" ] else if self.input.password == "" h \button.button.is-static.is-fullwidth { type: \submit } [ "(empty password)" ] else h \button.button.is-success.is-fullwidth { type: \submit } [ "Register!" ] ] else h \div.field.is-grouped {key: \login-button} [ h \button.button.is-fullwidth.is-success { type: \submit } [ "Log in!" ] ] h \div.field.level {key: \extra-buttons} [ #h \div.level-left [ # h \a.link [ "(lala, remember me?)" ] #] if self.enable-registration h \div.level-right [ if self.registrating h \a.link { onclick: (e) -> self.registrating := false } [ "Log in" ] else h \a.link { onclick: (e) -> self.registrating := true } [ "Create account!" ] ] ] ] self module.exports = LoginForm