evolution-events / Artaxerxes

Evolution Events information system
http://www.evolution-events.nl
4 stars 0 forks source link

Maybe use a single account settings page and/or AJAX for allauth settings? #77

Open matthijskooijman opened 4 years ago

matthijskooijman commented 4 years ago

The quickest way to get account settings working is probably to keep the separate views (password, social, email) now offered by Allauth. However, it might be nicer to integrate these in a single "account settings" view, and probably use AJAX to save these settings.

A single view without AJAX might be problematic, since then we would have to either merge the Allauth-supplied views and form handling somehow, or reimplement them. The alternative is to create a view of our own, which then only needs to generate the forms (for which it can use existing allauth form classes, or we could even generate the forms through ajax calls, but I'm not too fond of that). The handling of these forms could be done by the existing views and ajax requests.

The allauth settings pages automatically switch to AJAX mode when a request has an appropriate header that is automatically added by jquery or xhr. In practice, this means that opening up a settings page and running something like:

$.ajax({method: "Post", data: {csrfmiddlewaretoken: "6Vdw6d395FQnPLIE4A2pjYKev7XlUw2DWpavKCWkxc2eKUiI2JIIfteZzodNcMYA", action_add: 1}});

will allow testing the ajax requests and see the responses.

From initial testing, it seems that the ajax request will return both the rendered template, as well as an overview of form fields and any errors in them. For the rendered template to be usable, we probably need to modify the template (or its parent accounts/base.hml to not extend any other template and return just the form).

{
   "form":{
      "fields":{
         "email":{
            "label":"E-mail",
            "value":null,
            "help_text":"",
            "errors":[
               "This field is required."
            ],
            "widget":{
               "attrs":{
                  "size":"30",
                  "placeholder":"E-mail address"
               }
            }
         }
      },
      "field_order":[
         "email"
      ],
      "errors":[

      ]
   },
   "html":"\n\n<!DOCTYPE html>\n<html lang=\"nl\">\n<head>\n    <meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" />\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n\n    \n    <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css\" integrity=\"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm\" crossorigin=\"anonymous\">\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"/static/css/sticky_footer.css\" />\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"/static/css/style.css\" />\n    \n    <title> Artaxerxes registrations Evolution Events</title>\n</head>\n\n\n<body>\n    <nav class=\"navbar navbar-expand-md navbar-dark bg-dark mb-4 justify-content-end\">\n      <a class=\"navbar-brand\" href=\"#\">EE Artaxerxes</a>\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarCollapse\" aria-controls=\"navbarCollapse\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n        <span class=\"navbar-toggler-icon\"></span>\n      </button>\n      <div class=\"collapse navbar-collapse\" id=\"navbarCollapse\">\n        <ul class=\"navbar-nav mr-auto\">\n          \n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"/\">Dashboard</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"/organisation_info\">Info about organisation</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"/people/\">Personal information</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"/events/list/\">Overview registrations</a>\n            </li>\n            </ul> <!-- end first navbar ul -->\n              <ul class=\"navbar-nav text-right\">\n                <li class=\"nav-item\">\n                  <span class=\"nav-link\">Welcome Matthijs Kooijman</span>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"/accounts/logout/\">Log out</a>\n                </li>\n                <!--\n                <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"\">Change password</a>\n                </li>-->\n                \n                    <li class=\"nav-item\">\n                      <a class=\"nav-link\" href=\"/admin/\">Admin</a>\n                    </li>\n                \n          \n        </ul> <!-- end last navbar ul -->\n      </div>\n    </nav>\n    \n    \n    \n\n    <main role=\"main\" class=\"container\">\n      <h1></h1>\n        \n\n        \n    <h1>E-mail Addresses</h1>\n\n<p>The following e-mail addresses are associated with your account:</p>\n\n<form action=\"/accounts/email/\" class=\"email_list\" method=\"post\">\n<input type=\"hidden\" name=\"csrfmiddlewaretoken\" value=\"Q0wiPYZIOHCsEsTSnzSEPygQlh6Ry1KJGuthtnSTgeOjzBtWlIyXL3KBpymjQhGG\">\n<fieldset class=\"blockLabels\">\n\n  \n<div class=\"ctrlHolder\">\n      <label for=\"email_radio_1\" class=\"\">\n\n      <input id=\"email_radio_1\" type=\"radio\" name=\"email\"  value=\"matthijs@evolution-events.nl\"/>\n\nmatthijs@evolution-events.nl\n    \n    <span class=\"unverified\">Unverified</span>\n    \n      \n</label>\n</div>\n  \n<div class=\"ctrlHolder\">\n      <label for=\"email_radio_2\" class=\"primary_email\">\n\n      <input id=\"email_radio_2\" type=\"radio\" name=\"email\" checked=\"checked\" value=\"matthijskooijman@gmail.com\"/>\n\nmatthijskooijman@gmail.com\n    \n    <span class=\"verified\">Verified</span>\n    \n      <span class=\"primary\">Primary</span>\n</label>\n</div>\n  \n\n<div class=\"buttonHolder\">\n      <button class=\"secondaryAction\" type=\"submit\" name=\"action_primary\" >Make Primary</button>\n      <button class=\"secondaryAction\" type=\"submit\" name=\"action_send\" >Re-send Verification</button>\n      <button class=\"primaryAction\" type=\"submit\" name=\"action_remove\" >Remove</button>\n</div>\n\n</fieldset>\n</form>\n\n\n\n\n    <h2>Add E-mail Address</h2>\n\n    <form method=\"post\" action=\"/accounts/email/\" class=\"add_email\">\n        <input type=\"hidden\" name=\"csrfmiddlewaretoken\" value=\"Q0wiPYZIOHCsEsTSnzSEPygQlh6Ry1KJGuthtnSTgeOjzBtWlIyXL3KBpymjQhGG\">\n        <ul class=\"errorlist\"><li>This field is required.</li></ul>\n<p><label for=\"id_email\">E-mail:</label> <input type=\"email\" name=\"email\" size=\"30\" placeholder=\"E-mail address\" required id=\"id_email\"></p>\n        <button name=\"action_add\" type=\"submit\">Add E-mail</button>\n    </form>\n\n\n    </main>\n\n     \n    <script src=\"https://code.jquery.com/jquery-3.2.1.min.js\" crossorigin=\"anonymous\"></script>\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js\" integrity=\"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q\" crossorigin=\"anonymous\"></script>\n    <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js\" integrity=\"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl\" crossorigin=\"anonymous\"></script>\n    \n</body>\n</html>\n",
   "data":[
      {
         "id":1,
         "email":"matthijs@evolution-events.nl",
         "verified":false,
         "primary":false
      },
      {
         "id":4,
         "email":"matthijskooijman@gmail.com",
         "verified":true,
         "primary":true
      }
   ]
}