tweaks

controller/action/MailActions.class.php

@@ -63,10 +63,48 @@ class MailActions extends Actions
     public static function editEmailSettings(string $token)
     {
         $response = LBRY::emailStatus($token);
+        $responseData = $response['data'] ?? [];
         return ['mail/settings', [
-          'status' => $response['data'] ?? '/',
+          'emails' => $responseData['emails'] ?? [],
+          'tags' => $responseData['tags'] ?? [],
           'token' => $token,
           'error' => $response['error'] ?? false
         ]];
     }
+
+    public static function prepareSettingsFormPartial(array $vars)
+    {
+      return $vars + [
+        'tagMetadata' => [
+           '3d-printing' => [
+              'label' => '3D Printing',
+              'description' => 'Receive updates, tips, and new content suggestions related to 3D Printing.'
+           ],
+          'android' => [
+            'label' => 'Android',
+            'description' => 'Be an Android beta tester, earn LBC, and receive notification when the app goes live!'
+          ],
+          'college' => [
+            'label' => 'University',
+            'description' => 'LBRY has special programs and opportunities for people in school.'
+          ],
+          'creator' => [
+            'label' => 'Creator',
+            'description' => 'Get the most out of the stuff you create with tips and feedback from LBRY.'
+          ],
+          'consumer' => [
+            'label' => 'Content Lover',
+            'description' => 'Learn how to get the most out of LBRY as someone who just wants to find cool stuff.'
+          ],
+          'developer' => [
+            'label' => 'Developer',
+            'description' => 'Receive technical updates and other news intended for those who are familiar with software engineering.'
+          ],
+          'ios' => [
+            'label' => 'iPhone',
+            'description' => 'Be an iOS alpha tester, earn LBC, and receive notification when the app goes live!'
+          ],
+         ]
+      ];
+    }
 }

data/i18n/en.yaml

@@ -115,7 +115,7 @@ page:
     header: Frequently Asked Questions
   funnier: One day this will be funnier but today is not that day.
   join: Join Email List
-  email_settings: Email Settings
+  email_settings: Email Preferences
   unsubscribe: Unsubscribe
   refer:
     count0: Don't fret, we still like you.

view/template/mail/_settingsForm.php

@@ -1,7 +1,8 @@
 <?php $formId = 'email_form' ?>
 <?php js_start() ?>
-  lbry.emailSettingsForm("#<?php echo $formId ?>", '<?php echo json_encode($status) ?>', <?php echo json_encode($token) ?>);
+  lbry.emailSettingsForm("#<?php echo $formId ?>", <?php echo json_encode($tags) ?>,  <?php echo json_encode($token) ?>);
 <?php js_end() ?>
+
 <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>
@@ -10,19 +11,63 @@
     <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>
-  <div class="email-section">
+  <section class="email-section">
+    <h4>Where do you want to receive email?</h4>
     <div class="notice notice-error hide spacer1"></div>
-    <h2>Emails</h2>
+    <?php $emailIndex = 0 ?>
-    <h4>Choose which emails you want to receive LBRY news</h4>
+    <table>
-    <table></table>
+      <?php foreach($emails as $email => $enabled): ?>
-  </div>
+        <?php $emailId = 'email_' . (++$emailIndex) ?>
-  <div class="tag-section">
+        <tr>
-    <h2>Tags</h2>
+          <td>
-    <h4>Any particular interests?</h4>
+            <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>
-    <table id="tag_table"></table>
+    <div class="row-fluid spacer1">
-    <div>
+      <?php $tagIndex = 0 ?>
-      <input type="submit" value="Save" class="btn-primary">
+      <?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) ?>" />
+                <label class="label"></label>
+              </span>
+            </div>
+          </div>
+          <?php if (isset($tagMetadata[$tag]['description'])): ?>
+            <div class="meta">
+              <?php echo $tagMetadata[$tag]['description'] ?>
+            </div>
+          <?php endif ?>
+        </div>
+        <?php if ($tagIndex % 2 == 0): ?>
+          </div><div class="row-fluid spacer1">
+        <?php endif ?>
+      <?php endforeach ?>
     </div>
+  </section>
+  <div>
+    <input type="submit" value="Save" class="btn-primary">
   </div>
 </form>

view/template/mail/settings.php

@@ -7,7 +7,12 @@
         <div class="row-fluid">
             <div class="span9">
                 <h1>{{page.email_settings}}</h1>
-                <?php echo View::render('mail/_settingsForm', ['status' => $status, 'error' => $error, 'token' => $token]) ?>
+                <?php echo View::render('mail/_settingsForm', [
+                    'tags' => $tags,
+                    'emails' => $emails,
+                    'error' => $error,
+                    'token' => $token
+                ]) ?>
             </div>
             <div class="span3">
                 <h3>{{social.also}}</h3>

web/js/emailSettings.js

