Refactoring joining team from link

www/common/invitation.js

@@ -44,6 +44,16 @@ var factory = function (Hash, Crypt, Nacl, Scrypt/*, Util, Cred, nThen */) {
     };
 
     Invite.getPreviewContent = function (seeds, cb) {
+        setTimeout(function () {
+            cb(void 0, {
+                author: {
+                    displayName: 'Bob',
+                    curvePublic: 'pewpewpew'
+                },
+                team: 'CryptPad',
+                message: 'Hello bob'
+            });
+        });
         /*
         var secrets = Invite.derivePreviewSecrets(seeds);
         secrets = secrets;
@@ -84,7 +94,7 @@ var factory = function (Hash, Crypt, Nacl, Scrypt/*, Util, Cred, nThen */) {
             '/common/common-hash.js',
             '/common/cryptget.js',
             '/bower_components/tweetnacl/nacl-fast.min.js',
-            '/bower_components/scrypt_async/scrypt-async.min.js',
+            '/bower_components/scrypt-async/scrypt-async.min.js',
         ], function (Hash, Crypt /*, Nacl, Scrypt */) {
             return factory(Hash, Crypt, window.nacl, window.Scrypt);
         });

www/teams/inner.js

@@ -1019,56 +1019,44 @@ define([
         ]);
     }, true);
 
-    makeBlock('link', function (common, cb) {
+    var displayUser = function (common, data) {
-        // XXX get team data first or login first?
+        var friends = common.getMetadataMgr().getPrivateData().friends;
-        if (!driveAPP.loggedIn) {
+        var verified = false;
-            var anonLogin, anonRegister;
+        if (friends[data.curvePublic]) { verified = true; }
-            var anonContent = h('div', [
+        var avatar = h('span.cp-teams-invite-from-avatar.cp-avatar');
-                h('p', "You've been invited to a team. Only registered users can join a team. Login or register..."), // XXX
+        UIElements.displayAvatar(common, $(avatar), data.avatar, data.displayName);
-                h('div', [
+        return h('div.cp-teams-invite-from-author', [
-                    anonLogin = h('button.btn.btn-primary', Messages.login_login),
+            avatar,
-                    anonRegister = h('button.btn.btn-secondary', Messages.login_register),
+            h('span.cp-teams-invite-from-name', data.displayName)
-                ])
         ]);
-            $(anonLogin).click(function () {
+    };
-                common.setLoginRedirect(function () {
+
-                    common.gotoURL('/login/');
+    makeBlock('link', function (common, cb) {
-                });
-            });
-            $(anonRegister).click(function () {
-                common.setLoginRedirect(function () {
-                    common.gotoURL('/register/');
-                });
-            });
-            return void cb(anonContent);
-        }
         var hash = common.getMetadataMgr().getPrivateData().teamInviteHash;
         var hashData = Hash.parseTypeHash('invite', hash);
         var password = hashData.password;
         var seeds = InviteInner.deriveSeeds(hashData.key);
 
-        var div;
+        var div = h('div', [
+            h('i.fa.fa-spin.fa-spinner')
+        ]);
+        var $div = $(div);
+        cb([
+            h('h2', 'Team invitation'), // XXX
+            div
+        ]);
+        var inviteDiv = h('div');
+        var $inviteDiv = $(inviteDiv);
 
         var process = function (pw) {
-            var $div = $(div);
+            $inviteDiv.empty();
-            $div.empty();
             var bytes64;
 
-            nThen(function (waitFor) {
-                // XXX show something while we're waiting for the invite preview content
-                waitFor = waitFor;
-            }).nThen(function (waitFor) {
-                InviteInner.getPreviewContent(seeds, waitFor(function (err, json) {
-                    json = json; // XXX {message: "", author: "", ???}
-                    if (err) {
-                        // XXX handle errors
-                    }
-                    // XXX show invite preview content
 
             var button = h('button', 'XXX');
             button.onclick = function () {
                 nThen(function (waitFor) {
-                            $div.append(h('div', [
+                    $inviteDiv.append(h('div', [
                         h('i.fa.fa-spin.fa-spinner'),
                         h('span', 'Scrypt...') // XXX
                     ]));
@@ -1091,30 +1079,69 @@ define([
                 });
             };
 
-                    $div.append(button);
+            $inviteDiv.append(button);
-                }));
-            });
         };
 
-        var content = [];
+        nThen(function (waitFor) {
-        if (password) {
+            InviteInner.getPreviewContent(seeds, waitFor(function (err, json) {
-            // XXX XXX
+                if (err) {
-            content.push(h('p', "You've been invited to join a CryptPad Team, but the person who created the invitation protected it with a secret passphrase that they expect you to know."));
+                    // XXX handle errors
-            content.push(h('p', "Entering the correct phrase will decrypt the team's info and allow you to accept or decline the invitation."));
+                }
+                json = json; // XXX {message: "", author: "", ???}
+                $div.empty();
+                $div.append(h('div.cp-teams-invite-from', [
+                    'From', // XXX
+                    displayUser(common, json.author)
+                ]));
+                $div.append(UI.setHTML(h('p.cp-teams-invite-to'), 'Bob has invited you to join the team <b>CryptPad</b>')); // XXX
+                $div.append(h('div.cp-teams-invite-message', [
+                    UI.dialog.selectableArea(json.message || '')
+                ]));
+            }));
+        }).nThen(function (waitFor) {
+            // If you're logged in, move on to the next nThen
+            if (driveAPP.loggedIn) { return; }
+
+            // If you're not logged in, display the login buttons
+            var anonLogin, anonRegister;
+            $div.append(h('p', 'Please log in or register to accept this invitation...')); // XXX
+            $div.append(h('div', [
+                anonLogin = h('button.btn.btn-primary', Messages.login_login),
+                anonRegister = h('button.btn.btn-secondary', Messages.login_register),
+            ]));
+            $(anonLogin).click(function () {
+                common.setLoginRedirect(function () {
+                    common.gotoURL('/login/');
+                });
+            });
+            $(anonRegister).click(function () {
+                common.setLoginRedirect(function () {
+                    common.gotoURL('/register/');
+                });
+            });
+            waitFor.abort();
+        }).nThen(function () {
+            $div.append($inviteDiv);
+        }).nThen(function (waitFor) {
+            // If there is no password, move on to the next block
+            if (!password) { return; }
+
+            // If there is a password, display the password prompt
+            $inviteDiv.append(h('p', 'Please enter the invitation password to continue...')); // XXX
             var pwInput = UI.passwordInput();
-            content.push(pwInput);
             var submitPw = h('button.btn.btn-secondary', Messages.password_submit);
             $(submitPw).click(function () {
                 var val = $(pwInput).find('input').val();
                 if (!val) { return; }
                 process(val);
             });
-            content.push(submitPw);
+            $inviteDiv.append(pwInput);
-        }
+            $inviteDiv.append(submitPw);
-        div = h('div', content);
+            waitFor.abort();
-        cb(div);
+        }).nThen(function () {
-
+            // No password, display the invitation proposal
-        if (!password) { process(); }
+            process('');
+        });
     });
 
     var redrawTeam = function (common) {