Skip to content

Commit

Permalink
refactor request wizard
Browse files Browse the repository at this point in the history
  • Loading branch information
tmorin committed Dec 20, 2017
1 parent b21a70c commit 91d4e60
Show file tree
Hide file tree
Showing 6 changed files with 136 additions and 98 deletions.
16 changes: 12 additions & 4 deletions src/back/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ passport.use(new GitHubStrategy({
clientSecret: GITHUB_CLIENT_SECRET,
callbackURL: CALLBACK_URL
},
(accessToken, refreshToken, user, done) => {
done(null, {accessToken});
(accessToken, refreshToken, {username}, done) => {
done(null, {accessToken, username});
}
));

Expand All @@ -31,10 +31,18 @@ request.defaults({
});

app.get('/auth/github',
passport.authenticate('github', {scope: ['repo'], session: false, failureRedirect: `${HOME_URL}#login-error`}));
passport.authenticate('github', {
scope: ['public_repo'],
session: false,
failureRedirect: `${HOME_URL}#login-error`
}));

app.get('/auth/github/callback',
passport.authenticate('github', {scope: ['repo'], session: false, failureRedirect: `${HOME_URL}#login-failure`}),
passport.authenticate('github', {
scope: ['public_repo'],
session: false,
failureRedirect: `${HOME_URL}#login-failure`
}),
(req, res) => res.redirect(`${HOME_URL}#login-success=${JSON.stringify(req.user)}`));

app.get('/api/servers', (req, res) => {
Expand Down
9 changes: 5 additions & 4 deletions src/front/index.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
<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="">
<meta property="x:github:accessToken" content="">
<meta property="x:github:username" 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">
Expand Down Expand Up @@ -131,10 +132,10 @@
</a>
</li>
<li class="list-inline-item">
<a href="auth/github" class="btn btn-sm btn-secondary" type="button" data-toggle="modal" data-target="#requestStep1Dialog">
<button class="btn btn-sm btn-secondary" type="button" data-toggle="modal" data-target="#requestStep1Dialog">
<i class="fa fa-gear"></i>
update list
</a>
manage
</button>
</li>
</ul>
</div>
Expand Down
91 changes: 2 additions & 89 deletions src/front/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {restoreAddress} from './address';
import './request';

$('body').css({'display': 'block'});
$('[data-toggle="tooltip"]').tooltip();
Expand All @@ -19,91 +19,4 @@ function refreshAll() {

$(() => {
refreshAll();

const $requestStep2Dialog = $('#requestStep2Dialog');
const $formSelection = $requestStep2Dialog.find('.form-selection');
const $forms = $requestStep2Dialog.find('form');
const $requestStep3Dialog = $('#requestStep3Dialog');

$formSelection.on('change', 'input', evt => {
const formSelector = `form[name="${evt.target.value}Server"]`;
$forms.attr('hidden', 'hidden');
$requestStep2Dialog.find(formSelector).removeAttr('hidden');
});

$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();
});

$forms.on('submit', evt => {
evt.preventDefault();

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 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: body.join('\n'),
labels: ['servers']
};

$forms.find('input, textarea, button').attr('disabled', '');
$forms.find('button i').addClass('fa-spin');

new GitHub({token}).getIssues(repoUser, repoName).createIssue(issueData)
.then(() => {
$requestStep3Dialog.addClass('success').removeClass('failure');
})
.catch(err => {
console.error(err);
$requestStep3Dialog.removeClass('success').addClass('failure');
})
.then(() => {
$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=', ''));
$('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 = '';
}
});

2 changes: 1 addition & 1 deletion src/front/request.form.remove.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<textarea class="form-control" id="requestCommentsRemove" name="comments"></textarea>
</p>

<button type="submit" class="btn btn-danger btn-block">
<button type="submit" class="btn btn-primary btn-block">
<i class="fa fa-remove"></i>
<span>Remove</span>
</button>
Expand Down
100 changes: 100 additions & 0 deletions src/front/request.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import GitHub from 'github-api';
import $ from 'jquery';

$(() => {

const $requestStep2Dialog = $('#requestStep2Dialog');
const $formSelection = $requestStep2Dialog.find('.form-selection');
const $forms = $requestStep2Dialog.find('form');
const $requestStep3Dialog = $('#requestStep3Dialog');

$formSelection.on('change', 'input', evt => {
const formSelector = `form[name="${evt.target.value}Server"]`;
$forms.attr('hidden', 'hidden');
$requestStep2Dialog.find(formSelector).removeAttr('hidden');
});

$requestStep2Dialog.on('show.bs.modal', () => {
const token = $('meta[property="x:github:accessToken"]').attr('content');
$requestStep2Dialog.find('a[name="github-logout"]').attr('href', `auth/github/logout?accessToken=${token}`);

const username = $('meta[property="x:github:username"]').attr('content');
$requestStep2Dialog.find('.github-username').text(username);

$forms.attr('hidden', 'hidden');
$forms.find('input, textarea, button').removeAttr('disabled');
$forms.find('button i').removeClass('fa-spin');
$forms[0].reset();
});

$forms.on('submit', evt => {
evt.preventDefault();

const token = $('meta[property="x:github: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 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: body.join('\n'),
labels: ['servers']
};

$forms.find('input, textarea, button').attr('disabled', '');
$forms.find('button i').addClass('fa-spin');

new GitHub({token}).getIssues(repoUser, repoName).createIssue(issueData)
.then(() => {
$requestStep3Dialog.addClass('success').removeClass('failure');
})
.catch(err => {
console.error(err);
$requestStep3Dialog.removeClass('success').addClass('failure');
})
.then(() => {
$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=', ''));
console.log('context', context);
$('meta[property="x:github:accessToken"]').attr('content', context.accessToken);
$('meta[property="x:github:username"]').attr('content', context.username);
$requestStep2Dialog.modal('show');
}

const loginFailure = hash.indexOf('#login-failure') > -1;
if (loginFailure) {
$(window).one('hashchange', evt => evt.preventDefault());
location.hash = '';
}

});
16 changes: 16 additions & 0 deletions src/front/requestStep2Dialog.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,22 @@
<span aria-hidden="true">&times;</span>
</button>
</div>

<section class="modal-body">
<p>
You are logged with the GitHub account <strong class="github-username"></strong>.
<a data-toggle="collapse" href="#githubLogout" aria-expanded="false" aria-controls="githubLogout">
Not you?
</a>
</p>

<ol class="collapse" id="githubLogout">
<li><a href="https://github.com/logout" target="_blank">logout <i class="fa fa-external-link"></i></a> from GitHub</li>
<li>then come back there to <a href="auth/github"><i class="fa fa-github"></i> sing-in</a> again.</li>
</ol>

<hr>

<p>Please fill the form below and submit the request.</p>

<p class="from-group form-selection">
Expand Down Expand Up @@ -39,6 +54,7 @@
<%- include ./request.form.remove.ejs %>

</section>

</div>
</div>
</div>

0 comments on commit 91d4e60

Please sign in to comment.