display loaded config on welcome page

apprise_api/api/templates/config.html

@@ -1,45 +1,79 @@
 {% extends 'base.html' %}
 {% load i18n %}
 {% block body %}
-<h3>{% trans "Management for:" %} <em>{{ key }}</em></h3>
+<h4>{% trans "Management for:" %} <em>{{ key }}</em></h4>
 <div class="row">
   <div class="col s12">
     <ul class="tabs config-overview">
-      <li class="tab col s4"><a class="active" href="#overview"><i class="material-icons">info</i> {% trans "Overview" %}</a></li>
+      <li class="tab col s4"><a class="active" href="#overview"><i class="material-icons">info</i>
-      <li class="tab col s4"><a href="#config"><i class="material-icons">settings</i> {%trans "Configuration" %}</a></li>
+          {% trans "Overview" %}</a></li>
-      <li class="tab col s4"><a href="#notify"><i class="material-icons">announcement</i> {%trans "Notifications" %}</a></li>
+      <li class="tab col s4"><a href="#config"><i class="material-icons">settings</i> {%trans "Configuration" %}</a>
+      </li>
+      <li class="tab col s4"><a href="#notify"><i class="material-icons">announcement</i> {%trans "Notifications" %}</a>
+      </li>
     </ul>
   </div>
   <div id="overview" class="col s12">
-    <p>
+    <div class="section">
+      <h5>{% trans "Getting Started" %}</h5>
+      <ol>
+        <li>
           {% blocktrans %}
-      Here is where you can store your configuration so that it can be accessed by Apprise. You can always refer to the
+          Here is where you can store your Apprise configuration associated with the key <code>{{key}}</code>.
-      <a href="https://github.com/caronc/apprise/wiki#notification-services">Apprise Wiki</a> if you're having troubles
-      assembling your URL(s).
-      You have chosen to associate your configuration with the key <code>{{key}}</code>. If anything was previously
-      associated with this key, it will be replaced if you continue.
           {% endblocktrans %}
-    </p>
+        </li>
-    <p>
+        <li>
+          {% blocktrans %}
+          You can always refer to the
+          <a href="https://github.com/caronc/apprise/wiki#notification-services">Apprise Wiki</a> if you're having
+          troubles
+          assembling your URL(s).
+          {% endblocktrans %}
+        </li>
+        <li>
           {% blocktrans %}
           In the future you can return to this configuration screen at any time by placing the following into your
-      browser:{% endblocktrans %}
+          browser:
-      <br /><code>{{request.scheme}}://{{request.META.HTTP_HOST}}{{request.path}}</code>
+          {% endblocktrans %}
-    </p>
+          <code>{{request.scheme}}://{{request.META.HTTP_HOST}}{{request.path}}</code>
+        </li>
+      </ol>
+    </div>
+    <div class="section no-config">
+      <div class="divider"></div>
+      <p><strong>
+          {% blocktrans %}To get started, the first thing you want to do is define your configuration. Do this by
+          clicking
+          on the <i>Configuration tab</i>.
+          {% endblocktrans %}
+        </strong></p>
+      <div class="divider"></div>
+    </div>
+    <div class="has-config">
       <div class="section">
-      {% blocktrans %}For example, the following command would cause apprise to retrieve the configuration loaded and
+        <h5>{% trans "Working With Your Configuration" %}</h5>
+        {% blocktrans %}The following command would cause apprise to retrieve the configuration loaded and
         send a test notification to all of your added services:{% endblocktrans %}
-      <br /><pre><code class="bash">apprise --body="Test Message" --tag=all \<br/>
+        <br />
+        <pre><code class="bash">apprise --body="Test Message" --tag=all \<br/>
         &nbsp;&nbsp;&nbsp;&nbsp;--config={{request.scheme}}://{{request.META.HTTP_HOST}}{% url "get" key %}</code></pre>
       </div>
