From 7cd3069944f7ebb74eebd0227dfeb570614252f2 Mon Sep 17 00:00:00 2001
From: Eldad Fux <eldad.fux@gmail.com>
Date: Thu, 20 Feb 2020 22:45:03 +0200
Subject: [PATCH] Added domain UI tab

---
 app/views/console/settings/index.phtml | 134 ++++++++++++++++++++++++-
 1 file changed, 130 insertions(+), 4 deletions(-)

diff --git a/app/views/console/settings/index.phtml b/app/views/console/settings/index.phtml
index ebdd09e8d9..0425d40a0b 100644
--- a/app/views/console/settings/index.phtml
+++ b/app/views/console/settings/index.phtml
@@ -50,12 +50,15 @@
                                 <div class="input-copy">
                                     <input data-forms-copy type="text" disabled data-ls-bind="{{env.PROTOCOL}}://{{env.DOMAIN}}/v1" />
                                 </div>
-
+                                <div class="margin-top-negative-small margin-bottom text-size-small">
+                                    <a data-ls-attrs="href=/console/settings/domains?project={{router.params.project}}">Add a custom domain <i class="icon-angle-circled-right"></i></a>
+                                </div>
+<!-- 
                                 <label for="description">Description &nbsp;<small>(optional)</small></label>
                                 <textarea name="description" id="description" autocomplete="off" placeholder="Help us make the world a better place" data-ls-bind="{{console-project.description}}" data-forms-text-direction data-forms-text-count></textarea>
 
                                 <label for="url">Website &nbsp;<small>(optional)</small></label>
-                                <input name="url" id="url" type="url" class="full-width" autocomplete="off" placeholder="https://acme-corp.com" data-ls-bind="{{console-project.url}}">
+                                <input name="url" id="url" type="url" class="full-width" autocomplete="off" placeholder="https://acme-corp.com" data-ls-bind="{{console-project.url}}"> -->
 
                                 <hr />
 
@@ -123,6 +126,129 @@
                     </div>
                 </form>
             </li> -->
+            <li data-state="/console/settings/domains?project={{router.params.project}}">
+                <h2>Custom Domains</h2>
+
+                <div class="zone xl"
+                    data-service="teams.getMemberships"
+                    data-scope="console"
+                    data-event="load,teams.createMembership,teams.deleteMembership"
+                    data-name="members"
+                    data-param-team-id="{{console-project.teamId}}"
+                    data-success="trigger"
+                    data-success-param-trigger-events="teams.getMemberships">
+
+                    <div class="box margin-bottom">
+                        <table class="vertical">
+                            <thead>
+                                <tr>
+                                    <th width="140"></th>
+                                    <th width="220">Domain Name</th>
+                                    <th width="160">TLS</th>
+                                    <th></th>
+                                    <th width="60"></th>
+                                </tr>
+                            </thead>
+                            <tbody data-ls-loop="members" data-ls-as="team">
+                                <tr>
+                                    <td data-title="Status">
+                                        <span class="tag blue"><i class="icon-ok-circled"></i>Verified&nbsp;</span> &nbsp;
+                                    </td>
+                                    <td data-title="Domain: ">
+                                    <span xdata-ls-bind="{{member.name}}" class="text-size-small text-bold">appwrite.example.com</span>
+                                    </td>
+                                    <td data-title="TLS: ">
+                                        <!-- <span class="tag yellow"><i class="icon-ok-circled"></i> Pending&nbsp;</span> &nbsp; -->
+                                        <span class="tag green"><i class="icon-ok-circled"></i> Enabled&nbsp;</span> &nbsp;
+                                    </td>
+                                    <td data-title="">
+                                        <a href="" class="text-size-small">DNS Settings</a>
+                                    </td>
+                                    <td data-title="">
+                                        <form class="pull-end"
+                                            data-analytics-event="submit"
+                                            data-analytics-category="console"
+                                            data-analytics-label="Delete Project Task"
+                                            data-service="projects.deleteTask"
+                                            data-scope="console"
+                                            data-event="submit"
+                                            data-confirm="Are you sure you want to delete this task?"
+                                            data-success="alert,trigger"
+                                            data-success-param-alert-text="Deleted task successfully"
+                                            data-success-param-trigger-events="projects.deleteTask,modal-close"
+                                            data-failure="alert"
+                                            data-failure-param-alert-text="Failed to delete task"
+                                            data-failure-param-alert-classname="error">
+
+                                            <input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
+                                            <input type="hidden" name="taskId" data-ls-bind="{{task.$id}}" />
+
+                                            <button class="danger round reverse small"><i class="icon-trash"></i></button>
+                                        </form>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <div class="clear">
+                        <div data-ui-modal class="modal box close" data-button-text="Add Domain">
+                            <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
+
+                            <h1>Add Domain</h1>
+
+                            <form
+                                data-analytics-event="submit"
+                                data-analytics-category="console"
+                                data-analytics-label="Create Project Task"
+                                data-service="projects.createTask"
+                                data-scope="console"
+                                data-event="submit"
+                                data-success="alert,trigger,reset"
+                                data-success-param-alert-text="Created task successfully"
+                                data-success-param-trigger-events="projects.createTask,modal-close"
+                                data-failure="alert"
+                                data-failure-param-alert-text="Failed to create task"
+                                data-failure-param-alert-classname="error">
+
+                                <input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
+
+                                <label for="name">Domain Name</label>
+                                <input type="text" class="full-width" id="domain" name="domain" placeholder="appwrite.example.com" required autocomplete="off" />
+
+                                <div class="info margin-top margin-bottom">
+                                    <div class="text-bold margin-bottom-small">Setup & Verify your Domain</div>
+                                    <p>Add the following DNS records to your DNS provider settings to setup and verify your new custom domain.</p>
+                                    
+                                    <ol>
+                                        <li>
+                                            <p>Add a CNAME record to point your subdomain to <?php echo APP_NAME; ?> with the following value:</p>
+                                            
+                                            <div class="ide margin-bottom-small">
+                                                <pre class="line-numbers"><code class="prism language-javascript" data-prism>custom.appwrite.io</code></pre>
+                                            </div>
+
+                                            <p>For example:</p>
+
+                                            <div class="ide margin-bottom-small">
+                                                <pre class="line-numbers"><code class="prism language-javascript" data-prism>appwrite.myapp.com   CNAME   custom.appwrite.io</code></pre>
+                                            </div>
+                                        </li>
+
+                                        <li>Add a CNAME record to point your subdomain to <?php echo APP_NAME; ?> API
+                              
+                                        </li>
+                                    </ol>
+                                </div>
+                                
+
+                                <button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
+                            </form>
+                        </div>
+                    </div>
+
+                </div>
+            </li>
             <li data-state="/console/settings/members?project={{router.params.project}}">
                 <h2>Members</h2>
 
@@ -199,10 +325,10 @@
 
                                 <img src="" data-ls-attrs="src={{member|gravatar}}" data-size="200" alt="User Avatar" class="avatar pull-start margin-end" loading="lazy" width="60" height="60" />
 
-                                <div class="margin-bottom-small">
+                                <div class="margin-bottom-tiny">
                                     <span data-ls-bind="{{member.name}}"></span> &nbsp;&nbsp;<span class="tag" data-ls-bind="{{member.roles.0}}"></span> &nbsp;&nbsp;<span data-ls-if="false === {{member.confirm}}" class="tag red" style="display: none;">Pending Approval</span>
                                 </div>
-                                <small data-ls-bind="{{member.email}}"></small>
+                                <span class="text-size-small text-fade" data-ls-bind="{{member.email}}"></small>
                             </li>
                         </ul>
                     </div>