From e8ecfc65d23d0f589ce89965ab88ff3592849cf8 Mon Sep 17 00:00:00 2001
From: Jeremy Zhang <jkzhang@uw.edu>
Date: Sun, 7 Jan 2018 02:41:02 +0000
Subject: [PATCH] Change user defined css from the admin panel

---
 webapp/titanembeds/blueprints/admin/admin.py  | 86 ++++++++++++++++++-
 webapp/titanembeds/blueprints/user/user.py    |  2 +-
 webapp/titanembeds/static/js/usercss.js       | 24 ++++--
 .../titanembeds/templates/admin_index.html.j2 |  7 ++
 .../templates/admin_usercss.html.j2           | 20 +++++
 webapp/titanembeds/templates/usercss.html.j2  | 14 ++-
 6 files changed, 144 insertions(+), 9 deletions(-)
 create mode 100644 webapp/titanembeds/templates/admin_usercss.html.j2

diff --git a/webapp/titanembeds/blueprints/admin/admin.py b/webapp/titanembeds/blueprints/admin/admin.py
index 63a16ff..408db3f 100644
--- a/webapp/titanembeds/blueprints/admin/admin.py
+++ b/webapp/titanembeds/blueprints/admin/admin.py
@@ -1,7 +1,7 @@
 from flask import Blueprint, url_for, redirect, session, render_template, abort, request, jsonify
 from flask_socketio import emit
 from functools import wraps
-from titanembeds.database import db, get_administrators_list, Cosmetics, Guilds, UnauthenticatedUsers, UnauthenticatedBans, TitanTokens, TokenTransactions, get_titan_token, set_titan_token, list_disabled_guilds, DisabledGuilds
+from titanembeds.database import db, get_administrators_list, Cosmetics, Guilds, UnauthenticatedUsers, UnauthenticatedBans, TitanTokens, TokenTransactions, get_titan_token, set_titan_token, list_disabled_guilds, DisabledGuilds, UserCSS
 from titanembeds.oauth import generate_guild_icon_url
 import datetime
 import json
@@ -293,4 +293,86 @@ def delete_disabled_guilds():
     guild = db.session.query(DisabledGuilds).filter(DisabledGuilds.guild_id == guild_id).first()
     db.session.delete(guild)
     db.session.commit()
-    return ('', 204)
\ No newline at end of file
+    return ('', 204)
+
+@admin.route("/custom_css", methods=["GET"])
+@is_admin
+def list_custom_css_get():
+    css = db.session.query(UserCSS).order_by(UserCSS.id).all()
+    return render_template("admin_usercss.html.j2", css=css)
+
+@admin.route("/custom_css/edit/<css_id>", methods=["GET"])
+@is_admin
+def edit_custom_css_get(css_id):
+    css = db.session.query(UserCSS).filter(UserCSS.id == css_id).first()
+    if not css:
+        abort(404)
+    variables = css.css_variables
+    if variables:
+        variables = json.loads(variables)
+    return render_template("usercss.html.j2", new=False, css=css, variables=variables, admin=True)
+
+@admin.route("/custom_css/edit/<css_id>", methods=["POST"])
+@is_admin
+def edit_custom_css_post(css_id):
+    dbcss = db.session.query(UserCSS).filter(UserCSS.id == css_id).first()
+    if not dbcss:
+        abort(404)
+    name = request.form.get("name", None)
+    user_id = request.form.get("user_id", None)
+    css = request.form.get("css", None)
+    variables = request.form.get("variables", None)
+    variables_enabled = request.form.get("variables_enabled", False) in ["true", True]
+    if not name:
+        abort(400)
+    else:
+        name = name.strip()
+        css = css.strip()
+    if not user_id:
+        user_id = dbcss.user_id
+    if (len(css) == 0):
+        css = None
+    dbcss.name = name
+    dbcss.user_id = user_id
+    dbcss.css = css
+    dbcss.css_variables = variables
+    dbcss.css_var_bool = variables_enabled
+    db.session.commit()
+    return jsonify({"id": dbcss.id})
+    
+@admin.route("/custom_css/edit/<css_id>", methods=["DELETE"])
+@is_admin
+def edit_custom_css_delete(css_id):
+    dbcss = db.session.query(UserCSS).filter(UserCSS.id == css_id).first()
+    if not dbcss:
+        abort(404)
+    db.session.delete(dbcss)
+    db.session.commit()
+    return jsonify({})
+
+@admin.route("/custom_css/new", methods=["GET"])
+@is_admin
+def new_custom_css_get():
+    return render_template("usercss.html.j2", new=True, admin=True)
+    
+@admin.route("/custom_css/new", methods=["POST"])
+@is_admin
+def new_custom_css_post():
+    name = request.form.get("name", None)
+    user_id = request.form.get("user_id", None)
+    css = request.form.get("css", None)
+    variables = request.form.get("variables", None)
+    variables_enabled = request.form.get("variables_enabled", False) in ["true", True]
+    if not name:
+        abort(400)
+    else:
+        name = name.strip()
+        css = css.strip()
+    if not user_id:
+        abort(400)
+    if (len(css) == 0):
+        css = None
+    css = UserCSS(name, user_id, variables_enabled, variables, css)
+    db.session.add(css)
+    db.session.commit()
+    return jsonify({"id": css.id})
\ No newline at end of file
diff --git a/webapp/titanembeds/blueprints/user/user.py b/webapp/titanembeds/blueprints/user/user.py
index d84b092..34ad933 100644
--- a/webapp/titanembeds/blueprints/user/user.py
+++ b/webapp/titanembeds/blueprints/user/user.py
@@ -85,7 +85,7 @@ def dashboard():
     cosmetics = db.session.query(Cosmetics).filter(Cosmetics.user_id == session['user_id']).first()
     css_list = None
     if cosmetics and cosmetics.css:
