Merge pull request #4 from gt-sse-center/kate/form_validation

More Form Validation
RamanujanMachine · Nov 27, 2023 · 6d10860 · 6d10860
2 parents b228516 + 4c25935
commit 6d10860
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 43 deletions.
diff --git a/react-frontend/cypress/e2e/test.cy.js b/react-frontend/cypress/e2e/test.cy.js
@@ -23,6 +23,10 @@ describe('landing form', () => {
 		cy.get('input').first().parent().should('have.class', 'invalid');
 	});
 
+	it('sets the form as invalid if one of the polynomials is invalid', () => {
+		cy.get('div.form').first().should('have.class', 'invalid');
+	});
+
 	it('forces interation count to 10,000 if a larger value is entered', () => {
 		const iterationCount = '0000';
 		cy.get('input').eq(2).type(`${iterationCount}`);

diff --git a/react-frontend/src/App.css b/react-frontend/src/App.css
@@ -22,34 +22,41 @@ div.body {
 	padding-top: 2rem;
 	width: 100%;
 	height: 100%;
+	background-color: var(--muted);
 }
 
-/* COLORS */
+/* colors and other universal defaults */
 :root {
-	--light: #d4dad6;
-	--dark: #03091c;
-	--primary: #a4da00;
-	--secondary: #45a324;
-	--info: #6cb6e7;
-	--accent1: #1b3855;
-	--accent2: #49788a;
-	--accent3: #9fb1b6;
-	--success: #2cb900;
-	--warning: #ffc732;
-	--danger: #fb0053;
 	--radius: 3px;
+
+	--dark-text: black;
+	--input-text: gray;
+	--light-text: white;
+/*
+	Alt Color Scheme
+	--neutral:#06283b;
+	--contrast: #7c9f24;
+	--bright:#6598c7;
+	--accent: #d2ced1;
+	--muted:#326229;
+*/
+	--contrast:#058fb2;
+	--accent: #f9ae33;
+	--muted:#47c7eb;
+	--neutral: #c8d9cd;
+	--bright:#527e4b;	
 }
 
 .header {
-	background-color: var(--dark);
+	background-color: var(--contrast);
 	margin-top: 0rem;
 	height: 8rem;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	font-size: 3rem;
-	color: white;
+	color: var(--light-text);
 	background-size: cover;
 	position: relative;
 }
@@ -70,7 +77,7 @@ div.form {
 	margin-right: auto;
 	border-radius: var(--radius);
 	background-color: white;
-	filter: drop-shadow(var(--accent3) 1px 1px 0.2rem);
+	filter: drop-shadow(var(--contrast) 1px 1px 0.2rem);
 	opacity: 100%;
 }
 div.form p {
@@ -88,67 +95,77 @@ div.form-field {
 	text-align: left;
 }
 div.form-field.invalid {
-	color: var(--danger);
+	color: var(--accent);
 }
 div.form-field.invalid input {
-	border-color: var(--danger);
+	border-color: var(--accent);
 }
 div.form-field.invalid input:focus {
-	outline-color: var(--danger);
+	outline-color: var(--accent);
 }
 div.form-field label {
 	font-weight: 400;
 	margin-right: 1rem;
 	font-size: 1.2rem;
-	color: var(--accent2);
+	color: var(--dark-text);
 }
 div.form-field input {
 	padding: 0.5rem;
 	min-width: 240px;
 	font-size: 1rem;
-	color: var(--accent2);
-	outline-color: var(--accent2);
+	color: var(--input-text);
+	outline-color: var(--muted);
 	flex-grow: 1;
 }
 div.form-field input:focus {
-	border-color: var(--secondary);
-	outline-color: var(--secondary);
+	border-color: var(--muted);
+	outline-color: var(--muted);
 	outline-width: 2px;
 	border-width: 1px;
 }
 div.form-field input::placeholder {
-	color: var(--accent3);
+	color: var(--neutral);
 	font-size: 1rem;
 }
 button {
-	color: white;
+	color: var(--light-text);
 	font-size: 1.3rem;
 	padding: 0.5rem 0.9rem;
-	border-color: var(--secondary);
+	border-color: var(--muted);
 	border-width: thin;
 	border-style: solid;
 	width: fit-content;
-	background-color: var(--secondary);
+	background-color: var(--muted);
 	border-radius: var(--radius);
 	cursor: pointer;
 	margin-top: 1rem;
 	margin-left: auto;
 	margin-right: auto;
 }
+button:hover {
+	border-color: var(--accent);
+	background-color: var(--accent);
+}
+div.form.invalid button, div.form.invalid button:hover {
+ 	border-color: var(--neutral);
+ 	background-color: var(--neutral);
+ 	color: var(--light-text);
+	cursor: not-allowed;
+}
 input {
 	border-width: thin;
 	border-radius: var(--radius);
-	border-color: var(--medium-color);
+	border-color: var(--muted);
 	padding: 2px 4px;
 	border-style: solid;
 	font-size: 0.8rem;
 }
 div.invalid input {
-	color: var(--contrast-color);
-	border-color: var(--contrast-color);
+	color: var(--bright);
+	border-color: var(--bright);
 }
 div.invalid label {
-	color: var(--contrast-color);
+	color: var(--bright);
 }
 div.link {
 	position: absolute;
@@ -157,7 +174,7 @@ div.link {
 	right: 0.5rem;
 }
 div.link a {
-	color: var(--accent3);
+	color: var(--contrast);
 	font-weight: bold;
 	text-decoration: unset;
 }
diff --git a/react-frontend/src/components/Charts.tsx b/react-frontend/src/components/Charts.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 function Charts({ iterationCount }: { iterationCount: number }) {
-	let analyze = function () {};
+	const analyze = function () {};
 
 	return <div></div>;
 }

diff --git a/react-frontend/src/components/Form.tsx b/react-frontend/src/components/Form.tsx
@@ -3,8 +3,13 @@ import PolynomialInput from './PolynomialInput';
 
 function Form() {
 	const [iterationCount, setIterationCount] = React.useState(1000);
-
-	let validateIterations = function (iterations: number) {
+	const [numeratorIsValid, setNumeratorValidity] = React.useState(false);
+	const [denominatorIsValid, setDenominatorValidity] = React.useState(false);
+	const [formClass, setFormClass] = React.useState('form');
+const formClassFn = () => {
+	return `${formClass} ${numeratorIsValid && denominatorIsValid ? '' : 'invalid'}`;
+}
+	const validateIterations = function (iterations: number) {
 		if (iterationCount > 10000) {
 			setIterationCount(10000);
 		}
@@ -16,16 +21,16 @@ function Form() {
 
 	return (
 		<div>
-			<div className="form">
+			<div className={formClassFn()}>
 				<p>
 					This is some temporary copy pulled from the web site. The simple continued fraction
 					expansion is an intriguing way of writing real numbers, which holds within it many
 					interesting properties of the number itself. These continued fractions have a remarkable
 					tendency to emerge in various places.{' '}
 				</p>
 
-				<PolynomialInput numerator={true}></PolynomialInput>
-				<PolynomialInput></PolynomialInput>
+				<PolynomialInput numerator={true} updateFormValidity={(fieldValidity: boolean) => setNumeratorValidity(fieldValidity)}></PolynomialInput>
+				<PolynomialInput updateFormValidity={(fieldValidity: boolean) => setDenominatorValidity(fieldValidity)}></PolynomialInput>
 				<div className="form-field">
 					<div>
 						<label>iterations</label>

diff --git a/react-frontend/src/components/PolynomialInput.tsx b/react-frontend/src/components/PolynomialInput.tsx
@@ -1,19 +1,25 @@
 import { parse } from 'mathjs';
 import React from 'react';
 
-function PolynomialInput({ numerator = false }: { numerator?: boolean }) {
+function PolynomialInput({ numerator = false, updateFormValidity }: { numerator?: boolean, updateFormValidity: (fieldValidity: boolean)=> void }) {
 	const [polynomial, setPolynomial] = React.useState('');
 	const [polyClass, setPolyClass] = React.useState('form-field');
 
-	let validatePolynomial = function () {
+	let validatePolynomial = function (poly: string) {
+		if(poly.length == 0) {
+			setPolyClass('form-field invalid');
+			updateFormValidity(false);
+		} else {
 		try {
-			let a = parse(polynomial);
+			let a = parse(poly);
 			a.compile();
 			setPolyClass('form-field');
+			updateFormValidity(true);
 		} catch (e) {
 			console.log(e);
 			setPolyClass('form-field invalid');
-		}
+			updateFormValidity(false);
+		}}
 	};
 
 	return (
@@ -25,9 +31,9 @@ function PolynomialInput({ numerator = false }: { numerator?: boolean }) {
 				value={polynomial}
 				onChange={(event) => {
 					setPolynomial(event.target.value);
+					validatePolynomial(event.target.value);
 				}}
 				placeholder="enter a polynomial"
-				onBlur={validatePolynomial}
 			/>
 		</div>
 	);