Added topline component and fixed string interpolation

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
-                            announcement={dashboard.announcement}
-                            announcementUrl={dashboard.announcementUrl}
-                        />
+                        <Topline type="info">
+                            {dashboard.announcement} <a href={dashboard.announcementUrl} target="_blank" rel="noopener noreferrer">Click here</a> for more info.
+                        </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>
-                                *.example.org, example.org
+                                <Trans values={{ domains: '*.example.org, example.org' }}>
+                                    encryption_certificates_for
+                                </Trans>
                             </div>
                             <div>
-                                <Trans>encryption_expire</Trans>
-                                2022-01-01
+                                <Trans values={{ date: '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;