1+ /*
2+ * PasswordRequirementsComponent.tsx - Display password requirements for a password input.
3+ * Copyright (C) 2024, Kieran Gordon
4+ *
5+ * This program is free software: you can redistribute it and/or modify
6+ * it under the terms of the GNU Affero General Public License as
7+ * published by the Free Software Foundation, either version 3 of the
8+ * License, or (at your option) any later version.
9+ *
10+ * This program is distributed in the hope that it will be useful,
11+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
12+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+ * GNU Affero General Public License for more details.
14+ *
15+ * You should have received a copy of the GNU Affero General Public License
16+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
17+ */
18+
19+ import React from 'react' ;
20+
21+ interface PasswordRequirementsProps {
22+ password : string ;
23+ }
24+
25+ const PasswordRequirementsComponent : React . FC < PasswordRequirementsProps > = ( { password } ) => {
26+ const requirements = [
27+ { regex : / .{ 8 , } / , label : 'At least 8 characters' } ,
28+ { regex : / [ A - Z ] / , label : 'At least 1 uppercase letter' } ,
29+ { regex : / [ a - z ] / , label : 'At least 1 lowercase letter' } ,
30+ { regex : / [ 0 - 9 ] .* [ 0 - 9 ] / , label : 'At least 2 digits' } ,
31+ { regex : / [ ! @ # $ % ^ & * ( ) , . ? " : { } | < > ] / , label : 'At least 1 symbol' } ,
32+ { regex : / ^ \S * $ / , label : 'No spaces' } ,
33+ ] ;
34+
35+ return (
36+ < ul >
37+ { requirements . map ( ( requirement , index ) => (
38+ < li
39+ key = { index }
40+ style = { {
41+ color : requirement . regex . test ( password ) ? 'green' : 'red' ,
42+ } }
43+ >
44+ { requirement . label }
45+ </ li >
46+ ) ) }
47+ </ ul >
48+ ) ;
49+ } ;
50+
51+ export default PasswordRequirementsComponent ;
0 commit comments