STRLCPY/link-lock

Add UI functionality via JavaScript
Jacob Strieb committed 4 years ago

b9a9e2cb

1 parent 25b16980

Revision indexing in progress... (symbol navigation in revisions will be accurate after indexed)

■ ■ ■ ■ ■ ■

api.js

		skipped 3 lines
4	4		*/
5	5
6	6
	7	+
7	8		/*******************************************************************************
8	9		* Global Variables
9	10		******************************************************************************/
		skipped 94 lines

■ ■ ■ ■ ■ ■

create/create.js

	1	+	/**
	2	+	* Created by Jacob Strieb
	3	+	* May 2020
	4	+	*/
	5	+
	6	+
	7	+
	8	+	/*******************************************************************************
	9	+	* Helper Functions
	10	+	******************************************************************************/
	11	+
	12	+	// Highlight the text in an input with a given id
	13	+	function highlight(id) {
	14	+	let output = document.querySelector("#" + id);
	15	+	output.focus();
	16	+	output.select()
	17	+	output.setSelectionRange(0, output.value.length + 1);
	18	+	return output;
	19	+	}
	20	+
	21	+
	22	+	// Validate all inputs, and display an error if necessary
	23	+	function validateInputs() {
	24	+	var inputs = document.querySelectorAll(".form .labeled-input input");
	25	+	for (let i = 0; i < inputs.length; i++) {
	26	+	let input = inputs[i];
	27	+	input.reportValidity = input.reportValidity \|\| (() => true);
	28	+	if (!input.reportValidity()) {
	29	+	return false;
	30	+	}
	31	+	}
	32	+
	33	+	// Extra check for older browsers for URL input. Not sure if necessary, since
	34	+	// older browsers without built-in HTML5 validation may fail elsewhere.
	35	+	let url = document.querySelector("#url");
	36	+	try {
	37	+	new URL(url.value);
	38	+	} catch {
	39	+	if (!("reportValidity" in url)) {
	40	+	alert("URL invalid. Make sure to include 'http://' at the beginning.");
	41	+	}
	42	+	return false;
	43	+	}
	44	+
	45	+	return true;
	46	+	}
	47	+
	48	+
	49	+
	50	+	/*******************************************************************************
	51	+	* Main UI Functions
	52	+	******************************************************************************/
	53	+
	54	+	// Activated when the "Advanced" dropdown is pressed
	55	+	function onAdvanced() {
	56	+	let label = document.querySelector("#advanced-label");
	57	+	let advanced = document.querySelector(".advanced");
	58	+	if (advanced.style.display == "none" \|\| advanced.style.display == "") {
	59	+	label.innerHTML = "▾ advanced";
	60	+	advanced.style.display = "flex";
	61	+	} else {
	62	+	label.innerHTML = "▸ advanced";
	63	+	advanced.style.display = "none";
	64	+	}
	65	+	}
	66	+
	67	+
	68	+	// Activated when the "Encrypt" button is pressed
	69	+	function onEncrypt() {
	70	+	if (!validateInputs()) {
	71	+	return;
	72	+	}
	73	+
	74	+	// Check that password is successfully confirmed
	75	+	const password = document.querySelector("#password").value;
	76	+	const confirmPassword = document.querySelector("#confirm-password")
	77	+	const confirmation = confirmPassword.value;
	78	+	if (password != confirmation) {
	79	+	confirmPassword.setCustomValidity("Passwords do not match");
	80	+	confirmPassword.reportValidity();
	81	+	return;
	82	+	}
	83	+
	84	+	// Initialize values for encryption
	85	+	const url = document.querySelector("#url").value;
	86	+	// TODO: Finish this
	87	+
	88	+	const output = "foobar";
	89	+	document.querySelector("#output").value = output;
	90	+	highlight("output");
	91	+	}
	92	+
	93	+
	94	+	// Activated when the "Copy" button is pressed
	95	+	function onCopy(id) {
	96	+	// Select and copy
	97	+	const output = highlight(id);
	98	+	document.execCommand("copy");
	99	+
	100	+	// Alert the user that the text was successfully copied
	101	+	const alertArea = document.querySelector(".alert");
	102	+	alertArea.innerText = `Copied ${output.value.length} characters`;
	103	+	alertArea.style.opacity = "1";
	104	+	setTimeout(() => { alertArea.style.opacity = 0; }, 3000);
	105	+
	106	+	// Deselect
	107	+	output.selectionEnd = output.selectionStart;
	108	+	output.blur();
	109	+	}
1	110

■ ■ ■ ■ ■ ■

create/index.html

		skipped 69 lines
70	70		<div class="form">
71	71		<div class="labeled-input">
72	72		<label for="url">link</label>
73		-	<input type="url" id="url" placeholder="" oninvalid="this.setCustomValidity('Please enter a valid URL. Make sure to include \'http://\'')" oninput="this.setCustomValidity('')" autofocus required />
	73	+	<input type="url" id="url" placeholder="" oninvalid="this.setCustomValidity('Please enter a valid URL. Make sure to include \'http://\' at the beginning.')" oninput="this.setCustomValidity('')" autofocus required />
74	74		</div>
75	75		<div class="labeled-input hint">
76	76		<label for="url">hint (optional)</label>
		skipped 11 lines
88	88		</div>
89	89
90	90		<!-- Advanced options (JavaScript-activated dropdown) -->
91		-	<label onclick="advanced()" id="advanced-label" for="advanced">▸ advanced</label>
	91	+	<label onclick="onAdvanced()" id="advanced-label" for="advanced">▸ advanced</label>
92	92		<div class="advanced" id="advanced">
93	93		<div class="labeled-input">
94	94		<label for="iv">random initialization vector</label>
		skipped 4 lines
99	99		<input type="checkbox" id="salt" />
100	100		</div>
101	101		</div>
102		-	<button id="encrypt" onclick="enc()">Encrypt</button>
	102	+	<button id="encrypt" onclick="onEncrypt()">Encrypt</button>
103	103		</div>
104	104
105	105		<hr />
		skipped 2 lines
108	108		<div class="output">
109	109		<label for="output">output</label>
110	110		<input type="text" id="output" readonly/>
111		-	<button id="copy" onclick="copy('output')">Copy</button>
	111	+	<button id="copy" onclick="onCopy('output')">Copy</button>
112	112		<a href="" id="open" target="_blank"><button>Open in New Tab</button></a>
113	113		<p class="alert">Copied</p>
114	114		</div>
		skipped 10 lines

■ ■ ■ ■ ■ ■

style.css

		skipped 106 lines
107	107
108	108
109	109		/* Advanced settings */
	110	+	#advanced-label {
	111	+	cursor: pointer;
	112	+	margin-bottom: 10px;
	113	+	}
	114	+
110	115		.advanced {
111	116		display: none;
112	117		flex-flow: row wrap;
		skipped 9 lines
122	127		width: auto;
123	128		margin-right: 20px;
124	129		white-space: nowrap;
	130	+	cursor: pointer;
125	131		}
126	132
127	133		.advanced .labeled-input input {
		skipped 8 lines
136	142		}
137	143
138	144		.alert {
139		-	display: none;
	145	+	opacity: 0;
	146	+	transition: opacity 0.25s;
140	147		}
141	148

Add UI functionality via JavaScript