@girder/core 5.0.0-beta.1 → 5.0.0

package/dist-lib/src/views/layout/LoginView.js

@@ -0,0 +1,100 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import View from '@girder/core/views/View';
+import events from '@girder/core/events';
+import { handleClose, handleOpen } from '@girder/core/dialog';
+import { login } from '@girder/core/auth';
+import UserModel from '@girder/core/models/UserModel';
+
+import LoginDialogTemplate from '@girder/core/templates/layout/loginDialog.pug';
+
+import '@girder/core/utilities/jquery/girderEnable';
+import '@girder/core/utilities/jquery/girderModal';
+
+/**
+ * This view shows a login modal dialog.
+ */
+var LoginView = View.extend({
+    events: {
+        'submit #g-login-form': function (e) {
+            e.preventDefault();
+
+            this.$('#g-login-button').girderEnable(false);
+            this.$('.g-validation-failed-message').text('');
+
+            const loginName = this.$('#g-login').val();
+            const password = this.$('#g-password').val();
+            const otpToken = this.$('#g-login-otp-group').hasClass('hidden') ? null : this.$('#g-login-otp').val();
+            login(loginName, password, otpToken)
+                .done(() => {
+                    this.$el.modal('hide');
+                })
+                .fail((err) => {
+                    if (err.responseJSON.message.indexOf('Girder-OTP') !== -1 &&
+                        this.$('#g-login-otp-group').hasClass('hidden')
+                    ) {
+                        this.$('#g-login-otp-group').removeClass('hidden');
+                        this.$('#g-login-otp').trigger('focus');
+                        return;
+                    }
+
+                    this.$('.g-validation-failed-message').text(err.responseJSON.message);
+
+                    if (err.responseJSON.extra === 'emailVerification') {
+                        var html = err.responseJSON.message +
+                            ' <a class="g-send-verification-email">Click here to send verification email.</a>';
+                        $('.g-validation-failed-message').html(html);
+                    }
+                })
+                .always(() => {
+                    this.$('#g-login-button').girderEnable(true);
+                });
+        },
+
+        'click .g-send-verification-email': function () {
+            this.$('.g-validation-failed-message').html('');
+
+            const loginName = this.$('#g-login').val();
+            UserModel.sendVerificationEmail(loginName)
+                .done((resp) => {
+                    this.$('.g-validation-failed-message').html(resp.message);
+                }).fail((err) => {
+                    this.$('.g-validation-failed-message').html(err.responseJSON.message);
+                });
+        },
+
+        'click a.g-register-link': function () {
+            events.trigger('g:registerUi');
+        },
+
+        'click a.g-forgot-password': function () {
+            events.trigger('g:resetPasswordUi');
+        }
+    },
+
+    initialize: function (settings) {
+        this.registrationPolicy = settings.registrationPolicy;
+        this.enablePasswordLogin = _.has(settings, 'enablePasswordLogin') ? settings.enablePasswordLogin : true;
+    },
+
+    render: function () {
+        this.$el.html(LoginDialogTemplate({
+            registrationPolicy: this.registrationPolicy,
+            enablePasswordLogin: this.enablePasswordLogin,
+            showOtp: true
+        })).girderModal(this)
+            .on('shown.bs.modal', () => {
+                this.$('#g-login').trigger('focus');
+            }).on('hidden.bs.modal', () => {
+                handleClose('login', { replace: true });
+            });
+
+        handleOpen('login', { replace: true });
+        this.$('#g-login').trigger('focus');
+
+        return this;
+    }
+});
+
+export default LoginView;

package/dist-lib/src/views/layout/ProgressListView.js

