fix favicon, basic auth (#259)

.erb/configs/webpack.config.remote.dev.ts

@@ -96,6 +96,7 @@ const configuration: webpack.Configuration = {
     new HtmlWebpackPlugin({
       filename: path.join('index.html'),
       template: path.join(webpackPaths.srcRemotePath, 'index.ejs'),
+      favicon: path.join(webpackPaths.assetsPath, 'icons', 'favicon.ico'),
       minify: {
         collapseWhitespace: true,
         removeAttributeQuotes: true,

.erb/configs/webpack.config.remote.prod.ts

@@ -117,6 +117,7 @@ const configuration: webpack.Configuration = {
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: path.join(webpackPaths.srcRendererPath, 'index.ejs'),
+      favicon: path.join(webpackPaths.assetsPath, 'icons', 'favicon.ico'),
       minify: {
         collapseWhitespace: true,
         removeAttributeQuotes: true,

src/main/features/core/remote/index.ts

@@ -52,9 +52,11 @@ type SendData = ServerEvent & {
 
 function send({ client, event, data }: SendData): void {
     if (client.readyState === WebSocket.OPEN) {
+        if (client.alive) {
             client.send(JSON.stringify({ data, event }));
         }
     }
+}
 
 function broadcast(message: ServerEvent): void {
     if (wsServer) {
@@ -141,17 +143,9 @@ async function serveFile(
     res: ServerResponse,
 ): Promise<void> {
     const fileName = `${file}.${extension}`;
-    let path: string;
+    const path = app.isPackaged
-
-    if (extension === 'ico') {
-        path = app.isPackaged
-            ? join(process.resourcesPath, 'assets', fileName)
-            : join(__dirname, '../../../../../assets', fileName);
-    } else {
-        path = app.isPackaged
         ? join(__dirname, '../remote', fileName)
         : join(__dirname, '../../../../../.erb/dll', fileName);
-    }
 
     let stats: Stats;
 
@@ -291,7 +285,7 @@ const enableServer = (config: RemoteConfig): Promise<void> => {
                             break;
                         }
                         case '/favicon.ico': {
-                            await serveFile(req, 'icon', 'ico', res);
+                            await serveFile(req, 'favicon', 'ico', res);
                             break;
                         }
                         case '/remote.css': {
@@ -302,6 +296,12 @@ const enableServer = (config: RemoteConfig): Promise<void> => {
                             await serveFile(req, 'remote', 'js', res);
                             break;
                         }
+                        case '/credentials': {
+                            res.statusCode = 200;
+                            res.setHeader('Content-Type', 'text/plain');
+                            res.end(req.headers.authorization);
+                            break;
+                        }
                         default: {
                             res.statusCode = 404;
                             res.setHeader('Content-Type', 'text/plain');
@@ -318,17 +318,42 @@ const enableServer = (config: RemoteConfig): Promise<void> => {
             server.listen(config.port, resolve);
             wsServer = new WebSocketServer({ server });
 
-            wsServer.on('connection', (ws, req) => {
+            wsServer.on('connection', (ws) => {
-                if (!authorize(req)) {
+                let authFail: number | undefined;
-                    ws.close(4003);
-                    return;
-                }
 
+                if (!settings.username && !settings.password) {
                     ws.alive = true;
+                } else {
+                    authFail = setTimeout(() => {
+                        if (!ws.alive) {
+                            ws.close();
+                        }
+                    }, 10000) as unknown as number;
+                }
 
                 ws.on('error', console.error);
 
                 ws.on('message', (data) => {
+                    if (!ws.alive) {
+                        try {
+                            const auth = data.toString().split(' ')[1];
+                            const [login, password] = Buffer.from(auth, 'base64')
+                                .toString()
+                                .split(':');
+
+                            if (login === settings.username && password === settings.password) {
+                                ws.alive = true;
+                            } else {
+                                ws.close();
+                            }
+
+                            clearTimeout(authFail);
+                        } catch (e) {
+                            console.error(e);
+                        }
+                        return;
+                    }
+
                     try {
                         const json = JSON.parse(data.toString()) as ClientEvent;
                         const event = json.event;

src/remote/components/shell.tsx

@@ -26,7 +26,6 @@ export const Shell = () => {
                         <Grid.Col span="auto">
                             <div>
                                 <Image
-                                    bg="rgb(25, 25, 25)"
                                     fit="contain"
                                     height={60}
                                     src="/favicon.ico"

src/remote/store/index.ts

@@ -99,7 +99,11 @@ export const useRemoteStore = create<SettingsSlice>()(
                                 existing.close(4001);
                             }
                         }
-                        set((state) => {
+                        set(async (state) => {
+                            try {
+                                const credentials = await fetch('/credentials');
+                                const authHeader = await credentials.text();
+
                                 const socket = new WebSocket(
                                     // eslint-disable-next-line no-restricted-globals
                                     location.href.replace('http', 'ws'),
@@ -148,6 +152,7 @@ export const useRemoteStore = create<SettingsSlice>()(
                                 });
 
                                 socket.addEventListener('open', () => {
+                                    socket.send(authHeader);
                                     set({ connected: true });
                                 });
 
@@ -173,6 +178,9 @@ export const useRemoteStore = create<SettingsSlice>()(
                                 });
 
                                 state.socket = socket;
+                            } catch (err) {
+                                console.error(err);
+                            }
                         });
                     },
                     send: (data: ClientEvent) => {