-
Notifications
You must be signed in to change notification settings - Fork 0
/
hipaa-password-input.html
116 lines (94 loc) · 3.15 KB
/
hipaa-password-input.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../paper-input/paper-input-error.html">
<link rel="import" href="hipaa-password-icons.html" async defer>
<!--
`hipaa-password-input`
The password will match HIPAA security regulation standards.
`<hipaa-password-input>` is a single-line text field with Material Design styling
for entering a password.
<hipaa-password-input></hipaa-password-input>
It may include an optional label, which by default is "Password".
It includes a suffix to be able to show the plain text password with a toggle icon.
It includes validation Pattern
<hipaa-password-input pattern="^(?=.*[0-9])(?=.*[~!@#$%^*&;?.+_])(?=.*[a-z])(?=.*[A-Z]).{8,}$">
</hipaa-password-input>
It includes an error message.
<hipaa-password-input error-message="Password should have at least 8 characters with at least one number, one lowercase, one uppercase letter, one special char(~!@#$%^*&;?.+_).">
</hipaa-password-input>
The input can be automatically validated as the user is typing by using
the `auto-validate` and `required` attributes.
See `PolymerElements/paper-input` for more API docs.
@element hipaa-password-input
@demo demo/index.html
-->
<dom-module id="hipaa-password-input">
<template>
<style>
:host {
display: block;
margin-top: 16px;
width: 100%;
--paper-input-error: {
white-space: normal;
}
}
</style>
<paper-input id="password" label="[[label]]" type="[[type]]" value="{{value}}"
invalid="{{invalid}}" required="[[required]]" auto-validate="[[autoValidate]]"
pattern="[[pattern]]" autofocus$="[[autofocus]]" error-message="[[errorMessage]]">
<paper-icon-button suffix icon="hipaa-password-icons:vpn-key" title="Password"></paper-icon-button>
<template is="dom-if" if="[[errorMessage]]">
<paper-input-error>[[errorMessage]]</paper-input-error>
</template>
</paper-input>
</template>
<script>
Polymer({ // jshint ignore: line
is: 'hipaa-password-input',
properties: {
label: {
type: String,
value: 'Password'
},
errorMessage: {
type: String,
value: "Password should have at least 8 characters with at least one number, one lowercase, one uppercase letter, one special char(~!@#$%^*&;?.+_)"
},
pattern: {
type: String,
value: '^(?=.*[0-9])(?=.*[~!@#$%^*&;?.+_])(?=.*[a-z])(?=.*[A-Z]).{8,}$'
},
type: {
type: String,
value: 'password'
},
value: {
type: String,
notify: true
},
invalid: {
type: Boolean,
value: false,
notify: true
},
required: {
type: Boolean,
value: false
},
autoValidate: {
type: Boolean,
value: false
},
autofocus: {
type: Boolean
},
},
validate: function() {
return this.$.password.validate();
},
});
</script>
</dom-module>