add an explicit dismiss button to reason banner

assets/settings.js

@@ -168,13 +168,22 @@ import Banner from '../components/Banner.html';
     }
     set_viewer_timeout();
 
-    let reason_banner = document.querySelector('.banner[data-reason]');
-
     banner.on('toggle', enabled => {
         send_settings({policy_enabled: enabled}).then(fetch_viewer).then(update_viewer);
-        if(enabled && reason_banner){
-            reason_banner.parentElement.removeChild(reason_banner);
-        }
         // TODO show error or spinner if it takes over a second
     })
+
+    let reason_banner = document.querySelector('.banner[data-reason]');
+    if(reason_banner){
+        let dismiss = reason_banner.querySelector('input[type=submit]');
+        dismiss.addEventListener('click', e => {
+            e.preventDefault();
+
+            // we don't care if this succeeds or fails. worst
+            // case scenario the banner appears again on a future page load
+            fetch('/api/reason', {method: 'DELETE', credentials:'same-origin'});
+
+            reason_banner.parentElement.removeChild(reason_banner);
+        })
+    }
 })();

assets/styles.css

@@ -187,7 +187,7 @@ form aside {
     font-size: 0.8em;
 }
 
-a.btn {
+a.login-btn {
     color: white;
     text-decoration: none;
     background-color: #555;
@@ -198,16 +198,16 @@ a.btn {
     display: inline-block;
 }
 
-a.btn:hover {
+a.login-btn:hover {
     opacity: 0.9;
 }
 
-.btn > * {
+.login-btn > * {
     display: inline-block;
     vertical-align: middle;
 }
 
-.btn-header {
+.login-btn-header {
     flex: 0 0;
     width: 2em;
     height: 2em;
@@ -219,12 +219,41 @@ a.btn:hover {
     text-align: center;
 }
 
-.btn-header img {
+.login-btn-header img {
     margin-top: 0.4em;
     height: 1.1em;
 }
 
-.btn-content {
+.login-btn-content {
     margin: 0 .5em;
     line-height: 2em;
 }
+
+.btn {
+    border: none;
+    padding: 0.5rem 1rem;
+}
+
+.btn.dismiss,
+.enabled .btn.primary {
+    background-color: transparent;
+    border: 1px solid currentColor;
+}
+.disabled .btn.primary {
+    background-color: #37d;
+    color: white;
+    font-weight: bold;
+}
+
+.btn-group.right {
+    float: right;
+    margin-left: 1em;
+}
+
+form.btn-group {
+    margin-top: 0; margin-bottom: 0;
+}
+
+.clearfix {
+    clear: both;
+}

components/Banner.html

@@ -1,6 +1,6 @@
 <div class='banner {{policy_enabled?'enabled':'disabled'}}'>
     <div class='btn-group right'>
-        <button class='primary' on:click='toggle(policy_enabled)'>{{policy_enabled?'Disable':'Enable'}}</button>
+        <button class='btn primary' on:click='toggle(policy_enabled)'>{{policy_enabled?'Disable':'Enable'}}</button>
     </div>
     <div>
         Forget is currently
@@ -40,25 +40,6 @@
     pointer-events: none;
 }
 
-.right {
-    float: right;
-    margin-left: 1em;
-}
-
-button.primary {
-    border: none;
-    padding: 0.5rem 1rem;
-}
-
-.enabled button.primary {
-    background-color: transparent;
-    border: 1px solid currentColor;
-}
-.disabled button.primary {
-    background-color: #37d;
-    color: white;
-    font-weight: bold;
-}
 .banner {
     transition: background-color 0.6s;
 }

routes.py

@@ -240,6 +240,7 @@ def api_settings_put():
     db.session.commit()
     return jsonify(status='success', updated=updated)
 
+
 @app.route('/api/viewer')
 @require_auth_api
 def api_viewer():
@@ -317,12 +318,30 @@ def mastodon_login_step2(instance_url):
     g.viewer = sess
     return redirect(url_for('index'))
 
+
 @app.route('/sentry/setup.js')
 def sentry_setup():
     client_dsn = app.config.get('SENTRY_DSN').split('@')
     client_dsn[:1] = client_dsn[0].split(':')
     client_dsn = ':'.join(client_dsn[0:2]) + '@' + client_dsn[3]
     resp = make_response(render_template(
-        'sentry.js', sentry_dsn = client_dsn))
+        'sentry.js', sentry_dsn=client_dsn))
     resp.headers.set('content-type', 'text/javascript')
     return resp
+
+
+@app.route('/dismiss', methods={'POST'})
+@csrf
+@require_auth
+def dismiss():
+    get_viewer().reason = None
+    db.session.commit()
+    return redirect(url_for('index'))
+
+
+@app.route('/api/reason', methods={'DELETE'})
+@require_auth_api
+def delete_reason():
+    get_viewer().reason = None
+    db.session.commit()
+    return jsonify(status='success')

templates/index.html

@@ -27,10 +27,10 @@
 {% endif %}
 
 <p>
-<a style='background-color:#1da1f2' class='btn' href="/login/twitter">
-    <span class='btn-header'>
+<a style='background-color:#1da1f2' class='login-btn' href="/login/twitter">
+    <span class='login-btn-header'>
         {{picture(st, 'twitter', (20,40,80), ('webp', 'png'))}}
-    </span><span class='btn-content'>Log in with Twitter</span>
+    </span><span class='login-btn-content'>Log in with Twitter</span>
 </a>
 </p>
 
@@ -38,21 +38,21 @@
 {% for instance in mastodon_instances %}
 
 
-<a style='background-color:#282c37' class='btn' href="{{ url_for('mastodon_login_step1', instance_url=instance.instance) }}">
+<a style='background-color:#282c37' class='login-btn' href="{{ url_for('mastodon_login_step1', instance_url=instance.instance) }}">
 {% if loop.first %}
-    <span class='btn-header'>
+    <span class='login-btn-header'>
         {{picture(st, 'mastodon', (20,40,80), ('webp', 'png'))}}
-    </span><span class='btn-content'>Log in with
+    </span><span class='login-btn-content'>Log in with
 {% else %}
-    <span class='btn-content'>
+    <span class='login-btn-content'>
 {% endif %}
         {{instance.instance}}</span>
 </a>
 
 {% endfor %}
 
-<a style='background-color:#ddd; color:inherit;' class='btn' href="{{ url_for('mastodon_login_step1') }}">
-    <span class='btn-content'>Another Mastodon instance</span>
+<a style='background-color:#ddd; color:inherit;' class='login-btn' href="{{ url_for('mastodon_login_step1') }}">
+    <span class='login-btn-content'>Another Mastodon instance</span>
 </a>
 </p>
 </section>

templates/logged_in.html

@@ -16,6 +16,11 @@
 {% if g.viewer.account.reason %}
 <div class="banner warning" data-reason>
     {{ g.viewer.account.reason }}
+    <form class='btn-group right' action='{{url_for("dismiss")}}' method='post' enctype='multipart/form-data'>
+        <input class='btn dismiss' type='submit' value='Got it'>
+        <input type='hidden' name='csrf-token' value='{{g.viewer.csrf_token}}'>
+    </form>
+    <div class='clearfix'></div>
 </div>
 {% endif %}