feat: Make sure that TermsOfService modal form doesn't refresh the …

…page.
CUCWD · May 30, 2023 · af50480 · af50480
1 parent df1455f
commit af50480
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 6 deletions.
diff --git a/lms/static/sass/features/_termsofservice.scss b/lms/static/sass/features/_termsofservice.scss
@@ -12,17 +12,22 @@
   position:fixed;
   background: white;
   width: 80%;
-  height: 90%;
+  height: auto;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);
   border-radius: 10px;
+
+  form {
+    margin-bottom: 20px;
   }
+}
 
 .scrollable_tos_style {
     height: 58vh;
     width: auto;
-    overflow: scroll;
+    overflow-x: hidden;
+    overflow-y: auto;
     padding: 6px;
   }
 

diff --git a/lms/templates/static_templates/tos.html b/lms/templates/static_templates/tos.html
@@ -72,6 +72,7 @@
                                 <div class="fusion-column-wrapper" style="background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;" data-bg-url="">
                                     <div class="fusion-title title fusion-sep-none fusion-title-size-two fusion-border-below-title"
                                          style="margin-top:40px;margin-bottom:0px;">
+                                        <h1>Terms of Service</h1>
                                             ${tos_html}
                                         <div class="fusion-fullwidth fullwidth-box hundred-percent-fullwidth fusion-equal-height-columns"
                                              style="background-color: #dddddd;background-position: left top;background-repeat: no-repeat;padding-top:45px;padding-right:23%;padding-bottom:20px;padding-left:23%;border-top-width:0px;border-bottom-width:0px;border-color:#eae9e9;border-top-style:solid;border-bottom-style:solid; margin-top: 30px;">

diff --git a/openedx/features/termsofservice/admin.py b/openedx/features/termsofservice/admin.py
@@ -16,6 +16,7 @@ class TermsOfServiceAcknowledgementAdmin(admin.ModelAdmin):
 class TermsOfServiceSitesAdmin(admin.ModelAdmin):
     list_display = ('site', 'curf')
 
+
 class TermsOfServiceAllSitesAdmin(admin.ModelAdmin):
     list_display = ('curf',)
 

diff --git a/openedx/features/termsofservice/models.py b/openedx/features/termsofservice/models.py
@@ -48,11 +48,11 @@ class Meta:
 
 # TermsOfServiceAllSites - holds the default site - This model holds only one default object
 class TermsOfServiceAllSites(models.Model):
+    """
+        Model to assign all sites (platform) to a Terms of Service (Linked curf_id)
+    """
     class Meta:
         app_label = 'termsofservice'
         verbose_name = 'TermsOfServiceAllSite'
 
-    # id = models.AutoField(verbose_name='ID', serialize=False, auto_created=True, primary_key=True)
     curf = models.OneToOneField(TermsOfService, to_field="curf_id", on_delete=models.CASCADE)
-
-    # models.ForeignKey(TermsOfService, primary_key=True, to_field="curf_id", on_delete=models.CASCADE)
diff --git a/openedx/features/termsofservice/static/termsofservice/jsx/Modal.jsx b/openedx/features/termsofservice/static/termsofservice/jsx/Modal.jsx
@@ -36,6 +36,13 @@ class ModalView extends Component {
     return !this.state.tos_isChecked;
   }
 
+  // Prevent the default form from submitting and refreshing the page that it's included on.
+  // (e.g. The dashboard page won't refresh after the learner submits the form)
+  // https://stackoverflow.com/questions/28479239/setting-onsubmit-in-react-js
+  submitTOS (e) {
+    e.preventDefault();
+  }
+
   retrievePage() {
     $.get('/termsofservice/v1/current_tos/')
       .then(data => {
@@ -105,7 +112,7 @@ class ModalView extends Component {
             </div>
 
             <div className="modal-footer d-inline text-center">
-              <form>
+              <form onSubmit={this.submitTOS}>
                 <div className="form-check d-flex justify-content-center flex-nowrap">
                   <input className="form-check-input" type="checkbox" value="" onChange={this.checkboxClicked} id="agree-to-tos"></input>
                   <label className="form-check-label m-3" htmlFor="agree-to-tos">