[feature] Add phone number to sign up form #83

client/components/registration/index.css

@@ -50,7 +50,7 @@
   color: #000;
   text-transform: capitalize;
 }
-.owisp-registration-input {
+.owisp-registration-input, .form-control {
   height: 33px;
   line-height: 40px;
   padding: 0 8px;
@@ -64,6 +64,7 @@
   font-size: 14px;
   width: 100%;
 }
+.form-control { width: 100% !important}
 .owisp-registration-input:focus {
   border-color: #666666;
 }

client/components/registration/index.js

@@ -6,6 +6,7 @@ import Component from "./registration";
 const mapStateToProps = state => {
   return {
     registration: state.organization.configuration.components.registration_form,
+    settings: state.organization.configuration.settings,
     privacyPolicy: state.organization.configuration.privacy_policy,
     termsAndConditions: state.organization.configuration.terms_and_conditions,
     language: state.language,

client/components/registration/registration.js

@@ -8,6 +8,8 @@ import React from "react";
 import { Link, Route } from "react-router-dom";
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import PhoneInput from 'react-phone-input-2';
+import 'react-phone-input-2/lib/style.css';
 import LoadingContext from "../../utils/loading-context";
 
 import { mainToastId, passwordConfirmError, registerApiUrl, registerError, registerSuccess } from "../../constants";
@@ -22,6 +24,7 @@ export default class Registration extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      phone_number: "",
       email: "",
       password1: "",
       password2: "",
@@ -39,9 +42,9 @@ export default class Registration extends React.Component {
   handleSubmit(event) {
     const { setLoading } = this.context;
     event.preventDefault();
-    const { registration, orgSlug, authenticate } = this.props;
+    const { registration, orgSlug, authenticate, settings } = this.props;
     const { input_fields } = registration;
-    const { email, password1, password2, errors } = this.state;
+    const { phone_number, email, password1, password2, errors } = this.state;
     if (input_fields.password_confirm) {
       if (password1 !== password2) {
         this.setState({
@@ -54,23 +57,30 @@ export default class Registration extends React.Component {
     }
     this.setState({ errors: { ...errors, password2: null } });
     const url = registerApiUrl.replace("{orgSlug}", orgSlug);
+    // prepare post data
+    const postData = {
+      email,
+      "username": email,
+      password1,
+      password2,
+    };
+    // add phone_number if SMS verification is enabled
+    if (settings && settings.sms_verification) {
+      postData.phone_number = phone_number;
+    }
     setLoading(true);
     return axios({
       method: "post",
       headers: {
         "content-type": "application/x-www-form-urlencoded",
       },
       url,
-      data: qs.stringify({
-        email,
-        "username": email,
-        password1,
-        password2,
-      }),
+      data: qs.stringify(postData),
     })
       .then(() => {
         this.setState({
           errors: {},
+          phone_number: "",
           email: "",
           password1: "",
           password2: "",
@@ -91,6 +101,7 @@ export default class Registration extends React.Component {
         this.setState({
           errors: {
             ...errors,
+            ...(data.phone_number ? { phone_number: data.phone_number } : null),
             ...(data.email ? { email: data.email.toString() } : { email: "" }),
             ...(data.password1
               ? { password1: data.password1.toString() }
@@ -106,14 +117,15 @@ export default class Registration extends React.Component {
   render() {
     const {
       registration,
+      settings,
       language,
       termsAndConditions,
       privacyPolicy,
       orgSlug,
       match,
     } = this.props;
     const { buttons, additional_info_text, input_fields, links } = registration;
-    const { email, password1, password2, errors, success } = this.state;
+    const { phone_number, email, password1, password2, errors, success } = this.state;
     return (
       <>
         <div className="owisp-registration-container">
@@ -132,6 +144,48 @@ export default class Registration extends React.Component {
                   </div>
                 )}
 
+                {settings && settings.sms_verification && input_fields.phone_number ? (
+                  <>
+                    <div className="owisp-registration-label owisp-registration-label-phone-number">
+                      <label
+                        className="owisp-registration-label-text owisp-registration-label-text-phone-number"
+                        htmlFor="owisp-registration-phone-number"
+                      >
+                        {getText(input_fields.phone_number.label, language)}
+                      </label>
+
+                      {errors.phone_number && (
+                        <div className="owisp-registration-error owisp-registration-error-phone-number">
+                          <span className="owisp-registration-error-icon">!</span>
+                          <span className="owisp-registration-error-text owisp-registration-error-text-phone-number">
+                            {errors.phone_number}
+                          </span>
+                        </div>
+                      )}
+                      <PhoneInput
+                        name="phone_number"
+                        country={input_fields.phone_number.country}
+                        onlyCountries={input_fields.phone_number.only_countries || []}
+                        preferredCountries={input_fields.phone_number.preferred_countries || []}
+                        excludeCountries={input_fields.phone_number.exclude_countries || []}
+                        value={phone_number}
+                        onChange={value => this.setState({phone_number: `+${value}`})}
+                        placeholder={getText(
+                          input_fields.phone_number.placeholder,
+                          language,
+                        )}
+                        enableSearch={Boolean(input_fields.phone_number.enable_search)}
+                        inputProps={{
+                          name: "phone_number",
+                          id: "owisp-registration-phone-number",
+                          className: `form-control owisp-registration-input owisp-registration-input-phone-number ${errors.email ? "error" : ""}`,
+                          required: true,
+                        }}
+                      />
+                    </div>
+                  </>
+                ) : null}
+
                 {input_fields.email ? (
                   <>
                     <label
@@ -141,6 +195,14 @@ export default class Registration extends React.Component {
                       <div className="owisp-registration-label-text owisp-registration-label-text-email">
                         {getText(input_fields.email.label, language)}
                       </div>
+                      {errors.email && (
+                        <div className="owisp-registration-error owisp-registration-error-email">
+                          <span className="owisp-registration-error-icon">!</span>
+                          <span className="owisp-registration-error-text owisp-registration-error-text-email">
+                            {errors.email}
+                          </span>
+                        </div>
+                      )}
                       <input
                         className={`owisp-registration-input owisp-registration-input-email ${
                           errors.email ? "error" : ""
@@ -170,14 +232,7 @@ export default class Registration extends React.Component {
                         }
                       />
                     </label>
-                    {errors.email && (
-                      <div className="owisp-registration-error owisp-registration-error-email">
-                        <span className="owisp-registration-error-icon">!</span>
-                        <span className="owisp-registration-error-text owisp-registration-error-text-email">
-                          {errors.email}
-                        </span>
-                      </div>
-                    )}
+
                   </>
                 ) : null}
 
@@ -349,6 +404,9 @@ export default class Registration extends React.Component {
 }
 Registration.contextType = LoadingContext;
 Registration.propTypes = {
+  settings: PropTypes.shape({
+    sms_verification: PropTypes.bool
+  }).isRequired,
   registration: PropTypes.shape({
     header: PropTypes.object,
     buttons: PropTypes.shape({
@@ -376,6 +434,15 @@ Registration.propTypes = {
         pattern: PropTypes.string,
         pattern_description: PropTypes.object
       }),
+      phone_number: PropTypes.shape({
+        label: PropTypes.object,
+        placeholder: PropTypes.object,
+        country: PropTypes.string.isRequired,
+        only_countries: PropTypes.array,
+        preferred_countries: PropTypes.array,
+        exclude_countries: PropTypes.array,
+        enable_search: PropTypes.bool
+      })
     }),
     additional_info_text: PropTypes.object,
     links: PropTypes.object,

client/test-config.json

@@ -3,16 +3,25 @@
     "name": "Default",
     "slug": "default",
     "default_language": "en",
-    "auto_login": true
+    "auto_login": true,
+    "settings": {
+      "sms_verification": false
+    }
   },
   {
     "name": "test org 1",
     "slug": "test-org-1",
     "default_language": "it",
-    "auto_login": false
+    "auto_login": false,
+    "settings": {
+      "sms_verification": false
+    }
   },
   {
     "name": "test org 2",
-    "slug": "test-org-2"
+    "slug": "test-org-2",
+    "settings": {
+      "sms_verification": false
+    }
   }
 ]

config/setup.js

@@ -100,13 +100,15 @@ fs.readdirSync(configDir).forEach(file => {
       const clientConfig = {
         name: config.name,
         slug: config.slug,
+        settings: config.settings,
         ...config.client,
       };
 
       // extract server config from object
       const serverConfig = {
         name: config.name,
         slug: config.slug,
+        settings: config.settings,
         ...config.server,
       };
 

internals/generators/organization/config.yml.hbs

@@ -1,6 +1,8 @@
 ---
 name: "{{name}}"
 slug: "{{slug}}"
+settings:
+  sms_verification: {{sms_verification}}
 
 # configuration variables for the server app
 server:

internals/generators/organization/index.js

@@ -38,6 +38,12 @@ module.exports = {
         return "The organization uuid is required";
       },
     },
+    {
+      type: "confirm",
+      name: "sms_verification",
+      message: "Does this organization require SMS verification for its users?",
+      default: false,
+    },
     {
       type: "input",
       name: "secret_key",

package.json

@@ -25,6 +25,7 @@
     "react-cookie": "^4.0.3",
     "react-dom": "^16.13.1",
     "react-helmet": "^5.2.1",
+    "react-phone-input-2": "^2.13.8",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
     "react-toastify": "^5.5.0",

server/controllers/registration-controller.js

@@ -13,27 +13,30 @@ const registration = (req, res) => {
     if (org.slug === reqOrg) {
       // merge default config and custom config
       const conf = merge(defaultConfig, org);
-      const {host} = conf;
+      const {host, settings} = conf;
       let registerUrl = conf.proxy_urls.registration;
       // replacing org_slug param with the slug
       registerUrl = registerUrl.replace("{org_slug}", org.slug);
       const timeout = conf.timeout * 1000;
       const {username, email, password1, password2} = req.body;
-
-      // make AJAX request
+      const postData = {
+        email,
+        username,
+        password1,
+        password2,
+      };
+      if (settings && settings.sms_verification) {
+        postData.phone_number = req.body.phone_number;
+      }
+      // send request
       axios({
         method: "post",
         headers: {
           "content-type": "application/x-www-form-urlencoded",
         },
         url: `${host}${registerUrl}/`,
         timeout,
-        data: qs.stringify({
-          email,
-          username,
-          password1,
-          password2,
-        }),
+        data: qs.stringify(postData),
       })
         .then(response => {
           const authTokenCookie = cookie.sign(