From 496add35b91df818ca57fd74090bd3e003ca43ad Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sat, 13 Jun 2015 19:56:59 -0400
Subject: [PATCH] support in-app connect signup

---
 dashboard-ui/connectlogin.html                | 46 ++++++++++++-
 dashboard-ui/css/nowplaying.css               | 15 +++-
 dashboard-ui/css/site.css                     |  9 +--
 dashboard-ui/scripts/connectlogin.js          | 69 +++++++++++++++++--
 dashboard-ui/scripts/extensions.js            |  2 +-
 dashboard-ui/scripts/nowplayingpage.js        |  2 +-
 dashboard-ui/scripts/site.js                  |  1 +
 .../thirdparty/apiclient/connectionmanager.js | 64 +++++++++++++++++
 8 files changed, 188 insertions(+), 20 deletions(-)

diff --git a/dashboard-ui/connectlogin.html b/dashboard-ui/connectlogin.html
index 2e1bad1297..221f6d34a2 100644
--- a/dashboard-ui/connectlogin.html
+++ b/dashboard-ui/connectlogin.html
@@ -44,9 +44,13 @@
                 </div>
 
                 <div class="newUsers">
-                    <br />
                     <h2 style="text-align: left;">${HeaderNewUsers}</h2>
-                    <a data-role="button" data-icon="action" href="http://emby.media/community/index.php?app=core&module=global&section=register" target="_blank">${ButtonSignUp}</a>
+                    <a class="btn" href="connectlogin.html?mode=signup">
+                        <span>
+                            ${ButtonSignUp}
+                        </span>
+                        <i class="fa fa-plus-circle"></i>
+                    </a>
                 </div>
             </form>
 
@@ -64,7 +68,7 @@
                     <label for="txtServerPort" style="text-align: left;">${LabelServerPort}</label>
                     <input type="number" id="txtServerPort" step="1" min="0" />
                 </div>
-                <br /><br />
+                <br />
 
                 <button class="btn btnActionAccent" data-role="none" type="submit">
                     <span>
@@ -80,6 +84,42 @@
                 </a>
             </form>
 
+            <form class="signupForm" style="text-align: center; margin: 0 auto;display:none;">
+
+                <h1 style="text-align: left;">${HeaderSignUp}</h1>
+                <br />
+                <div>
+                    <label for="txtSignupEmail" style="text-align: left;">${LabelEmail}</label>
+                    <input type="email" id="txtSignupEmail" required="required" />
+                </div>
+                <div>
+                    <label for="txtSignupUsername" style="text-align: left;">${LabelUsername}</label>
+                    <input type="text" id="txtSignupUsername" required="required" />
+                </div>
+                <div>
+                    <label for="txtSignupPassword" style="text-align: left;">${LabelPassword}</label>
+                    <input type="password" id="txtSignupPassword" required="required" autocomplete="off" />
+                </div>
+                <div>
+                    <label for="txtSignupPasswordConfirm" style="text-align: left;">${LabelPasswordConfirm}</label>
+                    <input type="password" id="txtSignupPasswordConfirm" required="required" autocomplete="off" />
+                </div>
+                <br />
+
+                <button class="btn btnActionAccent" data-role="none" type="submit">
+                    <span>
+                        ${ButtonSignUp}
+                    </span>
+                    <i class="fa fa-check"></i>
+                </button>
+                <a class="btn btnDarkAccent" href="#" data-rel="back">
+                    <span>
+                        ${ButtonCancel}
+                    </span>
+                    <i class="fa fa-close"></i>
+                </a>
+            </form>
+
             <div class="welcomeContainer readOnlyContent" style="text-align: center; margin: 0 auto;display:none;">
 
                 <div style="text-align: left;">
diff --git a/dashboard-ui/css/nowplaying.css b/dashboard-ui/css/nowplaying.css
index 01b68bd2df..bf57afe975 100644
--- a/dashboard-ui/css/nowplaying.css
+++ b/dashboard-ui/css/nowplaying.css
@@ -124,11 +124,22 @@
 }
 
 .nowPlayingPageTitle {
-    margin: 1em 0;
+    margin: .5em 0;
 }
 
 .nowPlayingInfoButtons {
-    padding-top: 1em;
+    padding-top: .5em;
+}
+
+@media all and (min-height: 600px) {
+
+    .nowPlayingPageTitle {
+        margin: 1em 0;
+    }
+
+    .nowPlayingInfoButtons {
+        padding-top: 1em;
+    }
 }
 
 @media (orientation: landscape) {
diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index 7b849c187d..b00b9942a3 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -306,7 +306,7 @@ pre, textarea.pre {
 }
 
 .imgLogoIcon {
-    height: 45px;
+    height: 40px;
     vertical-align: middle;
 }
 
@@ -543,13 +543,6 @@ h1 .imageLink {
     }
 }
 
