Rewrite Preferences page to React/JSX

as part of MBS-9699, plus:

- Remove unused checkbox for not yet implemented feature MBS-3285
  ('Notify me by email on new releases to my watched artists')
  which should be added to branch metabrainz/mbs-3285 instead;
- Reorder timezone and date/time format fields;
- Update date/time format options on timezone change;
- Add helper button to guess user timezone.

lib/MusicBrainz/Server/Controller/Account.pm

@@ -4,7 +4,9 @@ BEGIN { extends 'MusicBrainz::Server::Controller' }
 
 use namespace::autoclean;
 use Digest::SHA qw(sha1_base64);
+use List::MoreUtils qw( uniq );
 use MusicBrainz::Server::ControllerUtils::JSON qw( serialize_pager );
+use MusicBrainz::Server::Data::Utils qw( boolean_to_json );
 use MusicBrainz::Server::Translation qw( l );
 use MusicBrainz::Server::Validation qw( encode_entities is_positive_integer );
 use Try::Tiny;
@@ -473,6 +475,22 @@ sub preferences : Path('/account/preferences') RequireAuth DenyWhenReadonly
 
         $c->response->redirect($c->uri_for_action('/account/preferences', { ok => 1 }));
         $c->detach;
+    } else {
+        $c->stash(
+            current_view => 'Node',
+            component_path => 'account/Preferences',
+            component_props => {
+                form => $form,
+                timezone_options => {
+                    grouped => boolean_to_json(0),
+                    options => [ map { {
+                        value => $_,
+                        label => $_
+                      } } uniq values @{ $form->options_timezone } ],
+                },
+            },
+        );
+        $c->detach;
     }
 }
 

root/account/Preferences.js

@@ -0,0 +1,35 @@
+/*
+ * @flow
+ * Copyright (C) 2018 MetaBrainz Foundation
+ *
+ * This file is part of MusicBrainz, the open internet music database,
+ * and is licensed under the GPL version 2, or (at your option) any
+ * later version: http://www.gnu.org/licenses/gpl-2.0.txt
+ */
+
+import * as React from 'react';
+
+import UserAccountLayout from '../components/UserAccountLayout';
+import {withCatalystContext} from '../context';
+import PreferencesForm from '../static/scripts/account/components/PreferencesForm';
+import type {PreferencesFormPropsT} from '../static/scripts/account/components/PreferencesForm';
+import {l} from '../static/scripts/common/i18n';
+import * as manifest from '../static/manifest';
+
+type Props = {|
+  +$c: CatalystContextT,
+  ...PreferencesFormPropsT,
+|};
+
+const Preferences = withCatalystContext(({$c, ...props}) => (
+  <UserAccountLayout
+    page="preferences"
+    title={l('Preferences')}
+    user={$c.user}
+  >
+    <PreferencesForm {...props} />
+    {manifest.js('account/preferences')}
+  </UserAccountLayout>
+));
+
+export default Preferences;

root/static/gulpfile.js

@@ -261,6 +261,10 @@ runYarb('account/applications/register.js', function (b) {
   b.external(commonBundle);
 });
 
+runYarb('account/preferences.js', function (b) {
+  b.external(commonBundle);
+});
+
 runYarb('area/index.js', function (b) {
   b.external(commonBundle);
 });

root/static/images/attribution.txt

@@ -129,10 +129,12 @@ Image set:   Android
 Author:      http://www.androidicons.com
 License:     CC-BY (see download page)
 Download:    http://findicons.com/icon/80718/monitor (original, cropped in MusicBrainz)
+             http://findicons.com/icon/80717/magnet (original, cropped in MusicBrainz)
 
 Images:
 
     icons/video.png
+    icons/magnet.png
 
 ----------------------------------------------------------------------------