Add account setup flow for Persona login

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'

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
 		@

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