js (users): refactored module and applied new component structure

Signed-off-by: Vítor Avelino <[email protected]>

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

.eslintrc

@@ -1,11 +1,14 @@
 {
   "env": {
     "jquery": true,
-    "browser": true,
+    "browser": true
   },
   "extends": "airbnb-base",
   "globals": {
     "Bloodhound": false,
+    "layout_resizer": false,
+    "set_typeahead": false,
+    "open_close_icon": false
   },
   "plugins": [
     "import"

app/assets/javascripts/application.js

@@ -1,29 +1,35 @@
 // jQuery
-window.jQuery = require('jquery');
-require('jquery-ujs');
+import jQuery from 'jquery';
+
+window.jQuery = jQuery;
+window.$ = jQuery;
+
+import 'jquery-ujs';
 
 // Bootstrap
-require('bootstrap/js/transition');
-require('bootstrap/js/tab');
-require('bootstrap/js/tooltip');
-require('bootstrap/js/popover');
+import 'bootstrap/js/transition';
+import 'bootstrap/js/tab';
+import 'bootstrap/js/tooltip';
+import 'bootstrap/js/popover';
 
 // Life it up
-require('vendor/lifeitup_layout');
+import 'vendor/lifeitup_layout';
 
 // NOTE: should be removed in the future
-require('vendor/bootstrap-typeahead');
+import 'vendor/bootstrap-typeahead';
 
 // Require tree.
 // NOTE: This should be moved into proper modules.
-require('./alert');
-require('./auth/cover');
-require('./auth/registrations');
-require('./bootstrap');
-require('./dashboard');
-require('./includes/open_close_icon');
-require('./includes/set_typehead');
-require('./namespaces');
-require('./open_search');
-require('./repositories');
-require('./teams');
+import './alert';
+import './bootstrap';
+import './dashboard';
+import './includes/open_close_icon';
+import './includes/set_typehead';
+import './namespaces';
+import './open_search';
+import './repositories';
+import './teams';
+
+// new modules structure
+import './modules/users';
+

app/assets/javascripts/base/component.js

@@ -0,0 +1,27 @@
+class BaseComponent {
+  constructor(el) {
+    this.$el = el;
+
+    if (this.elements) {
+      this.elements();
+    }
+
+    if (this.events) {
+      this.events();
+    }
+
+    if (this.beforeMount) {
+      this.beforeMount();
+    }
+
+    if (this.mount) {
+      this.mount();
+    }
+
+    if (this.mounted) {
+      this.mounted();
+    }
+  }
+}
+
+export default BaseComponent;

app/assets/javascripts/modules/users/components/application-token-panel.js

@@ -0,0 +1,41 @@
+import BaseComponent from '~/base/component';
+
+const TOGGLE_LINK = '#add_application_token_btn';
+const TOGGLE_LINK_ICON = `${TOGGLE_LINK} i`;
+const APP_TOKEN_FORM = '#add_application_token_form';
+const APP_TOKEN_FIELD = '#application_token_application';
+
+class ApplicationTokenPanel extends BaseComponent {
+  elements() {
+    this.$toggle = this.$el.find(TOGGLE_LINK);
+    this.$toggleIcon = this.$el.find(TOGGLE_LINK_ICON);
+    this.$form = this.$el.find(APP_TOKEN_FORM);
+    this.$token = this.$el.find(APP_TOKEN_FIELD);
+  }
+
+  events() {
+    this.$el.on('click', TOGGLE_LINK, e => this.onClick(e));
+  }
+
+  onClick() {
+    this.$form.toggle(400, 'swing', () => {
+      const visible = this.$form.is(':visible');
+
+      if (visible) {
+        this.clearFields();
+      }
+
+      this.$toggleIcon.toggleClass('fa-minus-circle', visible);
+      this.$toggleIcon.toggleClass('fa-plus-circle', !visible);
+
+      layout_resizer();
+    });
+  }
+
+  clearFields() {
+    this.$token.val('');
+    this.$token.focus();
+  }
+}
+
+export default ApplicationTokenPanel;

app/assets/javascripts/modules/users/components/password-form.js

@@ -0,0 +1,40 @@
+import BaseComponent from '~/base/component';
+
+const CURRENT_PASSWORD_FIELD = '#user_current_password';
+const NEW_PASSWORD_FIELD = '#user_password';
+const NEW_CONFIRMATION_PASSWORD_FIELD = '#user_password_confirmation';
+const SUBMIT_BUTTON = 'input[type=submit]';
+
+class UsersPasswordForm extends BaseComponent {
+  elements() {
+    this.$currentPassword = this.$el.find(CURRENT_PASSWORD_FIELD);
+    this.$newPassword = this.$el.find(NEW_PASSWORD_FIELD);
+    this.$newPasswordConfirmation = this.$el.find(NEW_CONFIRMATION_PASSWORD_FIELD);
+    this.$submit = this.$el.find(SUBMIT_BUTTON);
+  }
+
+  events() {
+    this.$el.on('keyup', CURRENT_PASSWORD_FIELD, e => this.onKeyup(e));
+    this.$el.on('keyup', NEW_PASSWORD_FIELD, e => this.onKeyup(e));
+    this.$el.on('keyup', NEW_CONFIRMATION_PASSWORD_FIELD, e => this.onKeyup(e));
+  }
+
+  onKeyup() {
+    const currentPassword = this.$currentPassword.val();
+    const newPassword = this.$newPassword.val();
+    const newPasswordConfirmation = this.$newPasswordConfirmation.val();
+
+    const currentPasswordInvalid = !currentPassword;
+    const newPasswordInvalid = !newPassword;
+    const newPasswordConfirmationInvalid = !newPasswordConfirmation ||
+      newPassword !== newPasswordConfirmation;
+
+    if (currentPasswordInvalid || newPasswordInvalid || newPasswordConfirmationInvalid) {
+      this.$submit.attr('disabled', 'disabled');
+    } else {
+      this.$submit.removeAttr('disabled');
+    }
+  }
+}
+
+export default UsersPasswordForm;

app/assets/javascripts/modules/users/components/profile-form.js

@@ -0,0 +1,40 @@
+import BaseComponent from '~/base/component';
+
+const EMAIL_FIELD = '#user_email';
+const DISPLAY_NAME_FIELD = '#user_display_name';
+const SUBMIT_BUTTON = 'input[type=submit]';
+
+class UsersProfileForm extends BaseComponent {
+  elements() {
+    this.$email = this.$el.find(EMAIL_FIELD);
+    this.$displayName = this.$el.find(DISPLAY_NAME_FIELD);
+    this.$submit = this.$el.find(SUBMIT_BUTTON);
+  }
+
+  events() {
+    this.$el.on('keyup', EMAIL_FIELD, e => this.onKeyup(e));
+    this.$el.on('keyup', DISPLAY_NAME_FIELD, e => this.onKeyup(e));
+  }
+
+  onKeyup() {
+    const email = this.$email.val();
+    const displayName = this.$displayName.val();
+
+    const emailInvalid = !email || email === this.originalEmail;
+    const displayNameInvalid = this.$displayName[0] &&
+      (!displayName || displayName === this.originalDisplayName);
+
+    if (emailInvalid || displayNameInvalid) {
+      this.$submit.attr('disabled', 'disabled');
+    } else {
+      this.$submit.removeAttr('disabled');
+    }
+  }
+
+  mounted() {
+    this.originalEmail = this.$email.val();
+    this.originalDisplayName = this.$displayName.val();
+  }
+}
+
+export default UsersProfileForm;

app/assets/javascripts/modules/users/index.js

@@ -0,0 +1,27 @@
+import UsersEditPage from './pages/edit';
+import UsersSignUpPage from './pages/sign-up';
+import UsersSignInPage from './pages/sign-in';
+
+const USERS_EDIT_ROUTE = 'auth/registrations/edit';
+const USERS_SIGN_IN_ROUTE = 'auth/sessions/new';
+const USERS_SIGN_UP_ROUTE = 'auth/registrations/new';
+
+$(() => {
+  const $body = $('body');
+  const route = $body.data('route');
+
+  if (route === USERS_EDIT_ROUTE) {
+    // eslint-disable-next-line
+    new UsersEditPage($body);
+  }
+
+  if (route === USERS_SIGN_UP_ROUTE) {
+     // eslint-disable-next-line
+      new UsersSignUpPage($body);
+  }
+
+  if (route === USERS_SIGN_IN_ROUTE) {
+     // eslint-disable-next-line
+      new UsersSignInPage($body);
+  }
+});

app/assets/javascripts/modules/users/pages/edit.js

@@ -0,0 +1,25 @@
+import BaseComponent from '~/base/component';
+
+import ProfileForm from '../components/profile-form';
+import PasswordForm from '../components/password-form';
+import ApplicationTokenPanel from '../components/application-token-panel';
+
+const PROFILE_FORM = 'form.profile';
+const PASSWORD_FORM = 'form.password';
+const APP_TOKEN_PANEL = '.app-token-wrapper';
+
+class UsersEditPage extends BaseComponent {
+  elements() {
+    this.$profileForm = this.$el.find(PROFILE_FORM);
+    this.$passwordForm = this.$el.find(PASSWORD_FORM);
+    this.$appTokenPanel = this.$el.find(APP_TOKEN_PANEL);
+  }
+
+  mount() {
+    this.profileForm = new ProfileForm(this.$profileForm);
+    this.passwordForm = new PasswordForm(this.$passwordForm);
+    this.appTokenPanel = new ApplicationTokenPanel(this.$appTokenPanel);
+  }
+}
+
+export default UsersEditPage;

app/assets/javascripts/modules/users/pages/sign-in.js

@@ -0,0 +1,11 @@
+import BaseComponent from '~/base/component';
+
+import { fadeIn } from '~/utils/effects';
+
+class UsersSignInPage extends BaseComponent {
+  mount() {
+    fadeIn(this.$el);
+  }
+}
+
+export default UsersSignInPage;

app/assets/javascripts/modules/users/pages/sign-up.js

@@ -0,0 +1,11 @@
+import BaseComponent from '~/base/component';
+
+import { fadeIn } from '~/utils/effects';
+
+class UsersSignUpPage extends BaseComponent {
+  mount() {
+    fadeIn(this.$el);
+  }
+}
+
+export default UsersSignUpPage;

app/assets/javascripts/namespaces.js

@@ -1,8 +1,3 @@
-/* global layout_resizer, set_typeahead, open_close_icon */
-
-//= require includes/set_typehead
-//= require includes/open_close_icon
-
 jQuery(function ($) {
   $('#edit_namespace').on('click', function (_event) {
     set_typeahead('/teams/typeahead/%QUERY');

app/assets/javascripts/repositories.js

@@ -1,5 +1,3 @@
-/* global layout_resizer */
-
 jQuery(function ($) {
   // Shows and hides the comment form
   $('#write_comment_repository_btn').unbind('click').on('click', function (_e) {

app/assets/javascripts/teams.js

@@ -1,7 +1,3 @@
-/* global layout_resizer, set_typeahead, open_close_icon */
-
-//= require namespaces
-
 jQuery(function ($) {
   $('#add_team_user_btn').on('click', function (_event) {
     var team_id;