Fixed http port and reset with save

client/src/__locales/en.json

@@ -238,6 +238,7 @@
     "encryption_subject": "Subject",
     "encryption_issuer": "Issuer",
     "encryption_hostnames": "Hostnames",
+    "encryption_reset": "Are you sure you want to reset encryption settings?",
     "topline_expiring_certificate": "Your SSL certificate is about to expire. Update <0>Encryption settings</0>.",
     "topline_expired_certificate": "Your SSL certificate is expired. Update <0>Encryption settings</0>.",
     "form_error_port_range": "Enter port value in the range of 80-65535",

client/src/actions/encryption.js

@@ -27,9 +27,10 @@ export const setTlsConfigRequest = createAction('SET_TLS_CONFIG_REQUEST');
 export const setTlsConfigFailure = createAction('SET_TLS_CONFIG_FAILURE');
 export const setTlsConfigSuccess = createAction('SET_TLS_CONFIG_SUCCESS');
 
-export const setTlsConfig = config => async (dispatch) => {
+export const setTlsConfig = config => async (dispatch, getState) => {
     dispatch(setTlsConfigRequest());
     try {
+        const { httpPort } = getState().dashboard;
         const values = { ...config };
         values.certificate_chain = btoa(values.certificate_chain);
         values.private_key = btoa(values.private_key);
@@ -41,7 +42,7 @@ export const setTlsConfig = config => async (dispatch) => {
         response.private_key = atob(response.private_key);
         dispatch(setTlsConfigSuccess(response));
         dispatch(addSuccessToast('encryption_config_saved'));
-        redirectToCurrentProtocol(response);
+        redirectToCurrentProtocol(response, httpPort);
     } catch (error) {
         dispatch(addErrorToast({ error }));
         dispatch(setTlsConfigFailure());

client/src/components/Settings/Encryption/Form.js

@@ -23,7 +23,7 @@ const validate = (values) => {
     return errors;
 };
 
-const clearFields = (change) => {
+const clearFields = (change, setTlsConfig, t) => {
     const fields = {
         private_key: '',
         certificate_chain: '',
@@ -33,7 +33,11 @@ const clearFields = (change) => {
         force_https: false,
         enabled: false,
     };
-    Object.keys(fields).forEach(field => change(field, fields[field]));
+    // eslint-disable-next-line no-alert
+    if (window.confirm(t('encryption_reset'))) {
+        Object.keys(fields).forEach(field => change(field, fields[field]));
+        setTlsConfig(fields);
+    }
 };
 
 let Form = (props) => {
@@ -58,6 +62,7 @@ let Form = (props) => {
         issuer,
         subject,
         warning_validation,
+        setTlsConfig,
     } = props;
 
     return (
@@ -303,7 +308,7 @@ let Form = (props) => {
                     type="button"
                     className="btn btn-secondary btn-standart"
                     disabled={submitting || processingConfig}
-                    onClick={() => clearFields(change)}
+                    onClick={() => clearFields(change, setTlsConfig, t)}
                 >
                     <Trans>reset_settings</Trans>
                 </button>
@@ -335,6 +340,7 @@ Form.propTypes = {
     issuer: PropTypes.string,
     subject: PropTypes.string,
     t: PropTypes.func.isRequired,
+    setTlsConfig: PropTypes.func.isRequired,
 };
 
 const selector = formValueSelector('encryptionForm');

client/src/components/Settings/Encryption/index.js

@@ -8,6 +8,10 @@ import Form from './Form';
 import Card from '../../ui/Card';
 
 class Encryption extends Component {
+    componentDidMount() {
+        this.props.validateTlsConfig(this.props.encryption);
+    }
+
     handleFormSubmit = (values) => {
         this.props.setTlsConfig(values);
     };
@@ -48,6 +52,7 @@ class Encryption extends Component {
                             }}
                             onSubmit={this.handleFormSubmit}
                             onChange={this.handleFormChange}
+                            setTlsConfig={this.props.setTlsConfig}
                             {...this.props.encryption}
                         />
                     </Card>

client/src/helpers/helpers.js

@@ -171,7 +171,7 @@ export const redirectCheck = (url) => {
     }, STOP_TIMEOUT);
 };
 
-export const redirectToCurrentProtocol = (values) => {
+export const redirectToCurrentProtocol = (values, httpPort = 80) => {
     const {
         protocol, hostname, hash, port,
     } = window.location;
@@ -183,6 +183,6 @@ export const redirectToCurrentProtocol = (values) => {
     } else if (protocol === 'https:' && enabled && port_https && port_https !== port) {
         redirectCheck(`https://${hostname}${httpsPort}/${hash}`);
     } else if (protocol === 'https:' && (!enabled || !port_https)) {
-        window.location.replace(`http://${hostname}/${hash}`);
+        window.location.replace(`http://${hostname}:${httpPort}/${hash}`);
     }
 };

client/src/reducers/index.js

@@ -53,6 +53,7 @@ const dashboard = handleActions({
             upstream_dns: upstreamDns,
             protection_enabled: protectionEnabled,
             language,
+            http_port: httpPort,
         } = payload;
         const newState = {
             ...state,
@@ -65,6 +66,7 @@ const dashboard = handleActions({
             upstreamDns: upstreamDns.join('\n'),
             protectionEnabled,
             language,
+            httpPort,
         };
         return newState;
     },
@@ -172,6 +174,7 @@ const dashboard = handleActions({
     upstreamDns: [],
     protectionEnabled: false,
     processingProtection: false,
+    httpPort: 80,
 });
 
 const queryLogs = handleActions({