Update first walkthrough to use /classroom-addon routing. Add window management JS functions. Add CSS rounded-button style.

Change-Id: Ib11ace66227c91ee588efc9fd2e61a9fba6121b8

Author: AndrewMBurke

flask/01-basic-app/main.py

@@ -25,24 +25,12 @@
 
 @app.route("/")
 def index():
-    return flask.render_template("index.html", message="Welcome!")
+    return flask.render_template("index.html", message="You've reached the index page.")
 
 
-@app.route("/authorize")
-def authorize():
-    # Set the username to test the navigation bar.
-    flask.session["username"] = "Test Username"
-
-    return flask.render_template("index.html",
-                                 message="Test username stored in session.")
-
-
-@app.route("/clear")
-def clear_credentials():
-    flask.session.clear()
-
-    return flask.render_template("index.html", message="Session cleared.")
-
+@app.route("/classroom-addon")
+def classroom_addon():
+    return flask.render_template("addon-discovery.html", message="You've reached the addon discovery page.")
 
 if __name__ == "__main__":
     # You have several options for running the web server.
@@ -56,14 +44,14 @@ def clear_credentials():
     # Run the application on a local server, defaults to http://localhost:5000.
     # Note: the OAuth flow requires a TLD, *not* an IP address; "localhost" is
     #   acceptable, but http://127.0.0.1 is not.
-    # app.run(debug=True)
+    app.run(debug=True)
 
     ### OPTION 2: Secure localhost
     # Run the application over HTTPs with a locally stored certificate and key.
     # Defaults to https://localhost:5000.
-    app.run(host="localhost",
-            ssl_context=("localhost.pem", "localhost-key.pem"),
-            debug=True)
+    # app.run(host="localhost",
+    #         ssl_context=("localhost.pem", "localhost-key.pem"),
+    #         debug=True)
 
     ### OPTION 3: Production- or cloud-ready server
     # Start a Gunicorn server, which is appropriate for use in

flask/01-basic-app/static/base-style.css

@@ -35,9 +35,37 @@ body {
     text-decoration: none;
     font-size: 17px;
     display: block;
-}
+    }
 
 .topnav a:hover {
     background-color: #ddd;
     color: black;
+}
+
+a.rounded-button {
+    display: inline-block;
+    padding: 0.3em 1.2em;
+    margin: 0 0.1em 0.1em 0;
+    border: 0.16em solid rgba(255, 255, 255, 0);
+    border-radius: 2em;
+    box-sizing: border-box;
+    text-decoration: none;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 300;
+    color: #FFFFFF;
+    text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);
+    text-align: center;
+    transition: all 0.2s;
+    background-color: #4285F4;
+}
+
+a.rounded-button:hover {
+    border-color: rgba(255, 255, 255, 1);
+}
+
+@media all and (max-width:30em) {
+    a.rounded-button {
+        display: block;
+        margin: 0.2em auto;
+    }
 }

flask/01-basic-app/static/scripts/addon-utils.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright 2021 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.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://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Opens a given destination route in a new window. This function uses
+ * window.open() so as to force window.opener to retain a reference to the
+ * iframe from which it was called.
+ * @param {string=} destinationURL The endpoint to open, or "/" if none is
+ *     provided.
+ */
+function openWebsiteInNewTab(destinationURL = '/') {
+  window.open(destinationURL, '_blank');
+}
+
+/**
+ * Close the iframe by calling postMessage() in the host Classroom page. This
+ * function can be called direcly when in a Classroom add-on iframe.
+ *
+ * Alternatively, it can be used to close an add-on iframe in another window.
+ * For example, if an add-on iframe in Window 1 opens a link in a new Window 2
+ * using the openWebsiteInNewTab function above, you can call
+ * window.opener.closeIframe() from Window 2 to close the iframe in Window 1.
+ */
+function closeAddonIframe() {
+  window.parent.postMessage(
+      {
+        type: 'Classroom',
+        action: 'closeIframe',
+      },
+      '*');
+}

flask/01-basic-app/templates/addon-discovery.html

@@ -0,0 +1,29 @@
+<!--
+Copyright 2021 Google LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+{% extends "base.html" %}
+{% include "navbar.html" %}
+{% block content %}
+<div class="container">
+    <h3>Welcome to the home page!</h3>
+    <strong>{{message}}</strong>
+</div>
+
+<hr>
+
+<a class="rounded-button" href="#" onclick="openWebsiteInNewTab()">Visit our website</a>
+<a class="rounded-button" href="#" onclick="closeAddonIframe()">Close add-on iframe</a>
+{% endblock %}

flask/01-basic-app/templates/base.html

@@ -26,6 +26,7 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
   <link rel="stylesheet" href="../static/base-style.css">
 
+  <script src="../static/scripts/addon-utils.js"></script>
 </head>
 
 <body>

flask/01-basic-app/templates/index.html

@@ -14,13 +14,17 @@
 limitations under the License.
 -->
 
-{% extends "base.html"%}
-{% include 'navbar.html' %}
+{% extends "base.html" %}
+{% include "navbar.html" %}
 {% block content %}
 <div class="container">
     <h3>Welcome to the home page!</h3>
     <strong>{{message}}</strong>
 </div>
 
 <hr>
+
+<a class="rounded-button" href="#" onclick="window.opener.closeAddonIframe();window.close()">
+    Close tab and the add-on iframe
+</a>
 {% endblock %}

flask/01-basic-app/templates/navbar.html

@@ -17,16 +17,11 @@
 <div class="topnav">
     <ul>
         <li>
-            <a href="{{url_for('index')}}">Home</a>
+            <a href="{{url_for('index')}}">Company Homepage</a>
         </li>
 
         <li style="float: right">
-            {% if session['username'] %}
-            <a style="background-color: #db4437" href="{{url_for('clear_credentials')}}">Logout
-                {{ session['username'] }}</a>
-            {% else %}
-            <a style="background-color: #4285f4" href="{{url_for('authorize')}}">Login</a>
-            {% endif %}
+            <a style="background-color: #4285f4" href="#">Login Placeholder</a>
         </li>
     </ul>
 </div>