Port edit profile to react

app/controllers/users_controller.rb

@@ -180,6 +180,31 @@ def upload_avatar
     end
   end
 
+  def update_preferences
+    user = user_to_edit
+    user.current_user = current_user
+    return render json: { ok: false } unless current_user&.can_edit_user?(user)
+
+    preferred_events = params[:preferred_event_ids]
+    if preferred_events.present?
+      user.update(preferred_events: Event.find(preferred_events))
+    end
+
+    results_notifications_enabled = params[:results_notifications_enabled]
+
+    if params.key?(:results_notifications_enabled)
+      user.update(results_notifications_enabled: results_notifications_enabled)
+    end
+
+    registration_notifications_enabled = params[:registration_notifications_enabled]
+
+    if params.key?(:registration_notifications_enabled)
+      user.update(registration_notifications_enabled: registration_notifications_enabled)
+    end
+
+    render json: { ok: true }
+  end
+
   def update_avatar
     avatar_id = params.require(:avatarId)
 

app/views/users/edit.html.erb

@@ -1,194 +1,46 @@
 <% provide(:title, @user.name) %>
 
-<div class="container">
-  <h1 class="text-center"><%= yield(:title) %> (<%= mail_to @user.email %>)</h1>
-  <% unless @user.confirmed_at %>
-    <%= alert :warning, t('.unconfirmed_email', email: @user.email) %>
-  <% end %>
-  <% if @user.unconfirmed_wca_id.present? %>
-    <% mail_to_delegate = mail_to(@user.delegate_to_handle_wca_id_claim.email, @user.delegate_to_handle_wca_id_claim.name, target: "_blank") %>
-    <% link_id = wca_id_link(@user.unconfirmed_wca_id) %>
-    <% message = @user.confirmed_at ? '.pending_claim_confirmation_html' : '.pending_claim_mail_confirmation_html' %>
-    <% # i18n-tasks-use t('.pending_claim_confirmation_html') #<- useful because the previous line tricks i18n-tasks %>
-    <% # i18n-tasks-use t('.pending_claim_mail_confirmation_html') %>
-    <%= alert :warning, t(message, delegate: mail_to_delegate, wca_id: link_id) %>
-  <% end %>
-  <% if @user.unconfirmed_email %>
-    <%= alert :warning, t('.pending_mail_confirmation', email: @user.unconfirmed_email) %>
-  <% end %>
-  <% if @user.dummy_account? %>
-    <%= alert :warning do %>
-      This account is a dummy account. It serves as a placeholder because the competitor
-      uploaded a profile picture before the website supported WCA accounts. This
-      acount will be automatically deleted when another user is assigned WCA
-      id <%= @user.wca_id %>.
-      See <%= link_to "this commit", "https://github.com/thewca/worldcubeassociation.org/commit/32624f95b2c9e68967f8680ffa3ed7aefccd5319", target: "_blank" %> for more details.
-    <% end %>
-  <% end %>
-  <% if @user.cannot_register_for_competition_reasons.length > 0 %>
-    <%= alert :warning do %>
-      <%= t '.please_fix_profile' %>
-      <ul>
-        <% @user.cannot_register_for_competition_reasons.each do |reason| %>
-          <li><%= reason %></li>
-        <% end %>
-      </ul>
-    <% end %>
-  <% end %>
-  <% if current_user.cannot_edit_data_reason_html(@user) %>
-    <%= alert :warning, current_user.cannot_edit_data_reason_html(@user) %>
-  <% end %>
-
-  <% editable_fields = current_user.editable_fields_of_user(@user) %>
-
-  <ul class="nav nav-tabs nav-justified">
-    <li><a href="#general" data-toggle="tab"><%= t '.general' %></a></li>
-    <% if @user == current_user %>
-      <li><a href="<%= protected_tab("#email") %>" data-toggle="tab"><%= t '.email' %></a></li>
-      <li><a href="#preferences" data-toggle="tab"><%= t '.preferences' %></a></li>
-      <li><a href="<%= protected_tab("#password") %>" data-toggle="tab"><%= t '.password' %></a></li>
-      <li><a href="<%= protected_tab("#2fa") %>" data-toggle="tab">2FA</a></li>
-    <% end %>
-    <% if current_user.can_change_users_avatar?(@user) %>
-      <li><a href="#avatar" data-toggle="tab">Avatar</a></li>
-    <% end %>
-    <% if current_user.can_view_all_users? %>
-      <li><a href="#roles" data-toggle="tab">Roles</a></li>
-    <% end %>
-  </ul>
-
-  <div class="tab-content" id="edit-user-tabs">
-    <div class="tab-pane" id="general">
-      <%= simple_form_for @user, html: { class: 'are-you-sure' } do |f| %>
-        <%= hidden_field_tag "section", "general" %>
-
-        <%= f.input :name, disabled: !editable_fields.include?(:name) %>
-        <%= f.input :dob, as: :date_picker, disabled: !editable_fields.include?(:dob) %>
-        <%= f.input :gender, disabled: !editable_fields.include?(:gender) %>
-        <%= f.input :country_iso2, collection: Country.all_sorted_by(I18n.locale, real: true), value_method: lambda { |c| c.iso2 }, label_method: lambda { |c| c.name }, disabled: !editable_fields.include?(:country_iso2) %>
-
-        <% if current_user.can_view_all_users? %>
-          <div class="row" id="wca_id">
-            <div class="col-xs-6">
-              <% if @user.unconfirmed_wca_id.present? %>
-                <div class="form-group wca_id optional user_unconfirmed_wca_id">
-                  <label class="wca_id optional control-label" for="user_unconfirmed_wca_id">
-                    <%= t 'activerecord.attributes.user.unconfirmed_wca_id' %>
-                  </label>
-                  <div class="input-group">
-                    <%= f.input_field :unconfirmed_wca_id, as: :wca_id, disabled: !editable_fields.include?(:unconfirmed_wca_id), class: "form-control" %>
-                    <span class="input-group-addon">
-                      <a href="#" id="unconfirmed-wca-id-profile" target="_blank">
-                        <%= t '.profile' %>
-                      </a>
-                    </span>
-                    <div class="input-group-btn">
-                      <button type="button" class="btn btn-default" id="approve-wca-id">
-                        <%= t '.approve' %>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              <% end %>
-            </div>
-            <div class="col-xs-6">
-              <%= f.input :wca_id, as: :wca_id, disabled: !editable_fields.include?(:wca_id)%>
-              <% if current_user.can_edit_any_user? && @user.is_special_account? %>
-                <p class="help-block">
-                  <%= t '.account_is_special' %>
-                </p>
-              <% end %>
-            </div>
-          </div>
-        <% else %>
-          <p>
-            <% if @user.wca_id.blank? %>
-              <%= t '.have_no_wca_id_html', here: link_to(t('common.here'), profile_claim_wca_id_path) %>
-            <% else %>
-              <%= t '.have_wca_id_html', link_id: wca_id_link(@user.wca_id) %>
-            <% end %>
-          </p>
-        <% end %>
-
-        <% if @user.staff_or_any_delegate? && (current_user.can_view_all_users? || current_user == @user) %>
-          <%= f.input :receive_delegate_reports, disabled: !editable_fields.include?(:receive_delegate_reports) %>
-          <%= f.input :delegate_reports_region, as: :grouped_select, collection: region_options_hash(real_only: true), group_method: :second, selected: @user.delegate_reports_region_id, disabled: !editable_fields.include?(:delegate_reports_region), include_blank: true %>
-        <% end %>
-
-        <%= f.submit t('.save'), class: "btn btn-primary" %>
-      <% end %>
-    </div>
-
-    <% if @user == current_user %>
-      <%# The section below holds sensitivate data changes. For this we require %>
-      <%# the user to enter again their password or 2FA.  %>
-      <% if @recently_authenticated %>
-        <div class="tab-pane active" id="email">
-          <%= simple_form_for @user do |f| %>
-            <%= hidden_field_tag "section", "email" %>
-            <%= f.input :email, disabled: !editable_fields.include?(:email), hint: t('.confirm_new_email') %>
-
-            <%= f.submit t('.save'), class: "btn btn-primary" %>
-          <% end %>
-        </div>
-        <div class="tab-pane active" id="password">
-          <%= simple_form_for @user do |f| %>
-            <%= hidden_field_tag "section", "password" %>
-            <%= f.input :password, autocomplete: "off", class: "form-control" %>
-            <%= f.input :password_confirmation, class: "form-control"  %>
-
-            <%= f.submit t('.save'), class: "btn btn-primary" %>
-          <% end %>
-
-          <h3><%= t('.actions') %></h3>
-          <%= link_to(t('.sign_out_of_devices'), destroy_other_user_sessions_path,
-                      method: :delete, class: "btn btn-danger") %>
-        </div>
-        <div class="tab-pane active" id="2fa">
-          <%= render "2fa_tab" %>
-        </div>
-      <% else %>
-        <div class="tab-pane active" id="2fa-check">
-          <%= render "2fa_confirm" %>
-        </div>
-      <% end %>
-      <div class="tab-pane active" id="preferences">
-        <%= simple_form_for @user do |f| %>
-          <%= hidden_field_tag "section", "preferences" %>
-
-          <%= render "shared/associated_events_picker", form_builder: f, disabled: !editable_fields.include?(:preferred_events),
-                                                        events_association_name: :user_preferred_events, selected_events: @user.preferred_events %>
-          <span class="help-block"><%= t '.preferred_events_desc' %></span>
-
-          <%= label_tag :notifications, t('layouts.navigation.notifications') %>
-          <div id="notifications">
-            <%= f.input :results_notifications_enabled %>
-            <%= f.input :registration_notifications_enabled %>
-          </div>
-
-          <%= f.submit t('.save'), class: "btn btn-primary" %>
-        <% end %>
-      </div>
-    <% end %>
-
-    <% if current_user.can_change_users_avatar?(@user) %>
-      <div class="tab-pane active" id="avatar">
-        <%= react_component("EditAvatar", {
-          userId: @user.id,
-          showStaffGuidelines: @user.staff_or_any_delegate?,
-          uploadDisabled: !editable_fields.include?(:pending_avatar),
-          canRemoveAvatar: editable_fields.include?(:remove_avatar),
-          canAdminAvatars: current_user.can_admin_results?,
-        }) %>
-      </div>
-    <% end %>
-    <div class="tab-pane" id="roles">
-      <%= react_component("RolesTab", {
-        userId: @user.id,
-      }) %>
+<% current_user_json = current_user.as_json({ include: [], methods: %w[can_view_all_users? can_edit_any_user? can_admin_results?]})
+   current_user_json["cannot_edit_data_reason_html"] = current_user.cannot_edit_data_reason_html(@user)
+   current_user_json["can_change_users_avatar?"] = current_user.can_change_users_avatar?(@user)
+%>
+
+<% unless @recently_authenticated %>
+  <div class="ui page modals transition visible active">
+    <div class="ui small modal transition active" id="2fa-check" style="display: none; padding: 10px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)">
+      <%= render "2fa_confirm" %>
     </div>
   </div>
