From 219d5b998f244406b38a200c4fd9a4a282e09698 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Casaj=C3=BAs?= <adria.casajus@proton.ch>
Date: Tue, 8 Feb 2022 22:04:25 +0100
Subject: [PATCH] Add a suport form to create tickets in zendesk

---
 app/dashboard/__init__.py        |  1 +
 app/dashboard/views/support.py   | 57 ++++++++++++++++++++
 templates/dashboard/support.html | 90 ++++++++++++++++++++++++++++++++
 3 files changed, 148 insertions(+)
 create mode 100644 app/dashboard/views/support.py
 create mode 100644 templates/dashboard/support.html

diff --git a/app/dashboard/__init__.py b/app/dashboard/__init__.py
index 875b203a..a1c50611 100644
--- a/app/dashboard/__init__.py
+++ b/app/dashboard/__init__.py
@@ -31,4 +31,5 @@ from .views import (
     app,
     delete_account,
     notification,
+    support,
 )
diff --git a/app/dashboard/views/support.py b/app/dashboard/views/support.py
new file mode 100644
index 00000000..565cfabc
--- /dev/null
+++ b/app/dashboard/views/support.py
@@ -0,0 +1,57 @@
+import json
+
+import requests
+from flask import render_template, request, flash, url_for, redirect
+from flask_login import login_required, current_user
+from app.dashboard.base import dashboard_bp
+from app.db import Session
+from app.log import LOG
+from app.models import Alias, Mailbox
+
+
+@dashboard_bp.route("/support", methods=["GET"])
+@login_required
+def show_support_dialog():
+    return render_template( "dashboard/support.html" )
+
+
+def createZendeskTicket(email: str, contents: str):
+    data = {
+        'request': {
+            'subject': 'Ticket created for user {}'.format(current_user.id),
+            'comment': {
+                'type': 'Comment',
+                'body': contents
+            },
+            'requester': {
+                'name': "SimpleLogin user {}".format(current_user.id),
+                'email': email
+            }
+        }
+    }
+    url = 'https://simplelogin.zendesk.com/api/v2/requests.json'
+    headers = {'content-type': 'application/json'}
+    r = requests.post(url, data=json.dumps(data), headers=headers)
+    if r.status_code != 201:
+        if r.status_code == 401 or 422:
+            LOG.debug('Could not authenticate')
+        else:
+            LOG.debug('Problem with the request. Status ' + str(r.status_code))
+    else:
+        flash("Ticket was created. You should receive an email notification", "success")
+        LOG.debug('Ticket created')
+
+
+@dashboard_bp.route("/support", methods=["POST"])
+@login_required
+def process_support_dialog():
+    contents = request.form.get("ticketContents") or ""
+    email = request.form.get("ticketEmail") or ""
+    if not contents:
+        flash("Please add a description", "warning")
+        return render_template("dashboard/support.html", ticketEmail=email)
+    if not email:
+        flash("Please add an email", "warning")
+        return render_template("dashboard/support.html", ticketContents=contents)
+    createZendeskTicket(email, contents)
+    return redirect(url_for('dashboard.index'))
diff --git a/templates/dashboard/support.html b/templates/dashboard/support.html
new file mode 100644
index 00000000..22826dfe
--- /dev/null
+++ b/templates/dashboard/support.html
@@ -0,0 +1,90 @@
+{% extends 'default.html' %}
+
+{% set active_page = None %}
+
+{% block title %}
+    Support
+{% endblock %}
+
+{% block head %}
+    <style>
+        .card-title {
+            font-size: 22px;
+            font-weight: 600;
+            margin-bottom: 3px;
+        }
+    </style>
+
+    <script src="{{ url_for('static', filename='node_modules/vue/dist/vue.min.js') }}"></script>
+    <script>
+        $( document ).ready(function() {
+            var app = new Vue({
+                el: '#supportZendeskForm',
+                data: {
+                    ticketEmail: document.querySelector("input[name=ticketEmail]").value
+                },
+                methods: {
+                    generateRandomAlias: async function(event){
+                        let result = await fetch('/api/alias/random/new', { method: 'POST'})
+                        if(result.ok){
+                            let data = await result.json();
+                            this.ticketEmail = data.alias;
+                        }
+                    }
+                }
+            });
+        })
+    </script>
+{% endblock %}
+
+{% block default_content %}
+
+    <div class="col pb-3">
+        <!-- Current plan -->
+        <div class="card">
+            <div class="card-body">
+                <div class="card-title mb-3">Report a problem</div>
+                <div class="card-subtitle mt-2 mb-2 pl-3 border-left border-warning" style="border-left-width: 5px !important;" >
+                    If an email cannot be delivered to your mailbox, please check <a href="/dashboard/notifications">your notifications</a> for error messages
+                </div>
+                <div class="mt-2">
+                    A support ticket will be created in Zendesk. Please do not include any sensitive information in the ticket.
+                </div>
+                <form id="supportZendeskForm" method="post">
+                    <div class="mt-4 mb-5">
+                        <label for="issueDescription" class="form-label">What happened?</label>
+                        <textarea class="form-control" name="ticketContents" id="issueDescription" rows="3" placeholder="Please provide as much information as possible. For example which alias(es), mailbox(es) ar affected, if this is a persistent issue...">{{- ticketContents or '' -}}</textarea>
+                    </div>
+                    <div class="mt-5 font-weight-bold">
+                        Attach files to support request
+                    </div>
+                    <div class="custom-file mt-2">
+                        <input type="file" class="custom-file-input" name="ticketFiles" id="ticketFileGroup" multiple>
+                        <label class="custom-file-label" for="ticketFileGroup">Choose file</label>
+                    </div>
+                    <div class="mt-5 font-weight-bold">
+                        Where can we reach you?
+                    </div>
+                    <div class="mt-2">
+                        Conversations related to this ticket will be sent to this address. Feel free to use an alias here.
+                    </div>
+                    <div class="input-group mb-3">
+                        <input type="text" class="form-control" placeholder="Email" value="{{ ticketEmail }}" name="ticketEmail" v-model='ticketEmail' aria-label="Email to send responses to" aria-describedby="button-addon2">
+                        <div class="input-group-append">
+                            <button class="btn btn-outline-primary" type="button" @click="generateRandomAlias" id="button-addon2">Generate a random alias</button>
+                        </div>
+                    </div>
+                    <div class="mt-5">
+                        <button class="btn btn-primary">Create support ticket</button>
+                    </div>
+                </form>
+
+            </div>
+        </div>
+
+    </div>
+
+{% endblock %}
+
+
+