frontend user input handling
This commit is contained in:
@@ -7,11 +7,16 @@ import LaunchRequest from './components/LaunchRequest';
|
|||||||
import Contact from './components/Contact';
|
import Contact from './components/Contact';
|
||||||
import Popup from 'react-popup';
|
import Popup from 'react-popup';
|
||||||
import {getSkill, updateSkill} from './lib/api';
|
import {getSkill, updateSkill} from './lib/api';
|
||||||
|
import {isEmailValid} from './lib/helpers';
|
||||||
import {
|
import {
|
||||||
NEW_INTENT_SELECTED_INDEX,
|
NEW_INTENT_SELECTED_INDEX,
|
||||||
LAUNCH_REQUEST_SELECTED_INDEX,
|
LAUNCH_REQUEST_SELECTED_INDEX,
|
||||||
CONTACT_SELECTED_INDEX,
|
CONTACT_SELECTED_INDEX,
|
||||||
RESULT_CODES,
|
RESULT_CODES,
|
||||||
|
INVOCATION_NAME_MIN_LENGTH,
|
||||||
|
INTENT_NAME_MIN_LENGTH,
|
||||||
|
QUESTION_MIN_LENGTH,
|
||||||
|
ANSWER_MIN_LENGTH,
|
||||||
} from './config/constants';
|
} from './config/constants';
|
||||||
|
|
||||||
class App extends Component {
|
class App extends Component {
|
||||||
@@ -144,6 +149,12 @@ class App extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
handleSaveLaunchRequestClick (name, answer) {
|
handleSaveLaunchRequestClick (name, answer) {
|
||||||
|
|
||||||
|
if (name.length < INVOCATION_NAME_MIN_LENGTH){
|
||||||
|
Popup.alert ('Invocation name should be at least 2 characters long');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
this.setState ({
|
this.setState ({
|
||||||
waiting: true,
|
waiting: true,
|
||||||
invocationName: name,
|
invocationName: name,
|
||||||
@@ -162,17 +173,21 @@ class App extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
handleSaveEmailClick (email) {
|
handleSaveEmailClick (email) {
|
||||||
this.setState ({waiting: true});
|
if (isEmailValid(email)){
|
||||||
this.sendSkill (
|
this.setState ({waiting: true});
|
||||||
this.state.allIntents,
|
this.sendSkill (
|
||||||
true,
|
this.state.allIntents,
|
||||||
{contactEmail: email, waiting: false},
|
true,
|
||||||
{waiting: false},
|
{contactEmail: email, waiting: false},
|
||||||
this.state.invocationName,
|
{waiting: false},
|
||||||
this.state.invocationAnswer,
|
this.state.invocationName,
|
||||||
email,
|
this.state.invocationAnswer,
|
||||||
false
|
email,
|
||||||
);
|
false
|
||||||
|
);
|
||||||
|
}else{
|
||||||
|
Popup.alert ('Please enter valid email');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDeleteIntentClick (selectedIntent) {
|
handleDeleteIntentClick (selectedIntent) {
|
||||||
@@ -215,7 +230,46 @@ class App extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
handleSaveIntentClick (selectedIntent) {
|
handleSaveIntentClick (selectedIntent) {
|
||||||
console.log("Save intent");
|
|
||||||
|
if (selectedIntent.intentName.length < INTENT_NAME_MIN_LENGTH){
|
||||||
|
Popup.alert ('Question name should have at least 2 characters');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedIntent.answer.length < ANSWER_MIN_LENGTH){
|
||||||
|
Popup.alert('Answer should have at least 2 characters');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for(let i=0;i<selectedIntent.questions.length;i++){
|
||||||
|
if (selectedIntent.questions[i].length < QUESTION_MIN_LENGTH){
|
||||||
|
Popup.alert('Question variant should have at least 2 characters');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Check for same question variants and same question name in other intents
|
||||||
|
|
||||||
|
for (let i=0;i<this.state.allIntents.length;i++){
|
||||||
|
if (i!==this.state.selectedIndex){
|
||||||
|
if (selectedIntent.intentName === this.state.allIntents[i].intentName){
|
||||||
|
Popup.alert('Question name already exists');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for(let j=0;j<selectedIntent.questions.length;j++){
|
||||||
|
for (let k=0;k<this.state.allIntents[i].questions.length;k++){
|
||||||
|
if (selectedIntent.questions[j] === this.state.allIntents[i].questions[k]){
|
||||||
|
Popup.alert('Question variant already exists (in question :' + this.state.allIntents[i].intentName + ')');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let newAllIntentsJSON = JSON.stringify (this.state.allIntents);
|
let newAllIntentsJSON = JSON.stringify (this.state.allIntents);
|
||||||
let newAllIntents = JSON.parse (newAllIntentsJSON);
|
let newAllIntents = JSON.parse (newAllIntentsJSON);
|
||||||
|
|
||||||
|
|||||||
@@ -103,33 +103,30 @@ class IntentDetails extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
handleQuestionEdit(e,index){
|
handleQuestionEdit(e,index){
|
||||||
if (e.length === QUESTION_MAX_LENGTH) return;
|
if (e.length === QUESTION_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
|
||||||
let newIntent = this.state.intent;
|
let newIntent = this.state.intent;
|
||||||
newIntent.questions[index] = e;
|
newIntent.questions[index] = e;
|
||||||
this.setState({intent: newIntent});
|
this.setState({intent: newIntent});
|
||||||
}
|
}
|
||||||
|
|
||||||
handleIntentExplanationEdit(e,index){
|
handleIntentExplanationEdit(e,index){
|
||||||
if (e.length === INTENT_EXPLANATION_MAX_LENGTH) return;
|
if (e.length === INTENT_EXPLANATION_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
|
||||||
let newIntent = this.state.intent;
|
let newIntent = this.state.intent;
|
||||||
newIntent.intentExplanation = e;
|
newIntent.intentExplanation = e;
|
||||||
this.setState({intent: newIntent});
|
this.setState({intent: newIntent});
|
||||||
}
|
}
|
||||||
|
|
||||||
handleAnswerEdit(e){
|
handleAnswerEdit(e){
|
||||||
if (e.length === ANSWER_MAX_LENGTH) return;
|
if (e.length === ANSWER_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
|
||||||
let newIntent = this.state.intent;
|
let newIntent = this.state.intent;
|
||||||
newIntent.answer = e;
|
newIntent.answer = e;
|
||||||
this.setState({intent: newIntent});
|
this.setState({intent: newIntent});
|
||||||
}
|
}
|
||||||
|
|
||||||
handleIntentNameEdit(e){
|
handleIntentNameEdit(e){
|
||||||
if (e.length === INTENT_NAME_MAX_LENGTH) return;
|
if (e.length === INTENT_NAME_MAX_LENGTH || !(/^[a-z]*$/i.test(e))) return;
|
||||||
let newIntent = this.state.intent;
|
let newIntent = this.state.intent;
|
||||||
//Allow question name with only letters, and with one character minimum
|
newIntent.intentName = e;
|
||||||
if (/^[a-z]*$/i.test(e)){
|
|
||||||
newIntent.intentName = e;
|
|
||||||
}
|
|
||||||
this.setState({intent: newIntent});
|
this.setState({intent: newIntent});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -52,12 +52,12 @@ class LaunchRequest extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
handleNameEdit(e){
|
handleNameEdit(e){
|
||||||
if (e.length === INVOCATION_NAME_MAX_LENGTH) return;
|
if (e.length === INVOCATION_NAME_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
|
||||||
this.setState({invocationName: e});
|
this.setState({invocationName: e});
|
||||||
}
|
}
|
||||||
|
|
||||||
handleAnswerEdit(e){
|
handleAnswerEdit(e){
|
||||||
if (e.length === INVOCATION_ANSWER_MAX_LENGTH) return;
|
if (e.length === INVOCATION_ANSWER_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
|
||||||
this.setState({invocationAnswer: e});
|
this.setState({invocationAnswer: e});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,12 +1,19 @@
|
|||||||
export const INTENT_NAME_MAX_LENGTH = 30;
|
|
||||||
export const INTENT_EXPLANATION_MAX_LENGTH = 70;
|
export const INTENT_EXPLANATION_MAX_LENGTH = 70;
|
||||||
|
|
||||||
|
export const INTENT_NAME_MAX_LENGTH = 30;
|
||||||
|
export const INTENT_NAME_MIN_LENGTH = 2;
|
||||||
|
|
||||||
export const QUESTION_MAX_LENGTH = 150;
|
export const QUESTION_MAX_LENGTH = 150;
|
||||||
|
export const QUESTION_MIN_LENGTH = 2;
|
||||||
|
|
||||||
export const ANSWER_MAX_LENGTH = 150;
|
export const ANSWER_MAX_LENGTH = 150;
|
||||||
|
export const ANSWER_MIN_LENGTH = 2;
|
||||||
|
|
||||||
export const INTENT_TITLE_MAX_LENGTH = 20;
|
export const INTENT_TITLE_MAX_LENGTH = 20;
|
||||||
export const INTENT_TITLE_TOOLTIP_DELAY = 700;
|
export const INTENT_TITLE_TOOLTIP_DELAY = 700;
|
||||||
|
|
||||||
export const INVOCATION_NAME_MAX_LENGTH = 15;
|
export const INVOCATION_NAME_MAX_LENGTH = 50;
|
||||||
|
export const INVOCATION_NAME_MIN_LENGTH = 2;
|
||||||
export const INVOCATION_ANSWER_MAX_LENGTH = 100;
|
export const INVOCATION_ANSWER_MAX_LENGTH = 100;
|
||||||
|
|
||||||
export const EMAIL_MAX_LENGTH = 100;
|
export const EMAIL_MAX_LENGTH = 100;
|
||||||
|
|||||||
5
web/src/lib/helpers.js
Normal file
5
web/src/lib/helpers.js
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
export const isEmailValid = email => {
|
||||||
|
let validEmailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||||
|
|
||||||
|
return validEmailRegex.test (email);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user