From 545e1c7a3bc3b07b8e6311ec101e1f0f25deb21e Mon Sep 17 00:00:00 2001
From: Logan Hanks <logan@reddit.com>
Date: Wed, 11 Jul 2012 16:23:04 -0700
Subject: [PATCH] Clean up the developed apps UI.

---
 r2/r2/controllers/api.py                 |  17 ++-
 r2/r2/lib/js.py                          |   1 +
 r2/r2/public/static/css/reddit.css       |  55 ++++++++
 r2/r2/public/static/js/apps.js           |   7 +
 r2/r2/templates/oauth2authorization.html |   9 +-
 r2/r2/templates/prefapps.html            | 168 ++++++++++++++---------
 6 files changed, 184 insertions(+), 73 deletions(-)
 create mode 100644 r2/r2/public/static/js/apps.js

diff --git a/r2/r2/controllers/api.py b/r2/r2/controllers/api.py
index 88106809f..c74417f92 100755
--- a/r2/r2/controllers/api.py
+++ b/r2/r2/controllers/api.py
@@ -2878,16 +2878,25 @@ class ApiController(RedditController, OAuth2ResourceController):
                    client=VOAuth2ClientDeveloper(),
                    account=VExistingUnameNotSelf('name'))
     def POST_adddeveloper(self, form, jquery, client, account):
-        if client and not form.has_error('name'):
-            client.add_developer(account)
-            form.set_html('.status', _('developer added'))
+        if not client:
+            form.set_html('.status', _('error'))
+            return
+        if form.has_errors('name', errors.USER_DOESNT_EXIST, errors.NO_USER):
+            form.set_html('.status', _('invalid user'))
+            return
+        if client.has_developer(account):
+            form.set_html('.status', _('already added'))
+            return
+        client.add_developer(account)
+        form.set_html('.status', _('developer added'))
 
     @validatedForm(VUser(),
                    VModhash(),
                    client=VOAuth2ClientDeveloper(),
                    account=VExistingUnameNotSelf('name'))
     def POST_removedeveloper(self, form, jquery, client, account):
-        if client and not form.has_error('name'):
+        if client and account and not form.has_errors('name'):
+            g.log.debug('removing developer: %s', account.name)
             client.remove_developer(account)
             form.set_html('.status', _('developer removed'))
 
