-
Notifications
You must be signed in to change notification settings - Fork 14
/
PasswordInput.tsx
127 lines (117 loc) · 4.98 KB
/
PasswordInput.tsx
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
117
118
119
120
121
122
123
124
125
126
127
import React, { useRef, useState, useEffect } from "react";
import styled from "styled-components";
import DxcTextInput from "../text-input/TextInput";
import useTranslatedLabels from "../useTranslatedLabels";
import PasswordInputPropsType, { RefType } from "./types";
const DxcPasswordInput = React.forwardRef<RefType, PasswordInputPropsType>(
(
{
label,
name = "",
value,
helperText,
clearable = false,
onChange,
onBlur,
error,
pattern,
minLength,
maxLength,
autocomplete = "off",
margin,
size = "medium",
tabIndex = 0,
},
ref
) => {
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
const inputRef = useRef(null);
const translatedLabels = useTranslatedLabels();
const setInputType = (type) => {
inputRef?.current?.children[label && helperText ? 2 : label || helperText ? 1 : 0]?.children[0].setAttribute(
"type",
type
);
};
const setAriaAttributes = (ariaExpanded, ariaLabel) => {
const inputIndex = label && helperText ? 2 : label || helperText ? 1 : 0;
if (error && clearable && value) {
inputRef?.current?.children[inputIndex]?.children[3]?.setAttribute("aria-expanded", ariaExpanded);
inputRef?.current?.children[inputIndex]?.children[3]?.setAttribute("aria-label", ariaLabel);
} else if (error || (clearable && !value)) {
inputRef?.current?.children[inputIndex]?.children[2]?.setAttribute("aria-expanded", ariaExpanded);
inputRef?.current?.children[inputIndex]?.children[2]?.setAttribute("aria-label", ariaLabel);
} else {
inputRef?.current?.children[inputIndex]?.children[1]?.setAttribute("aria-expanded", ariaExpanded);
inputRef?.current?.children[inputIndex]?.children[1]?.setAttribute("aria-label", ariaLabel);
}
};
const getIconTitle = () => {
return isPasswordVisible
? translatedLabels.passwordInput.inputHidePasswordTitle
: translatedLabels.passwordInput.inputShowPasswordTitle;
};
useEffect(() => {
setAriaAttributes(false, translatedLabels.passwordInput.inputShowPasswordTitle);
if (isPasswordVisible) {
setInputType("text");
setAriaAttributes(true, translatedLabels.passwordInput.inputHidePasswordTitle);
} else {
setInputType("password");
setAriaAttributes(false, translatedLabels.passwordInput.inputShowPasswordTitle);
}
}, [isPasswordVisible]);
const viewPassword = () => {
setInputType("text");
setIsPasswordVisible(true);
};
const hidePassword = () => {
setInputType("password");
setIsPasswordVisible(false);
};
const action = {
onClick: isPasswordVisible ? hidePassword : viewPassword,
icon: isPasswordVisible ? (
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
<path d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
<path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z" />
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z" />
</svg>
),
title: getIconTitle(),
};
return (
<PasswordInput ref={ref}>
<DxcTextInput
ref={inputRef}
label={label}
name={name}
value={value}
helperText={helperText}
action={action}
error={error}
clearable={clearable}
onChange={onChange}
onBlur={onBlur}
margin={margin}
size={size}
pattern={pattern}
minLength={minLength}
maxLength={maxLength}
autocomplete={autocomplete}
tabIndex={tabIndex}
/>
</PasswordInput>
);
}
);
const PasswordInput = styled.div`
& ::-ms-reveal {
display: none;
}
`;
export default DxcPasswordInput;