@dvrd/dvr-controls 1.0.62 → 1.0.64

package/index.ts

@@ -48,7 +48,7 @@ import DvrdButton, {DvrdButtonProps} from './src/js/button/dvrdButton';
 import DvrdDatePicker from './src/js/date/dvrdDatePicker';
 import DvrdInputController from './src/js/textField/dvrdInputController';
 import DvrdNumberInput from './src/js/textField/dvrdNumberInput';
-import DvrdPasswordInput from './src/js/textField/dvrdPasswordInput';
+import DVRDPasswordInput from './src/js/textField/dvrdPasswordInput';
 import Link from './src/js/link/link';
 import DvrdOptionsList from './src/js/optionsList/dvrdOptionsList';
 import DvrdSelectController from './src/js/select/dvrdSelectController';
@@ -98,7 +98,7 @@ export {
     DvrdDatePicker,
     DvrdInputController as DvrdInput,
     DvrdNumberInput,
-    DvrdPasswordInput,
+    DVRDPasswordInput,
     Link,
     DvrdOptionsList,
     DvrdSelectController as DvrdSelect,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.62",
+  "version": "1.0.64",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [

package/src/js/checkbox/checkbox.tsx

@@ -84,12 +84,12 @@ export default function DvrdCheckbox(props: Props) {
         }
         return {borderColor: convertColor(color)};
     }, [error, useDarkestColor, isHovered, disabled, baseColor, contrastColor]);