diff --git a/r2/r2/lib/js.py b/r2/r2/lib/js.py
index e60528c23..66a2a2090 100755
--- a/r2/r2/lib/js.py
+++ b/r2/r2/lib/js.py
@@ -277,6 +277,7 @@ module["reddit"] = LocalizedModule("reddit.js",
     "flair.js",
     "interestbar.js",
     "reddit.js",
+    "apps.js",
 )
 
 module["mobile"] = LocalizedModule("mobile.js",
diff --git a/r2/r2/public/static/css/reddit.css b/r2/r2/public/static/css/reddit.css
index e2044b5c7..b125c6352 100755
--- a/r2/r2/public/static/css/reddit.css
+++ b/r2/r2/public/static/css/reddit.css
@@ -5835,3 +5835,58 @@ tr.gold-accent + tr > td {
     color: gray;
     font-weight: bold;
 }
+
+.developed-app {
+    border: solid 1px black;
+    margin-left: 20px;
+    margin-bottom: 0.5em;
+    padding: 7px;
+    position: relative;
+    width: 880px;
+}
+
+.developed-app .collapsed { display: none; }
+.developed-app img {
+    height: 64px;
+    width: 64px;
+}
+
+.app-details {
+    position: absolute;
+    top: 7px;
+    left: 80px;
+    height: 64px;
+    margin-left: 0.5em;
+    vertical-align: top;
+}
+
+.app-details h2 { font-size: medium; }
+.app-details h3 { font-size: x-small; }
+
+.app-description {
+    font-size: small;
+    position: absolute;
+    top: 0px;
+    left: 200px;
+    width: 600px;
+}
+
+.edit-app-button {
+    position: absolute;
+    bottom: 0px;
+}
+
+.edit-app { display: none; }
+.edit-app-form, .edit-app-form form { display: inline-block; }
+.edit-app-form input, .edit-app-form textarea { margin: 0px; width: 50ex; }
+.edit-app-form input[name="name"] { width: 20ex !important; }
+.edit-app-form input[type="submit"] {
+    margin-left: 10px;
+    width: auto !important;
+}
+
+.delete-app-button {
+    position: absolute;
+    bottom: 7px;
+    left: 100px;
+}
diff --git a/r2/r2/public/static/js/apps.js b/r2/r2/public/static/js/apps.js
new file mode 100644
index 000000000..dfe0e1359
--- /dev/null
+++ b/r2/r2/public/static/js/apps.js
@@ -0,0 +1,7 @@
+$(function() {
+    $(".edit-app-button").click(
+        function() {
+            $(this).toggleClass("collapsed");
+            $(this).parent().parent().find(".edit-app").slideToggle();
+        });
+});
diff --git a/r2/r2/templates/oauth2authorization.html b/r2/r2/templates/oauth2authorization.html
index 82ba08428..e2781b025 100644
--- a/r2/r2/templates/oauth2authorization.html
+++ b/r2/r2/templates/oauth2authorization.html
@@ -26,8 +26,13 @@
 <%namespace file="utils.html" import="_md" />
 <div class="content oauth2-authorize">
   <img class="icon" src="${s3_https_if_secure(thing.client.icon_url)}" alt="${thing.client.name} icon" />
-  ${_md("#[%(app_name)s](%(app_about_url)s) requests to connect with your reddit account."
-      % dict(app_name=thing.client.name, app_about_url=thing.client.about_url))}
+  %if thing.client.about_url:
+    ${_md("#[%(app_name)s](%(app_about_url)s) requests to connect with your reddit account."
+          % dict(app_name=thing.client.name, app_about_url=thing.client.about_url))}
+  %else:
+    ${_md("#%(app_name)s requests to connect with your reddit account."
+          % dict(app_name=thing.client.name))}
+  %endif
   <div class="access">
     <h2>${_("Allow %(app_name)s to:") % dict(app_name=thing.client.name)}</h2>
     <ul>
diff --git a/r2/r2/templates/prefapps.html b/r2/r2/templates/prefapps.html
index a70e0e051..2a7131e20 100644
--- a/r2/r2/templates/prefapps.html
+++ b/r2/r2/templates/prefapps.html
@@ -26,59 +26,84 @@
   <h1>${_("developed applications")}</h1>
 
   %for app in thing.developed_apps:
-    <form method="post" action="/api/updateapp" class="pretty-form" id="update-app-${app._id}"
-     onsubmit="${"return post_form(this, 'updateapp', function(x) {return '%s'})" % _("updating...")}">
-      <input type="hidden" name="uh" value="${c.modhash}" />
-      <input type="hidden" name="client_id" value="${app._id}" />
-      <table class="preftable">
-        <tr>
-          <th>${_("client id")}</th>
-          <td>${app._id}</td>
-        </tr>
-        <tr>
-          <th>${_("secret")}</th>
-          <td>${app.secret}</td>
-        </tr>
-        <tr>
-          <th>${_("name")}</th>
-          <td class="prefright">
-            <input name="name" value="${app.name}">
-            ${error_field("NO_TEXT", "name")}
-          </td>
-        </tr>
-        <tr>
-          <th>${_("description")}</th>
-          <td class="prefright">
-            <textarea name="description"></textarea>
-          </td>
-        </tr>
-        <tr>
-          <th>${_("about url")}</th>
-          <td class="prefright">
-            <input name="about_url" value="${app.about_url}">
-            ${error_field("BAD_URL", "about_url")}
-          </td>
-        </tr>
-        <tr>
-          <th>${_("icon url")}</th>
-          <td class="prefright">
-            <input name="icon_url" value="${app.icon_url}">
-            ${error_field("BAD_URL", "icon_url")}
-          </td>
-        </tr>
-        <tr>
-          <th>${_("redirect uri")}</th>
-          <td class="prefright">
-            <input name="redirect_uri" value="${app.redirect_uri}">
-            ${error_field("NO_URL", "redirect_uri")}
-            ${error_field("BAD_URL", "redirect_uri")}
-          </td>
-        </tr>
-        <tr>
-          <th>${_("developers")}</th>
-          <td class="prefright">
-            %for dev in app._developers:
-              <p>${dev.name}
+  <div class="developed-app rounded">
+    %if app.icon_url:
+      <img src="${app.icon_url}">
+    %endif
+    <div class="app-details">
+      <h2>
+      %if app.about_url:
+        <a href="${app.about_url}">${app.name}</a>
+      %else:
+        ${app.name}
+      %endif
+      </h2>
+      <h3>${app._id}</h3>
+      <div class="app-description">${app.description}</div>
+      <a class="edit-app-button" href="javascript://void(0)">
+         ${_("edit")}
+      </a>
+    </div>
+    <div class="edit-app">
+      <div class="edit-app-form">
+        <form method="post" action="/api/updateapp" class="pretty-form"
+         id="update-app-${app._id}"
+         onsubmit="${"return post_form(this, 'updateapp', function(x) {return '%s'})" % _("updating...")}">
+          <input type="hidden" name="uh" value="${c.modhash}" />
+          <input type="hidden" name="client_id" value="${app._id}" />
+          <table class="preftable">
+            <tr>
+              <th>${_("secret")}</th>
+              <td class="prefright">${app.secret}</td>
+            </tr>
+            <tr>
+              <th>${_("name")}</th>
+              <td class="prefright">
+                <input name="name" value="${app.name}">
+                ${error_field("NO_TEXT", "name")}
+              </td>
+            </tr>
+            <tr>
+              <th>${_("description")}</th>
+              <td class="prefright">
+                <textarea name="description">${app.description}</textarea>
+              </td>
+            </tr>
+            <tr>
+              <th>${_("about url")}</th>
+              <td class="prefright">
+                <input name="about_url" value="${app.about_url}">
+                ${error_field("BAD_URL", "about_url")}
+              </td>
+            </tr>
+            <tr>
+              <th>${_("icon url")}</th>
+              <td class="prefright">
+                <input name="icon_url" value="${app.icon_url}">
+                ${error_field("BAD_URL", "icon_url")}
+              </td>
+            </tr>
+            <tr>
+              <th>${_("redirect uri")}</th>
+              <td class="prefright">
+                <input name="redirect_uri"
+                 value="${app.redirect_uri}">
+                ${error_field("NO_URL", "redirect_uri")}
+                ${error_field("BAD_URL", "redirect_uri")}
+              </td>
+            </tr>
+          </table>
+          <input type="submit" value="update app">
+          <span class="status"></span>
+        </form>
+      </div>
+      <div class="edit-app-form pretty-form">
+        <table class="preftable">
+          <tr>
+            <th>${_("developers")}</th>
+            <td class="prefright">
+              %for dev in app._developers:
+                ${dev.name}&#32;
                 %if c.user == dev:
                   <span class="gray">(that's you!)</span>
                 %else:
@@ -88,26 +113,35 @@
                              hidden_data=dict(client_id=app._id,
                                               developer=dev._fullname))}
                 %endif