+      <div class="section">
+        <h5>{% trans "Loaded Configuration" %}</h5>
+        <div id="url-list"></div>
+        <div id="url-list-progress" class="progress" style="width:70%">
+          <div class="indeterminate"></div>
+        </div>
+      </div>
+    </div>
   </div>
   <div id="config" class="col s12">
     <p>
       {% blocktrans %}Define your configuration below:{% endblocktrans %}
       <form id="addconfig" action="{% url "add" key %}" method="post">
         {{ form_cfg }}
-        <button class="btn waves-effect waves-light" type="submit" name="action">{% trans "Submit" %}
+        <button class="btn waves-effect waves-light" type="submit" name="action">{% trans "Save Configuration" %}
-          <i class="material-icons right">send</i>
+          <i class="material-icons right">save</i>
         </button>
       </form>
     </p>
@@ -51,7 +85,7 @@
       {% endblocktrans %}
       <form id="donotify" action="{% url "notify" key %}" method="post">
         {{ form_notify }}
-        <button class="btn waves-effect waves-light" type="submit" name="action">{% trans "Submit" %}
+        <button class="btn waves-effect waves-light" type="submit" name="action">{% trans "Send Notification" %}
           <i class="material-icons right">send</i>
         </button>
       </form>
@@ -68,6 +102,18 @@ async function update() {
   document.querySelector('.config-overview li a[href="#notify"]')
       .parentNode.classList.add('disabled');
 
+  // Disable any has-config entries
+  document.querySelector('.has-config')
+      .style.display = 'none';
+
+  // Ensure we show our progress loader and reset our url list
+  document.querySelector('#url-list').textContent = ''
+  document.querySelector('#url-list-progress').style.display = null;
+
+  // Ensure no-config sections are visible
+  document.querySelector('.no-config')
+      .style.display = null;
+
   // perform our status check
   let response = await fetch('{% url "get" key %}', {
     method: 'POST',
@@ -92,10 +138,18 @@ async function update() {
       document.querySelector('#id_config').value = text;
     });
 
+    // Ensure has-config sections are visible
+    document.querySelector('.has-config')
+        .style.display = null;
+
+    // Disable any no-config entries
+    document.querySelector('.no-config')
+        .style.display = 'none';
+
     // perform a tag retrieval; start with 'all'
     let tags = ['all'];
 
-    let jsonResponse = fetch('{% url "json_urls" key %}', {
+    let jsonResponse = fetch('{% url "json_urls" key %}?privacy=1', {
       method: 'GET',
     }).then(function(jsonResponse) {
       return jsonResponse.json();
@@ -125,8 +179,41 @@ async function update() {
         }
       });
 
+      // Now build our our loaded list of configuration for our welcome page
+      let urlList = document.createElement('ul');
+
+      // Create a list item for each url retrieved
+      data.urls.forEach(function (entry) {
+        let code = document.createElement('code');
+        let li = document.createElement('li');
+        code.textContent = entry.url;
+        li.setAttribute('class', 'card-panel');
+        li.appendChild(code);
+
+        // Get our tags associate with the URL
+        entry.tags.forEach(function (tag) {
+          let chip = document.createElement('div');
+          chip.setAttribute('class', 'chip');
+          chip.textContent = `🏷️ ${tag}`;
+          li.appendChild(chip);
+        });
+
+        urlList.appendChild(li);
+      });
+
+      // Store our new list
+      document.querySelector('#url-list-progress').style.display = 'none';
+      document.querySelector('#url-list').textContent = ''
+      if(urlList.childNodes.length > 0) {
+          document.querySelector('#url-list').appendChild(urlList);
+      } else {
+        document.querySelector('#url-list').textContent = '{% trans "There are no Apprise URL(s) loaded." %}'
+      }
+
     }).catch(function (err) {
       // There was an error
+      document.querySelector('#url-list-progress').style.display = 'none';
+      document.querySelector('#url-list').textContent = '{% trans "An error occurred retrieving the list of loaded Apprise URL(s)" %}'
     });
 
     return response;
@@ -155,15 +242,15 @@ document.querySelector('#addconfig').onsubmit = function(event) {
 
         // user notification
         Swal.fire(
-          'Save',
+          '{% trans "Save" %}',
-          'Successfully saved the specified URL(s).',
+          '{% trans "Successfully saved the specified URL(s)." %}',
           'success'
         );
      } else {
         // user notification
         Swal.fire(
-          'Save',
+          '{% trans "Save" %}',
-          'Failed to save the specified URL(s).',
+          '{% trans "Failed to save the specified URL(s)." %}',
           'error'
         );
      }
@@ -181,7 +268,7 @@ document.querySelector('#donotify').onsubmit = function(event) {
   const chipInput = document.querySelector('.chips > input');
   if(chipInput.value) {
     // This code just handles text typed in the tag section that was
-    // not submitted. This forces any lingering un-commited text
+    // not submitted. This forces any lingering un-committed text
     // into a tag just prior to it's submission
     const ev = new KeyboardEvent('keydown', {
       altKey:false,
@@ -223,8 +310,8 @@ document.querySelector('#donotify').onsubmit = function(event) {
 
   // perform our notification
   Swal.fire(
-    'Notification',
+    '{% trans "Notification" %}',
-    'Sending notification(s)...',
+    '{% trans "Sending notification(s)..." %}',
   );
   Swal.showLoading()
   let response = fetch('{% url "notify" key %}', {
@@ -235,15 +322,15 @@ document.querySelector('#donotify').onsubmit = function(event) {
      {
         // user notification
         Swal.fire(
-          'Notification',
+          '{% trans "Notification" %}',
-          'Successfully sent the notification(s).',
+          '{% trans "Successfully sent the notification(s)." %}',
           'success'
         );
      } else {
         // user notification
         Swal.fire(
-          'Notification',
+          '{% trans "Notification" %}',
-          'Failed to send the notification(s).',
+          '{% trans "Failed to send the notification(s)." %}',
           'error'
         );
      }

apprise_api/api/tests/test_json_urls.py

@@ -85,7 +85,20 @@ class JsonUrlsTests(SimpleTestCase):
         assert 'tags' in response.json()
         assert 'urls' in response.json()
 
-        # No errors occured, therefore no error entry
+        # No errors occurred, therefore no error entry
+        assert 'error' not in response.json()
+
+        # No tags (but can be assumed "all") is always present
+        assert len(response.json()['tags']) == 0
+
+        # Same request as above but we set the privacy flag
+        response = self.client.get('/json/urls/{}?privacy=1'.format(key))
+        assert response.status_code == 200
+        assert response['Content-Type'].startswith('application/json')
+        assert 'tags' in response.json()
+        assert 'urls' in response.json()
+
+        # No errors occurred, therefore no error entry
         assert 'error' not in response.json()
 
         # No tags (but can be assumed "all") is always present

apprise_api/api/views.py

@@ -532,6 +532,9 @@ class JsonUrlView(View):
             'urls': [],
         }
 
+        # Privacy flag
+        privacy = bool(request.GET.get('privacy', False))
+
         config, format = ConfigCache.get(key)
         if config is None:
             # The returned value of config and format tell a rather cryptic
@@ -583,7 +586,7 @@ class JsonUrlView(View):
                 for notification in a_obj:
                     # Set Notification
                     response['urls'].append({
-                        'url': notification.url(privacy=False),
+                        'url': notification.url(privacy=privacy),
                         'tags': notification.tags,
                     })
 

apprise_api/static/css/base.css

@@ -67,3 +67,11 @@ textarea {
     display: inline-flex;
     vertical-align: middle;
 }
+#url-list code {
+	display: block;
+	background-color: inherit;
+}
+#url-list .chip {
+	background-color: inherit;
+	border: 1px solid #e4e4e4;
+}