Skip to content

Commit

Permalink
add authentication to web interface
Browse files Browse the repository at this point in the history
  • Loading branch information
rlidwka committed Nov 4, 2014
1 parent 7b34bb6 commit 67b4528
Show file tree
Hide file tree
Showing 11 changed files with 1,296 additions and 296 deletions.
417 changes: 286 additions & 131 deletions lib/GUI/css/bootstrap.css

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions lib/GUI/css/styles.less
Original file line number Diff line number Diff line change
Expand Up @@ -187,3 +187,8 @@
.center {
text-align: center;
}

.login-btn {
margin-left: 10px;
margin-top: 5px;
}
50 changes: 45 additions & 5 deletions lib/GUI/index.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>{{ name }}</title>

<link rel="icon" type="image/ico" href="{{ baseUrl }}/-/static/favicon.ico"/>
<link rel="icon" type="image/ico" href="{{ baseUrl }}/-/static/favicon.png"/>
<link rel="stylesheet" type="text/css" href="{{ baseUrl }}/-/static/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Expand All @@ -15,6 +15,19 @@
<div class="npm-logo navbar-left">
<a href="{{ baseUrl }}"></a>
</div>
<div class="navbar-left login-btn">
{{#if username}}
You're {{username}}
<br>
<form action="{{ baseUrl }}/-/logout" method="post">
<a class="submit white no-bg" href="#">Logout</a>
</form>
{{else}}
&nbsp;
<br>
<a class="white no-bg" data-toggle="modal" data-target="#login-form" href="#">Login</a>
{{/if}}
</div>

<div class="navbar-right setup hidden-xs">
<code class="white no-bg">npm set registry {{ baseUrl }}</code><br>
Expand Down Expand Up @@ -50,15 +63,42 @@
{{/each}}

{{#unless packages.length}}
<div class='no-results'>
<big>No Packages</big><br>
Use <code>npm publish</code>
</div>
<div class='no-results'>
<big>No Packages</big><br>
Use <code>npm publish</code>
</div>
{{/unless}}
</section>

<section class="content container pkg-search-container" id="search-results"></section>

<div class="modal fade" id="login-form" tabindex="-1" role="dialog" aria-labelledby="login-form-label" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h5 class="modal-title" id="login-form-label">Welcome back</h5>
</div>
<form role="form" action="{{ baseUrl }}/-/login" method="post" id="login-form" autocomplete="off">
<div class="modal-body">
<div class="form-group">
<label for="user" class="sr-only">Email</label>
<input name="user" id="user" class="form-control" placeholder="Username" type="text">
</div>
<div class="form-group">
<label for="pass" class="sr-only">Password</label>
<input name="pass" id="pass" class="form-control" placeholder="Password" type="password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Log in</button>
</div>
</form>
</div>
</div>
</div>

<script src="{{ baseUrl }}/-/static/jquery.min.js"></script>
<script type='text/javascript' src='{{ baseUrl }}/-/static/main.js'></script>
</body>
Expand Down
281 changes: 281 additions & 0 deletions lib/GUI/js/bootstrap-modal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,281 @@
/* ========================================================================
* Bootstrap: modal.js v3.3.0
* http://getbootstrap.com/javascript/#modals
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */


+function ($) {
'use strict';

// MODAL CLASS DEFINITION
// ======================

var Modal = function (element, options) {
this.options = options
this.$body = $(document.body)
this.$element = $(element)
this.$backdrop =
this.isShown = null
this.scrollbarWidth = 0

if (this.options.remote) {
this.$element
.find('.modal-content')
.load(this.options.remote, $.proxy(function () {
this.$element.trigger('loaded.bs.modal')
}, this))
}
}

Modal.VERSION = '3.3.0'

Modal.TRANSITION_DURATION = 300
Modal.BACKDROP_TRANSITION_DURATION = 150

Modal.DEFAULTS = {
backdrop: true,
keyboard: true,
show: true
}

Modal.prototype.toggle = function (_relatedTarget) {
return this.isShown ? this.hide() : this.show(_relatedTarget)
}

Modal.prototype.show = function (_relatedTarget) {
var that = this
var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })

this.$element.trigger(e)

if (this.isShown || e.isDefaultPrevented()) return

this.isShown = true

this.checkScrollbar()
this.$body.addClass('modal-open')

this.setScrollbar()
this.escape()

this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))

this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade')

if (!that.$element.parent().length) {
that.$element.appendTo(that.$body) // don't move modals dom position
}

that.$element
.show()
.scrollTop(0)

if (transition) {
that.$element[0].offsetWidth // force reflow
}

that.$element
.addClass('in')
.attr('aria-hidden', false)

that.enforceFocus()

var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })

