diff --git a/src/documents/index.html.coffee b/src/documents/index.html.coffee
index d376ff3..7f0cf35 100644
--- a/src/documents/index.html.coffee
+++ b/src/documents/index.html.coffee
@@ -44,6 +44,25 @@ aside '.app', ->
section '.login.modal.main.show-login', ->
img '.button.button-login', alt:'Login', src:'/images/login.png', width:'95px', height:'25px', ->
+ section '.account.modal.main.show-login', ->
+ header ->
+ span '.title', -> 'Create Account'
+
+ div '.body', ->
+ form '.account-form', action:'', method:'POST', ->
+ div '.field.field-name', ->
+ label -> 'Name'
+ input type:'text', placeholder:'Your name', ->
+
+ div '.field.field-email', ->
+ label -> 'Email'
+ input type:'email', placeholder:'you@example.com', ->
+
+ input '.button.button-save', type:'submit', value:'Save Account'
+
+ button '.button.button-cancel', ->
+ 'Cancel'
+
section '.site-add.modal.main.show-admin', ->
header ->
span '.title', -> 'Add Site'
diff --git a/src/documents/scripts/views/app.js.coffee b/src/documents/scripts/views/app.js.coffee
index 926654e..290bd2e 100644
--- a/src/documents/scripts/views/app.js.coffee
+++ b/src/documents/scripts/views/app.js.coffee
@@ -25,6 +25,7 @@ class App extends View
'.content-table.sites': '$sitesList'
'.content-row-file': '$files'
'.content-row-site': '$sites'
+ '.account.modal': '$accountModal'
'.page-edit-container': '$pageEditContainer'
events:
@@ -38,6 +39,8 @@ class App extends View
'click .button-add-site': 'clickAddSite'
'submit .site-add-form': 'submitSite'
'click .site-add-form .button-cancel': 'submitSiteCancel'
+ 'submit .account-form': 'submitAccount'
+ 'click .account-form .button-cancel': 'submitAccountCancel'
constructor: ->
# Super
@@ -59,13 +62,13 @@ class App extends View
@setAppMode('login')
# Login
- currentUser = localStorage.getItem('currentUser') or null
+ currentUser = @readCurrentUser()
navigator.id?.watch(
- loggedInUser: currentUser
+ loggedInUser: currentUser?.email or null
onlogin: (args...) ->
# ignore as we listen to post message
- onlogout: ->
- localStorage.setItem('currentUser', '')
+ onlogout: =>
+ @clearCurrentUser()
)
# Login the user if we already have one
@@ -126,12 +129,13 @@ class App extends View
currentSite: null
currentFileCollection: null
currentFile: null
+ currentUser: null
setAppMode: (mode) ->
@mode = mode
@$el
- .removeClass('app-login app-admin app-site app-page')
+ .removeClass('app-login app-account app-admin app-site app-page')
.addClass('app-'+mode)
@
@@ -244,18 +248,60 @@ class App extends View
# A user has logged in successfully
# so apply the logged in user to our application
# by saving the user to local storage and taking them to the admin
- loginUser: (email) ->
- return @ unless email
+ loginUser: (user) ->
+ user = @normalizeUser(user)
+ return @ unless user?.email
# Apply the user
- localStorage.setItem('currentUser', email)
+ @currentUser = user
+ localStorage.setItem('currentUser', JSON.stringify(user))
- # Update navigation
- @setAppMode('admin') if @mode is 'login'
+ # Require any missing account details before we enter the app
+ if user.name
+ @setAppMode('admin') if @mode in ['login', 'account']
+ else
+ @$accountModal.find('.field-name :input').val('')
+ @$accountModal.find('.field-email :input').val(user.email)
+ @setAppMode('account')
# Chain
@
+ readCurrentUser: ->
+ user = localStorage.getItem('currentUser') or null
+ return null unless user
+
+ try
+ user = JSON.parse(user)
+ catch err
+ user = {email: user}
+
+ user = @normalizeUser(user)
+ return user
+
+ clearCurrentUser: ->
+ @currentUser = null
+ localStorage.removeItem('currentUser')
+ @setAppMode('login')
+ @
+
+ normalizeUser: (user) ->
+ return null unless user
+
+ if typeof user is 'string'
+ user =
+ email: user
+
+ email = user.email or user.principal?.email or user.identifier or null
+ name = user.name or user.displayName or user.fullName or user.principal?.name or null
+
+ return null unless email
+
+ return {
+ email: email
+ name: name
+ }
+
# ---------------------------------
@@ -309,6 +355,39 @@ class App extends View
# Chain
@
+ submitAccount: (e) =>
+ # Disable click through
+ e.preventDefault()
+ e.stopPropagation()
+
+ # Extract
+ name = @$el.find('.account .field-name :input').val() or ''
+ email = @$el.find('.account .field-email :input').val() or ''
+
+ # Default
+ name = name.replace(/^\s+|\s+$/g, '') or null
+ email = email.replace(/^\s+|\s+$/g, '') or null
+
+ # Create
+ if name and email
+ @loginUser({name, email})
+ else
+ alert 'need more account data'
+
+ # Chain
+ @
+
+ submitAccountCancel: (e) =>
+ # Disable click through
+ e.preventDefault()
+ e.stopPropagation()
+
+ # Hide the modal
+ @clearCurrentUser()
+
+ # Chain
+ @
+
# Handle login button
# Send the request off to persona to start the login process
# Receives the result via our `onMessage` handler
@@ -549,7 +628,10 @@ class App extends View
# Login the user
if data.d?.assertion?
- @loginUser(data.d.email)
+ @loginUser({
+ email: data.d.email
+ name: data.d.name or data.d.displayName or data.d.principal?.name or null
+ })
# Chain
@
diff --git a/src/documents/styles/app.css.styl b/src/documents/styles/app.css.styl
index bd1ee3e..17a471a 100644
--- a/src/documents/styles/app.css.styl
+++ b/src/documents/styles/app.css.styl
@@ -289,6 +289,16 @@ select.collection-list
.login.modal
display: block
+ &.app-account
+ .menu
+ .show-login
+ .show-admin
+ .show-site
+ .show-page
+ display: none
+ .account.modal
+ display: block
+
&.app-admin
.menu
background: colorAdminBackground
@@ -560,6 +570,23 @@ select.collection-list
background: colorAdminBackground
.login
+.account
text-align: center
border: none
- box-shadow: none
\ No newline at end of file
+ box-shadow: none
+
+.account
+ .body
+ padding: 1.25em 1.5em 1.5em
+ text-align: left
+
+ .field
+ margin-bottom: 1em
+
+ label
+ display: block
+ margin-bottom: 0.35em
+
+ input
+ width: 100%
+ box-sizing: border-box