safely configure and test payzen keys

app/controllers/api/payzen_controller.rb

@@ -11,7 +11,8 @@ class API::PayzenController < API::ApiController
     client = PayZen::Charge.new(base_url: params[:base_url], username: params[:username], password: params[:password])
     res = client.sdk_test(str)
 
-    puts res
+    @status = (res['answer']['value'] == str)
-    @status = res&.answer&.value == str
+  rescue SocketError
+    @status = false
   end
 end

app/frontend/src/javascript/components/fab-input.tsx

@@ -8,7 +8,7 @@ import { debounce as _debounce } from 'lodash';
 interface FabInputProps {
   id: string,
   onChange?: (value: any) => void,
-  value: any,
+  defaultValue: any,
   icon?: ReactNode,
   addOn?: ReactNode,
   addOnClassName?: string,
@@ -19,15 +19,15 @@ interface FabInputProps {
   type?: 'text' | 'date' | 'password' | 'url' | 'time' | 'tel' | 'search' | 'number' | 'month' | 'email' | 'datetime-local' | 'week',
 }
 
-export const FabInput: React.FC<FabInputProps> = ({ id, onChange, value, icon, className, disabled, type, required, debounce, addOn, addOnClassName }) => {
+export const FabInput: React.FC<FabInputProps> = ({ id, onChange, defaultValue, icon, className, disabled, type, required, debounce, addOn, addOnClassName }) => {
-  const [inputValue, setInputValue] = useState<any>(value);
+  const [inputValue, setInputValue] = useState<any>(defaultValue);
 
   useEffect(() => {
-    if (value !== inputValue) {
+    if (!inputValue) {
-      setInputValue(value);
+      setInputValue(defaultValue);
-      onChange(value);
+      onChange(defaultValue);
     }
-  }, [value]);
+  }, [defaultValue]);
 
   /**
    * Check if the current component was provided an icon to display

app/frontend/src/javascript/components/payzen-keys-form.tsx

@@ -96,6 +96,10 @@ const PayZenKeysFormComponent: React.FC<PayZenKeysFormProps> = ({ onValidKeys })
         setRestApiAddOnClassName('key-invalid');
       });
     }
+    if (!valid) {
+      setRestApiAddOn(<i className="fa fa-times" />);
+      setRestApiAddOnClassName('key-invalid');
+    }
   }
 
   /**
@@ -124,7 +128,7 @@ const PayZenKeysFormComponent: React.FC<PayZenKeysFormProps> = ({ onValidKeys })
             <label htmlFor="payzen_public_key">{ t('app.admin.invoices.payment.public_key') } *</label>
             <FabInput id="payzen_public_key"
                       icon={<i className="fas fa-info" />}
-                      value={settings.get(SettingName.PayZenPublicKey)}
+                      defaultValue={settings.get(SettingName.PayZenPublicKey)}
                       onChange={testPublicKey}
                       addOn={publicKeyAddOn}
                       addOnClassName={publicKeyAddOnClassName}
@@ -142,7 +146,7 @@ const PayZenKeysFormComponent: React.FC<PayZenKeysFormProps> = ({ onValidKeys })
             <FabInput id="payzen_username"
                       type="number"
                       icon={<i className="fas fa-user-alt" />}
-                      value={settings.get(SettingName.PayZenUsername)}
+                      defaultValue={settings.get(SettingName.PayZenUsername)}
                       onChange={setApiKey(SettingName.PayZenUsername)}
                       debounce={200}
                       required />
@@ -151,7 +155,7 @@ const PayZenKeysFormComponent: React.FC<PayZenKeysFormProps> = ({ onValidKeys })
             <label htmlFor="payzen_password">{ t('app.admin.invoices.payment.password') } *</label>
             <FabInput id="payzen_password"
                       icon={<i className="fas fa-key" />}
-                      value={settings.get(SettingName.PayZenPassword)}
+                      defaultValue={settings.get(SettingName.PayZenPassword)}
                       onChange={setApiKey(SettingName.PayZenPassword)}
                       debounce={200}
                       required />
@@ -161,7 +165,7 @@ const PayZenKeysFormComponent: React.FC<PayZenKeysFormProps> = ({ onValidKeys })
             <FabInput id="payzen_endpoint"
                       type="url"
                       icon={<i className="fas fa-link" />}
-                      value={settings.get(SettingName.PayZenEndpoint)}
+                      defaultValue={settings.get(SettingName.PayZenEndpoint)}
                       onChange={setApiKey(SettingName.PayZenEndpoint)}
                       debounce={200}
                       required />
@@ -170,7 +174,7 @@ const PayZenKeysFormComponent: React.FC<PayZenKeysFormProps> = ({ onValidKeys })
             <label htmlFor="payzen_hmac">{ t('app.admin.invoices.payment.hmac') } *</label>
             <FabInput id="payzen_hmac"
                       icon={<i className="fas fa-subscript" />}
-                      value={settings.get(SettingName.PayZenHmacKey)}
+                      defaultValue={settings.get(SettingName.PayZenHmacKey)}
                       onChange={setApiKey(SettingName.PayZenHmacKey)}
                       debounce={200}
                       required />

app/frontend/src/javascript/components/stripe-keys-form.tsx

@@ -106,7 +106,7 @@ const StripeKeysFormComponent: React.FC<StripeKeysFormProps> = ({ onValidKeys })
           <label htmlFor="stripe_public_key">{ t('app.admin.invoices.payment.public_key') } *</label>
           <FabInput id="stripe_public_key"
                     icon={<i className="fa fa-info" />}
-                    value={publicKey}
+                    defaultValue={publicKey}
                     onChange={testPublicKey}
                     addOn={publicKeyAddOn}
                     addOnClassName={publicKeyAddOnClassName}
@@ -117,7 +117,7 @@ const StripeKeysFormComponent: React.FC<StripeKeysFormProps> = ({ onValidKeys })
           <label htmlFor="stripe_secret_key">{ t('app.admin.invoices.payment.secret_key') } *</label>
           <FabInput id="stripe_secret_key"
                     icon={<i className="fa fa-key" />}
-                    value={secretKey}
+                    defaultValue={secretKey}
                     onChange={testSecretKey}
                     addOn={secretKeyAddOn}
                     addOnClassName={secretKeyAddOnClassName}

app/frontend/src/javascript/controllers/admin/invoices.js

@@ -27,6 +27,9 @@ Application.Controllers.controller('InvoicesController', ['$scope', '$state', 'I
     // fake stripe secret key
     const STRIPE_SK_HIDDEN = 'sk_test_hidden-hidden-hidden-hid';
 
+    // fake payzen password
+    const PAYZEN_PASSWD_HIDDEN = 'testpassword_HiDdEnHIddEnHIdDEnHiDdEnHIddEnHIdDEn';
+
     /* PUBLIC SCOPE */
 
     // default active tab
@@ -676,7 +679,8 @@ Application.Controllers.controller('InvoicesController', ['$scope', '$state', 'I
       resolveGatewaySaving(true);
 
       $scope.toggleSelectGatewayModal();
-
+      $scope.allSettings.payment_gateway = updatedSettings.get('payment_gateway').value;
+      if ($scope.allSettings.payment_gateway === 'stripe') {
         $scope.allSettings.stripe_public_key = updatedSettings.get('stripe_public_key').value;
         Setting.isPresent({ name: 'stripe_secret_key' }, function (res) {
           $scope.stripeSecretKey = (res.isPresent ? STRIPE_SK_HIDDEN : '');
@@ -684,6 +688,18 @@ Application.Controllers.controller('InvoicesController', ['$scope', '$state', 'I
         Payment.onlinePaymentStatus(function (res) {
           $scope.onlinePaymentStatus = res.status;
         });
+      }
+      if ($scope.allSettings.payment_gateway === 'stripe') {
+        $scope.allSettings.payzen_username = updatedSettings.get('payzen_username').value;
+        $scope.allSettings.payzen_endpoint = updatedSettings.get('payzen_endpoint').value;
+        $scope.allSettings.payzen_public_key = updatedSettings.get('payzen_public_key').value;
+        Setting.isPresent({ name: 'payzen_password' }, function (res) {
+          $scope.allSettings.payzen_password = (res.isPresent ? PAYZEN_PASSWD_HIDDEN : '');
+        });
+        Setting.isPresent({ name: 'payzen_hmac' }, function (res) {
+          $scope.allSettings.payzen_hmac = (res.isPresent ? PAYZEN_PASSWD_HIDDEN : '');
+        });
+      }
     };
 
     /**

app/views/api/payzen/sdk_test.json.jbuilder

@@ -1,3 +1,3 @@
 # frozen_string_literal: true
 
-json.success @status
+json.success !!@status # rubocop:disable Style/DoubleNegation

lib/pay_zen/client.rb

@@ -15,14 +15,14 @@ class PayZen::Client
 
   protected
 
-  def post(rel_url, payload, tmp_base_url: nil, tmp_username: nil, tmp_password: nil)
+  def post(rel_url, payload)
     require 'uri'
     require 'net/http'
     require 'json'
 
-    uri = URI.join(tmp_base_url || base_url, API_PATH, rel_url)
+    uri = URI(File.join(base_url, API_PATH, rel_url))
     headers = {
-      'Authorization' => authorization_header(tmp_username, tmp_password),
+      'Authorization' => authorization_header,
       'Content-Type' => 'application/json'
     }
 
@@ -31,12 +31,12 @@ class PayZen::Client
   end
 
   def base_url
-    Setting.get('payzen_endpoint')
+    @base_url || Setting.get('payzen_endpoint')
   end
 
-  def authorization_header(user, passwd)
+  def authorization_header
-    username = user || Setting.get('payzen_username')
+    username = @username || Setting.get('payzen_username')
-    password = passwd || Setting.get('payzen_password')
+    password = @password || Setting.get('payzen_password')
 
     credentials = Base64.strict_encode64("#{username}:#{password}")
     "Basic #{credentials}"