oauth: Add an authorize.compact support.

r2/r2/lib/pages/pages.py

@@ -174,10 +174,11 @@ class Reddit(Templated):
     def __init__(self, space_compress=None, nav_menus=None, loginbox=True,
                  infotext='', content=None, short_description='', title='',
                  robots=None, show_sidebar=True, show_chooser=False,
-                 footer=True, srbar=True, page_classes=None,
+                 footer=True, srbar=True, page_classes=None, short_title=None,
                  show_wiki_actions=False, extra_js_config=None, **context):
         Templated.__init__(self, **context)
         self.title = title
+        self.short_title = short_title
         self.short_description = short_description
         self.robots = robots
         self.infotext = infotext
@@ -1020,7 +1021,7 @@ class LoginPage(BoringPage):
         if self.dest:
             u = UrlParser(self.dest)
             # Display a preview message for OAuth2 client authorizations
-            if u.path == '/api/v1/authorize':
+            if u.path in ['/api/v1/authorize', '/api/v1/authorize.compact']:
                 client_id = u.query_dict.get("client_id")
                 self.client = client_id and OAuth2Client.get_token(client_id)
                 if self.client:
@@ -1104,7 +1105,8 @@ class OAuth2AuthorizationPage(BoringPage):
                                       duration=duration,
                                       expiration=expiration)
         BoringPage.__init__(self, _("request for permission"),
-                show_sidebar=False, content=content)
+                            show_sidebar=False, content=content,
+                            short_title=_("permission"))
 
 class OAuth2Authorization(Templated):
     pass

r2/r2/public/static/css/compact.css

@@ -17,6 +17,22 @@ textarea { font-family: inherit; }
 .newbutton { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 8px solid transparent; -moz-border-image: url("../compact/border-button.png") 8; -webkit-border-image: url("../compact/border-button.png") 8; -webkit-border-image: url("../compact/border-button.png") 8; -o-border-image: url("../compact/border-button.png") 8; border-image: url("../compact/border-button.png") 8 fill; color: white; font-family: inherit; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); background: none; }
 .newbutton:active, .newbutton:hover, .newbutton[selected], .newbutton.expanded, .newbutton.active { -moz-border-image: url("../compact/border-button-active.png") 8; -webkit-border-image: url("../compact/border-button-active.png") 8; -webkit-border-image: url("../compact/border-button-active.png") 8; -o-border-image: url("../compact/border-button-active.png") 8; border-image: url("../compact/border-button-active.png") 8 fill; color: white; }
 