-  <script>
-    $('a[href="#<%=j tab_to_show(params[:section]) %>"]').tab('show');
-  </script>
-</div>
+<% end %>
+
+<% otp_svg = raw(qrcode_for_user(@user).as_svg(
+  offset: 0,
+  color: '000',
+  shape_rendering: 'crispEdges',
+  module_size: 4
+)) if @user.otp_required_for_login %>
+
+<%= react_component("Persons/Edit", {
+  user: @user.as_json({
+                        include: [],
+                        only: [:email, :id, :wca_id, :unconfirmed_email],
+                        methods: [
+                          :confirmed_at,
+                          :unconfirmed_wca_id,
+                          :delegate_to_handle_wca_id_claim,
+                          :dummy_account?,
+                          :cannot_register_for_competition_reasons,
+                          :is_special_account?,
+                          :preferred_events,
+                          :staff_or_any_delegate?,
+                          :name, :dob, :gender, :country_iso2,
+                          :receive_delegate_reports, :delegate_reports_region,
+                          :results_notifications_enabled, :registration_notifications_enabled,
+                          :pending_avatar, :otp_required_for_login
+                        ]
+                      }),
+  currentUser: current_user_json,
+  editableFields: current_user.editable_fields_of_user(@user),
+  recentlyAuthenticated: @recently_authenticated,
+  otpSVG: otp_svg,
+}) %>

