Redacted Screenshot Mode (#96)

* add the redacted screenshot mode * update font-settings font-families * add url warning to setting label --------- Co-authored-by: James Bradford <[email protected]>
cisagov · Mar 22, 2023 · 5c0dce1 · 5c0dce1
1 parent 4c93989
commit 5c0dce1
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 19 deletions.
diff --git a/applications/client/src/components/Forms/SettingsForm.tsx b/applications/client/src/components/Forms/SettingsForm.tsx
@@ -3,6 +3,7 @@ import { TimezoneSelect } from '@blueprintjs/datetime2';
 import { css } from '@emotion/react';
 import { SortDirection, useStore } from '@redeye/client/store';
 import { sortOptions } from '@redeye/client/views';
+import { Txt, unRedactedFontClassName } from '@redeye/ui-styles';
 import { observer } from 'mobx-react-lite';
 import type { ChangeEvent, ComponentProps } from 'react';
 import { CampaignViews, Tabs } from '../../types';
@@ -75,12 +76,28 @@ export const SettingsForm = observer<SettingsFormProps>(({ ...props }) => {
 				}}
 				label="Show Hidden Beacons, Hosts, and Servers"
 			/>
-			<Switch // Uncomment to test light theme
+			<Switch
 				cy-test="toggle-theme"
 				checked={store.settings.theme === 'light'}
 				onChange={(event) => store.settings.setTheme(event.currentTarget.checked ? 'light' : 'dark')}
 				label="Light Theme (beta)"
 			/>
+			<Switch
+				cy-test="toggle-redacted-mode"
+				checked={store.settings.redactedMode}
+				onChange={(event) => store.settings.setRedactedMode(event.currentTarget.checked)}
+				className={unRedactedFontClassName}
+				// @ts-ignore // `label` prop actually supports JSX elements, but TypeScript will throw an error because HTMLAttributes only allows strings.
+				label={
+					<span>
+						<Txt>Redacted Screenshot Mode</Txt>
+						<br />
+						<Txt small muted>
+							WARNING: Beacon, Host, and Server names may still be visible in url
+						</Txt>
+					</span>
+				}
+			/>
 		</form>
 	);
 });

diff --git a/applications/client/src/store/settings.ts b/applications/client/src/store/settings.ts
@@ -1,4 +1,4 @@
-import { ThemeClasses } from '@redeye/ui-styles';
+import { redactedFontClassName, ThemeClasses } from '@redeye/ui-styles';
 import { computed } from 'mobx';
 import { Model, model, modelAction, prop } from 'mobx-keystone';
 import { computedFn } from 'mobx-utils';