@@ -0,0 +1,70 @@
+import _ from 'underscore';
+
+import TaskProgressWidget from '@girder/core/views/widgets/TaskProgressWidget';
+import View from '@girder/core/views/View';
+
+import LayoutProgressAreaTemplate from '@girder/core/templates/layout/layoutProgressArea.pug';
+
+import '@girder/core/stylesheets/layout/progressArea.styl';
+
+/**
+ * Container showing list of active tasks that are reporting progress
+ * via a EventStream object.
+ */
+var ProgressListView = View.extend({
+
+    initialize: function (settings) {
+        this.eventStream = settings.eventStream;
+        this.listenTo(this.eventStream, 'g:event.progress', this._handleProgress, this);
+        // if the event stream disconnects, clear the progress so we don't have
+        // stale values lingering.
+        this.listenTo(this.eventStream, 'g:eventStream.stop', this._clearProgress, this);
+
+        // map progress IDs to widgets
+        this._map = {};
+    },
+
+    render: function () {
+        this.$el.html(LayoutProgressAreaTemplate());
+
+        this._onUpdate();
+
+        return this;
+    },
+
+    _handleProgress: function (progress) {
+        if (_.has(this._map, progress._id)) {
+            this._map[progress._id].update(progress);
+        } else {
+            this._map[progress._id] = new TaskProgressWidget({
+                className: 'g-progress-widget-container',
+                progress: progress,
+                parentView: null
+            }).on('g:hide', function (p) {
+                this._map[p._id].destroy();
+                delete this._map[p._id];
+                this._onUpdate();
+            }, this).render();
+            this._map[progress._id].$el.appendTo(this.$('.g-progress-list-container'));
+        }
+        this._onUpdate();
+    },
+
+    _clearProgress: function () {
+        const needsUpdate = !_.isEmpty(this._map);
+        _.each(this._map, (progressWidget, progressId) => {
+            progressWidget.destroy();
+            progressWidget.remove();
+            delete this._map[progressId];
+        });
+        if (needsUpdate) {
+            this._onUpdate();
+        }
+    },
+
+    _onUpdate: function () {
+        this.$el.toggle(!_.isEmpty(this._map));
+    }
+});
+
+export default ProgressListView;

package/dist-lib/src/views/layout/RegisterView.js

@@ -0,0 +1,101 @@
+import UserModel from '@girder/core/models/UserModel';
+import View from '@girder/core/views/View';
+import events from '@girder/core/events';
+import { getCurrentUser, setCurrentUser, getCurrentToken, setCurrentToken } from '@girder/core/auth';
+import { handleClose, handleOpen } from '@girder/core/dialog';
+
+import RegisterDialogTemplate from '@girder/core/templates/layout/registerDialog.pug';
+
+import '@girder/core/utilities/jquery/girderEnable';
+import '@girder/core/utilities/jquery/girderModal';
+
+/**
+ * This view shows a register modal dialog.
+ */
+var RegisterView = View.extend({
+    events: {
+        'submit #g-register-form': function (e) {
+            e.preventDefault();
+
+            this.$('.form-group').removeClass('has-error');
+
+            if (this.$('#g-password').val() !== this.$('#g-password2').val()) {
+                this.$('#g-group-password,#g-group-password2').addClass('has-error');
+                this.$('#g-password').trigger('focus');
+                this.$('.g-validation-failed-message').text('Passwords must match.');
+                return;
+            }
+
+            var user = new UserModel({
+                login: this.$('#g-login').val(),
+                password: this.$('#g-password').val(),
+                email: this.$('#g-email').val(),
+                firstName: this.$('#g-firstName').val(),
+                lastName: this.$('#g-lastName').val()
+            });
+            user.on('g:saved', function () {
+                if (getCurrentUser()) {
+                    this.trigger('g:userCreated', {
+                        user: user
+                    });
+                } else {
+                    var authToken = user.get('authToken') || {};
+
+                    if (authToken.token) {
+                        setCurrentUser(user);
+                        setCurrentToken(authToken.token);
+                        window.localStorage.setItem('girderToken', getCurrentToken());
+
+                        events.trigger('g:login');
+                    } else {
+                        events.trigger('g:alert', {
+                            icon: 'ok',
+                            text: 'Check your email to verify registration.',
+                            type: 'success',
+                            timeout: 4000
+                        });
+                    }
+
+                    handleClose('register', { replace: true });
+                }
+
+                this.$el.modal('hide');
+            }, this).on('g:error', function (err) {
+                var resp = err.responseJSON;
+                this.$('.g-validation-failed-message').text(resp.message);
+                if (resp.field) {
+                    this.$('#g-group-' + resp.field).addClass('has-error');
+                    this.$('#g-' + resp.field).trigger('focus');
+                }
+                this.$('#g-register-button').girderEnable(true);
+            }, this).save();
+
+            this.$('#g-register-button').girderEnable(false);
+            this.$('.g-validation-failed-message').text('');
+        },
+
+        'click a.g-login-link': function () {
+            events.trigger('g:loginUi');
+        }
+    },
+
+    render: function () {
+        this.$el.html(RegisterDialogTemplate({
+            currentUser: getCurrentUser(),
+            title: getCurrentUser() ? 'Create new user' : 'Sign up'
+        })).girderModal(this)
+            .on('shown.bs.modal', () => {
+                this.$('#g-login').trigger('focus');
+            }).on('hidden.bs.modal', () => {
+                handleClose('register', { replace: true });
+            });
+        this.$('#g-login').trigger('focus');
+
+        handleOpen('register', { replace: true });
+
+        return this;
+    }
+
+});
+
+export default RegisterView;

