Merge pull request #1 from tannercollin/master

Update fork with upstream

Dockerfile

@@ -0,0 +1,20 @@
+FROM node:13-alpine
+
+COPY / /notica/
+
+WORKDIR /notica/
+
+RUN addgroup -S notica && \
+    adduser -S notica -G notica && \
+    apk add -U tzdata tini && \
+    yarn install && \
+    chown -R notica:notica /notica/ && \
+    chmod +x /notica/entrypoint
+
+USER notica
+
+EXPOSE 3000
+
+ENTRYPOINT ["tini", "--", "/notica/entrypoint"]
+
+CMD ["yarn","start","--host","0.0.0.0","--port","3000"]

README.md

@@ -25,16 +25,12 @@ https://notica.us/
 
 ## Source Code
 
-### License
-
-Notica is free and open-source software released under the MIT License.
-
 ### Self-hosting
 
 Hosting Notica on your own server is extremely easy.
 Clone this repository, change all notica.us URLs to your own domain, and then run `yarn install && yarn start`.
 
-### Usage
+#### Usage
 
 ```text
 Usage: yarn start [options]
@@ -54,7 +50,7 @@ Usage: yarn start [options]
     $ yarn start -p 1234 -t 'My cool Title'
 ```
 
-### Reverse Proxy
+#### Reverse Proxy
 
 For security, it is recommended to run Notica behind a reverse proxy as a separate non-privileged user.
 
@@ -104,7 +100,7 @@ Or Apache:
 
 Apache SSL is left as an exercise for the reader :)
 
-### Process Control
+#### Process Control
 
 I recommend using `supervisor` to auto-start and keep Notica running.
 
@@ -129,3 +125,41 @@ stderr_logfile_maxbytes=10MB
 stdout_logfile=/var/log/notica.log
 stdout_logfile_maxbytes=10MB
 ```
+
+### Self-hosting with Docker
+
+#### Build
+
+```
+docker build -t notica .
+```
+
+#### Run
+
+```
+docker run --rm -it -p 3000:3000 notica
+```
+
+#### With Traefik Reverse Proxy
+
+```
+docker run -d \
+  --name notica \
+  --restart unless-stopped \
+  --label "traefik.enable=true" \
+  --label "traefik.frontend.rule=Host:notica.example.com" \
+  --label "traefik.port=3000" \
+  --network traefik-network \
+  -e TZ=Europe/London \
+notica
+```
+
+## License
+
+This program is free and open-source software licensed under the MIT License. Please see the `LICENSE` file for details.
+
+That means you have the right to study, change, and distribute the software and source code to anyone and for any purpose. You deserve these rights. Please take advantage of them because I like pull requests and would love to see this code put to use.
+
+## Acknowledgements
+
+Thanks to welbert, damc-dev, scribblemaniac, and lukasmrtvy for their contributions.

entrypoint

@@ -0,0 +1,8 @@
+#!/bin/sh
+set -e
+
+if [ "${1#-}" != "$1" ]; then
+	set -- yarn start "$@"
+fi
+
+exec "$@"

src/ui/Home.js

@@ -12,13 +12,16 @@ export default class Home extends React.Component {
 			registration: null,
 			haveperm: false,
 			connected: false,
-			socket: io.connect()
+			socket: io.connect(),
+			storSupport: (typeof localStorage !== 'undefined'),
+			alerts: new Array(),
 		}
 	}
 
 	componentDidMount() {
 		this.checksupport();
 		this.checkperm();
+		this.getAlerts();
 		this.connect();
 	}
 
@@ -42,9 +45,39 @@ export default class Home extends React.Component {
 
 		socket.on('message', (data) => {
 			this.sendNotification(data);
+			this.addAlert(data);
 		});
 	}
 
+	addAlert(data) {
+		if (this.state.storSupport) {
+			let alerts = this.state.alerts;
+			alerts.unshift(data);
+			localStorage.setItem('alerts', JSON.stringify(alerts));
+			this.getAlerts();
+		}
+	}
+
+	getAlerts() {
+		if (this.state.storSupport) {
+			let alerts = new Array();
+			let alertsJson = localStorage.getItem('alerts');
+			if (alertsJson != null) {
+				alerts = JSON.parse(alertsJson);
+			}
+			this.setState({alerts: alerts});
+		}
+	}
+
+	clearAlerts() {
+		if (this.state.storSupport) {
+			if (localStorage.getItem('alerts') != null) {
+				localStorage.removeItem('alerts');
+			}
+			this.getAlerts();
+		}
+	}
+
 	sendNotification(data) {
 		let message = data || 'Received a notification!';
 
@@ -98,13 +131,19 @@ export default class Home extends React.Component {
 		const supported = this.state.supported;
 		const haveperm = this.state.haveperm;
 		const connected = this.state.connected;
+
 		const port = location.port ? ':' + location.port : '';
-		const url = location.protocol + '//' + location.hostname + port + '/?';
+		const url = location.protocol + '//' + location.hostname + '/?';
+		const alerts = this.state.alerts.map((value,index) =>
+			<li key={index}>{value}</li>
+		);
 
 		return (
 			<div className="container">
 				<div className="row">
 					<div className="twelve columns">
+						<h4>Status</h4>
+
 						{ supported || <div className="error"><p>
 							<i className="fa fa-times" aria-hidden="true"></i> This browser does not support desktop notifications.
 						</p></div>}
@@ -130,6 +169,23 @@ export default class Home extends React.Component {
 						</p>}
 					</div>
 				</div>
+				{!!alerts.length && <div className="row">
+					<div className="twelve columns">
+						<h4>Previous Notifications</h4>
+
+						{ !storSupport && <div className="error"><p>
+							<i className="fa fa-times" aria-hidden="true"></i>This browser does not support local storage so it is unable to save notifications.
+						</p></div>}
+						{ storSupport && <div>
+							<div className="alerts">
+								<ul>{alerts}</ul>
+							</div>
+							<p>
+								<a className="button" href="javascript:void(0)" onClick={() => this.clearAlerts()}>Clear</a>
+							</p>
+						</div>}
+					</div>
+				</div>}
 				<div className="row">
 					<div className="twelve columns">
 						<h4>Usage</h4>