Added topline component and fixed string interpolation

client/src/__locales/en.json

@@ -223,13 +223,14 @@
     "encryption_dot": "DNS-over-TLS port",
     "encryption_dot_desc": "If this port is configured, AdGuard Home will run a DNS-over-TLS server on this port.",
     "encryption_certificates": "Certificates",
-    "encryption_certificates_desc": "In order to use encryption, you need to provide a valid SSL certificates chain for your domain. You can get a free certificate on letsencrypt.org or you can buy it from one of the trusted Certificate Authorities.",
+    "encryption_certificates_desc": "In order to use encryption, you need to provide a valid SSL certificates chain for your domain. You can get a free certificate on <0>{{link}}</0> or you can buy it from one of the trusted Certificate Authorities.",
     "encryption_certificates_input": "Copy/paste your PEM-encoded cerificates here.",
     "encryption_status": "Status",
     "encryption_certificates_for": "Certificates for {{domains}}",
     "encryption_expire": "Expire on {{date}}",
     "encryption_key": "Private key",
     "encryption_key_input": "Copy/paste your PEM-encoded private key for your cerficate here.",
+    "topline_expiring_certificate": "Your SSL certificate is about to expire. Update <0>Encryption settings</0>.",
     "form_error_port_range": "Enter port value in the range of 80-65535",
     "form_error_equal": "Shouldn't be equal",
     "form_error_password": "Password mismatched"

client/src/actions/index.js

@@ -659,6 +659,9 @@ export const getTlsStatus = () => async (dispatch) => {
     dispatch(getTlsStatusRequest());
     try {
         const status = await apiClient.getTlsStatus();
+        status.certificate_chain = decodeURIComponent(status.certificate_chain);
+        status.private_key = decodeURIComponent(status.private_key);
+
         dispatch(getTlsStatusSuccess(status));
     } catch (error) {
         dispatch(addErrorToast({ error }));
@@ -673,7 +676,11 @@ export const setTlsConfigSuccess = createAction('SET_TLS_CONFIG_SUCCESS');
 export const setTlsConfig = config => async (dispatch) => {
     dispatch(setTlsConfigRequest());
     try {
-        await apiClient.setTlsConfig(config);
+        const values = { ...config };
+        values.certificate_chain = encodeURIComponent(values.certificate_chain);
+        values.private_key = encodeURIComponent(values.private_key);
+
+        await apiClient.setTlsConfig(values);
         dispatch(setTlsConfigSuccess(config));
         dispatch(addSuccessToast('encryption_config_saved'));
     } catch (error) {

client/src/components/App/index.js

@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import { HashRouter, Route } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import { Trans, withNamespaces } from 'react-i18next';
 import LoadingBar from 'react-redux-loading-bar';
 
 import 'react-table/react-table.css';
@@ -16,7 +17,7 @@ import Logs from '../../containers/Logs';
 import Footer from '../ui/Footer';
 import Toasts from '../Toasts';
 import Status from '../ui/Status';
-import Update from '../ui/Update';
+import Topline from '../ui/Topline';
 import i18n from '../../i18n';
 
 class App extends Component {
@@ -55,15 +56,22 @@ class App extends Component {
             !dashboard.processingVersions &&
             dashboard.isCoreRunning &&
             dashboard.isUpdateAvailable;
+        const isExpiringCertificate = false;
 
         return (
             <HashRouter hashType='noslash'>
                 <Fragment>
                     {updateAvailable &&
-                        <Update
+                        <Topline type="info">
-                            announcement={dashboard.announcement}
+                            {dashboard.announcement} <a href={dashboard.announcementUrl} target="_blank" rel="noopener noreferrer">Click here</a> for more info.
-                            announcementUrl={dashboard.announcementUrl}
+                        </Topline>
-                        />
+                    }
+                    {isExpiringCertificate &&
+                        <Topline type="warning">
+                            <Trans components={[<a href="#settings" key="0">link</a>]}>
+                                topline_expiring_certificate
+                            </Trans>
+                        </Topline>
                     }
                     <LoadingBar className="loading-bar" updateTime={1000} />
                     <Route component={Header} />
@@ -100,6 +108,7 @@ App.propTypes = {
     error: PropTypes.string,
     getVersion: PropTypes.func,
     changeLanguage: PropTypes.func,
+    encryption: PropTypes.object,
 };
 
-export default App;
+export default withNamespaces()(App);

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

@@ -114,7 +114,12 @@ const Form = (props) => {
                             <Trans>encryption_certificates</Trans>
                         </label>
                         <div className="form__desc form__desc--top">
-                            <Trans>encryption_certificates_desc</Trans>
+                            <Trans
+                                values={{ link: 'letsencrypt.org' }}
+                                components={[<a href="https://letsencrypt.org/" key="0">link</a>]}
+                            >
+                                encryption_certificates_desc
+                            </Trans>
                         </div>
                         <Field
                             id="certificate_chain"
@@ -130,12 +135,14 @@ const Form = (props) => {
                                 <Trans>encryption_status</Trans>:
                             </div>
                             <div>
-                                <Trans>encryption_certificates_for</Trans>
+                                <Trans values={{ domains: '*.example.org, example.org' }}>
-                                *.example.org, example.org
+                                    encryption_certificates_for
+                                </Trans>
                             </div>
                             <div>
-                                <Trans>encryption_expire</Trans>
+                                <Trans values={{ date: '2022-01-01' }}>
-                                2022-01-01
+                                    encryption_expire
+                                </Trans>
                             </div>
                         </div>
                     </div>

client/src/components/ui/Topline.css

@@ -1,4 +1,4 @@
-.update {
+.topline {
     position: relative;
     z-index: 102;
     margin-bottom: 0;

client/src/components/ui/Topline.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './Topline.css';
+
+const Topline = props => (
+    <div className={`alert alert-${props.type} topline`}>
+        <div className="container">
+            {props.children}
+        </div>
+    </div>
+);
+
+Topline.propTypes = {
+    children: PropTypes.node.isRequired,
+    type: PropTypes.string.isRequired,
+};
+
+export default Topline;

client/src/components/ui/Update.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import './Update.css';
-
-const Update = props => (
-    <div className="alert alert-info update">
-        <div className="container">
-            {props.announcement} <a href={props.announcementUrl} target="_blank" rel="noopener noreferrer">Click here</a> for more info.
-        </div>
-    </div>
-);
-
-Update.propTypes = {
-    announcement: PropTypes.string.isRequired,
-    announcementUrl: PropTypes.string.isRequired,
-};
-
-export default Update;

client/src/containers/App.js

@@ -3,8 +3,8 @@ import * as actionCreators from '../actions';
 import App from '../components/App';
 
 const mapStateToProps = (state) => {
-    const { dashboard } = state;
+    const { dashboard, encryption } = state;
-    const props = { dashboard };
+    const props = { dashboard, encryption };
     return props;
 };