From 52b98c196d53d283e4e74b62bb12bc19828e8101 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maren=20S=C3=BCwer?= Date: Thu, 26 Jul 2018 15:29:21 +0200 Subject: [PATCH] add validation --- scm-ui/public/locales/en/users.json | 8 ++ scm-ui/src/components/forms/InputField.js | 16 +++- scm-ui/src/users/components/UserForm.js | 91 ++++++++++++++++++----- 3 files changed, 91 insertions(+), 24 deletions(-) diff --git a/scm-ui/public/locales/en/users.json b/scm-ui/public/locales/en/users.json index 2949b4fd2b..c07b9afc9f 100644 --- a/scm-ui/public/locales/en/users.json +++ b/scm-ui/public/locales/en/users.json @@ -38,5 +38,13 @@ "actions-label": "Actions", "information-label": "Information", "back-label": "Back" + }, + "validation": { + "mail-invalid": "This email is invalid", + "name-invalid": "This name is invalid", + "displayname-invalid": "This displayname is invalid", + "password-invalid": "Password has to be at least six characters", + "passwordValidation-invalid": "Passwords have to be the same", + "validatePassword": "Please validate password here" } } diff --git a/scm-ui/src/components/forms/InputField.js b/scm-ui/src/components/forms/InputField.js index 0bf44e1bdc..8d7e60e23f 100644 --- a/scm-ui/src/components/forms/InputField.js +++ b/scm-ui/src/components/forms/InputField.js @@ -1,5 +1,6 @@ //@flow import React from "react"; +import classNames from "classnames"; type Props = { label?: string, @@ -7,7 +8,9 @@ type Props = { value?: string, type?: string, autofocus?: boolean, - onChange: string => void + onChange: string => void, + validationError: boolean, + errorMessage: string }; class InputField extends React.Component { @@ -37,8 +40,9 @@ class InputField extends React.Component { }; render() { - const { type, placeholder, value } = this.props; - + const { type, placeholder, value, validationError, errorMessage } = this.props; + const errorView = validationError ? "is-danger" : ""; + const helper = validationError ?

{errorMessage}

: ""; return (
{this.renderLabel()} @@ -47,13 +51,17 @@ class InputField extends React.Component { ref={input => { this.field = input; }} - className="input" + className={ classNames( + "input", + errorView + )} type={type} placeholder={placeholder} value={value} onChange={this.handleInput} />
+ {helper} ); } diff --git a/scm-ui/src/users/components/UserForm.js b/scm-ui/src/users/components/UserForm.js index 54c5e04dde..15553a2b3a 100644 --- a/scm-ui/src/users/components/UserForm.js +++ b/scm-ui/src/users/components/UserForm.js @@ -11,33 +11,54 @@ type Props = { t: string => string }; -class UserForm extends React.Component { +type State = { + user: User, + mailValidationError: boolean, + nameValidationError: boolean, + displayNameValidationError: boolean, + passwordValidationError: boolean, + validatePasswordError: boolean, + validatePassword: string +}; + + +class UserForm extends React.Component { constructor(props: Props) { super(props); + this.state = { - name: "", - displayName: "", - mail: "", - password: "", - admin: false, - active: false, - _links: {} + user: { + name: "", + displayName: "", + mail: "", + password: "", + admin: false, + active: false, + _links: {} + }, + mailValidationError: false, + displayNameValidationError: false, + nameValidationError: false, + passwordValidationError: false, + validatePasswordError: false, + validatePassword: "" }; } componentDidMount() { - this.setState({ ...this.props.user }); + this.setState({ user: {...this.props.user} }); } submit = (event: Event) => { event.preventDefault(); - this.props.submitForm(this.state); + this.props.submitForm(this.state.user); }; render() { const { t } = this.props; - const user = this.state; - + const user = this.state.user; + const ButtonClickable = (this.state.validatePasswordError || this.state.nameValidationError || this.state.mailValidationError || this.state.validatePasswordError + || this.state.displayNameValidationError || user.name === undefined|| user.displayName === undefined); let nameField = null; if (!this.props.user) { nameField = ( @@ -45,6 +66,8 @@ class UserForm extends React.Component { label={t("user.name")} onChange={this.handleUsernameChange} value={user ? user.name : ""} + validationError= {this.state.nameValidationError} + errorMessage= {t("validation.name-invalid")} /> ); } @@ -55,17 +78,31 @@ class UserForm extends React.Component { label={t("user.displayName")} onChange={this.handleDisplayNameChange} value={user ? user.displayName : ""} + validationError={this.state.displayNameValidationError} + errorMessage={t("validation.displayname-invalid")} /> + { onChange={this.handleActiveChange} checked={user ? user.active : false} /> - + ); } + handleUsernameChange = (name: string) => { - this.setState({ name }); + const REGEX_NAME = /^[^ ][A-z0-9\\.\-_@ ]*[^ ]$/; + this.setState( {nameValidationError: !REGEX_NAME.test(name), user : {...this.state.user, name} } ); }; - handleDisplayNameChange = (displayName: string) => { - this.setState({ displayName }); + handleDisplayNameChange = (displayName: string) => { + const REGEX_NAME = /^[^ ][A-z0-9\\.\-_@ ]*[^ ]$/; + this.setState({displayNameValidationError: !REGEX_NAME.test(displayName), user : {...this.state.user, displayName} } ); }; handleEmailChange = (mail: string) => { - this.setState({ mail }); + const REGEX_MAIL = /^[A-z0-9][\w.-]*@[A-z0-9][\w\-\\.]*\.[A-z0-9][A-z0-9-]+$/; + this.setState( {mailValidationError: !REGEX_MAIL.test(mail), user : {...this.state.user, mail} } ); }; handlePasswordChange = (password: string) => { - this.setState({ password }); + const validatePasswordError = !this.checkPasswords(password, this.state.validatePassword); + this.setState( {validatePasswordError: (password.length < 6) || (password.length > 32), passwordValidationError: validatePasswordError, user : {...this.state.user, password} } ); }; + handlePasswordValidationChange = (validatePassword: string) => { + const validatePasswordError = this.checkPasswords(this.state.user.password, validatePassword) + this.setState({ validatePassword, passwordValidationError: !validatePasswordError }); + }; + + checkPasswords = (password1: string, password2: string) => { + return (password1 === password2); + } + handleAdminChange = (admin: boolean) => { - this.setState({ admin }); + this.setState({ user : {...this.state.user, admin} }); }; handleActiveChange = (active: boolean) => { - this.setState({ active }); + this.setState({ user : {...this.state.user, active} }); }; }