Redesign profile page

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).on("turbolinks:load", function () {
+  $("#profileForm").on("change input", function () {
+    $("#profileChange").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 () {
+    console.log("pressed");
+    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,57 @@
+@import "bootstrap/functions";
+@import "bootstrap/variables";
+
+.voucher-redemption-pattern {
+  background:
+    radial-gradient(50% 50% at 100% 0, #FFFFFF 0% 5%, #223E62 6% 15%, #FFFFFF 16% 25%, #223E62 26% 35%, #FFFFFF 36% 45%,
+      #223E62 46% 55%, #FFFFFF 56% 65%, #223E62 66% 75%, #FFFFFF 76% 85%, #223E62 86% 95%,
+      #0000 96%),
+    radial-gradient(50% 50% at 0 100%, #FFFFFF 0% 5%, #223E62 6% 15%, #FFFFFF 16% 25%, #223E62 26% 35%, #FFFFFF 36% 45%,
+      #223E62 46% 55%, #FFFFFF 56% 65%, #223E62 66% 75%, #FFFFFF 76% 85%, #223E62 86% 95%,
+      #0000 96%),
+    radial-gradient(50% 50%, #FFFFFF 0% 5%, #223E62 6% 15%, #FFFFFF 16% 25%, #223E62 26% 35%, #FFFFFF 36% 45%,
+      #223E62 46% 55%, #FFFFFF 56% 65%, #223E62 66% 75%, #FFFFFF 76% 85%, #223E62 86% 95%,
+      #0000 96%),
+    radial-gradient(50% 50%, #FFFFFF 0% 5%, #223E62 6% 15%, #FFFFFF 16% 25%, #223E62 26% 35%, #FFFFFF 36% 45%,
+      #223E62 46% 55%, #FFFFFF 56% 65%, #223E62 66% 75%, #FFFFFF 76% 85%, #223E62 86% 95%,
+      #0000 96%) 39px 39px;
+  background-size: 78px 78px;
+  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);
+  }
+}
+
+// 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/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>

app/views/profile/_subscription_type.html.erb

@@ -1,7 +1,7 @@
 <div class="row">
   <div class="col-12">
     <%= f.form_group :locale,
-                    label: { text: t('profile.locale') } do %>
+                    label: { text: t('profile.locale'), class: 'fw-bold' } do %>
       <% I18n.available_locales.each do |locale| %>
         <%= f.radio_button :locale,
                            locale.to_s,

app/views/profile/_subscriptions.html.erb

@@ -38,8 +38,8 @@
     <% Program.includes(divisions: [courses: [lectures: [:term, :teacher]]])
               .select { |p| p.courses.any? }.natural_sort_by(&:name_with_subject)
               .each do |p| %>
-      <div class="accordion-item">
-        <button class="accordion-button collapsed"
+      <div class="accordion-item bg-transparent">
+        <button class="accordion-button collapsed bg-transparent"
                 type="button"
                 data-bs-toggle="collapse"
                 data-bs-target="#program-<%= p.id %>-collapse">