-              </p>
-            %endfor
-            add developer: <input>
-          </td>
-        </tr>
-      </table>
-      <input type="submit" value="update app">
-      <span class="status"></span>
-    </form>
-    ${ynbutton(_("delete app"),
-               "deleted",
-               "deleteapp",
-               hidden_data=dict(client_id=app._id))}
+                <br>
+              %endfor
+              <form method="post" action="/api/adddeveloper"
+               class="pretty-form app-developers" id="app-developer-${app._id}"
+               onsubmit="${"return post_form(this, 'adddeveloper', function(x) {return '%s'})" % _("adding...")}">
+                <input type="hidden" name="uh" value="${c.modhash}" />
+                <input type="hidden" name="client_id" value="${app._id}" />
+                add developer: <input name="name">
+                <span class="status"></span>
+              </form>
+            </td>
+          </tr>
+        </table>
+      </div>
+      <div class="delete-app-button">
+        ${ynbutton(_("delete app"),
+                   "deleted",
+                   "deleteapp",
+                   hidden_data=dict(client_id=app._id))}
+      </div>
+    </div>
+  </div>
   %endfor
   <p><a href="#">create another app...</a></p>
 %else:
   <p><a href="#">are you a developer?  create an app...</a></p>
 %endif
 
-<div>
+<div class="edit-app-form">
   <h1>${_("create application")}</h1>
   <form method="post" action="/api/updateapp" class="pretty-form" id="create-app"
    onsubmit="${"return post_form(this, 'updateapp', function(x) {return '%s'})" % _("creating...")}">