Refactored Code and fixed form issue

I refactored the code so that it matches the style of the project. I also modified the algorithm and fixed a security issue in the form cleanup process.

Author: Tim-Luca Lagmöller

src/components/modal/PasswordModal/PasswordMeter.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import PasswordMeterCSS from './PasswordMeter.module.css';
+import * as PasswordMeterLogic from './PasswordMeter.logic';
+
+export default ({ password }) => {
+	const strength = PasswordMeterLogic.scorePassword(password);
+	const strengthMap = {
+		null: PasswordMeterCSS.invisible,
+		0: PasswordMeterCSS.weak,
+		1: PasswordMeterCSS.good,
+		2: PasswordMeterCSS.strong
+	};
+
+	return (
+		<div className={PasswordMeterCSS.meter}>
+			<div className={PasswordMeterCSS.bar + ' ' + strengthMap[strength]} />
+		</div>
+	);
+};

src/components/modal/PasswordModal/PasswordMeter/PasswordMeter.jsx

@@ -0,0 +1,33 @@
+export function scorePassword(password) {
+    var score = 0;
+    if (!password)
+        return null;
+    // award every unique letter until 5 repetitions
+    var letters = {};
+    for (var i = 0; i < password.length; i++) {
+        letters[password[i]] = (letters[password[i]] || 0) + 1;
+        score += 5.0 / letters[password[i]];
+    }
+
+    // bonus points for mixing it up
+    var variations = {
+        digits: /\d/.test(password),
+        lower: /[a-z]/.test(password),
+        upper: /[A-Z]/.test(password),
+        nonWords: /\W/.test(password),
+    }
+
+    let variationCount = 0;
+    for (var check in variations) {
+        variationCount += (variations[check] === true) ? 1 : 0;
+    }
+    score += (variationCount - 1) * 10;
+    if (score > 80)
+        return 2;
+    if (score > 60)
+        return 1;
+    if (score >= 0)
+        return 0;
+
+    return null;
+}

src/components/modal/PasswordModal/PasswordMeter/PasswordMeter.logic.js

@@ -0,0 +1,28 @@
+.meter {
+    width: 100%;
+    display: flex;
+}
+
+.bar {
+    width: 100%;
+    margin: 1px;
+    height: 6px;
+    border-radius: 5px;
+}
+
+.invisible {
+    height: 0;
+    margin: 0;
+}
+
+.weak {
+    background: #e74c3c;
+}
+
+.good {
+    background: #f1c40f;
+}
+
+.strong {
+    background: #27ae60;
+}

src/components/modal/PasswordModal/PasswordMeter/PasswordMeter.module.css

@@ -3,15 +3,15 @@ import { Modal, Form, Input, Icon } from 'antd';
 import { connect } from 'react-redux';
 import { mapState, mapDispatch } from './PasswordModal.map';
 import * as PasswordModalLogic from './PasswordModal.logic';
-import PasswordMeter from './PasswordMeter';
+import PasswordMeter from './PasswordMeter/PasswordMeter';
 
 const PasswordModalForm = Form.create({ name: 'form_in_modal' })(
 	// eslint-disable-next-line
 	class extends Component {
 		render() {
 			const { visible, onCancel, onCreate, form, hint, mode } = this.props;
 			const { getFieldDecorator } = form;
-			let currentPasswordValue = this.props.form.getFieldValue('password');
+			let passwordField = this.props.form.getFieldValue('password');
 
 			return (
 				<Modal
@@ -26,10 +26,8 @@ const PasswordModalForm = Form.create({ name: 'form_in_modal' })(
 							{getFieldDecorator('password', {
 								rules: [ { required: true, message: 'Please input your Password!' } ]
 							})(<Input.Password placeholder="Input Password" />)}
-							
-							{mode !== 'decrypt' ? (
-								<PasswordMeter value={ currentPasswordValue }/>
-							): ''}
+
+							{mode !== 'decrypt' ? <PasswordMeter password={passwordField} /> : ''}
 						</Form.Item>
 						{hint !== null || mode !== 'decrypt' ? (
 							<Form.Item label="Hint">
@@ -71,12 +69,18 @@ class PasswordModal extends Component {
 		this.formRef = formRef;
 	};
 
+	onReset = () => {
+		const form = this.formRef.props.form;
+		form.resetFields();
+		this.props.onReset();
+	};
+
 	render() {
 		return (
 			<PasswordModalForm
 				wrappedComponentRef={this.saveFormRef}
 				visible={this.props.modal.show}
-				onCancel={this.props.onReset}
+				onCancel={this.onReset}
 				onCreate={this.handleCreate}
 				hint={this.props.hint}
 				mode={this.props.mode}