Webapp modification for the new invite process splash

webapp/titanembeds/blueprints/user/user.py

@@ -76,7 +76,7 @@ def administrate_guild(guild_id):
     db_guild = db.session.query(Guilds).filter(Guilds.guild_id == guild_id).first()
     if not db_guild:
         session["redirect"] = url_for("user.administrate_guild", guild_id=guild_id, _external=True)
-        return redirect(generate_bot_invite_url(guild_id))
+        return redirect(url_for("user.add_bot", guild_id=guild_id))
     session["redirect"] = None
     permissions=[]
     if check_user_permission(guild_id, 5):
@@ -121,6 +121,11 @@ def update_administrate_guild(guild_id):
         mentions_limit=db_guild.mentions_limit,
     )
 
+@user.route("/add-bot/<guild_id>")
+@discord_users_only()
+def add_bot(guild_id):
+    return render_template("add_bot.html.j2", guild_id=guild_id, guild_invite_url=generate_bot_invite_url(guild_id))
+
 def prepare_guild_members_list(members, bans):
     all_users = []
     ip_pool = []

webapp/titanembeds/oauth.py

@@ -96,5 +96,5 @@ def generate_guild_icon_url(id, hash):
     return guild_icon_url + str(id) + "/" + str(hash) + ".jpg"
 
 def generate_bot_invite_url(guild_id):
-    url = "https://discordapp.com/oauth2/authorize?&client_id={}&scope=bot&permissions={}&guild_id={}&response_type=code&redirect_uri={}".format(config['client-id'], '536083583', guild_id, url_for("user.dashboard", _external=True))
+    url = "https://discordapp.com/oauth2/authorize?&client_id={}&scope=bot&permissions={}&guild_id={}".format(config['client-id'], '536083583', guild_id)
     return url

webapp/titanembeds/static/js/add-bot.js

@@ -0,0 +1,53 @@
+/* global $ */
+/* global guild_id */
+/* global guild_invite_url */
+
+(function () {
+    function query_guild() {
+        var funct = $.ajax({
+            dataType: "json",
+            url: "/api/query_guild",
+            data: {"guild_id": guild_id}
+        });
+        return funct.promise();
+    }
+    
+    $(function(){
+        $("#invite-waiting").hide();
+        $("#invite-waiting-fail").hide();
+        $("#invite-done").hide();
+        
+        $("#invite-btn").click(startInviteProcess);
+    });
+    
+    function startInviteProcess() {
+        $("#invite-initial").hide("slow");
+        $("#invite-waiting").show("slow");
+        window.open(guild_invite_url);
+        query_guild_process(0);
+    }
+
+    function query_guild_process(index) {
+        setTimeout(function() {
+            var guild = query_guild();
+            guild.done(function(data) {
+                $("#invite-waiting").hide("slow");
+                $("#invite-done").show("slow");
+                return;
+            });
+            guild.fail(function(data) {
+                if (data.status != 404 && data.status < 500) { // technically good
+                    $("#invite-waiting").hide("slow");
+                    $("#invite-done").show("slow");
+                    return;
+                } else if (index < 7) {
+                    query_guild_process(index + 1);
+                } else {
+                    $("#invite-waiting").hide("slow");
+                    $("#invite-waiting-fail").show("slow");
+                    return;
+                }
+            });
+        }, 5000);
+    }
+})();

webapp/titanembeds/templates/add_bot.html.j2

@@ -0,0 +1,82 @@
+{% extends 'site_layout.html.j2' %}
+{% block title %}Adding bot to server{% endblock %}
+
+{% block content %}
+<h1>Would you like to invite Titan to your server?</h1>
+<p class="flow-text">Please keep in mind that <strong>Titan currently requires Administrator</strong> permissions to function.<br>
+This is strictly enforced for the bot to send messages to all the channels, read role permissions, access banned users list, etc.</p>
+<div class="row">
+  <div class="col s12">
+    <div id="invite-initial" class="card-panel indigo lighten-5 z-depth-3 hoverable">
+      <span class="black-text center-align">
+        <h3>Step 1</h3>
+        <h5>Once you are ready to add the bot to your server, please hit the button below to start the process.</h5>
+        <br>
+        <a class="waves-effect waves-light btn btn-large center_content" id="invite-btn">Invite Titan!</a>
+        <p>(Opens in a new window)</p>
+      </span>
+    </div>
+    
+    <div id="invite-waiting" class="card-panel indigo lighten-5 z-depth-3 hoverable">
+      <span class="black-text center-align">
+        <h3>Step 2</h3>
+        <h5>Please wait a moment for the bot tries to situate itself...</h5>
+        <br>
+        <div class="progress" style="background-color: #909cde;">
+            <div class="indeterminate" style="background-color: #303f9f;"></div>
+        </div>
+      </span>
+    </div>
+    
+    <div id="invite-waiting-fail" class="card-panel indigo lighten-5 z-depth-3 hoverable">
+      <span class="black-text center-align">
+        <h3>Step 2</h3>
+        <h5>Oops!</h5>
+        <p class="flow-text">There seems to be a problem processing the invite.<br>
+        Please make sure that the bot is given Administrator permission in the server.</p>
+        <hr>
+        <p>You may try adding the bot to the server again, or report the bug on our
+        Discord server.</p>
+        <div class="row">
+          <div class="col s12 m3">
+            <a class="waves-effect waves-light btn btn-large center_content" href="https://discord.io/titan" target="_blank">Report a bug</a>
+          </div>
+          <div class="col s12 m9">
+            <a class="waves-effect waves-light btn btn-large center_content" href="./{{ guild_id }}">Try again</a>
+          </div>
+        </div>
+      </span>
+    </div>
+    
+    <div id="invite-done" class="card-panel indigo lighten-5 z-depth-3 hoverable">
+      <span class="black-text center-align">
+        <h3>Step 3</h3>
+        <h5>Congratulations! You have added Titan to your server!</h5>
+        <p class="flow-text">You may start configuring your server to your likings.</p>
+        <p>
+        Keep in mind that if your server is large (500+ members<em>(?)</em> overall), it may
+        take a while for the bot to index. Please allow five to ten minutes. If you are still
+        unable to login to the embed with your Discord account, please talk to us and
+        we'll sort this out right away!
+        </p>
+        <div class="row">
+          <div class="col s12 m4">
+            <a class="waves-effect waves-light btn btn-large center_content" href="https://discord.io/titan" target="_blank">Join our Discord server!</a>
+          </div>
+          <div class="col s12 m8">
+            <a class="waves-effect waves-light btn btn-large center_content" href="{{url_for('user.administrate_guild', guild_id=guild_id)}}">Continue to configure your embed</a>
+          </div>
+        </div>
+      </span>
+    </div>
+  </div>
+</div>
+{% endblock %}
+{% block script %}
+<script>
+  const guild_id = "{{ guild_id }}";
+  const guild_invite_url = "{{ guild_invite_url }}";
+</script>
+
+<script type="text/javascript" src="{{ url_for('static', filename='js/add-bot.js') }}"></script>
+{% endblock %}