app/webpacker/components/CountrySelector/CountrySelector.js

@@ -13,7 +13,7 @@ const countryOptions = countries.real.map((country) => ({
 }));
 
 function CountrySelector({
-  name, countryIso2, onChange, error,
+  name, countryIso2, onChange, error, disabled,
 }) {
   return (
     <Form.Select
@@ -25,6 +25,7 @@ function CountrySelector({
       error={error}
       options={countryOptions}
       onChange={onChange}
+      disabled={disabled}
     />
   );
 }

app/webpacker/components/GenderSelector/GenderSelector.js

@@ -10,13 +10,17 @@ const genderOptions = _.map(genders.byId, (gender) => ({
   value: gender.id,
 }));
 
-function GenderSelector({ gender, onChange }) {
+function GenderSelector({
+  gender, onChange, name, disabled,
+}) {
   return (
     <Form.Select
       label="Gender"
       value={gender}
       options={genderOptions}
       onChange={onChange}
+      name={name}
+      disabled={disabled}
     />
   );
 }

app/webpacker/components/Persons/Edit/EmailChangeTab.jsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import { Form, Modal, Segment } from 'semantic-ui-react';
+import useInputState from '../../../lib/hooks/useInputState';
+import I18nHTMLTranslate from '../../I18nHTMLTranslate';
+import { updateUserUrl } from '../../../lib/requests/routes.js.erb';
+import RailsForm from './RailsForm';
+
+export default function EmailChangeTab({ user, recentlyAuthenticated }) {
+  const [email, setEmail] = useInputState(user.email);
+
+  // Hack to allow this with devise
+  useEffect(() => {
+    if (!recentlyAuthenticated) {
+      document.getElementById('2fa-check').style.display = 'block';
+    }
+  }, [recentlyAuthenticated]);
+
+  if (!recentlyAuthenticated) {
+    return <Modal dimmer="blurring" open />;
+  }
+
+  return (
+    <Segment>
+      <RailsForm method="patch" action={updateUserUrl(user.id)}>
+        <Form.Field>
+          <Form.Input name="user[email]" value={email} onChange={setEmail} label="Email" />
+          {/* i18n-tasks-use t('users.edit.confirm_new_email') */}
+          <I18nHTMLTranslate i18nKey="users.edit.confirm_new_email" />
+        </Form.Field>
+        <Form.Button type="submit">Save</Form.Button>
+      </RailsForm>
+    </Segment>
+  );
+}