Redesign profile page (#706)

* Remove everything from profile & add basic card grid layout

* Add back first elements as cards

* Add back in voucher and user data (gdpr)

* Avoid nested voucher form

* Add margin in mobile view when stacked

* Pimp up profile card styling & add voucher redemption pattern

* Move GDPR to account & use full-width for courses

* Add modal for data request

* Show toast upon data request

* Add text to notification toast upon data request

* Delete unused file (from now on unused)

* Improve request data modal explanation text

* Fix card header border radius

* Make accordion background transparent

* Decaffeinate profile code

* Account for border also in voucher redemption box

* Add custom wrapper class to reduce checkbox margin

* Ensure equal height columns

* Improve unsaved changes btn & show immediately

* Add helpdesk to redeem voucher form

* Print some labels in bold

* Change "unsaved changed" button to warning color

* Add back in accordion id

* Add another div for the voucher redeem content

* Replace "einige Daten" by "bestimmte Daten"

* Move javascript include tag to end to avoid initialization issues

* Use $(document).ready() to not miss load events

* Show unsaved changes also at bottom (for small displays)

* Only add margin for big displays

* Fix margins below redeem voucher card

* Remove left-over console log

* Improve data request sent toast message

* Improve redeem voucher form for small displays

* Wrap text in unsaved changes button on small displays

* Improve wording of content tag search & add tooltip

* Use other pattern for voucher redemption card

* Test changing user name (cypress)

* Test changing user tutorial submission name (cypress)

* Remove further `custom: true` occurrences

* Test if language is correctly switched (cypress)

* Start writing module settings cypress test

* use voronoi pattern for voucher redemption card

Signed-off-by: Florian <florianbuerckel@gmail.com>

* Fix flaky language switch test & refactor

* Add test for module settings (allow to subscribe to a lecture)

* Remove cypress `.only`

---------

Signed-off-by: Florian <florianbuerckel@gmail.com>
Co-authored-by: Florian <florianbuerckel@gmail.com>

app/assets/javascripts/application.js

@@ -39,7 +39,6 @@
 //= require masonry_grid
 //= require media
 //= require notifications
-//= require profile
 //= require questions
 //= require quizzes
 //= require referrals

app/assets/javascripts/profile.js

@@ -0,0 +1,42 @@
+$(document).ready(function () {
+  $("#profileForm").on("change input", function () {
+    $("#profileChange").removeClass("d-none");
+    $("#profileChangeBottom").removeClass("d-none");
+  });
+
+  $('input:checkbox[name^="user[lecture"]').on("change", function () {
+    const courseId = this.dataset.course;
+    const lectureId = this.dataset.lecture;
+    const checkedCount = $('input:checked[data-course="' + courseId + '"]').length;
+    const authRequiredLectureIds = $("#lectures-for-course-" + courseId).data("authorize");
+
+    if ($(this).prop("checked") && authRequiredLectureIds.includes(parseInt(lectureId))) {
+      $("#pass-lecture-" + lectureId).show();
+    }
+    else {
+      $("#pass-lecture-" + lectureId).hide();
+      if (checkedCount === 0) {
+        $('.courseSubInfo[data-course="' + courseId + '"]').removeClass("fas fa-check-circle")
+          .addClass("far fa-circle");
+      }
+      else {
+        $('.courseSubInfo[data-course="' + courseId + '"]').removeClass("far fa-circle")
+          .addClass("fas fa-check-circle");
+      }
+    }
+  });
+
+  $(".programCollapse").on("show.bs.collapse", function () {
+    const program = $(this).data("program");
+    $("#program-" + program + "-collapse").find(".coursePlaceholder").each(function () {
+      const course = $(this).data("course");
+      $(this).append($("#course-card-" + course));
+      $("#course-card-" + course).show();
+    });
+  });
+
+  $("#request-data-btn").on("click", function () {
+    const toast = $("#request-data-toast");
+    bootstrap.Toast.getOrCreateInstance(toast).show();
+  });
+});

app/assets/stylesheets/application.scss

@@ -194,10 +194,6 @@ $modal-xxl: 1600px !default;
   overflow-y: scroll;
 }
 
-#profileChange {
-  display: none;
-}
-
 .revertCommontator {
   all: unset;
 }

app/assets/stylesheets/profile.scss