+.newbutton.red {
+    -moz-border-image: url("../compact/border-button-red.png") 8;
+    -webkit-border-image: url("../compact/border-button-red.png") 8;
+    -o-border-image: url("../compact/border-button-red.png") 8;
+    border-image: url("../compact/border-button-red.png") 8 fill;
+}
+
+.newbutton.red:active, .newbutton.red:hover, .newbutton.red[selected], .newbutton.red.expanded, .newbutton.red.active {
+    -moz-border-image: url("../compact/border-button-red-active.png") 8;
+    -webkit-border-image: url("../compact/border-button-red-active.png") 8;
+    -o-border-image: url("../compact/border-button-red-active.png") 8;
+    border-image: url("../compact/border-button-red-active.png") 8 fill;
+    color: white;
+}
+
+
 .button, .button:visited { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfd0e0), color-stop(100%, #80a2c4)); background: -webkit-linear-gradient(top, #bfd0e0, #80a2c4); background: -moz-linear-gradient(top, #bfd0e0, #80a2c4); background: -o-linear-gradient(top, #bfd0e0, #80a2c4); background: linear-gradient(top, #bfd0e0, #80a2c4); background-color: #9fb9d2; height: 30px; line-height: 30px; color: white; font-family: inherit; font-size: 12px; font-weight: bold; margin: 0px; padding: 5px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; width: auto; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); border: 1px solid #517191; -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.75), 0px 1px 1px rgba(255, 255, 255, 0.6), 0px -1px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.75), 0px 1px 1px rgba(255, 255, 255, 0.6), 0px -1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.75), 0px 1px 1px rgba(255, 255, 255, 0.6), 0px -1px 1px rgba(0, 0, 0, 0.1); }
 
 .button:active, .button[selected], .button.active, .button.upmod, .button.downmod { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7e8994), color-stop(100%, #80a2c4)); background: -webkit-linear-gradient(top, #7e8994, #80a2c4); background: -moz-linear-gradient(top, #7e8994, #80a2c4); background: -o-linear-gradient(top, #7e8994, #80a2c4); background: linear-gradient(top, #7e8994, #80a2c4); background-color: #7f95ac; }
@@ -580,3 +596,87 @@ a.author { margin-right: 0.5em; }
     display: block;
     margin-top: 2px;
 }
+
+.infobar {
+    background-color: #f6e69f;
+    padding: 5px 10px;
+    margin-bottom: -10px;
+    text-align: center;
+}
+
+.infobar.client-info {
+    height: 48px;
+}
+
+.infobar.client-info .icon img {
+    position: absolute;
+    left: 10px;
+    width: 48px;
+    height: 48px;
+}
+
+.infobar.client-info div {
+    height: 48px;
+    display: table-cell;
+    vertical-align: middle; 
+    text-align: left; 
+    padding-left: 56px;
+}
+
+.oauth2-authorize {
+    background-color: white;
+    max-width: 350px;
+    margin: 10px auto;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    padding: 10px;
+}
+
+.oauth2-authorize .icon {
+    text-align: center;
+}
+
+.oauth2-authorize h1 {
+    font-size: 18px;
+    padding: 5px;
+}
+
+.oauth2-authorize form .allow {
+    margin-right: 10px;
+}
+
+.oauth2-authorize form {
+    text-align: center;
+}
+
+.oauth2-authorize .access-permissions {
+    border: 1px solid #CCC;
+    padding: 5px;
+    background-color: #EEE;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    margin-bottom: 15px;
+}
+
+.oauth2-authorize h2 {
+    margin: 0;
+    font-size: 15px;
+}
+
+.oauth2-authorize ul {
+    margin: 5px 0;
+    padding-left: 25px;
+    font-size: 15px;
+}
+
+.oauth2-authorize a {
+    text-decoration: none;
+}
+
+.oauth2-authorize .notice {
+    color: #333;
+    font-size: 15px;
+    margin: 10px 0;
+    padding-left: 5px;
+    font-weight: bold;
+}

r2/r2/templates/clientinfobar.compact

@@ -0,0 +1,23 @@
+## The contents of this file are subject to the Common Public Attribution
+## License Version 1.0. (the "License"); you may not use this file except in
+## compliance with the License. You may obtain a copy of the License at
+## http://code.reddit.com/LICENSE. The License is based on the Mozilla Public
+## License Version 1.1, but Sections 14 and 15 have been added to cover use of
+## software over a computer network and provide for limited attribution for the
+## Original Developer. In addition, Exhibit A has been modified to be
+## consistent with Exhibit B.
+##
+## Software distributed under the License is distributed on an "AS IS" basis,
+## WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for
+## the specific language governing rights and limitations under the License.
+##
+## The Original Code is reddit.
+##
+## The Original Developer is the Initial Developer.  The Initial Developer of
+## the Original Code is reddit Inc.
+##
+## All portions of the code written by reddit are Copyright (c) 2006-2013
+## reddit Inc. All Rights Reserved.
+###############################################################################
+
+<%inherit file="clientinfobar.html" />

r2/r2/templates/oauth2authorization.compact

@@ -0,0 +1,23 @@
+## The contents of this file are subject to the Common Public Attribution
+## License Version 1.0. (the "License"); you may not use this file except in
+## compliance with the License. You may obtain a copy of the License at
+## http://code.reddit.com/LICENSE. The License is based on the Mozilla Public
+## License Version 1.1, but Sections 14 and 15 have been added to cover use of
+## software over a computer network and provide for limited attribution for the
+## Original Developer. In addition, Exhibit A has been modified to be
+## consistent with Exhibit B.
+##
+## Software distributed under the License is distributed on an "AS IS" basis,
+## WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for
+## the specific language governing rights and limitations under the License.
+##
+## The Original Code is reddit.
+##
+## The Original Developer is the Initial Developer.  The Initial Developer of
+## the Original Code is reddit Inc.
+##
+## All portions of the code written by reddit are Copyright (c) 2006-2013
+## reddit Inc. All Rights Reserved.
+###############################################################################
+
+<%inherit file="oauth2authorization.html"/>

r2/r2/templates/oauth2authorization.html

@@ -46,10 +46,12 @@
              % dict(app=app_link(thing.client)))}
   </h1>
   <div class="access">
-    <h2>${unsafe(_("Allow %(app)s to:") % dict(app=app_name))}</h2>
-    ${scope_details(thing.scope, expiration=thing.expiration)}
+    <div class="access-permissions">
+        <h2>${unsafe(_("Allow %(app)s to:") % dict(app=app_name))}</h2>
+        ${scope_details(thing.scope, expiration=thing.expiration)}
+    </div>
     <p class="notice">
-      ${unsafe(
+        ${unsafe(
             _("%(app)s will not be able to access your reddit password.")
             % dict(app=app_name))}
     </p>
@@ -61,9 +63,9 @@
       <input type="hidden" name="duration" value="${thing.duration}" />
       <input type="hidden" name="uh" value="${c.modhash}"/>
       <div>
-        <input type="submit" class="fancybutton allow" name="authorize"
+        <input type="submit" class="fancybutton newbutton allow" name="authorize"
                value="${_("Allow")}" />
-        <input type="submit" class="fancybutton decline"
+        <input type="submit" class="fancybutton newbutton decline red"
                value="${_("Decline")}" />
       </div>
     </form>

r2/r2/templates/redditheader.compact

@@ -35,6 +35,7 @@
     if toolbars and isinstance(toolbars[0], PageNameNav):
         nav = toolbars[0]
         toolbars = toolbars[1:]
+    nav = thing.short_title or nav
  %>
 <div id="preload">
     <div class="commentcount"><div class="comments"></div><div class="comments preloaded"></div></div>