@@ -17,19 +17,16 @@ export class Settings extends Model({
 	showHidden: prop<boolean>(window.localStorage.getItem('showHidden') === 'true'),
 	timezone: prop<string>(window.localStorage.getItem('timezone') || defaultTimeZone),
 	theme: prop<UiTheme>(getAppTheme()),
+	redactedMode: prop<boolean>(false),
 }) {
 	@modelAction setShowHidden(showHidden: boolean) {
 		this.showHidden = showHidden;
 		window.localStorage.setItem('showHidden', showHidden.toString());
 	}
-	@modelAction setTimezone(tz: string) {
-		this.timezone = tz;
-		window.localStorage.setItem('timezone', tz);
-	}
-	@modelAction setTheme(th: UiTheme) {
-		this.theme = th;
-		updateAppTheme(th);
-		window.localStorage.setItem('theme', th);
+
+	@modelAction setTimezone(timezone: string) {
+		this.timezone = timezone;
+		window.localStorage.setItem('timezone', timezone);
 	}
 	@modelAction setDefaultTimezone() {
 		this.setTimezone(defaultTimeZone);
@@ -38,9 +35,28 @@ export class Settings extends Model({
 		return this.timezone === defaultTimeZone;
 	}
 	momentTz = computedFn((d: MomentInput | Moment) => moment(d).tz(this.timezone));
+
+	@modelAction setTheme(theme: UiTheme) {
+		this.theme = theme;
+		updateAppTheme(theme);
+		window.localStorage.setItem('theme', theme);
+	}
+
+	@modelAction setRedactedMode(redactedMode: boolean) {
+		this.redactedMode = redactedMode;
+		updateRedactedMode(redactedMode);
+	}
 }
 
-// @Austin, does this belong here?
+const updateRedactedMode = (redactedMode: boolean) => {
+	const rootClassList = document.documentElement.classList;
+	if (redactedMode) {
+		rootClassList.add(redactedFontClassName);
+	} else {
+		rootClassList.remove(redactedFontClassName);
+	}
+};
+
 export const updateAppTheme = (theme?: UiTheme) => {
 	theme = theme || getAppTheme();
 	const rootClassList = document.documentElement.classList;

diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
 		"@carbon/icons-react": "^10.36.0",
 		"@emotion/react": "^11.4.0",
 		"@emotion/styled": "^11.3.0",
+		"@fontsource/redacted-script": "^4.5.13",
 		"@mikro-orm/better-sqlite": "5.6.6",
 		"@mikro-orm/core": "5.6.6",
 		"@openfonts/ibm-plex-mono_all": "^1.44.2",

diff --git a/packages/ui-styles/src/index.ts b/packages/ui-styles/src/index.ts
@@ -1,5 +1,6 @@
 export * from './styles/tokens';
 export * from './styles/global-styles';
+export * from './styles/font-settings';
 export * from './styles/utility-styles';
 
 export * from './components/Border';

diff --git a/...ui-styles/src/styles/font-face-google.css → .../src/styles/font-face-ibm-plex-google.css b/...ui-styles/src/styles/font-face-google.css → .../src/styles/font-face-ibm-plex-google.css
diff --git a/.../ui-styles/src/styles/font-face-local.css → ...s/src/styles/font-face-ibm-plex-local.css b/.../ui-styles/src/styles/font-face-local.css → ...s/src/styles/font-face-ibm-plex-local.css
diff --git a/packages/ui-styles/src/styles/font-face-redacted-script-local.css b/packages/ui-styles/src/styles/font-face-redacted-script-local.css
@@ -0,0 +1,50 @@
+/* https://fonts.googleapis.com/css2?family=Redacted+Script:wght@300;400;700 */
+
+/* latin-ext */
+@font-face {
+	font-family: 'Redacted Script';
+	font-style: normal;
+	font-weight: 300;
+	src: url('@fontsource/redacted-script/files/redacted-script-latin-ext-300-normal.woff2') format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+	font-family: 'Redacted Script';
+	font-style: normal;
+	font-weight: 300;
+	src: url('@fontsource/redacted-script/files/redacted-script-latin-300-normal.woff2') format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin-ext */
+  @font-face {
+	font-family: 'Redacted Script';
+	font-style: normal;
+	font-weight: 400;
+	src: url('@fontsource/redacted-script/files/redacted-script-latin-ext-400-normal.woff2') format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+	font-family: 'Redacted Script';
+	font-style: normal;
+	font-weight: 400;
+	src: url('@fontsource/redacted-script/files/redacted-script-latin-400-normal.woff2') format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin-ext */
+  @font-face {
+	font-family: 'Redacted Script';
+	font-style: normal;
+	font-weight: 700;
+	src: url('@fontsource/redacted-script/files/redacted-script-latin-ext-700-normal.woff2') format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+	font-family: 'Redacted Script';
+	font-style: normal;
+	font-weight: 700;
+	src: url('@fontsource/redacted-script/files/redacted-script-latin-700-normal.woff2') format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
diff --git a/packages/ui-styles/src/styles/font-settings.ts b/packages/ui-styles/src/styles/font-settings.ts
@@ -0,0 +1,31 @@
+import { css } from '@emotion/react';
+
+// font import
+import './font-face-ibm-plex-local.css';
+import './font-face-redacted-script-local.css';
+
+export const redactedFontClassName = 'RedactedFont';
+
+// maybe put this on parts of the UI that don't display data
+export const unRedactedFontClassName = 'UnRedactedFont';
+
+export const fontSettings = css`
+	:root {
+		&,
+		.${unRedactedFontClassName} {
+			--pt-font-family-sans: 'IBM Plex Sans', 'Helvetica Neue', -apple-system, 'Segoe UI', Arial, sans-serif;
+			--pt-font-family-monospace: 'IBM Plex Mono', Menlo, Consolas, monospace;
+
+			font-family: var(--pt-font-family-sans);
+
+			code,
+			pre {
+				font-family: var(--pt-font-family-monospace);
+			}
+		}
+		&.${redactedFontClassName}, & .${redactedFontClassName} {
+			--pt-font-family-sans: 'Redacted Script';
+			--pt-font-family-monospace: 'Redacted Script';
+		}
+	}
+`;
diff --git a/packages/ui-styles/src/styles/global-styles.tsx b/packages/ui-styles/src/styles/global-styles.tsx
@@ -4,12 +4,13 @@ import styled from '@emotion/styled';
 // import { plexFontFace } from './font-face-local';
 import { extensionStyles } from './ibm-carbon-extension-styles';
 import { CoreTokens } from '../styles/tokens';
-
-// font import
-import './font-face-local.css';
+import { fontSettings } from './font-settings';
 
 export const disableSelectionClassName = 'disable-selection';
+
 export const globalStyle = css`
+	${fontSettings};
+
 	.toast-class {
 		z-index: 999;
 	}
@@ -29,11 +30,6 @@ export const globalStyle = css`
 		/* overflow: hidden; */ // we might need this
 	}
 
-	code,
-	pre {
-		font-family: ${CoreTokens.FontFamilyMonospace};
-	}
-
 	.${Classes.DIALOG_CONTAINER} {
 		/* DialogCustom.tsx */
 		align-items: flex-start;

diff --git a/yarn.lock b/yarn.lock
@@ -1405,6 +1405,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fontsource/redacted-script@npm:^4.5.13":
+  version: 4.5.13
+  resolution: "@fontsource/redacted-script@npm:4.5.13"
+  checksum: ff29c81254068d867ffefe6c968e28aefce5dad17be6506ca9b459a78f3726a5dd4b58a6c104ba24a78447d55ea99a5319feff0360c8aabdffbc25909e84da7f
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.0.1":
   version: 1.1.2
   resolution: "@gar/promisify@npm:1.1.2"
@@ -12969,6 +12976,7 @@ __metadata:
     "@emotion/babel-plugin": ^11.10.0
     "@emotion/react": ^11.4.0
     "@emotion/styled": ^11.3.0
+    "@fontsource/redacted-script": ^4.5.13
     "@mikro-orm/better-sqlite": 5.6.6
     "@mikro-orm/core": 5.6.6
     "@mikro-orm/entity-generator": 5.6.6