@@ -0,0 +1,53 @@
+@import "bootstrap/functions";
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+.voucher-redemption-pattern {
+  background-image: image-url('voronoi_pattern.svg');
+  background-position: center;
+  background-size: 110%;
+  background-color: #FFFFFF;
+  height: 3em;
+
+  border-top-left-radius: calc(#{$card-inner-border-radius} - 2px);
+  border-top-right-radius: calc(#{$card-inner-border-radius} - 2px);
+}
+
+.profile-card {
+  height: 100%;
+  border: 2px solid #223e62;
+
+  background: linear-gradient(348deg, #f7faff 0%, #fcfdfd 60%);
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 3px;
+
+  .card-header {
+    background-color: #223e62;
+    color: white;
+
+    // account for our custom border
+    border-top-left-radius: calc(#{$card-inner-border-radius} - 2px);
+    border-top-right-radius: calc(#{$card-inner-border-radius} - 2px);
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .voucher-card {
+    min-width: 30em;
+  }
+}
+
+// needed because of https://github.com/bootstrap-ruby/bootstrap_form/issues/738
+// and https://github.com/bootstrap-ruby/bootstrap_form/pull/618
+.checkbox-list {
+  margin-bottom: 0.2em !important;
+}
+
+// Ensure equal height columns
+.row.display-flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.row.display-flex>[class*='col-'] {
+  flex-grow: 1;
+}

app/controllers/profile_controller.rb

@@ -135,7 +135,6 @@ def show_accordion
   def request_data
     MathiMailer.data_request_email(current_user).deliver_later
     MathiMailer.data_provide_email(current_user).deliver_later
-    redirect_to edit_profile_path, notice: t("profile.data_request_sent")
   end
 
   private

app/views/commontator/comments/_form.html.erb

@@ -38,7 +38,9 @@
 
   <div class="field">
     <%=
-      form.text_area :body, rows: '7', class: 'form-control commentForm comment-field', id: new_record ?
+      form.text_area :body, rows: '7',
+        "data-cy": "comment-textarea",
+        class: 'form-control commentForm comment-field', id: new_record ?
         comment.parent.nil? ? "commontator-thread-#{@commontator_thread.id}-new-comment-body" :
                               "commontator-comment-#{comment.parent.id}-reply" :
         "commontator-comment-#{comment.id}-edit-body"
@@ -48,7 +50,8 @@
 
   <div class="submit">
     <%= form.submit t("commontator.comment.actions.#{new_record ? 'create' : 'update'}"),
-                    class: 'btn btn-primary btn-sm' %>
+                    class: 'btn btn-primary btn-sm',
+                    "data-cy": "submit-new-comment" %>
     <%=
       form.submit(
         t('commontator.comment.actions.cancel'), name: 'cancel',

app/views/commontator/comments/_list.html.erb

@@ -6,7 +6,8 @@
 %>
 
 <% nested_comments.each do |comment, nested_children| %>
-  <div id="commontator-comment-<%= comment.id %>" class="comment comment-field">
+  <div id="commontator-comment-<%= comment.id %>" class="comment comment-field"
+      data-cy="comment">
     <%=
       render partial: 'commontator/comments/show', formats: [ :html ], locals: {
         user: user, comment: comment, nested_children: nested_children

app/views/commontator/threads/_reply.html.erb

@@ -14,7 +14,8 @@
       <div id="commontator-thread-<%= thread.id %>-new-comment-link" class="new-comment">
         <%= link_to t('commontator.comment.actions.new'),
             commontator.new_thread_comment_path(thread),
-            remote: true %>
+            remote: true,
+            "data-cy": "new-comment" %>
       </div>
     <% end %>
 

app/views/lectures/subscribe_page.html.erb

@@ -48,7 +48,8 @@
                                  value: "redirect" %>
             </p>
             <%= f.submit t("profile.subscribe_lecture"),
-                         class: "btn btn-primary"%>
+                         class: "btn btn-primary",
+                         "data-cy": "subscribe-to-lecture" %>
           <% end %>
         <% else %>
           <%= link_to t("profile.subscribe_lecture"),
@@ -58,7 +59,8 @@
                                                      parent: "redirect" } }),
                       method: :patch,
                       remote: true,
-                      class: "btn btn-primary" %>
+                      class: "btn btn-primary",
+                      "data-cy": "subscribe-to-lecture" %>
         <% end %>
       </p>
     </div>

app/views/profile/_account.html.erb

@@ -1,8 +1,14 @@
 <%= link_to t('profile.change_data'),
               edit_user_registration_path,
-              class: "btn btn-outline-secondary mb-2" %>
+              class: "btn btn-outline-secondary" %>
+
+<button type="button" class="btn btn-outline-secondary" id="open-request-data"
+        data-bs-toggle="modal" data-bs-target="#requestDataModal">
+    <%= t('profile.data_request') %>
+</button>
+
 <%= link_to t('profile.delete_account'),
             delete_account_path,
-            class: "btn btn-outline-danger mb-2",
+            class: "btn btn-outline-danger",
             "data-cy": "delete-account-btn",
             remote: true %>

app/views/profile/_email_notifications.html.erb

@@ -9,13 +9,13 @@
     <%= f.form_group :email_notifications do %>
       <%= f.check_box :email_for_announcement,
                       label: t('profile.email_for_announcement'),
-                      custom: true %>
+                      wrapper_class: 'checkbox-list' %>
       <%= f.check_box :email_for_medium,
                       label: t('profile.email_for_medium'),
-                      custom: true %>
+                      wrapper_class: 'checkbox-list' %>
       <%= f.check_box :email_for_teachable,
                       label: t('profile.email_for_teachable'),
-                      custom: true %>
+                      wrapper_class: 'checkbox-list' %>
     <% end %>
   </div>
   <div class="col-12">
@@ -25,22 +25,22 @@
     <%= f.form_group :submission_emails do %>
       <%= f.check_box :email_for_submission_upload,
                       label: t('profile.email_for_submission_upload'),
-                      custom: true %>
+                      wrapper_class: 'checkbox-list' %>
       <%= f.check_box :email_for_submission_removal,
                       label: t('profile.email_for_submission_removal'),
-                      custom: true %>
+                      wrapper_class: 'checkbox-list' %>
       <%= f.check_box :email_for_submission_join,
                       label: t('profile.email_for_submission_join'),
-                      custom: true %>
+                      wrapper_class: 'checkbox-list' %>
       <%= f.check_box :email_for_submission_leave,
                       label: t('profile.email_for_submission_leave'),
-                      custom: true %>
+                      wrapper_class: 'checkbox-list' %>
       <%= f.check_box :email_for_correction_upload,
                       label: t('profile.email_for_correction_upload'),
-                      custom: true %>
+                      wrapper_class: 'checkbox-list' %>
       <%= f.check_box :email_for_submission_decision,
                       label: t('profile.email_for_submission_decision'),
-                      custom: true %>
+                      wrapper_class: 'checkbox-list' %>
     <% end %>
   </div>
   <div class="col-12">
@@ -49,8 +49,7 @@
     </h5>
     <%= f.form_group :other_email_notifications do %>
       <%= f.check_box :email_for_news,
-                      label: t('profile.email_for_news'),
-                      custom: true %>
+                      label: t('profile.email_for_news') %>
     <% end %>
   </div>
 </div>

app/views/profile/_request_data_modal.html.erb

@@ -0,0 +1,50 @@
+<!-- Modal -->
+<div class="modal fade" id="requestDataModal" tabindex="-1"
+      aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+
+      <div class="modal-header">
+        <h1 class="modal-title fs-5" id="exampleModalLabel">
+          <%= t('profile.my_data') %>
+        </h1>
+        <button type="button" class="btn-close"
+                data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+
+      <div class="modal-body">
+        <%= t('profile.data_explanation') %>
+      </div>
+
+      <div class="modal-footer">
+        <%= link_to t('profile.data_request'),
+                      request_data_path,
+                      class: "btn btn-primary",
+                      id: "request-data-btn",
+                      type: "button",
+                      data: { 'bs-dismiss': 'modal' },
+                      remote: true %>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<!-- Notification upon successful data retrieval -->
+<div aria-live="polite" aria-atomic="true"
+    class="position-fixed top-50 start-50 translate-middle" style="z-index: 1050;">
+  <div class="toast profile-card" id="request-data-toast" role="alert"
+      aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
+
+    <div class="toast-header">
+      <strong class="me-auto"><%= t('profile.data_request') %></strong>
+      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+
+    <div class="toast-body">
+      <%= t('profile.data_request_sent') %>
+    </div>
+
+  </div>
+</div>