fix: CSP improvements

Incremental improvements towards being able to enforce CSP properly. Contributes to: #346 Signed-off-by: Dale Lane <[email protected]>
IBM · Dec 12, 2020 · b99eb16 · b99eb16
1 parent 397664f
commit b99eb16
Show file tree

Hide file tree

Showing 25 changed files with 186 additions and 69 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -235,6 +235,7 @@ module.exports = function(grunt) {
         concat : {
             jsapp : {
                 src : [
+                    'public/init.js',
                     'public/app.run.js',
                     'public/' + additionalVariables,
                     'public/components/**/*.js'

diff --git a/gulpfile.js b/gulpfile.js
@@ -37,6 +37,7 @@ const paths = {
     jstest : ['dist/tests/**/*.js'],
     css : ['public/app.css', 'public/components/**/*.css'],
     webjs : [
+        'public/init.js',
         'public/app.run.js',
         'public/components/**/*.js',
     ]
@@ -220,8 +221,14 @@ function concatAndMinifiyWebJs (isForProd) {
     let additionalVariables;
     if (process.env.DEPLOYMENT === 'machinelearningforkids.co.uk') {
         if (isForProd) {
-            // uses prod auth0 environment
-            additionalVariables = ['public/auth0-prod-variables.js'];
+            additionalVariables = [
+                // google analytics support
+                'public/prod-analytics.js',
+                // sentry alerting support
+                'public/prod-sentry.js',
+                // uses prod auth0 environment
+                'public/auth0-prod-variables.js'
+            ];
         }
         else {
             // uses dev/staging auth0 environment

diff --git a/public/components/admin/admin.css b/public/components/admin/admin.css
@@ -0,0 +1,3 @@
+.siteadminform {
+    width: 80%;
+}
diff --git a/public/components/admin/admin.html b/public/components/admin/admin.html
@@ -10,10 +10,10 @@ <h2 class="text-center">Site admin</h2>
     </div>
 </div>
 <div ng-if="isAuthenticated && vm.profile.role === 'siteadmin'" class="adminpage">
-    <form name="newAlert" style="width: 80%">
+    <form name="newAlert" class="siteadminform">
         <md-dialog-content>
             <div>
-                <md-input-container style="width: 80%">
+                <md-input-container class="siteadminform">
                     <label>message</label>
                     <input ng-minlength="1" ng-maxlength="280"
                         ng-required="true"
@@ -22,7 +22,7 @@ <h2 class="text-center">Site admin</h2>
                 </md-input-container>
             </div>
             <div>
-                <md-input-container style="width: 80%">
+                <md-input-container class="siteadminform">
                     <label>url</label>
                     <input ng-minlength="1" ng-maxlength="280"
                         name="url"

diff --git a/public/components/apikeysguide/guide.css b/public/components/apikeysguide/guide.css
@@ -0,0 +1,6 @@
+.helpsection.apikeysguidepage {
+    margin-top: 1em;
+}
+.helpsection .apikeysguideinfo {
+    margin-bottom: 1em;
+}
diff --git a/public/components/apikeysguide/guide.html b/public/components/apikeysguide/guide.html
@@ -1,8 +1,8 @@
-<div class="helpsection" style="margin-top: 1em;">
+<div class="helpsection apikeysguidepage">
     <h3 translate="APIKEYSGUIDE.TITLE"></h3>
-    <div translate="APIKEYSGUIDE.INTRO.INTRO_1" style="margin-bottom: 1em;"></div>
-    <div translate="APIKEYSGUIDE.INTRO.INTRO_2" style="margin-bottom: 1em;"></div>
-    <div translate="APIKEYSGUIDE.INTRO.INTRO_3" style="margin-bottom: 1em;"></div>
+    <div translate="APIKEYSGUIDE.INTRO.INTRO_1" class="apikeysguideinfo"></div>
+    <div translate="APIKEYSGUIDE.INTRO.INTRO_2" class="apikeysguideinfo"></div>
+    <div translate="APIKEYSGUIDE.INTRO.INTRO_3" class="apikeysguideinfo"></div>
     <div class="helpguides">
         <div class="helpguide">
             <a href="https://github.com/IBM/taxinomitis-docs/raw/master/docs/pdf/machinelearningforkids-apikeys.pdf">

diff --git a/public/components/appinventor/appinventor.css b/public/components/appinventor/appinventor.css
@@ -0,0 +1,12 @@
+.appinventorpage .appinvheader {
+    margin: 2em;
+}
+
+.appinventorpage code {
+    font-size: 75%;
+}
+
+.appinventorpage img {
+    width: 100%;
+    border: thin #c9c9c9 solid;
+}
diff --git a/public/components/appinventor/appinventor.html b/public/components/appinventor/appinventor.html
@@ -16,7 +16,7 @@
     <strong translate="APP.ERROR"></strong> <span translate="ERRORS.MISSINGPROJECTID"></span> <a ui-sref="projects" translate="APP.PROJECTS"></a>
 </div>
 
-<div ng-if="isAuthenticated && projectId">
+<div ng-if="isAuthenticated && projectId" class="appinventorpage">
     <div class="jumbotron">
         <h2 class="text-center" translate="APPINVENTOR.TITLE"></h2>
     </div>
@@ -60,8 +60,7 @@ <h2 class="text-center" translate="APPINVENTOR.TITLE"></h2>
     </div>
 
 
-    <div ng-if="scratchkey && project && project.labels.length > 1 && project.type !== 'sounds'" 
-         style="margin: 2em;">
+    <div ng-if="scratchkey && project && project.labels.length > 1 && project.type !== 'sounds'" class="appinvheader">
         <!-- ------------------------------------- -->
         <!--  page state :   NO MODEL              -->
         <!--                                       -->
@@ -75,7 +74,7 @@ <h2 class="text-center" translate="APPINVENTOR.TITLE"></h2>
             </div>
             <div>
                 Or you can go to <a class="btn btn-default" target="_blank" href="{{ projecturls.appinventor }}">App Inventor</a> now.
-            </div>    
+            </div>
         </div>
 
         <!-- ------------------------------------- -->
@@ -90,7 +89,7 @@ <h2 class="text-center" translate="APPINVENTOR.TITLE"></h2>
         </div>
     </div>
 
-    
+
     <div ng-if="project && project.labels.length > 1 && project.type !== 'sounds'"
          class="modelguidancecontainer">
 
@@ -117,18 +116,17 @@ <h2 class="text-center" translate="APPINVENTOR.TITLE"></h2>
                     <a href="https://github.com/kylecorry31">Kyle Corry</a> and
                     <a href="https://github.com/MrMazzone">Joe Mazzone</a></em>
             </div>
-            <!-- <img src="static/images/appinventor.png" alt="App Inventor" style="width: 100%; border: thin #c9c9c9 solid;"/> -->
         </div>
         <div class="modelguidance">
             <div class="modelstatusdetail">
                 To add your machine learning model to your App Inventor project:
                 <ol>
                     <li>Click on <strong>Import extension</strong></li>
                     <li>Click on <strong>URL</strong></li>
-                    <li>Fill in the URL for your project: <br/><code style="font-size: 75%;">{{ appinventorurl }}</code></li>
+                    <li>Fill in the URL for your project: <br/><code>{{ appinventorurl }}</code></li>
                 </ol>
             </div>
-            <img src="static/images/appinventor-import.png" alt="App Inventor" style="width: 100%; border: thin #c9c9c9 solid;"/>
+            <img src="static/images/appinventor-import.png" alt="App Inventor"/>
         </div>
 
     </div>

diff --git a/public/components/datasets/dataset.tmpl.html b/public/components/datasets/dataset.tmpl.html
@@ -8,12 +8,12 @@ <h2>"{{dataset.title}}"</h2>
             </md-button>
         </div>
     </md-toolbar>
-    <form ng-submit="confirm(dataset)">
+    <form ng-submit="confirm(dataset)" class="datasetdialog">
         <md-dialog-content>
-            <div class="md-dialog-content" style="min-width: 300px; max-width: 1000px;">
+            <div class="md-dialog-content" class="datasetdialog">
                 <md-card-content>
-                    <div style="font-weight: bold; padding-bottom: 1em">{{dataset.description}}</div>
-                    <div style="white-space: pre-line;">{{dataset.details}}</div>
+                    <div class="datasetdescription">{{dataset.description}}</div>
+                    <div class="datasetdetails">{{dataset.details}}</div>
                 </md-card-content>
             </div>
         </md-dialog-content>

diff --git a/public/components/datasets/datasets.css b/public/components/datasets/datasets.css
@@ -10,6 +10,7 @@
 
     margin-left: auto;
     margin-right: auto;
+    padding: 2em;
 }
 
 .datasetcard {
@@ -22,6 +23,10 @@
     flex-direction: column;
 }
 
+.datasetcard.fullheightcard {
+    height: 100%;
+}
+
 .datasetcard .title {
     font-size: 1.6em;
     font-weight: bold;
@@ -57,6 +62,18 @@
     margin-right: 8px;
 }
 
+.datasetdialog {
+    min-width: 300px;
+    max-width: 1000px;
+}
+
+.datasetdialog .datasetdescription {
+    font-weight: bold;
+    padding-bottom: 1em;
+}
+.datasetdialog .datasetdetails {
+    white-space: pre-line;
+}
 
 
 /* *************************************/

diff --git a/public/components/datasets/datasets.html b/public/components/datasets/datasets.html
@@ -24,7 +24,7 @@ <h2 class="text-center" translate="DATASETS.TITLE"></h2>
     <p translate="DATASETS.INTRO.INTRO_3"></p>
 </div>
 <div ng-if="vm.loading" class="loading"></div>
-<div ng-if="isAuthenticated" style="padding: 2em">
+<div ng-if="isAuthenticated" >
     <div class="datasets">
         <div ng-hide="vm.loading" ng-repeat="dataset in vm.datasets" class="datasetcard">
             <div class="cardmain">
@@ -54,7 +54,7 @@ <h2 class="text-center" translate="DATASETS.TITLE"></h2>
                 </div>
             </div>
         </div>
-        <div class="datasetcard" style="height: 100%;">
+        <div class="datasetcard fullheightcard">
             <div class="cardmain">
                 <div class="info">
                     <div class="title" translate="DATASETS.MORE.TITLE"></div>

diff --git a/public/components/help/help.css b/public/components/help/help.css
@@ -1,3 +1,7 @@
+.helpsectionalert {
+    padding: 2em 2em 1em 2em;
+}
+
 .helpsection {
     margin-left: 30px;
     margin-right: 30px;

diff --git a/public/components/help/help.html b/public/components/help/help.html
@@ -1,4 +1,4 @@
-<div style="padding: 2em 2em 1em 2em">
+<div class="helpsectionalert">
     <div class="alert alert-info pageheadermsg" role="alert" translate="HELP.CONTACT"></div>
 </div>
 

diff --git a/public/components/login/login.css b/public/components/login/login.css
@@ -186,6 +186,10 @@ table.loginInfoGrid td {
     margin: 1em 0;
 }
 
+.loginPage .loginType .loginNewClassButton {
+    text-align: center;
+}
+
 .loginPageFooter {
     margin: 0 auto 3em auto;
     max-width: 700px;

diff --git a/public/components/login/login.html b/public/components/login/login.html
@@ -116,7 +116,7 @@ <h2 class="text-center" translate>LOGIN.TITLE</h2>
                     <li translate>SIGNUP.UNMANAGED.LIST_ENTERAPIKEYS</li>
                 </ul>
                 <div class="loginNewClassInfo" translate>SIGNUP.UNMANAGED.HELP</div>
-                <div style="text-align: center">
+                <div class="loginNewClassButton">
                     <button class="btn btn-primary signup-button" ui-sref="signup">
                         <strong translate>LOGIN.SIGN_UP</strong>
                     </button>
@@ -130,7 +130,7 @@ <h2 class="text-center" translate>LOGIN.TITLE</h2>
                     <li translate>SIGNUP.MANAGED.LIST_NAMEOFSCHOOL</li>
                 </ul>
                 <div class="loginNewClassInfo" translate>SIGNUP.MANAGED.RESTRICTIONS</div>
-                <div style="text-align: center">
+                <div class="loginNewClassButton">
                     <button class="btn btn-primary signup-button" ng-click="vm.sendEmail()" translate>
                         SIGNUP.MANAGED.EMAIL
                     </button>

diff --git a/public/components/models/models.css b/public/components/models/models.css
@@ -11,12 +11,18 @@
     }
 }
 
+.backbutton.modelspage {
+    width: 100%;
+    display: flex;
+}
+
 .modelguidancecontainer {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
 }
 
+
 .modelguidance {
     flex: 1;
     background-color: #eeeeee;
@@ -70,6 +76,48 @@
     }
 }
 
+.trainingserversection .trainbuttons {
+    margin: 4em;
+}
+
+.trainingserversection .modelinfotext {
+    margin: 1em;
+}
+
+.trainingserversection .testtext {
+    margin-left: 2em;
+    width: 60%;
+}
+
+.trainingserversection .testwebcambutton {
+    margin: 2em;
+}
+.trainingserversection .testcanvasbutton {
+    margin: 1em;
+}
+.trainingserversection .testurlbutton {
+    margin-left: 2em;
+    width: 70%;
+}
+.trainingserversection .testnumbers {
+    margin-left: 2em;
+    margin-bottom: 1em;
+}
+.trainingserversection .testnumberfield {
+    padding-right: 2em;
+}
+.trainingserversection .describetextmodelbutton {
+    margin-left: 1em;
+}
+.trainingserversection .describemodelbuttons {
+    margin-left: 50px;
+}
+.trainingserversection .testoutput {
+    margin: 2em;
+}
+.trainingserversection .progressindicator {
+    display: inline;
+}
 
 .quizintro {
     font-size: 1.3em;