-@media all and (min-width: 650px) {
-
-    .imgLogoIcon {
-        height: 50px;
-    }
-}
-
 @media all and (min-width: 800px) {
 
     /*
diff --git a/dashboard-ui/scripts/connectlogin.js b/dashboard-ui/scripts/connectlogin.js
index c9066182ce..209b843069 100644
--- a/dashboard-ui/scripts/connectlogin.js
+++ b/dashboard-ui/scripts/connectlogin.js
@@ -100,16 +100,25 @@
             $('.connectLoginForm', page).hide();
             $('.welcomeContainer', page).show();
             $('.manualServerForm', page).hide();
+            $('.signupForm', page).hide();
         }
         else if (mode == 'connect') {
             $('.connectLoginForm', page).show();
             $('.welcomeContainer', page).hide();
             $('.manualServerForm', page).hide();
+            $('.signupForm', page).hide();
         }
         else if (mode == 'manualserver') {
             $('.manualServerForm', page).show();
             $('.connectLoginForm', page).hide();
             $('.welcomeContainer', page).hide();
+            $('.signupForm', page).hide();
+        }
+        else if (mode == 'signup') {
+            $('.manualServerForm', page).hide();
+            $('.connectLoginForm', page).hide();
+            $('.welcomeContainer', page).hide();
+            $('.signupForm', page).show();
         }
     }
 
@@ -134,6 +143,46 @@
         return false;
     }
 
+    function onSignupFormSubmit() {
+
+        var page = $(this).parents('.page');
+
+        ConnectionManager.signupForConnect($('#txtSignupEmail', page).val(), $('#txtSignupUsername', page).val(), $('#txtSignupPassword', page).val(), $('#txtSignupPasswordConfirm', page).val()).done(function () {
+
+            Dashboard.alert({
+                message: Globalize.translate('MessageThankYouForConnectSignUp'),
+                callback: function () {
+                    Dashboard.navigate('connectlogin.html?mode=welcome');
+                }
+            });
+
+        }).fail(function (result) {
+
+            if (result.errorCode == 'passwordmatch') {
+                Dashboard.alert({
+                    message: Globalize.translate('ErrorMessagePasswordNotMatchConfirm')
+                });
+            }
+            else if (result.errorCode == 'USERNAME_IN_USE') {
+                Dashboard.alert({
+                    message: Globalize.translate('ErrorMessageUsernameInUse')
+                });
+            }
+            else if (result.errorCode == 'EMAIL_IN_USE') {
+                Dashboard.alert({
+                    message: Globalize.translate('ErrorMessageEmailInUse')
+                });
+            } else {
+                Dashboard.alert({
+                    message: Globalize.translate('DefaultErrorMessage')
+                });
+            }
+
+        });
+
+        return false;
+    }
+
     $(document).on('pageinitdepends', "#connectLoginPage", function () {
 
         var page = this;
@@ -144,21 +193,31 @@
 
         $('.connectLoginForm').off('submit', onSubmit).on('submit', onSubmit);
         $('.manualServerForm').off('submit', onManualServerSubmit).on('submit', onManualServerSubmit);
+        $('.signupForm').off('submit', onSignupFormSubmit).on('submit', onSignupFormSubmit);
 
-    }).on('pageshowready', "#connectLoginPage", function () {
+    }).on('pagebeforeshowready', "#connectLoginPage", function () {
 
         var page = this;
 
-        loadPage(page);
-
-        var link = '<a href="http://emby.media" target="_blank">http://emby.media</a>';
-        $('.embyIntroDownloadMessage', page).html(Globalize.translate('EmbyIntroDownloadMessage', link));
+        $('#txtSignupEmail', page).val('');
+        $('#txtSignupUsername', page).val('');
+        $('#txtSignupPassword', page).val('');
+        $('#txtSignupPasswordConfirm', page).val('');
 
         if (AppInfo.isNativeApp) {
             $('.skip', page).show();
         } else {
             $('.skip', page).hide();
         }
+
+        var link = '<a href="http://emby.media" target="_blank">http://emby.media</a>';
+        $('.embyIntroDownloadMessage', page).html(Globalize.translate('EmbyIntroDownloadMessage', link));
+
+    }).on('pageshowready', "#connectLoginPage", function () {
+
+        var page = this;
+
+        loadPage(page);
     });
 
     function submitManualServer(page) {
diff --git a/dashboard-ui/scripts/extensions.js b/dashboard-ui/scripts/extensions.js
index 7de905c2f3..37ea96ba9e 100644
--- a/dashboard-ui/scripts/extensions.js
+++ b/dashboard-ui/scripts/extensions.js
@@ -567,7 +567,7 @@ function ticks_to_human(str) {
                             $this.unbind(touchMoveEvent, moveHandler);
                             if (start && stop) {
                                 if (stop.time - start.time < 1000 &&
-                                        Math.abs(start.coords[1] - stop.coords[1]) > 30 &&
+                                        Math.abs(start.coords[1] - stop.coords[1]) > 100 &&
                                         Math.abs(start.coords[0] - stop.coords[0]) < 75) {
                                     start.origin
                                             .trigger("swipeupdown")
diff --git a/dashboard-ui/scripts/nowplayingpage.js b/dashboard-ui/scripts/nowplayingpage.js
index 2fc04e36c8..cbfe8dfee9 100644
--- a/dashboard-ui/scripts/nowplayingpage.js
+++ b/dashboard-ui/scripts/nowplayingpage.js
@@ -522,7 +522,7 @@
 
         var item = state.NowPlayingItem;
 
-        $('.itemName', page).html(item ? MediaController.getNowPlayingNameHtml(item) : '');
+        $('.itemName', page).html(item ? MediaController.getNowPlayingNameHtml(item).replace('<br/>', ' - ') : '');
 
         var url;
         var backdropUrl = null;
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index d5d4c280ec..e75185a811 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -55,6 +55,7 @@ var Dashboard = {
 
     isConnectMode: function () {
 
+        return true;
         if (AppInfo.isNativeApp) {
             return true;
         }
diff --git a/dashboard-ui/thirdparty/apiclient/connectionmanager.js b/dashboard-ui/thirdparty/apiclient/connectionmanager.js
index 57e0c0529f..709e1a89e2 100644
--- a/dashboard-ui/thirdparty/apiclient/connectionmanager.js
+++ b/dashboard-ui/thirdparty/apiclient/connectionmanager.js
@@ -1106,6 +1106,70 @@
             return deferred.promise();
         };
 
+        self.signupForConnect = function (email, username, password, passwordConfirm) {
+
+            var deferred = DeferredBuilder.Deferred();
+
+            if (!email) {
+                deferred.rejectWith(null, [{ errorCode: 'invalidinput' }]);
+                return deferred.promise();
+            }
+            if (!username) {
+                deferred.rejectWith(null, [{ errorCode: 'invalidinput' }]);
+                return deferred.promise();
+            }
+            if (!password) {
+                deferred.rejectWith(null, [{ errorCode: 'invalidinput' }]);
+                return deferred.promise();
+            }
+            if (!passwordConfirm) {
+                deferred.rejectWith(null, [{ errorCode: 'passwordmatch' }]);
+                return deferred.promise();
+            }
+            if (password != passwordConfirm) {
+                deferred.rejectWith(null, [{ errorCode: 'passwordmatch' }]);
+                return deferred.promise();
+            }
+
+            require(['connectservice'], function () {
+
+                var md5 = self.getConnectPasswordHash(password);
+
+                AjaxApi.ajax({
+                    type: "POST",
+                    url: "https://connect.mediabrowser.tv/service/register",
+                    data: {
+                        email: email,
+                        userName: username,
+                        password: md5
+                    },
+                    dataType: "json",
+                    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
+                    headers: {
+                        "X-Application": appName + "/" + appVersion,
+                        "X-CONNECT-TOKEN": "CONNECT-REGISTER"
+                    }
+
+                }).done(function (result) {
+
+                    deferred.resolve(null, []);
+
+                }).fail(function (e) {
+
+                    try {
+
+                        var result = JSON.parse(e.responseText);
+
+                        deferred.rejectWith(null, [{ errorCode: result.Status }]);
+                    } catch (err) {
+                        deferred.rejectWith(null, [{}]);
+                    }
+                });
+            });
+
+            return deferred.promise();
+        };
+
         self.getConnectPasswordHash = function (password) {
 
             password = globalScope.MediaBrowser.ConnectService.cleanPassword(password);