-    const checkStyle: CSSProperties = useMemo(() => {
+    const [checkStyle, partialCheckStyle]: [CSSProperties, CSSProperties] = useMemo(() => {
         let color: string = baseColor;
         if (!!error) color = 'red';
         else if (disabled) color = 'color-gray-4';
         else if (useDarkestColor) color = findDarkestColor(baseColor, contrastColor);
-        return {color: convertColor(color)};
+        return [{color: convertColor(color)}, {backgroundColor: convertColor(color)}];
     }, [error, disabled, useDarkestColor, baseColor, contrastColor]);
     const mainColor = useMemo(() => {
         return useDarkestColor ? findDarkestColor(baseColor, contrastColor) : baseColor;
@@ -114,11 +114,15 @@ export default function DvrdCheckbox(props: Props) {
             className: classNames(checkIcon.props.className, checkClassName),
             style: {...checkIcon.props.style, ...checkStyle}
         });
+        else if (checked === 'partial') return (
+            <div className={classNames(checkClassName, 'partial-icon')} style={partialCheckStyle}/>
+        );
         let checkName: IconName = 'check';
-        if(typeof checkIcon === 'string') checkName = checkIcon as IconName;
+        let additionalClassName: string | null = null;
+        if (typeof checkIcon === 'string') checkName = checkIcon as IconName;
         else if (asRadio) checkName = 'circle';
-        else if (checked === 'partial') checkName = 'minus';
-        return <AwesomeIcon name={checkName} className={checkClassName} style={checkStyle}/>;
+        return <AwesomeIcon name={checkName} className={classNames(checkClassName, additionalClassName)}
+                            style={checkStyle}/>;
     }
 
     function renderError() {

package/src/js/checkbox/style/checkbox.scss

@@ -47,6 +47,13 @@
       transition: opacity .1s ease-in-out, visibility .1s ease-in-out;
       user-select: none;
 
+      &.partial-icon {
+        top: 50%;
+        width: 12px;
+        height: 3px;
+        border-radius: 4px;
+      }
+
       &.checked {
         visibility: visible;
         opacity: 1;

package/src/js/input/password/passwordInput.tsx

@@ -6,7 +6,7 @@ import './style/passwordInput.scss';
 
 import React, {KeyboardEventHandler, PureComponent} from 'react';
 
-import {ControlVariant, ElementPosition, OrnamentShape, StrengthGauche} from "../../util/interfaces";
+import {ControlVariant, ElementPosition, OrnamentShape, StrengthGauge} from "../../util/interfaces";
 import TextField from '../v2/inputController_v2';
 import AwesomeIcon from '../../icon/awesomeIcon';
 import {directTimeout, generateComponentId} from "../../util/componentUtil";
@@ -39,7 +39,7 @@ interface Props {
     autoFocus?: boolean;
     inputProps?: object;
     autoSelect?: boolean;
-    strengthGauche?: StrengthGauche[];
+    strengthGauche?: StrengthGauge[];
     strengthColors: string[];
     strengthLabels: string[];
     placeholder?: string;

package/src/js/textField/dvrdPasswordInput.tsx

@@ -3,38 +3,65 @@
  */
 import './style/dvrdPassword.scss';
 
-import React, {PureComponent} from 'react';
-import {AwesomeIcon, ElementPosition} from '@dvrd/dvr-controls';
+import React, {useState} from 'react';
 import DvrdInputController, {InputControllerProps} from "./dvrdInputController";
+import classNames from 'classnames';
+import {ElementPosition, StrengthGauge} from "../util/interfaces";
+import AwesomeIcon from "../icon/awesomeIcon";
 
-
-interface State {
-    type: 'password' | 'text';
+interface Props extends Omit<InputControllerProps, 'ornaments' | 'ornamentClassName'> {
+    withPasswordStrength?: boolean;
+    passwordStrengthGauges?: Array<StrengthGauge>;
+    wrapperClassName?: string;
+    passwordGaugeClassName?: string;
 }
 
-export default class DvrdPasswordInput extends PureComponent<InputControllerProps, State> {
-    state: State = {
-        type: 'password',
-    };
+const defaultStrengthGauges = (): StrengthGauge[] => [
+    {validator: (password: string) => password.length >= 8},
+    {validator: (password: string) => /\d+/.test(password)},
+    {validator: (password: string) => /[A-Z]+/.test(password)},
+    {validator: (password: string) => /[!@#$%^&*()_+=\-\[\]{}|'";:/?.>,<`~]/.test(password)}
+];
+
+export default function DVRDPasswordInput(props: Props) {
+    const [inputType, setInputType] = useState<'password' | 'text'>('password');
 
-    onClickOrnament = () => {
-        const {type} = this.state;
-        if (type === 'password') this.setState({type: 'text'});
-        else this.setState({type: 'password'});
-    };
+    function getPasswordStrength(): number {
+        const gauges = props.passwordStrengthGauges ?? defaultStrengthGauges();
+        return gauges.reduce(
+            (prev: number, current: StrengthGauge) => current.validator(props.value.toString()) ? prev + 1 : prev, 0);
+    }
 
-    renderOrnament = () => {
-        const {type} = this.state, element = type === 'password' ? 'eye' : 'eye-slash';
+    function onClickOrnament() {
+        setInputType(inputType === 'password' ? 'text' : 'password');
+    }
+
+    function renderOrnament() {
+        const iconName = inputType === 'password' ? 'eye' : 'eye-slash';
         return {
             placement: ElementPosition.RIGHT,
-            element: <AwesomeIcon name={element} onClick={this.onClickOrnament} className='dvrd-password-toggle'/>
+            element: <AwesomeIcon name={iconName} onClick={onClickOrnament} className='dvrd-password-toggle'/>
         };
-    };
+    }
 
-    render = () => {
-        const {type} = this.state, {inputProps} = this.props;
+    function renderStrength() {
+        if (!props.withPasswordStrength) return null;
+        const strength = getPasswordStrength();
         return (
-            <DvrdInputController {...this.props} inputProps={{...inputProps, type}} ornaments={this.renderOrnament()}/>
+            <div className={classNames('password-meter', props.passwordGaugeClassName)}>
+                <span className={classNames('password-strength', strength > 0 && 'pass')}/>
+                <span className={classNames('password-strength', strength > 1 && 'pass')}/>
+                <span className={classNames('password-strength', strength > 2 && 'pass')}/>
+                <span className={classNames('password-strength', strength > 3 && 'pass')}/>
+            </div>
         );
     }
+
+    return (
+        <div className={classNames('dvrd-password-input', props.wrapperClassName)}>
+            <DvrdInputController {...props} inputProps={{...props.inputProps, type: inputType}}
+                                 ornaments={renderOrnament()}/>
+            {renderStrength()}
+        </div>
+    );
 }

package/src/js/textField/style/dvrdPassword.scss

@@ -4,12 +4,34 @@
 
 @import '../../../style/variables';
 
-.dvrd-password-toggle {
-  cursor: pointer;
-  transition: color .2s ease-in-out;
-  color: $color-gray-3;
+.dvrd-password-input {
+  display: grid;
+  row-gap: 1rem;
+  .dvrd-password-toggle {
+    cursor: pointer;
+    transition: color .2s ease-in-out;
+    color: $color-gray-3;
 
-  &:hover {
-    color: $color-gray-5;
+    &:hover {
+      color: $color-gray-5;
+    }
+  }
+
+  .password-meter {
+    display: grid;
+    grid-template-columns: repeat(4, calc(25% - calc(1.5rem / 4)));
+    grid-column-gap: .5rem;
+    margin-top: -.25rem;
+    width: 100%;
+
+    .password-strength {
+      background-color: #E5E7EB;
+      border-radius: 1rem;
+      height: .5rem;
+
+      &.pass {
+        background-color: #77C695;
+      }
+    }
   }
 }

package/src/js/util/interfaces.ts

@@ -171,7 +171,7 @@ export type CustomAppEvent = {
 export type ChangeFunction<T = any> = (value: T, evt?: React.ChangeEvent) => void;
 export type ChangeKeyFunction<K = string, V = any> = (key: K) => ChangeFunction<V>;
 export type ModelResponse<T> = (obj: T, success: boolean | undefined, data: ResponseData) => void;
-export type StrengthGauche = { validator: (password: string) => boolean };
+export type StrengthGauge = { validator: (password: string) => boolean };
 export type PDFSetting = { key: string; label: string; type: PDFSettingType; value: any };
 
 export type PDFElementParams<T extends PDFElementType, O extends IndexedObject<any>> = {

package/src/js/util/requestUtil.ts

@@ -113,7 +113,7 @@ function _handleResponse(response: Response, config: FetchOptions) {
                     config.callback(data, response);
                 }
             });
-        } else config.callback({status: 'success'}, response);
+        } else config.callback({status: 'success', success: true}, response);
     } else
         _onErrorResponse(response, config);
 }