package/dist-lib/src/views/layout/ResetPasswordView.js

@@ -0,0 +1,70 @@
+import View from '@girder/core/views/View';
+import events from '@girder/core/events';
+import { handleClose, handleOpen } from '@girder/core/dialog';
+import { restRequest } from '@girder/core/rest';
+
+import ResetPasswordDialogTemplate from '@girder/core/templates/layout/resetPasswordDialog.pug';
+
+import '@girder/core/utilities/jquery/girderEnable';
+import '@girder/core/utilities/jquery/girderModal';
+
+/**
+ * This view shows a modal dialog for resetting a forgotten password.
+ */
+var ResetPasswordView = View.extend({
+    events: {
+        'submit #g-reset-password-form': function (e) {
+            e.preventDefault();
+            restRequest({
+                url: 'user/password/temporary',
+                data: {
+                    email: this.$('#g-email').val().trim()
+                },
+                method: 'PUT',
+                error: null // don't do default error behavior
+            }).done(() => {
+                this.$el.modal('hide');
+                events.trigger('g:alert', {
+                    icon: 'mail-alt',
+                    text: 'Password reset email sent.',
+                    type: 'success'
+                });
+            }).fail((err) => {
+                this.$('.g-validation-failed-message').text(err.responseJSON.message);
+                this.$('#g-reset-password-button').girderEnable(true);
+            });
+
+            this.$('#g-reset-password-button').girderEnable(false);
+            this.$('.g-validation-failed-message').text('');
+        },
+
+        'click a.g-register-link': function () {
+            events.trigger('g:registerUi');
+        },
+
+        'click a.g-login-link': function () {
+            events.trigger('g:loginUi');
+        }
+    },
+
+    initialize: function (settings) {
+        this.registrationPolicy = settings.registrationPolicy;
+    },
+
+    render: function () {
+        this.$el.html(ResetPasswordDialogTemplate({
+            registrationPolicy: this.registrationPolicy
+        })).girderModal(this).on('shown.bs.modal', () => {
+            this.$('#g-email').trigger('focus');
+        }).on('hidden.bs.modal', () => {
+            handleClose('resetpassword', { replace: true });
+        });
+        this.$('#g-email').trigger('focus');
+
+        handleOpen('resetpassword', { replace: true });
+
+        return this;
+    }
+});
+
+export default ResetPasswordView;

package/dist-lib/src/views/layout/index.js

@@ -0,0 +1,19 @@
+import FooterView from './FooterView';
+import GlobalNavView from './GlobalNavView';
+import HeaderUserView from './HeaderUserView';
+import HeaderView from './HeaderView';
+import LoginView from './LoginView';
+import ProgressListView from './ProgressListView';
+import RegisterView from './RegisterView';
+import ResetPasswordView from './ResetPasswordView';
+
+export {
+    FooterView,
+    GlobalNavView,
+    HeaderUserView,
+    HeaderView,
+    LoginView,
+    ProgressListView,
+    RegisterView,
+    ResetPasswordView
+};