refactor request wizard

alebeta90 · Dec 19, 2017 · b21a70c · b21a70c
1 parent ba12e41
commit b21a70c
Show file tree

Hide file tree

Showing 14 changed files with 286 additions and 153 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "clean-webpack-plugin": "^0.1.17",
     "copy-webpack-plugin": "^4.2.0",
     "css-loader": "^0.28.7",
+    "ejs-compiled-loader": "^1.1.0",
     "file-loader": "^1.1.5",
     "font-awesome": "^4.7.0",
     "github-api": "^3.0.0",

diff --git a/scripts/deploy.sh b/scripts/deploy.sh
@@ -12,6 +12,7 @@ BASE_URL="https://$LETSENCRYPT_HOST"
 
 echo "deploying $CONTAINER_NAME"
 echo "CURRENCY: $CURRENCY"
+echo "GITHUB_CLIENT_ID: $GITHUB_CLIENT_ID"
 echo "VIRTUAL_HOST: $VIRTUAL_HOST"
 echo "VIRTUAL_PORT: $VIRTUAL_PORT"
 echo "LETSENCRYPT_HOST: $LETSENCRYPT_HOST"

diff --git a/src/front/index.ejs b/src/front/index.ejs
@@ -20,6 +20,9 @@
     <meta property="og:locale" content="en">
 
     <meta property="x:app:version" content="<%= htmlWebpackPlugin.options.pkg.version %>">
+    <meta property="x:app:repoUser" content="<%= htmlWebpackPlugin.options.config.administrator.request_user %>">
+    <meta property="x:app:repoName" content="<%= htmlWebpackPlugin.options.config.administrator.request_repo %>">
+    <meta property="x:app:accessToken" content="">
 
     <link rel="apple-touch-icon" sizes="180x180" href="images/icons-<%= htmlWebpackPlugin.options.config.currency.tech_name %>/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="images/icons-<%= htmlWebpackPlugin.options.config.currency.tech_name %>/favicon-32x32.png">
@@ -83,6 +86,7 @@
         <br>
         <div class="row justify-content-md-center">
             <div class="col-md-auto">
+                <datalist id="serverList"></datalist>
                 <table id="serverTable" class="table table-striped table-responsive">
                     <tfoot class="loader">
                         <tr class="made-with lead">
@@ -127,7 +131,7 @@
                         </a>
                     </li>
                     <li class="list-inline-item">
-                        <a href="auth/github" class="btn btn-sm btn-secondary" type="button">
+                        <a href="auth/github" class="btn btn-sm btn-secondary" type="button" data-toggle="modal" data-target="#requestStep1Dialog">
                             <i class="fa fa-gear"></i>
                             update list
                         </a>
@@ -138,115 +142,6 @@
     </div>
 </section>
 
-<div class="modal fade" id="requestDialog" tabindex="-1" role="dialog" aria-labelledby="requestDialogLabel" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="requestDialogLabel">Submit a request</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <section class="modal-body">
-                <p>
-                    The server list is managed with github issues.
-                    In order to describe as much as possible your wishes,
-                    please follow and submit the form below.
-                </p>
-                <form name="submitRequest">
-                    <input type="hidden" name="repoUser" value="<%= htmlWebpackPlugin.options.config.administrator.request_user %>">
-                    <input type="hidden" name="repoName" value="<%= htmlWebpackPlugin.options.config.administrator.request_repo %>">
-                    <input type="hidden" name="accessToken">
-                    <p class="from-group">
-                        <span>The action to perform:</span><br>
-                        <span class="form-check-inline">
-                            <label class="form-check-label">
-                                <input class="form-check-input" type="radio" name="action" value="add" checked>
-                                Add
-                            </label>
-                        </span>
-                        <span class="form-check-inline">
-                            <label class="form-check-label">
-                                <input class="form-check-input" type="radio" name="action" value="update">
-                                Change
-                            </label>
-                        </span>
-                        <span class="form-check-inline">
-                            <label class="form-check-label">
-                                <input class="form-check-input" type="radio" name="action" value="remove">
-                                Remove
-                            </label>
-                        </span>
-                    </p>
-
-                    <p class="from-group">
-                        <label for="serverName">The name of the pool (required)</label>
-                        <input class="form-control" id="serverName" name="name" required placeholder="For instance pool.mycrypocoin.com">
-                    </p>
-
-                    <p class="from-group">
-                        <label for="serverFront">The URL of the front-end</label>
-                        <input class="form-control" id="serverFront" name="front" placeholder="For instance https://pool.mycrypocoin.com" type="url">
-                    </p>
-
-                    <p class="form-group">
-                        <label for="serverBack">The URL of the back-end</label>
-                        <input class="form-control" id="serverBack" name="back" placeholder="For instance https://pool.mycrypocoin.com/api" type="url">
-                    </p>
-
-                    <p class="from-group">
-                        <label for="serverLocations">The location of the pool</label>
-                        <input class="form-control" id="serverLocations" name="locations" placeholder="For instance FR/US">
-                    </p>
-
-                    <p class="from-group">
-                        <label for="requestComments">Comments</label>
-                        <textarea class="form-control" id="requestComments" name="comments"></textarea>
-                    </p>
-
-                    <button type="submit" class="btn btn-primary btn-block">
-                        <i class="fa fa-plane"></i>
-                        <span>Submit</span>
-                    </button>
-                </form>
-            </section>
-        </div>
-    </div>
-</div>
-
-<div class="modal fade" id="requestResultDialog" tabindex="-1" role="dialog" aria-labelledby="requestResultDialogLabel" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title success" id="requestResultDialogLabel">Issue submitted</h5>
-                <h5 class="modal-title failure" id="requestResultDialogLabel">Submission failed</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <section class="modal-body success">
-                <p>
-                <i class="fa fa-thumbs-up"></i>
-                Thank you!
-                Your issue has been submitted.
-                </p>
-            </section>
-            <section class="modal-body failure">
-                <p>
-                <i class="fa fa-thumbs-down"></i>
-                Ouuuups!
-                Your issue hasn't been submitted.
-                Something goes wrong.
-                </p>
-                <p>
-                    Please try later of submit your issue directly on
-                    <a href="https://github.com/<%= htmlWebpackPlugin.options.config.administrator.request_user %>/<%= htmlWebpackPlugin.options.config.administrator.request_repo %>/issues/new">GitHub</a>
-                </p>
-            </section>
-        </div>
-    </div>
-</div>
-
 <section id="ads" class="jumbotron jumbotron-fluid">
     <div class="container">
         <h2 class="text-center">Ads</h2>