-        css_list = db.session.query(UserCSS).filter(UserCSS.user_id == session['user_id']).all()
+        css_list = db.session.query(UserCSS).filter(UserCSS.user_id == session['user_id']).order_by(UserCSS.id).all()
     premium_css_count = count_user_premium_css()
     return render_template("dashboard.html.j2", servers=guilds, icon_generate=generate_guild_icon_url, cosmetics=cosmetics, css_list=css_list, premium_css_count=premium_css_count)
 
diff --git a/webapp/titanembeds/static/js/usercss.js b/webapp/titanembeds/static/js/usercss.js
index 9f37756..4f2e43e 100644
--- a/webapp/titanembeds/static/js/usercss.js
+++ b/webapp/titanembeds/static/js/usercss.js
@@ -1,4 +1,4 @@
-/*global $, ace, Materialize, newCSS, CSS_ID*/
+/*global $, ace, Materialize, newCSS, CSS_ID, ADMIN*/
 (function () {
     if($("#css_editor").length != 0) {
         var editor = ace.edit("css_editor");
@@ -7,7 +7,6 @@
     function postForm() {
         var name = $('#css_name').val();
         var var_enabled = $("#toggleCSSVar").is(':checked');
-        var variables = JSON.stringify(formatCSSVars());
         var css = null;
         if($("#css_editor").length != 0) {
             css = editor.getValue();
@@ -15,10 +14,21 @@
                 css = null;
             }
         }
+        
+        var payload = {"name": name, "variables_enabled": var_enabled, "css": css};
+        if (var_enabled) {
+            var variables = JSON.stringify(formatCSSVars());
+            payload.variables = variables;
+        }
+        if (ADMIN) {
+            var user_id = $('#css_user_id').val();
+            payload.user_id = user_id;
+        }
+        
         var funct = $.ajax({
             dataType: "json",
             method: "POST",
-            data: {"name": name, "variables_enabled": var_enabled, "variables": variables, "css": css}
+            data: payload
         });
         return funct.promise();
     }
@@ -102,8 +112,12 @@
           type: 'DELETE',
           success: function() {
               alert("You have successfully deleted the CSS!");
-              window.location.href = "/user/dashboard";
-          },
+                    if (ADMIN) {
+                        window.location.href = "/admin/custom_css";
+                    } else {
+                        window.location.href = "/user/dashboard";
+                    }
+              },
           error: function() {
               Materialize.toast('Oh no! Something has failed deleting your CSS!', 10000);
           }
diff --git a/webapp/titanembeds/templates/admin_index.html.j2 b/webapp/titanembeds/templates/admin_index.html.j2
index 45e03d8..cff89b8 100644
--- a/webapp/titanembeds/templates/admin_index.html.j2
+++ b/webapp/titanembeds/templates/admin_index.html.j2
@@ -27,6 +27,13 @@
       <a class="waves-effect waves-light btn" href="{{ url_for('admin.manage_titan_tokens') }}">Manage</a>
     </div>
   </div>
+  <div class="col s12">
+    <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
+      <h4>User Defined CSS</h4>
+      <p class="flow-text">Manage user defined css (custom css).</p>
+      <a class="waves-effect waves-light btn" href="{{ url_for('admin.list_custom_css_get') }}">Manage</a>
+    </div>
+  </div>
   <div class="col s12">
     <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
       <h4>Disabled Servers</h4>
diff --git a/webapp/titanembeds/templates/admin_usercss.html.j2 b/webapp/titanembeds/templates/admin_usercss.html.j2
new file mode 100644
index 0000000..75a886a
--- /dev/null
+++ b/webapp/titanembeds/templates/admin_usercss.html.j2
@@ -0,0 +1,20 @@
+{% extends 'site_layout.html.j2' %}
+{% set title="Manage User CSS as Administrator" %}
+
+{% block content %}
+<h1>Manage User CSS</h1>
+<p class="flow-text">Select a CSS to manage. Or, create a new user css. <a class="waves-effect waves-light btn" href="{{ url_for('admin.new_custom_css_get') }}">NEW</a></p>
+<div class="row">
+  {% for c in css %}
+  <div class="col l4 m6 s12">
+    <div class="card-panel indigo lighten-5 z-depth-3 hoverable">
+      <div class="row black-text">
+        <p class="flow-text"><strong>#{{ c.id }}</strong> {{ c.name }}</p>
+        <p>Owned by: {{ c.user_id }}</p>
+        <a class="waves-effect waves-light btn" href="{{ url_for('admin.edit_custom_css_get', css_id=c.id) }}">Manage</a>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% endblock %}
diff --git a/webapp/titanembeds/templates/usercss.html.j2 b/webapp/titanembeds/templates/usercss.html.j2
index 0ce55ed..d833875 100644
--- a/webapp/titanembeds/templates/usercss.html.j2
+++ b/webapp/titanembeds/templates/usercss.html.j2
@@ -5,6 +5,10 @@
     {% set title="Editing " + css.name + " - User CSS" %}
 {% endif %}
 