@@ -1,53 +1,18 @@
-lbry.emailSettingsForm = function (formSelector, emailState, userAuthToken) {
+lbry.emailSettingsForm = function (formSelector, tags, userAuthToken) {
     var
         form = $(formSelector),
-        state = JSON.parse(emailState),
-        emails = state.emails,
-        tags = state.tags,
         emailSection = form.find('.email-section'),
         tagSection = form.find('.tag-section'),
-        emailTable = emailSection.find('table'),
-        tagTable = tagSection.find('table'),
         hasError = false,
         isEmailSubmitPending = false,
         tagMap = new Map(),
         isTagSubmitPending = false;
 
-
-    $.each(emails, function(email, enabled = false){
-        //console.log('email: ',email, ' enabled: ',enabled);
-        $labelCell = $('<td style="padding: 5px 10px 5px 5px;" ><label>'+email+'</label></td>');
-        var checked = enabled ? 'checked':''
-        $checkbox = $(
-            '<section class="slider-checkbox">' +
-                '<input id="'+email+'" type="checkbox" '+checked+'>' +
-                '<label class="label"></label>'+
-            '</section>'
-            );
-        $checkBoxCell = $('<td style="padding: 5px 10px 5px 5px;">'+$checkbox[0].outerHTML+'</td>');
-        $rowEmail =  $('<tr>'+$labelCell[0].outerHTML+$checkBoxCell[0].outerHTML+'</tr>');
-        emailTable.append($rowEmail)
-    });
     $.each(tags, function(tag, enabled){
         tagMap[tag] = enabled;
-        //console.log('tagName: ',tag,' enabled: ',enabled)
-        $labelCell = $('<td style="padding: 5px 10px 5px 5px;"><label>'+tag+'</label></td>');
-        var checked = enabled ? 'checked':''
-        $checkbox = $(
-            '<section class="slider-checkbox">' +
-                '<input id="'+tag+'" type="checkbox" '+checked+'>' +
-                '<label class="label"></label>'+
-            '</section>'
-        );
-        $checkBoxCell = $('<td style="padding: 5px 10px 5px 5px;">'+$checkbox[0].outerHTML+'</td>');
-        $rowTag =  $('<tr>'+$labelCell[0].outerHTML+$checkBoxCell[0].outerHTML+'</tr>');
-        tagTable.append($rowTag)
     });
 
-    //cleverness could eliminate some mild DRY violations below
     form.submit(function(e) {
-        //remove below obv
-        // return false;
 
         e.preventDefault();
 
@@ -55,12 +20,12 @@ lbry.emailSettingsForm = function (formSelector, emailState, userAuthToken) {
         hasError = false;
         isEmailSubmitPending = true;
         isTagSubmitPending = true;
+
         console.log("Run Email Edit");
-        //do email edit
         var url = 'https://api.lbry.io/user/email/edit?auth_token=' + userAuthToken
         $.param($.map(emailSection.find("input"), function(element) {
-            console.log("email: ",element.id," is_enabled: ",element.checked);
+            console.log("email: ",element.value," is_enabled: ",element.checked);
-            url = url + "&email="+element.id+"&enabled="+element.checked.toString();
+            url = url + "&email="+element.value+"&enabled="+element.checked.toString();
             fetch(url).then(function(value) { return value.json()}).then(jsonResponse => {
                 isEmailSubmitPending = false;
                 if (!jsonResponse.success){
@@ -75,22 +40,23 @@ lbry.emailSettingsForm = function (formSelector, emailState, userAuthToken) {
                 emailSection.find('.notice-error').html(error).show();
             });
         }));
-        console.log("Run Tag Edit");
+
         //do tag edit
+        console.log("Run Tag Edit");
         var url = 'https://api.lbry.io/user/tag/edit?auth_token=' + userAuthToken
-        var addTags =  new Array(),removeTags = new Array();
+        var addTags =  new Array(),
-        $('#tag_table tr').each(function() {
+            removeTags = new Array();
-            $trow = $(this);
+
-            $trow.find('input').each(function () {
+        tagSection.find('input').each(function () {
-                var tagName = $(this)[0].id
+            var tagName = this.value
-                var enabled =  $(this)[0].checked
+            var enabled = this.checked
-                if (enabled && !tagMap[$(this)[0].id] ){
+            if (enabled && !tagMap[tagName] ){
-                    addTags.push($(this)[0].id)
+                addTags.push(tagName)
-                }else if (!enabled && tagMap[$(this)[0].id]){
+            } else if (!enabled && tagMap[tagName]){
-                    removeTags.push($(this)[0].id)
+                removeTags.push(tagName)
-                }
+            }
-            })
         });
+
         var hasChanges = addTags[0] || removeTags[0]
         console.log("AddTags: ",addTags,"RemoveTags: ",removeTags)
         var addTagsParam = addTags[0]
@@ -109,6 +75,7 @@ lbry.emailSettingsForm = function (formSelector, emailState, userAuthToken) {
         if ( removeTagsParam  && removeTagsParam.length > 0){
             url = url + "&remove="+removeTagsParam
         }
+
         if (hasChanges){
             fetch(url).then(response => { return response.json() }).then(jsonResponse =>{
                 isTagSubmitPending = false;
@@ -127,7 +94,6 @@ lbry.emailSettingsForm = function (formSelector, emailState, userAuthToken) {
         } else{
             isTagSubmitPending = false;
         }
-
     });
 
     form.show();
@@ -135,7 +101,7 @@ lbry.emailSettingsForm = function (formSelector, emailState, userAuthToken) {
     function showSuccess() {
         if (!isEmailSubmitPending && !isTagSubmitPending && !hasError)
         {
-            form.find('.notice-success').show();
+            form.find('.notice-success').show().get(0).scrollIntoView();
         }
     }
 }