@@ -258,7 +153,6 @@
     </div>
 </section>
 
-
 <section id="address" class="jumbotron jumbotron-fluid">
     <div class="container">
         <h2 class="text-center">Address</h2>
@@ -377,6 +271,10 @@
     </div>
 </footer>
 
+<%- include src/front/requestStep1Dialog.ejs %>
+<%- include src/front/requestStep2Dialog.ejs %>
+<%- include src/front/requestStep3Dialog.ejs %>
+
 <%
 if (analytic && analytic.ga) {
 %>

diff --git a/src/front/index.js b/src/front/index.js
@@ -2,10 +2,10 @@ import 'bootstrap';
 import 'babel-polyfill';
 import 'whatwg-fetch';
 import $ from 'jquery';
+import GitHub from 'github-api';
 import './index.less';
 import {fetchServers} from './servers';
 import {restoreAddress} from "./address";
-import GitHub from 'github-api';
 
 $('body').css({'display': 'block'});
 $('[data-toggle="tooltip"]').tooltip();
@@ -20,77 +20,90 @@ function refreshAll() {
 $(() => {
     refreshAll();
 
-    const $requestDialog = $('#requestDialog');
-    const $requestForm = $requestDialog.find('form[name=submitRequest]');
+    const $requestStep2Dialog = $('#requestStep2Dialog');
+    const $formSelection = $requestStep2Dialog.find('.form-selection');
+    const $forms = $requestStep2Dialog.find('form');
+    const $requestStep3Dialog = $('#requestStep3Dialog');
 
-    const $requestResultDialog = $('#requestResultDialog');
+    $formSelection.on('change', 'input', evt => {
+        const formSelector = `form[name="${evt.target.value}Server"]`;
+        $forms.attr('hidden', 'hidden');
+        $requestStep2Dialog.find(formSelector).removeAttr('hidden');
+    });
 
-    $requestDialog.on('show.bs.modal', () => {
-        $requestForm.find('input, textarea, button').removeAttr('disabled');
-        $requestForm.find('button i').removeClass('fa-spin');
-        $requestForm[0].reset();
+    $requestStep2Dialog.on('show.bs.modal', () => {
+        $forms.attr('hidden', 'hidden');
+        $forms.find('input, textarea, button').removeAttr('disabled');
+        $forms.find('button i').removeClass('fa-spin');
+        $forms[0].reset();
     });
 
-    $requestForm.on('submit', evt => {
+    $forms.on('submit', evt => {
         evt.preventDefault();
 
-        const token = evt.target.accessToken.value;
-        const repoUser = evt.target.repoUser.value;
-        const repoName = evt.target.repoName.value;
+        const token = $('meta[property="x:app:accessToken"]').attr('content');
+        const repoUser = $('meta[property="x:app:repoUser"]').attr('content');
+        const repoName = $('meta[property="x:app:repoName"]').attr('content');
         const host = location.hostname;
         const action = evt.target.action.value;
         const name = evt.target.name.value;
-        const front = evt.target.front.value;
-        const back = evt.target.back.value;
-        const locations = evt.target.locations.value;
-        const comments = evt.target.comments.valu;
+        const comments = evt.target.comments.value;
+
+        const body = [];
+
+        if (action !== 'remove') {
+            const front = evt.target.front.value;
+            const back = evt.target.back.value;
+            const locations = evt.target.locations.value;
+            const file = {name, front, back, location: locations};
+            body.push('```');
+            body.push(JSON.stringify(file, null, 2));
+            body.push('```');
+        }
+
+        if (comments) {
+            body.push('comments:');
+            body.push(comments);
+        }
 
         const issueData = {
-            title: `[${host}] - ${action} ${name}`,
-            body: `action: ${action}
-name: ${name}
-front: ${front || ''}
-back: ${back || ''}
-locations: ${locations || ''}
-comments:
-${comments || ''}
-            `,
+            title: `[${host}] - ${action} - ${name}`,
+            body: body.join('\n'),
             labels: ['servers']
         };
 
-        $requestForm.find('input, textarea, button').attr('disabled', '');
-        $requestForm.find('button i').addClass('fa-spin');
+        $forms.find('input, textarea, button').attr('disabled', '');
+        $forms.find('button i').addClass('fa-spin');
 
         new GitHub({token}).getIssues(repoUser, repoName).createIssue(issueData)
             .then(() => {
-                $requestResultDialog.addClass('success').removeClass('failure');
+                $requestStep3Dialog.addClass('success').removeClass('failure');
             })
             .catch(err => {
                 console.error(err);
-                $requestResultDialog.removeClass('success').addClass('failure');
+                $requestStep3Dialog.removeClass('success').addClass('failure');
             })
             .then(() => {
-                $requestDialog
-                    .one('hidden.bs.modal', () => $requestResultDialog.modal('show'))
+                $requestStep2Dialog
+                    .one('hidden.bs.modal', () => $requestStep3Dialog.modal('show'))
                     .modal('hide');
             });
-
     });
 
     const hash = decodeURI(window.location.hash);
     const loginSuccess = hash.indexOf('#login-success') > -1;
     if (loginSuccess) {
+        $(window).one('hashchange', evt => evt.preventDefault());
+        location.hash = '';
         const context = JSON.parse(hash.replace('#login-success=', ''));
-        $requestForm.find('[name=accessToken]').val(context.accessToken);
-        $requestDialog.modal('show');
+        $('meta[property="x:app:accessToken"]').attr('content', context.accessToken);
+        $requestStep2Dialog.modal('show');
     }
 
     const loginFailure = hash.indexOf('#login-failure') > -1;
     if (loginFailure) {
-
+        $(window).one('hashchange', evt => evt.preventDefault());
+        location.hash = '';
     }
-
-    $(window).one('hashchange', (evt) => evt.preventDefault());
-    location.hash = '';
 });
 
diff --git a/src/front/index.less b/src/front/index.less
@@ -46,7 +46,7 @@
   }
 }
 
-#requestResultDialog {
+#requestStep3Dialog {
   .modal-title, .modal-body {
     display: none;
   }

diff --git a/src/front/request.form.add.ejs b/src/front/request.form.add.ejs
@@ -0,0 +1,37 @@
+<form name="addServer" hidden>
+    <hr>
+
+    <p>Please fill the following fields according to the pool setup.</p>
+
+    <input type="hidden" name="action" value="add">
+
+    <p class="from-group">
+        <label for="serverName">The name of the pool (required)</label>
+        <input class="form-control" id="serverName" name="name" required placeholder="For instance pool.mycrypocoin.com">
+    </p>
+
+    <p class="from-group">
+        <label for="serverFront">The URL of the front-end (required)</label>
+        <input class="form-control" id="serverFront" name="front" required placeholder="For instance https://pool.mycrypocoin.com" type="url">
+    </p>
+
+    <p class="form-group">
+        <label for="serverBack">The URL of the back-end (required)</label>
+        <input class="form-control" id="serverBack" name="back" required placeholder="For instance https://pool.mycrypocoin.com/api" type="url">
+    </p>
+
+    <p class="from-group">
+        <label for="serverLocations">The location of the pool</label>
+        <input class="form-control" id="serverLocations" name="locations" required placeholder="For instance FR/US">
+    </p>
+
+    <p class="from-group">
+        <label for="requestComments">Comments</label>
+        <textarea class="form-control" id="requestComments" name="comments"></textarea>
+    </p>
+
+    <button type="submit" class="btn btn-primary btn-block">
+        <i class="fa fa-plus"></i>
+        <span>Add</span>
+    </button>
+</form>