transition ?
that.$element.find('.modal-dialog') // wait for modal to slide in
.one('bsTransitionEnd', function () {
that.$element.trigger('focus').trigger(e)
})
.emulateTransitionEnd(Modal.TRANSITION_DURATION) :
that.$element.trigger('focus').trigger(e)
})
}

Modal.prototype.hide = function (e) {
if (e) e.preventDefault()

e = $.Event('hide.bs.modal')

this.$element.trigger(e)

if (!this.isShown || e.isDefaultPrevented()) return

this.isShown = false

this.escape()

$(document).off('focusin.bs.modal')

this.$element
.removeClass('in')
.attr('aria-hidden', true)
.off('click.dismiss.bs.modal')

$.support.transition && this.$element.hasClass('fade') ?
this.$element
.one('bsTransitionEnd', $.proxy(this.hideModal, this))
.emulateTransitionEnd(Modal.TRANSITION_DURATION) :
this.hideModal()
}

Modal.prototype.enforceFocus = function () {
$(document)
.off('focusin.bs.modal') // guard against infinite focus loop
.on('focusin.bs.modal', $.proxy(function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
this.$element.trigger('focus')
}
}, this))
}

Modal.prototype.escape = function () {
if (this.isShown && this.options.keyboard) {
this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {
e.which == 27 && this.hide()
}, this))
} else if (!this.isShown) {
this.$element.off('keydown.dismiss.bs.modal')
}
}

Modal.prototype.hideModal = function () {
var that = this
this.$element.hide()
this.backdrop(function () {
that.$body.removeClass('modal-open')
that.resetScrollbar()
that.$element.trigger('hidden.bs.modal')
})
}

Modal.prototype.removeBackdrop = function () {
this.$backdrop && this.$backdrop.remove()
this.$backdrop = null
}

Modal.prototype.backdrop = function (callback) {
var that = this
var animate = this.$element.hasClass('fade') ? 'fade' : ''

if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.prependTo(this.$element)
.on('click.dismiss.bs.modal', $.proxy(function (e) {
if (e.target !== e.currentTarget) return
this.options.backdrop == 'static'
? this.$element[0].focus.call(this.$element[0])
: this.hide.call(this)
}, this))

if (doAnimate) this.$backdrop[0].offsetWidth // force reflow

this.$backdrop.addClass('in')

if (!callback) return

doAnimate ?
this.$backdrop
.one('bsTransitionEnd', callback)
.emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
callback()

} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')

var callbackRemove = function () {
that.removeBackdrop()
callback && callback()
}
$.support.transition && this.$element.hasClass('fade') ?
this.$backdrop
.one('bsTransitionEnd', callbackRemove)
.emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
callbackRemove()

} else if (callback) {
callback()
}
}

Modal.prototype.checkScrollbar = function () {
this.scrollbarWidth = this.measureScrollbar()
}

Modal.prototype.setScrollbar = function () {
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
if (this.scrollbarWidth) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
}

Modal.prototype.resetScrollbar = function () {
this.$body.css('padding-right', '')
}

Modal.prototype.measureScrollbar = function () { // thx walsh
if (document.body.clientWidth >= window.innerWidth) return 0
var scrollDiv = document.createElement('div')
scrollDiv.className = 'modal-scrollbar-measure'
this.$body.append(scrollDiv)
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
this.$body[0].removeChild(scrollDiv)
return scrollbarWidth
}


// MODAL PLUGIN DEFINITION
// =======================

function Plugin(option, _relatedTarget) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.modal')
var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)

if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option](_relatedTarget)
else if (options.show) data.show(_relatedTarget)
})
}

var old = $.fn.modal

$.fn.modal = Plugin
$.fn.modal.Constructor = Modal


// MODAL NO CONFLICT
// =================

$.fn.modal.noConflict = function () {
$.fn.modal = old
return this
}


// MODAL DATA-API
// ==============

$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
var $this = $(this)
var href = $this.attr('href')
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())

if ($this.is('a')) e.preventDefault()

$target.one('show.bs.modal', function (showEvent) {
if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
$target.one('hidden.bs.modal', function () {
$this.is(':visible') && $this.trigger('focus')
})
})
Plugin.call($target, option, this)
})

}(jQuery);
14 changes: 12 additions & 2 deletions lib/GUI/js/main.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,12 @@
require('./search');
require('./entry');
// twitter bootstrap stuff;
// not in static 'cause I want it to be bundled with the rest of javascripts
require('./bootstrap-modal')

// our own files
require('./search')
require('./entry')

$(document).on('click', 'a.submit', function() {
$(this).parent('form').submit()
return false
})
Loading

0 comments on commit 67b4528

Please sign in to comment.