feat(oui-password): add password component

packages/oui-angular/src/index.js

@@ -24,6 +24,7 @@ import Navbar from "@ovh-ui/oui-navbar";
 import Numeric from "@ovh-ui/oui-numeric";
 import PageHeader from "@ovh-ui/oui-page-header";
 import Pagination from "@ovh-ui/oui-pagination";
+import Password from "@ovh-ui/oui-password";
 import Popover from "@ovh-ui/oui-popover";
 import Progress from "@ovh-ui/oui-progress";
 import Radio from "@ovh-ui/oui-radio";
@@ -68,6 +69,7 @@ export default angular
         Numeric,
         PageHeader,
         Pagination,
+        Password,
         Popover,
         Progress,
         Radio,

packages/oui-angular/src/index.spec.js

@@ -26,6 +26,7 @@ loadTests(require.context("../../oui-navbar/src/", true, /.*((\.spec)|(index))$/
 loadTests(require.context("../../oui-numeric/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-page-header/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-pagination/src/", true, /.*((\.spec)|(index))$/));
+loadTests(require.context("../../oui-password/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-popover/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-progress/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-radio/src/", true, /.*((\.spec)|(index))$/));

packages/oui-field/src/field.controller.js

@@ -192,7 +192,7 @@ export default class FieldController {
     }
 
     getMessageString (errorName) {
-        return (this.errorMessages && this.errorMessages[errorName]) || this.ouiFieldConfiguration.translations.errors[errorName];
+        return (this.errorMessages && this.errorMessages[errorName]) || this.ouiFieldConfiguration.translations.errors[errorName] || this.ouiFieldConfiguration.translations.errors.invalid;
     }
 
     getErrorMessage (errorName) {

packages/oui-field/src/field.provider.js

@@ -4,9 +4,11 @@ export default class {
     constructor () {
         this.translations = {
             errors: {
+                invalid: "Invalid field.",
                 required: "Mandatory.",
                 number: "Invalid number.",
                 email: "Invalid email.",
+                password: "Invalid password.",
                 min: "Too low ({{min}} min).",
                 max: "Too high ({{max}} max).",
                 minlength: "Too short ({{minlength}} characters min).",

packages/oui-password/README.md

@@ -0,0 +1,143 @@
+# oui-password
+
+<component-status cx-design="complete" ux="rc"></component-status>
+
+## Usage
+
+### Basic
+
+```html:preview
+<oui-password model="$ctrl.modelBasic"></oui-password>
+```
+
+### Placeholder
+
+```html:preview
+<oui-password model="$ctrl.modelPlaceholder" placeholder="Password"></oui-password>
+```
+
+### Disabled
+
+```html:preview
+<oui-password model="$ctrl.modelDisabled" disabled></oui-password>
+```
+
+### Form validation
+
+```html:preview
+<form name="form" novalidate>
+    <oui-field label="Password" size="xl">
+        <oui-password model="$ctrl.modelForm" 
+            minlength="4"
+            maxlength="16"
+            pattern="^[a-zA-Z0-9]+$"
+            required>
+        </oui-password>
+    </oui-field>
+</form>
+```
+
+### Password rules & strength
+
+<oui-message type="warning">
+    The component doesn't include any password strength estimator. You can use one like <a href="https://github.com/dropbox/zxcvbn">zxcvbn</a> to provide a score, like in this example.
+</oui-message>
+
+```html:preview
+<form name="form2" novalidate>
+    <oui-field label="Password" size="xl">
+        <oui-password model="$ctrl.modelPasswordRules" on-change="$ctrl.getPasswordScore(modelValue)">
+            <oui-password-strength score="$ctrl.passwordScore"></oui-password-strength>
+            <oui-password-rule validator="$ctrl.checkPasswordLength(modelValue)">
+                Must contain between 8 and 30 characters
+            </oui-password-rule>
+            <oui-password-rule pattern="[0-9]+">
+                Have at least one number
+            </oui-password-rule>
+            <oui-password-rule pattern="[A-Z]+">
+                Have at least capital letter
+            </oui-password-rule>
+        </oui-password>
+    </oui-field>
+</form>
+```
+
+#### Custom strength feedback
+
+The feedback of password strength can be overridden by adding your custom feedback in `oui-password-strength`.
+It can also be globally changed with `ouiPasswordProvider` (see **Configuration** below).
+
+```html:preview
+<oui-password model="$ctrl.modelCustomFeedback" on-change="$ctrl.getPasswordScore(modelValue)">
+    <oui-password-strength score="$ctrl.passwordScore" ng-switch="$ctrl.passwordScore">
+        <span ng-switch-when="4">Score 4: Etiam volutpat congue odio imperdiet tincidunt.</span>
+        <span ng-switch-when="3">Score 3: Suspendisse vehicula ut nisl non laoreet.</span>
+        <span ng-switch-when="2">Score 2: Curabitur malesuada mi lectus, eget pharetra erat malesuada sed.</span>
+        <span ng-switch-when="1">Score 1: Vestibulum pulvinar congue lacus sed ultricies.</span>
+        <span ng-switch-default="">Score 0: Lorem ipsum dolor sit amet.</span>
+    </oui-password-strength>
+</oui-password>
+```
+
+#### Score scale
+
+`oui-password-strength`'s score scale is based on <a href="https://github.com/dropbox/zxcvbn#usage">zxcvbn</a> scale:
+
+* `0`: Risky password,
+* `1`: Bad password,
+* `2`: Weak password,
+* `3`: Good password,
+* `4`: Strong password
+
+## API
+
+### oui-password
+
+| Attribute     | Type                  | Binding   | One-time binding  | Values                | Default   | Description
+| ----          | ----                  | ----      | ----              | ----                  | ----      | ----
+| `model`       | string                | =         | no                | n/a                   | n/a       | model bound to component
+| `id`          | string                | @?        | yes               | n/a                   | n/a       | id attribute of the input
+| `name`        | string                | @?        | yes               | n/a                   | n/a       | name attritebu of the input
+| `placeholder` | string                | @?        | yes               | `true`, `false`       | `false`   | placeholder text
+| `disabled`    | boolean               | <?        | no                | n/a                   | n/a       | disabled flag
+| `maxlength`   | number                | <?        | yes               | n/a                   | n/a       | max length of the model value
+| `minlength`   | number                | <?        | yes               | n/a                   | n/a       | min length of the model value
+| `pattern`     | string&lt;regexp&gt;  | @?        | yes               | n/a                   | n/a       | pattern of the model value
+| `required`    | boolean               | <?        | no                | `true`, `false`       | `false`   | required flag
+| `on-change`   | function              | &         | no                | n/a                   | n/a       | handler triggered when value has changed
+
+### oui-rule
+
+| Attribute     | Type                  | Binding   | One-time binding  | Values                | Default   | Description
+| ----          | ----                  | ----      | ----              | ----                  | ----      | ----
+| `pattern`     | string&lt;regexp&gt;  | @?        | no                | n/a                   | n/a       | pattern of the model value
+| `validator`   | function              | &         | no                | n/a                   | n/a       | validator function to test the password value; should return a boolean
+
+### oui-strength
+
+| Attribute     | Type                  | Binding   | One-time binding  | Values                | Default   | Description
+| ----          | ----                  | ----      | ----              | ----                  | ----      | ----
+| `score`       | number                | <?        | no                | See **Score scale**   | n/a       | score provided by a password strength estimator
+
+## Configuration
+
+The password translations can be globally configured with a provider.
+
+```js
+angular.module("myModule", [
+    "oui.password"
+]).config(ouiPasswordConfigurationProvider => {
+    ouiPasswordConfigurationProvider.setTranslations({
+        allRulesValidLabel: "All password rules are met.",
+        ariaHidePasswordLabel: "Hide password",
+        ariaShowPasswordLabel: "Show password",
+        ariaValidRuleLabel: "Valid rule.",
+        ariaInvalidRuleLabel: "Invalid rule.",
+        riskyPasswordLabel: "Risky password.",
+        badPasswordLabel: "Bad password.",
+        weakPasswordLabel: "Weak password.",
+        goodPasswordLabel: "Good password.",
+        strongPasswordLabel: "Strong password."
+    });
+});
+```

packages/oui-password/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ovh-ui/oui-password",
+  "version": "1.0.0",
+  "main": "./src/index.js",
+  "license": "BSD-3-Clause",
+  "author": "OVH SAS"
+}

packages/oui-password/src/index.js

@@ -0,0 +1,12 @@
+import Password from "./password.component";
+import PasswordConfigurationProvider from "./password.provider";
+import PasswordRule from "./rule/password-rule.component";
+import PasswordStrength from "./strength/password-strength.component";
+
+export default angular
+    .module("oui.password", [])
+    .component("ouiPassword", Password)
+    .component("ouiPasswordRule", PasswordRule)
+    .component("ouiPasswordStrength", PasswordStrength)
+    .provider("ouiPasswordConfiguration", PasswordConfigurationProvider)
+    .name;