+{% if not admin %}
+    {% set admin=False %}
+{% endif %}
+
 {%- set live_preview -%}
     <iframe id="iframepreview" src="
     {% if new %}
@@ -45,6 +49,13 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the
         <input placeholder="Some Lit CSS" id="css_name" type="text" {% if not new %}value="{{ css.name }}"{% endif %}>
         <label for="css_name">Name</label>
     </div>
+    {% if admin %}
+    <div class="col s12">
+        <p class="flow-text">Set CSS Ownership</p>
+        <input placeholder="User ID" id="css_user_id" type="text" {% if admin and not new %}value="{{ css.user_id }}"{% endif %}>
+        <label for="css_user_id">User ID</label>
+    </div>
+    {% endif %}
     <div class="col s12">
         <p class="flow-text">Propose Predefined CSS variables here</p>
         <p>
@@ -99,7 +110,7 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the
         </div>
         <p><strong>TIP!</strong> You can use the variables in your CSS below! Something like <code>color: var(--leftsidebar);</code> would work!</p>
     </div>
-    {% if (new and premium_css_count >= cosmetics.css_limit) or (not new and premium_css_count >= cosmetics.css_limit and css.css is none) %}
+    {% if not admin and ((new and premium_css_count >= cosmetics.css_limit) or (not new and premium_css_count >= cosmetics.css_limit and css.css is none)) %}
     <div class="col s12">
         <hr>
         <p class="flow-text">All custom CSS slots are used. Donate to get more!</p>
@@ -137,6 +148,7 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the
 <script>
     const newCSS = {% if new %}true{% else %}false{% endif %};
     const CSS_ID = {%if new %}null{% else %}{{ css.id }}{% endif %};
+    const ADMIN = {{ admin|tojson|safe }};
 </script>
 <script type="text/javascript" src="{{ url_for('static', filename='js/usercss.js') }}"></script>
 {% endblock %}