From 69431a8a0cbe4aef1ef61cf6354aa9416f358a10 Mon Sep 17 00:00:00 2001 From: Leon Windheuser Date: Mon, 21 Mar 2022 19:58:48 +0100 Subject: [PATCH 1/3] Move key url param to hash param --- cli/cli2cloud/cli2cloud.go | 4 +- webapp/src/pages/Monitor.tsx | 78 +++++++++++++++++++++++----- webapp/src/styles/Monitor.module.css | 8 +++ 3 files changed, 74 insertions(+), 16 deletions(-) diff --git a/cli/cli2cloud/cli2cloud.go b/cli/cli2cloud/cli2cloud.go index 84b3d93..acd5e9b 100644 --- a/cli/cli2cloud/cli2cloud.go +++ b/cli/cli2cloud/cli2cloud.go @@ -14,8 +14,8 @@ import ( ) const ( - //serverIP = "localhost:50051" // local dev - serverIP = "167.99.140.19:50051" // production + serverIP = "localhost:50051" // local dev + //serverIP = "cli2cloud.com:50051" // production randomPasswordLength = 16 ) diff --git a/webapp/src/pages/Monitor.tsx b/webapp/src/pages/Monitor.tsx index 5e0f25d..221aa9d 100644 --- a/webapp/src/pages/Monitor.tsx +++ b/webapp/src/pages/Monitor.tsx @@ -19,6 +19,7 @@ interface State { decryptor: DecryptionService | null, rows: Row[], raw: boolean, + highlightRow: string, } export class Monitor extends Component<{}, State> { @@ -29,19 +30,23 @@ export class Monitor extends Component<{}, State> { constructor(props: any) { super(props); + let password = this.extractFromHash(window.location.hash, "key"); + let highlightRowId = this.extractFromHash(window.location.hash, "row"); + this.state = { encrypted: false, - enterPwdFirstTime: !(new URLSearchParams(new URL(window.location.href).search).has("key")), - password: new URLSearchParams(new URL(window.location.href).search).get("key"), + enterPwdFirstTime: password === null, + password: password, decryptor: null, rows: [], raw: new URLSearchParams(new URL(window.location.href).search).has("raw"), + highlightRow: highlightRowId === null ? "" : highlightRowId, }; this.numLines = 1; - this.cli2CloudService = new Cli2CloudClient("https://cli2cloud.com:1443", null, null); // production - //this.cli2CloudService = new Cli2CloudClient("http://localhost:8000", null, null); // local dev + //this.cli2CloudService = new Cli2CloudClient("https://cli2cloud.com:1443", null, null); // production + this.cli2CloudService = new Cli2CloudClient("http://localhost:8000", null, null); // local dev this.clientId = new ClientId(); const id = window.location.pathname.substring(1); @@ -60,25 +65,68 @@ export class Monitor extends Component<{}, State> { this.client.then((client) => {this.setState({encrypted: client.getEncrypted()})}); if (!this.state.enterPwdFirstTime) { - this.createDecryptor(); + this.createDecryptor(this.state.password); } this.loadContent(); } + private extractFromHash(hash: string, key: string): string | null { + const params: string = hash.substring(1, hash.length); + let value: string | null = null; + console.log("params:", params); + + params.split("&").forEach((parts, _) => { + let kv = parts.split("="); + console.log(kv); + if (kv !== [] && kv[0] === key) { + value = kv[1]; + } + }); + return value; + } + + private addToHashParam(key: string, value: string) { + const newParamPair = key + "=" + value; + const currHash = window.location.hash.substring(1, window.location.hash.length); + let newHash = ""; + let exists: boolean = false; + + currHash.split("&").forEach((parts, _) => { + let kv = parts.split("="); + if (kv.length !== 0 && kv[0] !== '') { + if (kv[0] === key) { + exists = true; + newHash += newParamPair; + } else { + newHash += parts; + } + console.log("curr kv:", kv); + newHash += '&'; + } + }); + + if (!exists) { + newHash += newParamPair; + } + + window.location.hash = newHash; + } + private updatePassword(newPassword: string) { - this.setURLParams("key", newPassword); + //this.setURLParams("key", newPassword); + this.addToHashParam("key", newPassword); this.setState({password: newPassword}); - this.createDecryptor(); + this.createDecryptor(newPassword); } - private createDecryptor() { - if (this.state.password === null) { + private createDecryptor(password: string | null) { + if (password === null) { console.log("Can't create decryptor"); return; } this.client.then((client: Client) => { - this.setState({decryptor: new DecryptionService(this.state.password!, client.getSalt(), client.getIv())}); + this.setState({decryptor: new DecryptionService(password!, client.getSalt(), client.getIv())}); }); } @@ -106,7 +154,8 @@ export class Monitor extends Component<{}, State> { } private highlightRow(line: number) { - window.location.hash = line.toString(); + this.addToHashParam("row", line.toString()); + this.setState({highlightRow: line.toString()}); } private decryptRowIfEncrypted(content: string): string { @@ -132,8 +181,9 @@ export class Monitor extends Component<{}, State> { } this.createNewDecryptorIfEncrypted() - return this.state.rows.map((row: Row) => -
+ return this.state.rows.map((row: Row) => { + let rowStyle = row.line.toString() == this.state.highlightRow ? styles.selectedRow : styles.row; + return
this.highlightRow(row.line)}> {row.line} @@ -141,7 +191,7 @@ export class Monitor extends Component<{}, State> { {this.decryptRowIfEncrypted(row.content)}
- ); + }); } private createDivsForRawOutput(): JSX.Element[] | JSX.Element { diff --git a/webapp/src/styles/Monitor.module.css b/webapp/src/styles/Monitor.module.css index 776d33a..8f6de21 100644 --- a/webapp/src/styles/Monitor.module.css +++ b/webapp/src/styles/Monitor.module.css @@ -25,6 +25,14 @@ color: #000000 } +.selectedRow { + background-color: yellow; + opacity: 0.8; + color: #000000; + display: flex; + clear: both; +} + .line { min-width: 5%; float: left; From b982ee558b57ab4afd17c4f7ebe739614add6e96 Mon Sep 17 00:00:00 2001 From: Leon Windheuser Date: Mon, 21 Mar 2022 20:58:27 +0100 Subject: [PATCH 2/3] Redirect key in query parameter to hash --- cli/cli2cloud/cli2cloud.go | 2 +- webapp/src/pages/Monitor.tsx | 40 +++++++++++++++++++++------- webapp/src/styles/Monitor.module.css | 6 ----- 3 files changed, 31 insertions(+), 17 deletions(-) diff --git a/cli/cli2cloud/cli2cloud.go b/cli/cli2cloud/cli2cloud.go index acd5e9b..d5f72b5 100644 --- a/cli/cli2cloud/cli2cloud.go +++ b/cli/cli2cloud/cli2cloud.go @@ -59,7 +59,7 @@ func sendPipedMessages(c proto.Cli2CloudClient, ctx context.Context, password *s keyURLSuffix := "" if password != nil { - keyURLSuffix = fmt.Sprintf("?key=%s", *password) + keyURLSuffix = fmt.Sprintf("#key=%s", *password) } fmt.Printf("Share and monitor it live from https://cli2cloud.com/%s%s\n\n", clientId.Id, keyURLSuffix) diff --git a/webapp/src/pages/Monitor.tsx b/webapp/src/pages/Monitor.tsx index 221aa9d..fd48b9e 100644 --- a/webapp/src/pages/Monitor.tsx +++ b/webapp/src/pages/Monitor.tsx @@ -30,17 +30,29 @@ export class Monitor extends Component<{}, State> { constructor(props: any) { super(props); + + // Redirect due to backward compatibility with old client which set the + // key as a query parameter(?key=) and not as a hash parameter (#key=) + let params = new URLSearchParams(new URL(window.location.href).search); + if (params.has("key")) { + const password = params.get("key"); + if (password !== null) { + this.addToHashParam("key", password); + } + params.delete("key"); + window.location.search = params.toString() + } + let password = this.extractFromHash(window.location.hash, "key"); let highlightRowId = this.extractFromHash(window.location.hash, "row"); - this.state = { encrypted: false, enterPwdFirstTime: password === null, password: password, decryptor: null, rows: [], - raw: new URLSearchParams(new URL(window.location.href).search).has("raw"), + raw: params.has("raw"), highlightRow: highlightRowId === null ? "" : highlightRowId, }; @@ -74,11 +86,9 @@ export class Monitor extends Component<{}, State> { private extractFromHash(hash: string, key: string): string | null { const params: string = hash.substring(1, hash.length); let value: string | null = null; - console.log("params:", params); params.split("&").forEach((parts, _) => { let kv = parts.split("="); - console.log(kv); if (kv !== [] && kv[0] === key) { value = kv[1]; } @@ -86,7 +96,7 @@ export class Monitor extends Component<{}, State> { return value; } - private addToHashParam(key: string, value: string) { + private addToHashParam(key: string, value: string, remove: boolean=false) { const newParamPair = key + "=" + value; const currHash = window.location.hash.substring(1, window.location.hash.length); let newHash = ""; @@ -97,11 +107,13 @@ export class Monitor extends Component<{}, State> { if (kv.length !== 0 && kv[0] !== '') { if (kv[0] === key) { exists = true; + if (remove) { + return; + } newHash += newParamPair; } else { newHash += parts; } - console.log("curr kv:", kv); newHash += '&'; } }); @@ -114,7 +126,6 @@ export class Monitor extends Component<{}, State> { } private updatePassword(newPassword: string) { - //this.setURLParams("key", newPassword); this.addToHashParam("key", newPassword); this.setState({password: newPassword}); this.createDecryptor(newPassword); @@ -140,6 +151,8 @@ export class Monitor extends Component<{}, State> { stream.on("error", (error: Error): void => { console.error(error); }); + + } private addNewContent(content: string) { @@ -154,8 +167,14 @@ export class Monitor extends Component<{}, State> { } private highlightRow(line: number) { - this.addToHashParam("row", line.toString()); - this.setState({highlightRow: line.toString()}); + if (this.state.highlightRow === line.toString()) { + this.setState({highlightRow: ""}); + // delete the hash parameter again if set + this.addToHashParam("row", "", true); + } else { + this.addToHashParam("row", line.toString()); + this.setState({highlightRow: line.toString()}); + } } private decryptRowIfEncrypted(content: string): string { @@ -182,7 +201,8 @@ export class Monitor extends Component<{}, State> { this.createNewDecryptorIfEncrypted() return this.state.rows.map((row: Row) => { - let rowStyle = row.line.toString() == this.state.highlightRow ? styles.selectedRow : styles.row; + let rowStyle = row.line.toString() === this.state.highlightRow ? styles.selectedRow : styles.row; + return
this.highlightRow(row.line)}> {row.line} diff --git a/webapp/src/styles/Monitor.module.css b/webapp/src/styles/Monitor.module.css index 8f6de21..050ebee 100644 --- a/webapp/src/styles/Monitor.module.css +++ b/webapp/src/styles/Monitor.module.css @@ -19,12 +19,6 @@ color: yellow; } -.row:target { - background-color: yellow; - opacity: 0.8; - color: #000000 -} - .selectedRow { background-color: yellow; opacity: 0.8; From a5acf9235cb3dcc6e796ab11fd6be0be3be1d980 Mon Sep 17 00:00:00 2001 From: Leon Windheuser Date: Mon, 21 Mar 2022 21:00:40 +0100 Subject: [PATCH 3/3] Use cli2cloud ip instead of localhost --- cli/cli2cloud/cli2cloud.go | 4 ++-- webapp/src/pages/Monitor.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/cli/cli2cloud/cli2cloud.go b/cli/cli2cloud/cli2cloud.go index d5f72b5..8217062 100644 --- a/cli/cli2cloud/cli2cloud.go +++ b/cli/cli2cloud/cli2cloud.go @@ -14,8 +14,8 @@ import ( ) const ( - serverIP = "localhost:50051" // local dev - //serverIP = "cli2cloud.com:50051" // production + //serverIP = "localhost:50051" // local dev + serverIP = "cli2cloud.com:50051" // production randomPasswordLength = 16 ) diff --git a/webapp/src/pages/Monitor.tsx b/webapp/src/pages/Monitor.tsx index fd48b9e..f265a28 100644 --- a/webapp/src/pages/Monitor.tsx +++ b/webapp/src/pages/Monitor.tsx @@ -57,8 +57,8 @@ export class Monitor extends Component<{}, State> { }; this.numLines = 1; - //this.cli2CloudService = new Cli2CloudClient("https://cli2cloud.com:1443", null, null); // production - this.cli2CloudService = new Cli2CloudClient("http://localhost:8000", null, null); // local dev + this.cli2CloudService = new Cli2CloudClient("https://cli2cloud.com:1443", null, null); // production + //this.cli2CloudService = new Cli2CloudClient("http://localhost:8000", null, null); // local dev this.clientId = new ClientId(); const id = window.location.pathname.substring(1);