+ client: handle update

client/src/components/ui/Overlay.css

@@ -0,0 +1,40 @@
+.overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 110;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    font-size: 28px;
+    font-weight: 600;
+    text-align: center;
+    background-color: rgba(255, 255, 255, 0.8);
+}
+
+.overlay--visible {
+    display: flex;
+}
+
+.overlay__loading {
+    width: 40px;
+    height: 40px;
+    margin-bottom: 20px;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2047.6%2047.6%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%3Cpath%20opacity%3D%22.235%22%20fill%3D%22%23979797%22%20d%3D%22M44.4%2011.9l-5.2%203c1.5%202.6%202.4%205.6%202.4%208.9%200%209.8-8%2017.8-17.8%2017.8-6.6%200-12.3-3.6-15.4-8.9l-5.2%203C7.3%2042.8%2015%2047.6%2023.8%2047.6c13.1%200%2023.8-10.7%2023.8-23.8%200-4.3-1.2-8.4-3.2-11.9z%22%2F%3E%3Cpath%20fill%3D%22%2366b574%22%20d%3D%22M3.2%2035.7C0%2030.2-.8%2023.8.8%2017.6%202.5%2011.5%206.4%206.4%2011.9%203.2%2017.4%200%2023.8-.8%2030%20.8c6.1%201.6%2011.3%205.6%2014.4%2011.1l-5.2%203c-2.4-4.1-6.2-7.1-10.8-8.3C23.8%205.4%2019%206%2014.9%208.4s-7.1%206.2-8.3%2010.8c-1.2%204.6-.6%209.4%201.8%2013.5l-5.2%203z%22%2F%3E%3C%2Fsvg%3E");
+    will-change: transform;
+    animation: clockwise 2s linear infinite;
+}
+
+@keyframes clockwise {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

client/src/components/ui/UpdateOverlay.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Trans, withNamespaces } from 'react-i18next';
+import classnames from 'classnames';
+
+import './Overlay.css';
+
+const UpdateOverlay = (props) => {
+    const overlayClass = classnames({
+        overlay: true,
+        'overlay--visible': props.processingUpdate,
+    });
+
+    return (
+        <div className={overlayClass}>
+            <div className="overlay__loading"></div>
+            <Trans>processing_update</Trans>
+        </div>
+    );
+};
+
+UpdateOverlay.propTypes = {
+    processingUpdate: PropTypes.bool,
+};
+
+export default withNamespaces()(UpdateOverlay);

client/src/components/ui/UpdateTopline.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Trans, withNamespaces } from 'react-i18next';
 
@@ -6,22 +6,37 @@ import Topline from './Topline';
 
 const UpdateTopline = props => (
     <Topline type="info">
-        <Trans
-            values={{ version: props.version }}
-            components={[
-                <a href={props.url} target="_blank" rel="noopener noreferrer" key="0">
-                    Click here
-                </a>,
-            ]}
-        >
-            update_announcement
-        </Trans>
+        <Fragment>
+            <Trans
+                values={{ version: props.version }}
+                components={[
+                    <a href={props.url} target="_blank" rel="noopener noreferrer" key="0">
+                        Click here
+                    </a>,
+                ]}
+            >
+                update_announcement
+            </Trans>
+            {props.canAutoUpdate &&
+                <button
+                    type="button"
+                    className="btn btn-sm btn-primary ml-3"
+                    onClick={props.getUpdate}
+                    disabled={props.processingUpdate}
+                >
+                    <Trans>update_now</Trans>
+                </button>
+            }
+        </Fragment>
     </Topline>
 );
 
 UpdateTopline.propTypes = {
-    version: PropTypes.string.isRequired,
+    version: PropTypes.string,
     url: PropTypes.string.isRequired,
+    canAutoUpdate: PropTypes.bool,
+    getUpdate: PropTypes.func,
+    processingUpdate: PropTypes.bool,
 };
 
 export default withNamespaces()(UpdateTopline);