-
- ${field}
-
-
- ${info}
-
+ /**
+ * doc here
+ * @param {*} field
+ * @param {*} info
+ * @return {string}
+ */
+ renderFormRow(field, info) {
+ return html`
+
+
+ ${field}
- `;
- }
+
+ ${info}
+
+
+ `;
+ }
- setFieldState(fieldName, newState) {
- this.setState({
- form: {
- ...this.state.form,
- fields: {
- ...this.state.form.fields,
- [fieldName]: newState
- }
- }
- });
- }
+ /**
+ * doc here
+ * @param {*} fieldName
+ * @param {*} newState
+ */
+ setFieldState(fieldName, newState) {
+ this.setState({
+ form: {
+ ...this.state.form,
+ fields: {
+ ...this.state.form.fields,
+ [fieldName]: newState,
+ },
+ },
+ });
+ }
- getFieldState(fieldName) {
- const {
- form: {
- fields: {
- [fieldName]: fieldState
- }
- }
- } = this.state;
- return fieldState;
- }
+ /**
+ * doc here
+ * @param {*} fieldName
+ * @return {*}
+ */
+ getFieldState(fieldName) {
+ const {
+ form: {
+ fields: {
+ [fieldName]: fieldState,
+ },
+ },
+ } = this.state;
+ return fieldState;
+ }
- getFieldDefinition(fieldName) {
- const fieldDefinitions = {
- realname: {
- label: 'Real Name',
- isRequired: true,
- minLength: 2,
- maxLength: 100,
- rules: [
- {
- validate: async (value) => {
- if (/^\s+/.test(value)) {
- return {
- isValid: false,
- message: 'Cannot start with a space'
- };
- }
- return {
- isValid: true
- };
- }
- },
- {
- validate: async (value) => {
- if (/\s+$/.test(value)) {
- return {
- isValid: false,
- message: 'Cannot end with a space'
- };
- }
- return {
- isValid: true
- };
- }
- }
- ]
- },
- email: {
- label: 'Email',
- isRequired: true,
- minLength: 2,
- maxLength: 100,
- rules: [{
- validate: async (value) => {
- if (EMAIL_REGEXP.test(value)) {
- return {
- isValid: true
- };
- }
- return {
- isValid: false,
- message: 'Not a valid email address'
- };
- }
- }]
- },
- username: {
- label: 'KBase Username',
- isRequired: true,
- minLength: 2,
- maxLength: 100,
- rules: [
- {
- validate: async (value) => {
- if (/^[a-z0-9_]+$/.test(value)) {
- return {
- isValid: true
- };
- }
- return {
- isValid: false,
- message: 'A username may only contain the letters a-z (lower case), the digits 0-9, and _ (underscore).'
- };
- }
- },
- {
- validate: async (value) => {
- if (/^\d+/.test(value)) {
- return {
- isValid: false,
- message: 'A username may not begin with a number'
- };
- }
- return {
- isValid: true
- };
- }
- },
- {
- validate: async (value) => {
- if (/^_+/.test(value)) {
- return {
- isValid: false,
- message: 'A username may not start with the underscore character _'
- };
- }
- return {
- isValid: true
- };
- }
- },
- {
- validate: async (value) => {
- if (/\s/.test(value)) {
- return {
- isValid: false,
- message: 'A username may not contain spaces'
- };
- }
- return {
- isValid: true
- };
- }
- },
- ],
- remoteRuleMessage: 'Username is valid, check if available with KBase',
- remoteRules: [
- {
- validate: async (value) => {
- const auth2Client = new auth2.Auth2({
- baseUrl: this.props.runtime.config('services.auth.url')
- });
- try {
- const {availablename} = await auth2Client.loginUsernameSuggest(value);
- if (availablename === value) {
- return {
- isValid: true
- };
- }
- return {
- isValid: false,
- message: `This username is not available: a suggested available username is ${availablename}`
- };
- } catch (ex) {
- console.error('error looking up username in auth', ex);
- }
- }
- }
- ]
- },
- organization: {
- label: 'Organization',
- isRequired: true,
- minLength: 2,
- maxLength: 100,
- rules: []
- },
- department: {
- label: 'Department',
- isRequired: true,
- minLength: 2,
- maxLength: 100,
- rules: []
- },
- hearAbout: {
- label: 'How did you hear about us?',
- isRequired: true,
- availableValues: referralSources,
- rules: []
+ /**
+ * doc here
+ * @param {*} fieldName
+ * @return {*}
+ */
+ getFieldDefinition(fieldName) {
+ const fieldDefinitions = {
+ realname: {
+ label: 'Real Name',
+ isRequired: true,
+ minLength: 2,
+ maxLength: 100,
+ rules: [
+ {
+ validate: async (value) => {
+ if (/^\s+/.test(value)) {
+ return {
+ isValid: false,
+ message: 'Cannot start with a space',
+ };
}
- };
-
- return fieldDefinitions[fieldName];
- }
-
- validateField(value, fieldDefinition) {
- if (fieldDefinition.minLength) {
- if (value.length < fieldDefinition.minLength) {
- return {
- isValid: false,
- message: `"${fieldDefinition.label}" must have ${fieldDefinition.minLength} or more characters.`
- };
+ return {
+ isValid: true,
+ };
+ },
+ },
+ {
+ validate: async (value) => {
+ if (/\s+$/.test(value)) {
+ return {
+ isValid: false,
+ message: 'Cannot end with a space',
+ };
}
- }
-
- if (fieldDefinition.maxLength) {
- if (value.length > fieldDefinition.maxLength) {
- return {
- isValid: false,
- message: `"${fieldDefinition.label}" must have fewer than ${fieldDefinition.maxLength} characters.`
- };
+ return {
+ isValid: true,
+ };
+ },
+ },
+ ],
+ },
+ email: {
+ label: 'Email',
+ isRequired: true,
+ minLength: 2,
+ maxLength: 100,
+ rules: [{
+ validate: async (value) => {
+ if (EMAIL_REGEXP.test(value)) {
+ return {
+ isValid: true,
+ };
+ }
+ return {
+ isValid: false,
+ message: 'Not a valid email address',
+ };
+ },
+ }],
+ },
+ username: {
+ label: 'KBase Username',
+ isRequired: true,
+ minLength: 2,
+ maxLength: 100,
+ rules: [
+ {
+ validate: async (value) => {
+ if (/^[a-z0-9_]+$/.test(value)) {
+ return {
+ isValid: true,
+ };
}
- }
-
- return {
- isValid: true
- };
- }
-
- async evaluateField(fieldName, value) {
- // Apply rules.
- // Realname is required, has no character limit afaik, but let us impose
- // a default of 100 characters.
- const fieldState = this.getFieldState(fieldName);
- const fieldDefinition = this.getFieldDefinition(fieldName);
-
- if (typeof value === 'undefined') {
- value = fieldState.value;
- }
-
- const parsedValue = (() => {
- if (typeof value === 'string') {
- return value.trim();
+ return {
+ isValid: false,
+ message: 'A username may only contain the letters a-z (lower case), the digits 0-9, and _ (underscore).',
+ };
+ },
+ },
+ {
+ validate: async (value) => {
+ if (/^\d+/.test(value)) {
+ return {
+ isValid: false,
+ message: 'A username may not begin with a number',
+ };
}
- return value;
- })();
-
-
- if (fieldDefinition.isRequired) {
- if (value.length === 0) {
- return {
- value,
- isModified: true,
- status: 'REQUIRED_MISSING'
- };
+ return {
+ isValid: true,
+ };
+ },
+ },
+ {
+ validate: async (value) => {
+ if (/^_+/.test(value)) {
+ return {
+ isValid: false,
+ message: 'A username may not start with the underscore character _',
+ };
}
- }
-
- const {isValid, message} = this.validateField(parsedValue, fieldDefinition);
- if (!isValid) {
return {
- value,
- isModified: true,
- status: 'INVALID',
- validationMessage: message
+ isValid: true,
};
- }
-
- if ('rules' in fieldDefinition) {
- for (const rule of fieldDefinition.rules) {
- const {isValid, message} = await rule.validate(value);
- if (!isValid) {
- return {
- value,
- isModified: true,
- status: 'INVALID',
- validationMessage: message
- };
- }
+ },
+ },
+ {
+ validate: async (value) => {
+ if (/\s/.test(value)) {
+ return {
+ isValid: false,
+ message: 'A username may not contain spaces',
+ };
}
- }
-
- if ('remoteRules' in fieldDefinition) {
return {
- value,
- isModified: true,
- status: 'LOCAL_VALID',
- validationMessage: fieldDefinition.remoteRuleMessage
+ isValid: true,
};
- }
- return {
- value,
- isModified: true,
- status: 'VALID'
- };
- }
-
- async evaluateRemoteRules(fieldName) {
- if (!('remoteRules' in fieldDefinition)) {
- return;
- }
- // Apply remote rules.
- const fieldState = this.getFieldState(fieldName);
- const fieldDefinition = this.getFieldDefinition(fieldName);
-
- const value = fieldState.value;
-
- for (const rule of fieldDefinition.remoteRules) {
- const {isValid, message} = await rule.validate(value);
- if (!isValid) {
+ },
+ },
+ ],
+ remoteRuleMessage: 'Username is valid, check if available with KBase',
+ remoteRules: [
+ {
+ validate: async (value) => {
+ const auth2Client = new auth2.Auth2({
+ baseUrl: this.props.runtime.config('services.auth.url'),
+ });
+ try {
+ const {availablename} = await auth2Client.loginUsernameSuggest(value);
+ if (availablename === value) {
return {
- value,
- isModified: true,
- status: 'INVALID',
- validationMessage: message
+ isValid: true,
};
+ }
+ return {
+ isValid: false,
+ message: `This username is not available: a suggested available username is ${availablename}`,
+ };
+ } catch (ex) {
+ console.error('error looking up username in auth', ex);
}
- }
- return {
- value,
- isModified: true,
- status: 'VALID'
- };
+ },
+ },
+ ],
+ },
+ organization: {
+ label: 'Organization',
+ isRequired: true,
+ minLength: 2,
+ maxLength: 100,
+ rules: [],
+ },
+ department: {
+ label: 'Department',
+ isRequired: true,
+ minLength: 2,
+ maxLength: 100,
+ rules: [],
+ },
+ hearAbout: {
+ label: 'How did you hear about us?',
+ isRequired: true,
+ availableValues: referralSources,
+ rules: [],
+ },
+ };
+
+ return fieldDefinitions[fieldName];
+ }
+
+ /**
+ * doc here
+ * @param {*} value
+ * @param {*} fieldDefinition
+ * @return {*}
+ */
+ validateField(value, fieldDefinition) {
+ if (fieldDefinition.minLength) {
+ if (value.length < fieldDefinition.minLength) {
+ return {
+ isValid: false,
+ message: `"${fieldDefinition.label}" must have ${fieldDefinition.minLength} or more characters.`,
+ };
}
+ }
+
+ if (fieldDefinition.maxLength) {
+ if (value.length > fieldDefinition.maxLength) {
+ return {
+ isValid: false,
+ message: `"${fieldDefinition.label}" must have fewer than ${fieldDefinition.maxLength} characters.`,
+ };
+ }
+ }
- cancelUpdateQueue(fieldName) {
- if (!(fieldName in this.updateQueues)) {
- this.updateQueues[fieldName] = [];
- }
+ return {
+ isValid: true,
+ };
+ }
- for (const item of this.updateQueues[fieldName]) {
- item.cancel();
- }
- this.updateQueues[fieldName] = [];
+ /**
+ * doc here
+ * @param {*} fieldName
+ * @param {*} value
+ * @return {*}
+ */
+ async evaluateField(fieldName, value) {
+ // Apply rules.
+ // Realname is required, has no character limit afaik, but let us impose
+ // a default of 100 characters.
+ const fieldState = this.getFieldState(fieldName);
+ const fieldDefinition = this.getFieldDefinition(fieldName);
+
+ if (typeof value === 'undefined') {
+ value = fieldState.value;
+ }
+
+ const parsedValue = (() => {
+ if (typeof value === 'string') {
+ return value.trim();
}
+ return value;
+ })();
- async updateField(fieldName, value) {
- this.cancelUpdateQueue(fieldName);
- const evaluator = new FieldEvaluator({
- process: async () => {
- return this.evaluateField(fieldName, value);
- },
- updater: (fieldState) => {
- this.setFieldState(fieldName, fieldState);
- // remove from queues
- this.cancelUpdateQueue(fieldName);
- }
- });
- this.updateQueues[fieldName].push(evaluator);
- evaluator.run();
+ if (fieldDefinition.isRequired) {
+ if (value.length === 0) {
+ return {
+ value,
+ isModified: true,
+ status: 'REQUIRED_MISSING',
+ };
+ }
+ }
+
+ const {isValid, message} = this.validateField(parsedValue, fieldDefinition);
+ if (!isValid) {
+ return {
+ value,
+ isModified: true,
+ status: 'INVALID',
+ validationMessage: message,
+ };
+ }
+
+ if ('rules' in fieldDefinition) {
+ for (const rule of fieldDefinition.rules) {
+ const {isValid, message} = await rule.validate(value);
+ if (!isValid) {
+ return {
+ value,
+ isModified: true,
+ status: 'INVALID',
+ validationMessage: message,
+ };
+ }
+ }
+ }
+
+ if ('remoteRules' in fieldDefinition) {
+ return {
+ value,
+ isModified: true,
+ status: 'LOCAL_VALID',
+ validationMessage: fieldDefinition.remoteRuleMessage,
+ };
+ }
+ return {
+ value,
+ isModified: true,
+ status: 'VALID',
+ };
+ }
+
+ /**
+ * doc here
+ * @param {*} fieldName
+ * @return {*}
+ */
+ async evaluateRemoteRules(fieldName) {
+ if (!('remoteRules' in fieldDefinition)) {
+ return;
+ }
+ // Apply remote rules.
+ const fieldState = this.getFieldState(fieldName);
+ const fieldDefinition = this.getFieldDefinition(fieldName);
+
+ const value = fieldState.value;
+
+ for (const rule of fieldDefinition.remoteRules) {
+ const {isValid, message} = await rule.validate(value);
+ if (!isValid) {
+ return {
+ value,
+ isModified: true,
+ status: 'INVALID',
+ validationMessage: message,
+ };
}
+ }
+ return {
+ value,
+ isModified: true,
+ status: 'VALID',
+ };
+ }
- renderRealnameField() {
- const fieldState = this.state.form.fields.realname;
- const messageClass = (() => {
- switch (fieldState.status) {
- case 'VALID':
- return 'success';
- case 'LOCAL_VALID':
- return 'success';
- case 'INVALID':
- return 'danger';
- }
+ /**
+ * doc here
+ * @param {*} fieldName
+ */
+ cancelUpdateQueue(fieldName) {
+ if (!(fieldName in this.updateQueues)) {
+ this.updateQueues[fieldName] = [];
+ }
+
+ for (const item of this.updateQueues[fieldName]) {
+ item.cancel();
+ }
+ this.updateQueues[fieldName] = [];
+ }
+
+ /**
+ * doc here
+ * @param {*} fieldName
+ * @param {*} value
+ */
+ async updateField(fieldName, value) {
+ this.cancelUpdateQueue(fieldName);
+ const evaluator = new FieldEvaluator({
+ process: async () => {
+ return this.evaluateField(fieldName, value);
+ },
+ updater: (fieldState) => {
+ this.setFieldState(fieldName, fieldState);
+ // remove from queues
+ this.cancelUpdateQueue(fieldName);
+ },
+ });
+
+ this.updateQueues[fieldName].push(evaluator);
+ evaluator.run();
+ }
- })();
- const field = html`
+ /**
+ * doc here
+ * @return {*}
+ */
+ renderRealnameField() {
+ const fieldState = this.state.form.fields.realname;
+ const messageClass = (() => {
+ switch (fieldState.status) {
+ case 'VALID':
+ return 'success';
+ case 'LOCAL_VALID':
+ return 'success';
+ case 'INVALID':
+ return 'danger';
+ }
+ })();
+ const field = html`