Fixes #21170 - move password_strength.js to wepback

theforeman · Oct 18, 2017 · b396277 · b396277
1 parent b0fd1ab
commit b396277
Show file tree

Hide file tree

Showing 12 changed files with 135 additions and 99 deletions.
diff --git a/app/assets/javascripts/password_strength.js b/app/assets/javascripts/password_strength.js
diff --git a/app/assets/stylesheets/password_strength.scss b/app/assets/stylesheets/password_strength.scss
diff --git a/app/views/users/_form.html.erb b/app/views/users/_form.html.erb
@@ -1,4 +1,3 @@
-<%= javascript 'password_strength' %>
 
 <%= form_for @user do |f| %>
   <%= base_errors_for @user %>
@@ -41,8 +40,13 @@
         <% if User.current == @user  %>
           <%= password_f f, :current_password, :label => _('Current password'), :placeholder => '' %>
         <% end %>
-        <%= password_f f, :password, :label => _('Password'), :error => @user.errors[:password_hash] %>
-        <%= password_f f, :password_confirmation, :label => _('Verify') %>
+        <div id="password_react"></div>
+        <%= mount_react_component('PasswordStrength', '#password_react',
+                                  {:className => 'form-control',
+                                   :id => 'user_password',
+                                   :name => 'user[password]',
+                                   :verify => {name: 'user[password_confirmation]'},
+                                   :error => f.object.errors[:password_hash].present? ? f.object.errors[:password_hash].to_sentence : false}.to_json) %>
       </div>
     </div>
 

diff --git a/app/views/users/index.html.erb b/app/views/users/index.html.erb
@@ -1,4 +1,3 @@
-<%= javascript 'password_strength' %>
 <% title _("Users") %>
 
 <% title_actions new_link(_("Create User")) %>

diff --git a/bundler.d/assets.rb b/bundler.d/assets.rb
@@ -7,4 +7,3 @@
 gem 'uglifier', '>= 1.0.3'
 gem 'sass-rails', '~> 5.0'
 gem 'spice-html5-rails', '~> 0.1.5'
-gem 'jquery_pwstrength_bootstrap_4', :require => 'jquery_pwstrength_bootstrap'
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
@@ -42,7 +42,6 @@
                   auth_source_ldap
                   subnets
                   hidden_values
-                  password_strength
                   proxy_status
                   about
                   parameter_override)

diff --git a/package.json b/package.json
@@ -69,6 +69,7 @@
     "react-bootstrap": "^0.31.0",
     "react-dom": "^15.6.2",
     "react-numeric-input": "^2.0.7",
+    "react-password-strength": "^2.1.0",
     "react-redux": "^5.0.2",
     "redux": "^3.6.0",
     "redux-form": "^7.0.3",

diff --git a/webpack/assets/javascripts/foreman_users.js b/webpack/assets/javascripts/foreman_users.js
@@ -47,3 +47,4 @@ export function testMail(item, url, param = {}) {
     }
   });
 }
+
diff --git a/webpack/assets/javascripts/react_app/components/componentRegistry.js b/webpack/assets/javascripts/react_app/components/componentRegistry.js
@@ -7,6 +7,7 @@ import ToastsList from './toastNotifications/';
 import StorageContainer from './hosts/storage/vmware/';
 import forEach from 'lodash/forEach';
 import map from 'lodash/map';
