Merge pull request #773 from lbryio/723-email-management-design

Styling fixes for email subscription page

lib/thirdparty/LBRY.class.php

@@ -5,6 +5,10 @@ class LBRY
 {
     public static function getApiUrl($endpoint)
     {
+        if (!strlen(Config::get(Config::LBRY_API_SERVER)) > 0) {
+            throw new Exception("API server URL is missing from configuration");
+        }
+
         return Config::get(Config::LBRY_API_SERVER) . $endpoint;
     }
 
@@ -27,7 +31,7 @@ class LBRY
 
     public static function editEmailSettings($token, $email, $isPrimary =null, $isEnabled = null)
     {
-        return Curl::post(static::getApiUrl('/user/email/edit'),['auth_token' => $token],['email' => $email],['is_primary' => $isPrimary],['is_enabled' => $isEnabled]);
+        return Curl::post(static::getApiUrl('/user/email/edit'), ['auth_token' => $token], ['email' => $email], ['is_primary' => $isPrimary], ['is_enabled' => $isEnabled]);
     }
 
     public static function emailStatus($token)
@@ -38,7 +42,7 @@ class LBRY
 
     public static function applyTags($type, $token, $tags)
     {
-        return Curl::post(static::getApiUrl('/user/tag/edit'),['auth_token' => $token],[$type => $tags]);
+        return Curl::post(static::getApiUrl('/user/tag/edit'), ['auth_token' => $token], [$type => $tags]);
     }
 
     public static function unsubscribe($email)

view/template/mail/_settingsForm.php

@@ -6,48 +6,55 @@
 <noscript>
   Javascript is required to securely send your unsubscribe information. Email <a href="mailto:help@lbry.io" class="link-primary">help@lbry.io</a> for manual unsubscription.
 </noscript>
-<form id="<?php echo $formId ?>" novalidate style="display: none">
-  <?php if ($error): ?>
-    <div class="notice notice-error spacer1"><?php echo $error ?></div>
-  <?php endif ?>
-  <div class="notice notice-success hide">Your email preferences have been updated.</div>
-  <section class="email-section">
-    <h4>Where do you want to receive email?</h4>
-    <div class="notice notice-error hide spacer1"></div>
-    <?php $emailIndex = 0 ?>
-    <table>
-      <?php foreach($emails as $email => $enabled): ?>
-        <?php $emailId = 'email_' . (++$emailIndex) ?>
-        <tr>
-          <td>
-            <div class="spacer-half">
-              <label for="<?php echo $emailId ?>"><?php echo $email ?></label>
-            </div>
-          </td>
-          <td>
-            <div class="spacer-half" style="padding-left: 5px">
-              <span class="slider-checkbox">
-                <input id="<?php echo $emailId ?>" type="checkbox" <?php echo $enabled ? 'checked' : '' ?>  value="<?php echo urlencode($email) ?>" />
-                <label class="label"></label>
-              </span>
-            </div>
-          </td>
-        </tr>
-      <?php endforeach ?>
-    </table>
-  </section>
-  <section class="tag-section spacer1">
-    <h4>What do you want to receive email about?</h4>
-    <div class="notice notice-error hide"></div>
-    <div class="row-fluid spacer1">
-      <?php $tagIndex = 0 ?>
-      <?php foreach($tags as $tag => $enabled): ?>
+<?php if ($error): ?>
+  <div class="notice notice-error spacer1"><?php echo $error ?></div>
+<?php else: ?>
+  <form id="<?php echo $formId ?>" novalidate style="display: none">
+    <section class="email-section">
+      <h4><?php echo count($emails) > 1 ? 'Receiving Addresses' : 'Do You Want To Receive Mail?' ?></h4>
+      <?php if (count($emails) > 1): ?>
+        <div class="meta spacer-half">Uncheck all boxes if you want to receive no future messages.</div>
+      <?php endif ?>
+      <div class="notice notice-error hide spacer-half"></div>
+      <div class="notice notice-success hide spacer-half">Your email preferences have been updated.</div>
+      <?php $emailIndex = 0 ?>
+      <table>
+        <?php foreach ($emails as $email => $enabled): ?>
+          <?php $emailId = 'email_' . (++$emailIndex) ?>
+          <tr>
+            <td>
+              <div class="spacer-half">
+                <label for="<?php echo $emailId ?>"><?php echo $email ?></label>
+              </div>
+            </td>
+            <td>
+              <div class="spacer-half" style="padding-left: 5px">
+                <span class="slider-checkbox">
+                  <input id="<?php echo $emailId ?>" type="checkbox" <?php echo $enabled ? 'checked' : '' ?>  value="<?php echo urlencode($email) ?>" />
+                  <label class="label"></label>
+                </span>
+              </div>
+            </td>
+          </tr>
+        <?php endforeach ?>
+      </table>
+    </section>
+
+    <section class="tag-section spacer1">
+      <h4>Fine-tune your Mail</h4>
+      <div class="notice notice-error hide spacer-half"></div>
+      <div class="notice notice-success hide spacer-half">Your email preferences have been updated.</div>
+
+      <div class="row-fluid spacer1">
+        <?php $tagIndex = 0 ?>
+        <?php foreach ($tags as $tag => $enabled): ?>
         <?php $tagId = 'tag_' . (++$tagIndex) ?>
         <div class="span6">
           <div class="row-fluid">
             <div class="span10">
               <label for="<?php echo $tagId ?>"><?php echo isset($tagMetadata[$tag]['label']) ? $tagMetadata[$tag]['label'] : $tag ?></label>
             </div>
+
             <div class="span2">
               <span class="slider-checkbox">
                 <input id="<?php echo $tagId ?>" type="checkbox" <?php echo $enabled ? 'checked' : '' ?> value="<?php echo urlencode($tag) ?>" />
@@ -55,19 +62,18 @@
               </span>
             </div>
           </div>
+
           <?php if (isset($tagMetadata[$tag]['description'])): ?>
-            <div class="meta">
-              <?php echo $tagMetadata[$tag]['description'] ?>
-            </div>
+          <div class="meta">
+            <?php echo $tagMetadata[$tag]['description'] ?>
+          </div>
           <?php endif ?>
         </div>
         <?php if ($tagIndex % 2 == 0): ?>
-          </div><div class="row-fluid spacer1">
+        </div><div class="row-fluid spacer1">
         <?php endif ?>
-      <?php endforeach ?>
-    </div>
-  </section>
-  <div>
-    <input type="submit" value="Save" class="btn-primary">
-  </div>
-</form>
+        <?php endforeach ?>
+      </div>
+    </section>
+  </form>
+<?php endif ?>

web/js/emailSettings.js

@@ -3,53 +3,43 @@ lbry.emailSettingsForm = function (formSelector, tags, userAuthToken) {
         form = $(formSelector),
         emailSection = form.find('.email-section'),
         tagSection = form.find('.tag-section'),
-        hasError = false,
-        isEmailSubmitPending = false,
-        tagMap = new Map(),
-        isTagSubmitPending = false;
+        tagMap = new Map();
 
     $.each(tags, function(tag, enabled){
         tagMap[tag] = enabled;
     });
 
-    form.submit(function(e) {
+    emailSection.find(':input').change(submitEmail);
+    tagSection.find(':input').change(submitTags);
 
-        e.preventDefault();
-
-        form.find('.notice').hide();
-        hasError = false;
-        isEmailSubmitPending = true;
-        isTagSubmitPending = true;
-        var promiseMap = $.map(emailSection.find("input"), function(element) {
-            var url = 'https://api.lbry.io/user/email/edit?auth_token=' + userAuthToken
-            url = url + "&email="+element.value+"&enabled="+element.checked.toString();
-            return fetch(url).then(function(value) { return value.json()})
+    function submitEmail(e) {
+        var element = e.target,
+            url = 'https://api.lbry.io/user/email/edit?auth_token=' + userAuthToken
+                    + "&email=" + element.value + "&enabled=" + element.checked.toString();
 
+        emailSection.find('.notice').hide();
+        fetch(url).then(function (value) {
+            var apiValues = value.json();
+            emailSection.find('.notice-success').show()
+        })
+        .catch(function (value) {
+            var error = "Something went wrong saving your email";
+            emailSection.find('.notice-error').html(error).show();
         });
-        //Call api for each email a user will have linked - polyfill needed for IE for Promise.all
-        Promise.all(promiseMap)
-            .then(function(apiValues) {
-                isEmailSubmitPending = false;
-                showSuccess();
-            })
-            .catch(function(value) {
-                isEmailSubmitPending = false;
-                hasError = true;
-                var error = "get actual error message from value";
-                emailSection.find('.notice-error').html(error).show();
-            });
+    }
 
-        //do tag edit
-        var url = 'https://api.lbry.io/user/tag/edit?auth_token=' + userAuthToken
-        var addTags =  new Array(),
-            removeTags = new Array();
+    function submitTags() {
+        tagSection.find('.notice').hide();
+        var url = 'https://api.lbry.io/user/tag/edit?auth_token=' + userAuthToken,
+            addTags = [],
+            removeTags = [];
 
         tagSection.find('input').each(function () {
             var tagName = this.value
             var enabled = this.checked
-            if (enabled && !tagMap[tagName] ){
+            if (enabled && !tagMap[tagName]) {
                 addTags.push(tagName)
-            } else if (!enabled && tagMap[tagName]){
+            } else if (!enabled && tagMap[tagName]) {
                 removeTags.push(tagName)
             }
         });
@@ -58,46 +48,38 @@ lbry.emailSettingsForm = function (formSelector, tags, userAuthToken) {
         var addTagsParam = addTags[0]
         for (var i = 1; i < addTags.length; i++) {
             hasChanges = true
-            addTagsParam = addTagsParam+","+addTags[i];
+            addTagsParam = addTagsParam + "," + addTags[i];
         }
         var removeTagsParam = removeTags[0]
         for (var i = 1; i < removeTags.length; i++) {
             hasChanges = true
-            removeTagsParam = removeTagsParam +","+removeTags[i];
+            removeTagsParam = removeTagsParam + "," + removeTags[i];
         }
-        if (addTagsParam && addTagsParam.length > 0){
-            url = url + "&add="+addTagsParam
+        if (addTagsParam && addTagsParam.length > 0) {
+            url += "&add=" + addTagsParam
         }
-        if ( removeTagsParam  && removeTagsParam.length > 0){
-            url = url + "&remove="+removeTagsParam
+        if (removeTagsParam && removeTagsParam.length > 0) {
+            url += "&remove=" + removeTagsParam
         }
 
-        if (hasChanges){
-            fetch(url).then(response => { return response.json() }).then(jsonResponse =>{
-                isTagSubmitPending = false;
-                if (jsonResponse.success){
-                    showSuccess();
-                }else {
-                    hasError = true;
-                    tagSection.find('.notice-error').html(jsonResponse.error).show();
-                }
-            }).catch(function(value) {
-                isTagSubmitPending = false;
-                hasError = true;
-                tagSection.find('.notice-error').html(value.error).show();
-            });
-        } else{
-            isTagSubmitPending = false;
-        }
-    });
-
-    form.show();
-
-    function showSuccess() {
-        if (!isEmailSubmitPending && !isTagSubmitPending && !hasError)
-        {
-            form.find('.notice-success').show().get(0).scrollIntoView();
+        if (hasChanges) {
+            fetch(url)
+                .then(function (response) {
+                    return response.json()
+                })
+                .then(function (jsonResponse) {
+                    if (jsonResponse.success) {
+                        tagSection.find('.notice-success').show()
+                    } else {
+                        tagSection.find('.notice-error').html(jsonResponse.error).show();
+                    }
+                })
+                .catch(function (value) {
+                    tagSection.find('.notice-error').html(value.error).show();
+                });
         }
     }
+
+    form.show();
 }
 

web/scss/_slider.scss

@@ -3,69 +3,73 @@ $unchecked-color: #888;
 
 .slider-checkbox {
   position: relative;
+
   input {
-    margin: 0px;
-    margin-top: 1px;
+    width: 40px; height: 20px;
+    top: 0; left: 0;
+
+    background-color: red;
     cursor: pointer;
-    opacity: 0;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter: alpha(opacity=0);
-    -moz-opacity: 0;
-    -khtml-opacity: 0;
+    margin: 1px 0 0 0;
     opacity: 0;
     position: absolute;
     z-index: 1;
-    top: 0px;
-    left: 0px;
-    background: red;
-    width: 40px;
-    height: 20px;
+
+    &:not(:checked) + .label {
+      &::before {
+        background-color: $unchecked-color;
+        content: "\f00d";
+        padding-left: 18px;
+        text-align: center;
+      }
+
+      &::after {
+        left: 1px;
+      }
+    }
+
     &:checked + .label {
-      &:before {
+      &::before {
         background-color: $checked-color;
         content: "\f00c";
-        padding-left: 6px;
+        padding-right: 17px;
+        text-align: center;
       }
-      &:after {
+
+      &::after {
         left: 21px;
       }
     }
   }
+
   .label {
+    padding-left: 40px;
     position: relative;
-    padding-left: 46px;
-    &:before, &:after {
+
+    &::before,
+    &::after {
+      border-radius: 0;
       position: absolute;
-      -webkit-border-radius: 0px;
-      -moz-border-radius: 0px;
-      border-radius: 0px;
       transition: background-color 0.3s, left 0.3s;
     }
-    &:before {
-      content: "\f00d";
-      color: #fff;
+
+    &::before {
+      width: 40px; height: 20px;
+      top: 0; left: 0;
+
       box-sizing: border-box;
+      color: white;
       font-family: 'FontAwesome', sans-serif;
-      padding-left: 23px;
       font-size: 12px;
       line-height: 20px;
-      background-color: $unchecked-color;
-      left: 0px;
-      top: 0px;
-      height: 20px;
-      width: 40px;
-      -webkit-border-radius: 0px;
-      -moz-border-radius: 0px;
-      border-radius: 0px;
     }
-    &:after {
+
+    &::after {
+      width: 18px; height: 18px;
+
+      background-color: white;
       content: "";
-      letter-spacing: 20px;
-      background: #fff;
-      left: 1px;
       top: 1px;
-      height: 18px;
-      width: 18px;
     }
   }
-}
+}

web/scss/all.scss

@@ -18,5 +18,4 @@
 @import "quickstart";
 @import "social";
 @import "home";
-@import "mail_settings";
 @import "slider";