mirror of
https://github.com/jsbin/jsbin.git
synced 2026-01-25 15:38:56 +00:00
Merge pull request #1398 from jsbin/feature/account2b
Feature/account2b
This commit is contained in:
Remy Sharp
commit
947c7f5aa3
@ -169,8 +169,6 @@ module.exports = function (app) {
|
||||
var static = sandbox.helpers.urlForStatic('', req.secure);
|
||||
var referrer = req.get('referer');
|
||||
|
||||
console.log(req.param('page'), pages.indexOf(req.param('page')));
|
||||
|
||||
var page = pages.indexOf(req.param('page')) === -1 ? false : req.param('page') + '.html';
|
||||
|
||||
var addons = [];
|
||||
|
||||
@ -51,7 +51,7 @@ margin-left: 230px;
|
||||
form input[type="submit"] {
|
||||
/* width:60%; */
|
||||
margin:10px 20%;
|
||||
font-family: "Helvetica Neue", "Arial";
|
||||
/* font-family: "Helvetica Neue", "Arial";
|
||||
font-size: 0.75em;
|
||||
background: #f0f0f0;
|
||||
background: linear-gradient(0deg, #f0f0f0, #fefefe);
|
||||
@ -66,10 +66,10 @@ form input[type="submit"] {
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-weight:600;
|
||||
font-weight:600;*/
|
||||
}
|
||||
form input[type="submit"]:hover {
|
||||
background: linear-gradient(0deg, #e8e8e8, #f8f8f8);
|
||||
/*background: linear-gradient(0deg, #e8e8e8, #f8f8f8);*/
|
||||
}
|
||||
form input {
|
||||
font-size: 16px;
|
||||
@ -138,4 +138,16 @@ form label.mini-desc a {
|
||||
display: inline;
|
||||
font-weight: normal;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.loginFeedback {
|
||||
display: none;
|
||||
padding: 3px;
|
||||
background: #EFF3B6;
|
||||
background: rgba(255, 253, 0, 0.2);
|
||||
border: 1px solid rgb(219, 225, 45);
|
||||
margin: 0;
|
||||
white-space: normal;
|
||||
line-height: 18px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
;(function(){
|
||||
|
||||
function getHash(){
|
||||
return window.location.hash.slice(1);
|
||||
}
|
||||
|
||||
var $contents = $('#content article')
|
||||
var $btns = $('.sidebar-btn').click(function(event){
|
||||
$btns.removeClass('selected');
|
||||
var hash = $(this).addClass('selected')[0].hash.slice(1);
|
||||
$contents.hide().filter(function(i, el){
|
||||
return el.id === hash
|
||||
}).show();
|
||||
|
||||
});
|
||||
|
||||
// Kick it all off
|
||||
|
||||
if(!window.location.hash) {
|
||||
window.location.hash = $btns.filter(function(i, el){
|
||||
return el.attributes.default;
|
||||
})[0].hash;
|
||||
}
|
||||
|
||||
$contents.filter(function(i, el){
|
||||
return el.id === getHash();
|
||||
}).show();
|
||||
|
||||
$btns.filter(function(i, el){
|
||||
return el.hash === window.location.hash;
|
||||
}).addClass('selected');
|
||||
|
||||
})//()
|
||||
39
public/js/account/account-settings.js
Normal file
39
public/js/account/account-settings.js
Normal file
@ -0,0 +1,39 @@
|
||||
(function(){
|
||||
'use strict';
|
||||
|
||||
/* globals $ */
|
||||
|
||||
$('form.login').submit(function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var form = $(this);
|
||||
var name = form.find('input[name=username]').val();
|
||||
var key = form.find('input[name=password]').val();
|
||||
var email = form.find('input[name=email]').val();
|
||||
var $loginFeedback = form.find('.loginFeedback');
|
||||
var $csrf = $('#_csrf');
|
||||
|
||||
$loginFeedback.show().text('Checking...');
|
||||
|
||||
$.ajax({
|
||||
url: form.attr('action'),
|
||||
data: {
|
||||
username: name,
|
||||
key: key,
|
||||
email: email,
|
||||
_csrf: $csrf.val()
|
||||
},
|
||||
type: 'POST',
|
||||
dataType: 'json',
|
||||
complete: function (jqXHR) {
|
||||
var data = $.parseJSON(jqXHR.responseText) || {};
|
||||
if (jqXHR.status === 200) {
|
||||
if (data.message) {
|
||||
$loginFeedback.text(data.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
@ -65,6 +65,7 @@
|
||||
];
|
||||
|
||||
var addonsKeys = [
|
||||
'activeline',
|
||||
'closebrackets',
|
||||
'highlight',
|
||||
'matchtags',
|
||||
118
public/js/account/preferences-settings.js
Normal file
118
public/js/account/preferences-settings.js
Normal file
@ -0,0 +1,118 @@
|
||||
(function(){
|
||||
'use strict';
|
||||
|
||||
/* global $ */
|
||||
|
||||
function getCurrentSettings(){
|
||||
return JSON.parse(localStorage.settings || '{}') || {
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
$.browser = {};
|
||||
// work out the browser platform
|
||||
var ua = navigator.userAgent;
|
||||
if (ua.indexOf(' Mac ') !== -1) {
|
||||
$.browser.platform = 'mac';
|
||||
} else if (/windows|win32/.test(ua)) {
|
||||
$.browser.platform = 'win';
|
||||
} else if (/linux/.test(ua)) {
|
||||
$.browser.platform = 'linux';
|
||||
} else {
|
||||
$.browser.platform = '';
|
||||
}
|
||||
|
||||
// Setup variables
|
||||
var $csrf = $('#_csrf');
|
||||
var currentSettings = {
|
||||
panels: [],
|
||||
includejs: true,
|
||||
focusedPanel: 'html',
|
||||
jshint: true
|
||||
};
|
||||
$.extend(currentSettings, getCurrentSettings());
|
||||
var panels = ['html', 'css', 'javascript', 'console', 'live'];
|
||||
var $panels = {};
|
||||
var $includejs = $('#includejs').prop('checked', currentSettings.includejs);
|
||||
var $focusedPanel = $('#focused-panel').val(currentSettings.focusedPanel);
|
||||
var hints = ['js'];
|
||||
var $hints = {};
|
||||
|
||||
var jshints = {
|
||||
'forin': 'About unsafe <code>for..in</code>',
|
||||
'eqnull': 'About <code>== null</code>',
|
||||
'noempty': 'About empty blocks',
|
||||
'eqeqeq': 'About unsafe comparisons',
|
||||
'boss': 'About assignments inside <code>if/for/...</code>',
|
||||
'undef': 'When variable is undefined',
|
||||
'unused': 'When variable is defined but not used',
|
||||
'curly': 'When blocks omit <code>{}</code>'
|
||||
};
|
||||
var source = '';
|
||||
|
||||
for (var i = 0; i < panels.length; i++) {
|
||||
$panels[panels[i]] = $('#panel-' + panels[i])
|
||||
.prop('checked', currentSettings.panels.indexOf(panels[i]) !== -1);
|
||||
}
|
||||
|
||||
for (var m = 0; m < hints.length; m++) {
|
||||
$hints[hints[m]] = $('#' + hints[m] + 'hint')
|
||||
.prop('checked', currentSettings[ hints[m] + 'hint' ]);
|
||||
}
|
||||
|
||||
for (var prop in jshints) {
|
||||
if (jshints.hasOwnProperty(prop)) {
|
||||
source += '<div><label for="' + prop + '">' + jshints[prop] + '</label>' +
|
||||
'<input id="' + prop + '" type="checkbox">' +
|
||||
'</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// Listeners
|
||||
$(':checkbox').on('change', saveSettings);
|
||||
$('select').on('change', saveSettings);
|
||||
|
||||
function saveSettings() {
|
||||
// Merge all our settings together
|
||||
var localStorageSettings = JSON.parse(localStorage.settings || '{}');
|
||||
|
||||
localStorageSettings.panels = [];
|
||||
for (var i = 0; i < panels.length; i++) {
|
||||
if ($panels[panels[i]].prop('checked')) {
|
||||
localStorageSettings.panels.push(panels[i]);
|
||||
}
|
||||
}
|
||||
|
||||
for (var m = 0; m < hints.length; m++) {
|
||||
localStorageSettings[ hints[m] + 'hint' ] = $hints[hints[m]].prop('checked');
|
||||
}
|
||||
|
||||
localStorageSettings.includejs = $includejs.prop('checked');
|
||||
localStorageSettings.focusedPanel = $focusedPanel.val();
|
||||
|
||||
localStorage.settings = JSON.stringify(localStorageSettings);
|
||||
console.log(localStorageSettings);
|
||||
|
||||
// Save on server
|
||||
$.ajax({
|
||||
url: 'editor',
|
||||
type: 'POST',
|
||||
dataType: 'json',
|
||||
data: {
|
||||
settings: JSON.stringify(localStorageSettings),
|
||||
_csrf: $csrf.val()
|
||||
},
|
||||
success: function() {
|
||||
if (console && console.log) {
|
||||
console.log('Success on saving settings');
|
||||
}
|
||||
},
|
||||
error: function(xhr, status) {
|
||||
if (console && console.log) {
|
||||
console.log('Error: ' + status);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
@ -9,7 +9,9 @@
|
||||
emacs: false,
|
||||
trailingspace: false,
|
||||
fold: false,
|
||||
sublime: false
|
||||
sublime: false,
|
||||
tern: false,
|
||||
activeline: true
|
||||
};
|
||||
|
||||
if (!jsbin.settings.addons) {
|
||||
@ -149,6 +151,17 @@
|
||||
done: function () {
|
||||
CodeMirror.startTern();
|
||||
}
|
||||
},
|
||||
activeline: {
|
||||
url: [
|
||||
'/js/vendor/codemirror4/addon/selection/active-line.js'
|
||||
],
|
||||
test: function() {
|
||||
return CodeMirror.defaults.styleActiveLine !== undefined;
|
||||
},
|
||||
done: function(cm) {
|
||||
setOption(cm, 'styleActiveLine', true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -162,8 +162,14 @@ panels.restore = function () {
|
||||
}
|
||||
}
|
||||
|
||||
if (state !== null && toopen.length === 0) {
|
||||
toopen = Object.keys(state);
|
||||
if (toopen.length === 0) {
|
||||
if (state !== null) {
|
||||
toopen = Object.keys(state);
|
||||
}
|
||||
else {
|
||||
// load from personal settings
|
||||
toopen = jsbin.settings.panels;
|
||||
}
|
||||
}
|
||||
|
||||
if (toopen.length === 0) {
|
||||
|
||||
@ -93,7 +93,6 @@ var Panel = function (name, settings) {
|
||||
dragDrop: false, // we handle it ourselves
|
||||
mode: editorModes[panelLanguage],
|
||||
lineWrapping: true,
|
||||
styleActiveLine: true,
|
||||
theme: jsbin.settings.theme || 'jsbin'
|
||||
};
|
||||
|
||||
@ -369,7 +368,7 @@ Panel.prototype = {
|
||||
if (this.settings.init) this.settings.init.call(this);
|
||||
},
|
||||
_setupEditor: function () {
|
||||
var focusedPanel = sessionStorage.getItem('panel'),
|
||||
var focusedPanel = sessionStorage.getItem('panel') || jsbin.settings.focusedPanel,
|
||||
panel = this,
|
||||
editor = panel.editor;
|
||||
|
||||
|
||||
@ -15,7 +15,6 @@
|
||||
"/js/vendor/cm_addons/simple-hint.js",
|
||||
"/js/vendor/cm_addons/javascript-hint.js",
|
||||
"/js/vendor/codemirror4/addon/edit/matchbrackets.js",
|
||||
"/js/vendor/codemirror4/addon/selection/active-line.js",
|
||||
"/js/vendor/codemirror4/addon/comment/comment.js",
|
||||
"/js/editors/snippets.cm.js",
|
||||
"/js/vendor/json2.js",
|
||||
|
||||
@ -35,6 +35,8 @@
|
||||
<h1>Customise your JS Bin editor</h1>
|
||||
|
||||
<section id="content">
|
||||
<p>As soon as you make any changes, they will be automatically saved.</p>
|
||||
|
||||
<form id="editor-settings">
|
||||
<h3>Settings</h3>
|
||||
<div>
|
||||
@ -104,6 +106,12 @@
|
||||
<label><input type="radio" name="keymap" id="sublime" value="sublime"> Sublime</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="activeline">Active line</label>
|
||||
<input id="activeline" name="activeline" type="checkbox">
|
||||
<label for="activeline" class="mini-desc">Style the current cursor line</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="closebrackets">Close brackets</label>
|
||||
<input id="closebrackets" name="closebrackets" type="checkbox">
|
||||
@ -168,7 +176,6 @@
|
||||
<script src="{{static}}/js/vendor/codemirror4/mode/xml/xml.js{{cacheBust}}"></script>
|
||||
<script src="{{static}}/js/vendor/codemirror4/mode/htmlmixed/htmlmixed.js{{cacheBust}}"></script>
|
||||
<script src="{{static}}/js/vendor/codemirror4/mode/javascript/javascript.js{{cacheBust}}"></script>
|
||||
<script src="{{static}}/js/vendor/codemirror4/keymap/vim.js{{cacheBust}}"></script>
|
||||
<script src="{{static}}/js/editor-settings.js{{cacheBust}}"></script>
|
||||
<script src="{{static}}/js/account/editor-settings.js{{cacheBust}}"></script>
|
||||
<script src="{{static}}/js/editors/addons.js{{cacheBust}}"></script>
|
||||
{{#addons}}<script src="{{../static}}{{.}}"></script>{{/addons}}
|
||||
|
||||
@ -3,8 +3,9 @@
|
||||
<h1>Default Preferences</h1>
|
||||
|
||||
<section id="content">
|
||||
<p>Configure how JS Bin is set up when you create a new bin, such as your default
|
||||
HTML content, processors selected, and more.</p>
|
||||
<p>Configure how JS Bin is set up when you create a new bin<!-- , such as your default
|
||||
HTML content, processors selected, and more -->. <br>
|
||||
As soon as you make any changes, they will be automatically saved.</p>
|
||||
|
||||
<form>
|
||||
<form id="editor-settings">
|
||||
@ -13,9 +14,9 @@
|
||||
<span class="label">Open panels</span>
|
||||
<label><input type="checkbox" name="open-panel" id="panel-html" checked> HTML</label>
|
||||
<label><input type="checkbox" name="open-panel" id="panel-css"> CSS</label>
|
||||
<label><input type="checkbox" name="open-panel" id="panel-js"> JavaScript</label>
|
||||
<label><input type="checkbox" name="open-panel" id="panel-javascript"> JavaScript</label>
|
||||
<label><input type="checkbox" name="open-panel" id="panel-console"> Console</label>
|
||||
<label><input type="checkbox" name="open-panel" id="panel-output" checked> Output</label>
|
||||
<label><input type="checkbox" name="open-panel" id="panel-live" checked> Output</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -23,49 +24,22 @@
|
||||
<select id="focused-panel">
|
||||
<option value="html">HTML</option>
|
||||
<option value="css">CSS</option>
|
||||
<option value="js">JavaScript</option>
|
||||
<option value="javascript">JavaScript</option>
|
||||
<option value="console">Console</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="autorun">Auto-run JS</label>
|
||||
<input type="checkbox" checked id="autorun">
|
||||
</div>
|
||||
|
||||
<h3>Processors</h3>
|
||||
<div>
|
||||
<label for="html-processor">HTML</label>
|
||||
<select id="html-processor">
|
||||
<option value="">none</option>
|
||||
<option value="jade">Jade</option>
|
||||
<option value="markdown">Markdown</option>
|
||||
</select>
|
||||
<label for="includejs">Auto-run JS</label>
|
||||
<input type="checkbox" checked id="includejs">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="css-processor">CSS</label>
|
||||
<select id="css-processor">
|
||||
<option value="">none</option>
|
||||
<option value="less">Less</option>
|
||||
<!-- <option value="stylus">Stylus</option> -->
|
||||
<!-- <option value="scss">Scss</option> -->
|
||||
</select>
|
||||
<label for="jshint">JSHint</label>
|
||||
<input type="checkbox" checked id="jshint">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="javascript-processor">JavaScript</label>
|
||||
<select id="javascript-processor">
|
||||
<option value="">none</option>
|
||||
<option value="coffeescript">CoffeeScript</option>
|
||||
<option value="jsx">JSX (React)</option>
|
||||
<option value="processing">Processing</option>
|
||||
<option value="traceur">Traceur</option>
|
||||
<option value="typescript">TypeScript</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h3>Template</h3>
|
||||
<p>The template is the default content that appears in your new bins.</p>
|
||||
<input type="hidden" id="_csrf" name="_csrf" value="{{token}}">
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
<script src="{{static}}/js/vendor/jquery-1.11.0.min.js"></script>
|
||||
<script src="{{static}}/js/account/preferences-settings.js{{cacheBust}}"></script>
|
||||
@ -2,20 +2,29 @@
|
||||
|
||||
<h1>Your personal details</h1>
|
||||
|
||||
|
||||
<section id="content">
|
||||
<p style="text-align: center; background: #FF4136; color: #fff; font-weight: bold">Not working right now, come back soon my love!</p>
|
||||
<form>
|
||||
<label>
|
||||
<input name="username" type="text" value="{{user.name}}" disabled>
|
||||
</label>
|
||||
<label>
|
||||
<input name="email" type="text" placeholder="{{user.email}}">
|
||||
</label>
|
||||
<input type="hidden" name="csrf" value="{{csrf}}">
|
||||
<input type="submit">
|
||||
</form>
|
||||
<form class="login" method="post" action="{{root}}/sethome">
|
||||
<p class="loginFeedback"></p>
|
||||
|
||||
<div>
|
||||
<label for="name">Username</label>
|
||||
<input id="name" name="username" type="text" value="{{user.name}}" disabled>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email">Email</label>
|
||||
<input id="email" name="email" type="text" value="{{user.email}}">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="key">Password</label>
|
||||
<input id="key" name="password" type="password">
|
||||
</div>
|
||||
|
||||
<input type="hidden" id="_csrf" name="_csrf" value="{{token}}">
|
||||
<input type="submit" value="Update account">
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<script src="{{static}}/js/vendor/jquery-1.11.0.min.js"></script>
|
||||
<script src="{{static}}/js/account-settings.js"></script>
|
||||
<script src="{{static}}/js/account/account-settings.js{{cacheBust}}"></script>
|
||||
@ -1,16 +1,13 @@
|
||||
<link rel="stylesheet" href="{{static}}/css/account.css{{cacheBust}}">
|
||||
<div id="sidebar">
|
||||
<div class="sidebar-btn-group">
|
||||
<a class="sidebar-btn" href="{{root}}/account/profile">Profile</a>
|
||||
<!--
|
||||
<a class="sidebar-btn" href="{{root}}/account/preferences">Preferences</a>
|
||||
-->
|
||||
<div class="sidebar-btn-group">
|
||||
<a class="sidebar-btn" href="{{root}}/account/profile">Profile</a>
|
||||
<a class="sidebar-btn" href="{{root}}/account/editor">Editor settings</a>
|
||||
<!--
|
||||
<a class="sidebar-btn" href="{{root}}/account/delete">Delete my account</a>
|
||||
-->
|
||||
</div>
|
||||
<div class="sidebar-btn-group">
|
||||
<a class="sidebar-btn" href="{{root}}/account/preferences">Preferences</a>
|
||||
{{#feature request "github"}}
|
||||
<a class="sidebar-btn" href="/auth/github">Link your Github account</a>
|
||||
{{/feature}}
|
||||
<!-- <a class="sidebar-btn" href="{{root}}/account/delete">Delete my account</a> -->
|
||||
<a class="sidebar-btn" href="{{root}}/auth/dropbox">Link with Dropbox</a>
|
||||
</div>
|
||||
<a class="sidebar-btn" href="{{root}}/logout">Logout</a>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user