+import PasswordStrength from '../components/passwordStrength/';
 
 const componentRegistry = {
   registry: {},
@@ -62,7 +63,8 @@ const coreComponets = [
   { name: 'PowerStatus', type: PowerStatus },
   { name: 'NotificationContainer', type: NotificationContainer },
   { name: 'ToastNotifications', type: ToastsList, data: false },
-  { name: 'StorageContainer', type: StorageContainer }
+  { name: 'StorageContainer', type: StorageContainer },
+  { name: 'PasswordStrength', type: PasswordStrength }
 ];
 
 componentRegistry.registerMultiple(coreComponets);

diff --git a/webpack/assets/javascripts/react_app/components/passwordStrength/index.js b/webpack/assets/javascripts/react_app/components/passwordStrength/index.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import CommonForm from '../common/forms/CommonForm';
+import ReactPasswordStrength from 'react-password-strength';
+import './password_strength.scss';
+
+class PasswordStrength extends React.Component {
+  constructor() {
+    super();
+    this.checkRetype = this.checkRetype.bind(this);
+    this.state = {
+      pass: '',
+      error: undefined
+    };
+  }
+  checkRetype(event) {
+    if (event.target.value !== this.state.pass) {
+      this.setState({error: __('Passwords do not match')});
+    } else {
+      this.setState({error: undefined});
+    }
+  }
+
+  render() {
+    const {className, id, name, verify, error} = this.props.data;
+
+    return (
+      <div>
+        <CommonForm label={__('Password')} touched={true} error={error}>
+          <ReactPasswordStrength
+            changeCallback={(data) => {this.setState({pass: data.password});}}
+            minLength={0}
+            minScore={2}
+            scoreWords={[__('Weak'), __('Medium'), __('Normal'), __('Strong'), __('Stronger')]}
+            inputProps={{autoComplete: 'new-password', name: name,
+              id: id, className: `${className}`}}
+          />
+        </CommonForm>
+          { verify &&
+            <CommonForm label={__('Verify')} touched={true} error={this.state.error} >
+              <input name={verify.name} type="password"
+                     onChange={this.checkRetype} className="form-control" />
+            </CommonForm>}
+      </div>
+    );
+  }
+}
+
+export default PasswordStrength;
diff --git a/webpack/assets/javascripts/react_app/components/passwordStrength/password_strength.scss b/webpack/assets/javascripts/react_app/components/passwordStrength/password_strength.scss
@@ -0,0 +1,65 @@
+.ReactPasswordStrength {
+  .ReactPasswordStrength-input {
+    width: 100%;
+    font-size: 12px;
+    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
+    padding: 2px 30px 2px 6px;
+  }
+
+  .ReactPasswordStrength-strength-desc {
+    padding: 6px 10px;
+    right: 60px;
+  }
+}
+
+#password_react {
+  .is-strength-0 {
+    .ReactPasswordStrength-strength-desc {
+      color: #ff1318;
+    }
+
+    .ReactPasswordStrength-strength-bar {
+      background: #ff1318;
+    }
+  }
+
+  .is-strength-1 {
+    .ReactPasswordStrength-strength-desc {
+      color: orange;
+    }
+
+    .ReactPasswordStrength-strength-bar {
+      background: orange;
+    }
+  }
+
+  .is-strength-2 {
+    .ReactPasswordStrength-strength-desc {
+      color: #ffd435;
+    }
+
+    .ReactPasswordStrength-strength-bar {
+      background: #ffd435;
+    }
+  }
+
+  .is-strength-3 {
+    .ReactPasswordStrength-strength-desc {
+      color: lawngreen;
+    }
+
+    .ReactPasswordStrength-strength-bar {
+      background: lawngreen;
+    }
+  }
+
+  .is-strength-4 {
+    .ReactPasswordStrength-strength-desc {
+      color: green;
+    }
+
+    .ReactPasswordStrength-strength-bar {
+      background: green;
+    }
+  }
+}
diff --git a/webpack/stories/index.js b/webpack/stories/index.js
@@ -14,6 +14,7 @@ import PowerStatusInner from
 import Store from '../assets/javascripts/react_app/redux';
 import Toast from '../assets/javascripts/react_app/components/toastNotifications/toastListitem';
 import StorageContainer from '../assets/javascripts/react_app/components/hosts/storage/vmware';
+import PasswordStrength from '../assets/javascripts/react_app/components/passwordStrength';
 import * as VMWareData from './data/storage/vmware';
 
 storiesOf('Charts', module)
@@ -102,3 +103,12 @@ storiesOf('Host VMWare Storage', module)
   .add('without any controllers', () =>
     <StorageContainer store={Store} data={VMWareData.emptyState} />
   );
+
+storiesOf('Password Strength Meter', module)
+  .add('With no error ', () =>
+    <PasswordStrength data={{'className': 'form-control', 'id': 'password_id',
+                             'name': 'name', 'error': []}} />)
+  .add('With error ', () =>
+    <PasswordStrength data={{'className': 'form-control', 'id': 'password_id',
+                             'name': 'name', 'error': ["Can't be blank"]}} />
+  );