feat(challenges): Added warning feedback for non-front-facing glitch url (#16709)

common/app/routes/Challenges/Solution-Input.jsx

@@ -10,10 +10,15 @@ const propTypes = {
 
 export default function SolutionInput({ solution, placeholder }) {
   const validationState = getValidationState(solution);
+
   return (
     <FormGroup
       controlId='solution'
-      validationState={ validationState }
+      validationState={
+        (validationState && validationState.includes('warning')) ?
+          'warning' :
+          validationState
+      }
       >
       <FormControl
         name='solution'
@@ -22,9 +27,16 @@ export default function SolutionInput({ solution, placeholder }) {
         { ...DOMOnlyProps(solution) }
       />
       {
-        validationState === 'error' ?
+        validationState === 'error' &&
-          <HelpBlock>Make sure you provide a proper URL.</HelpBlock> :
+          <HelpBlock>Make sure you provide a proper URL.</HelpBlock>
-          null
+      }
+      {
+        validationState === 'glitch-warning' &&
+          <HelpBlock>
+            Make sure you have entered a shareable URL
+            (e.g. "https://green-camper.glitch.me", not
+            "https://glitch.com/#!/edit/green-camper".)
+          </HelpBlock>
       }
     </FormGroup>
   );

common/app/utils/form.js

@@ -65,6 +65,10 @@ export function getValidationState(field) {
     return null;
   }
 
+  if ((/https?:\/\/glitch\.com\/edit\/#!\/.*/g).test(field.value)) {
+    return 'glitch-warning';
+  }
+
   return field.error ?
     'error' :
     'success';