143 osm auth

.env.example

@@ -71,4 +71,8 @@ GEOREFERENCE_SESSION_LENGTH=600
 
 ## Optionally set up an account on Prosopo to power a captcha during sign up
 # PROSOPO_SITE_KEY=
-# PROSOPO_SECRET_KEY=
+# PROSOPO_SECRET_KEY=
+
+## Optionally include config for OAuth 2 client in OpenStreetMap
+# OSM_OAUTH_APP_CLIENT_ID=
+# OSM_OAUTH_APP_SECRET=

docs/getting-started/creating-accounts.md

@@ -0,0 +1,49 @@
+# Creating an account
+
+All you need to do to begin contributing on _OldInsuranceMaps.net_ is [create an account](https://oldinsurancemaps.net/account/signup/).
+
+## Sign up with email
+
+Choose a **username**, **password**, and valid **email address**. Your username will be publicly visible, so you cannot use your email address as a username.
+
+!!! note 
+    You must agree that any contributions you make will be licensed [CC0](https://creativecommons.org/public-domain/cc0/) ("No Rights Reserved"), meaning that your work is effectively in the public domain. See the [Data Agreement](https://oldinsurancemaps.net/data-agreement) for more details about this.
+
+## Sign up via 3rd-party authentication
+
+You can optionally use a 3rd-party identity provider. Currently, only **OpenStreetMap** (OSM) is supported, but more identity providers will be configured in the future.
+
+### Creating a new account
+
+1. On the signup screen, click the OpenStreetMap logo and follow the prompts
+    - You will be redirected to `openstreetmap.org` to sign into your OSM account
+    - You will need to grant OldInsuranceMaps.net limited privileges on your OSM account
+2. You will then be redirected back to OldInsuranceMaps.net to complete the creation of your account
+    - Your username will be prepopulated with your OSM username
+    - You will still need to enter an e-mail address
+    - You will not create a password, because OSM is (effectively) now your password!
+
+Now, whenever you login to OldInsuranceMaps.net, just click the OSM icon and you'll be logged in automatically.
+
+### Link an existing account
+
+If you already have an OldInsuranceMaps.net account, but would like to be able to login with a 3rd-party identity provider, you can easily create a linkage between the accounts.
+
+0. *Make sure you are already signed in with your username and password like usual.*
+    - If you aren't already signed in you could inadvertedly create a duplicate account.
+1. In your OldInsuranceMaps.net account (https://oldinsurancemaps.net/account/), go to **Account Connections**
+2. Click the OpenStreetMap logo and follow the prompts
+    - You will be redirected to `openstreetmap.org` to sign into your OSM account
+    - You will need to grant OldInsuranceMaps.net limited privileges on your OSM account
+
+Now, whenever you login to OldInsuranceMaps.net, just click the OSM icon and you'll be logged in automatically.
+
+### Unlink your account
+
+You can unlink your OIM account with any 3rd-party identity provider at any time—this has no affect on your OIM account but you will just not be able to login through that provider any more.
+
+To remove a connection to OpenStreetMap you will need to:
+
+1. In your OldInsuranceMaps.net account (https://oldinsurancemaps.net/account/), go to **Account Connections**, select the OSM connection and click **Remove**.
+    - If your account does not yet have a password set (which would be the case if you intially created the account through the 3rd-party provider as described above) use the **Change password** form to set a password before trying to remove the connection.
+2. In your OpenStreetMap account (https://www.openstreetmap.org/account), go to **OAuth 2 Authorizations** and then click **Revoke Access** for the `OldInsuranceMaps.net` entry.

docs/getting-started/georeferencing.md → docs/overview.md

@@ -1,9 +1,5 @@
 # Overview
 
-## Sign up to begin georeferencing
-
-All you need to do to begin contributing on _OldInsuranceMaps.net_ is create an account. You must agree that any contributions you make will be licensed [CC0](https://creativecommons.org/public-domain/cc0/) ("No Rights Reserved"), meaning that your work is effectively in the public domain. See the [Data Agreement](https://oldinsurancemaps.net/data-agreement) for more details about this.
-
 ## How the site is structured
 
 You can browse content in the platform by map, by place name, or by map name. To learn more about these search methods, see [Finding maps](./guides/finding-maps.md).

ohmg/accounts/validators.py

@@ -7,7 +7,7 @@ class OHMGUnicodeUsernameValidator(UnicodeUsernameValidator):
     """
 
     regex = r"^[\w.+-]+\Z"
-    message = "Username may contain only letters, numbers, and . + - _"
+    message = "Username may contain only letters, numbers, and these characters: + - _ ."
 
 
 custom_username_validators = [

ohmg/conf/http.py

@@ -68,6 +68,7 @@ def generate_ohmg_context(request) -> dict:
             "X-CSRFToken": csrf_token,
         },
         "max_tiles_loading": settings.OPENLAYERS_MAX_TILES_LOADING,
+        "path": request.path,
     }
 
 

ohmg/conf/settings.py

@@ -77,6 +77,7 @@
     "allauth",
     "allauth.account",
     "allauth.socialaccount",
+    "allauth.socialaccount.providers.openid_connect",
     "pinax.announcements",
     "storages",
     "django_extensions",
@@ -246,6 +247,7 @@
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
     "django.middleware.security.SecurityMiddleware",
     "django.contrib.redirects.middleware.RedirectFallbackMiddleware",
+    "allauth.account.middleware.AccountMiddleware",
     "ohmg.conf.middleware.CORSMiddleware",
 )
 
@@ -343,10 +345,36 @@
 ACCOUNT_ADAPTER = "ohmg.accounts.adapter.AccountAdapter"
 
 ACCOUNT_FORMS = {"signup": "ohmg.accounts.forms.OHMGSignupForm"}
-ACCOUNT_EMAIL_REQUIRED = True
 ACCOUNT_SIGNUP_REDIRECT_URL = "/"
 ACCOUNT_USERNAME_VALIDATORS = "ohmg.accounts.validators.custom_username_validators"
 
+ACCOUNT_SIGNUP_FIELDS = ["email*", "username*", "password1*", "password2*"]
+
+## create empty holder for providers and add them only if credentials have been
+## provided
+SOCIALACCOUNT_PROVIDERS = {
+    "openid_connect": {"APPS": []},
+}
+
+## look for OSM auth credentials and use them if present
+OSM_OAUTH_APP_CLIENT_ID = os.getenv("OSM_OAUTH_APP_CLIENT_ID")
+OSM_OAUTH_APP_SECRET = os.getenv("OSM_OAUTH_APP_SECRET")
+
+if OSM_OAUTH_APP_CLIENT_ID:
+    SOCIALACCOUNT_PROVIDERS["openid_connect"]["APPS"].append(
+        {
+            "provider_id": "openstreetmap",
+            "name": "OpenStreetMap",
+            "client_id": OSM_OAUTH_APP_CLIENT_ID,
+            "secret": OSM_OAUTH_APP_SECRET,
+            "settings": {
+                "server_url": "https://www.openstreetmap.org/.well-known/openid-configuration",
+                "scope": ["openid", "read_prefs"],
+            },
+        }
+    )
+
+
 # prep/georef session duration before expiration (seconds)
 GEOREFERENCE_SESSION_LENGTH = int(os.getenv("GEOREFERENCE_SESSION_LENGTH", 600))
 

ohmg/frontend/static/css/bulma-overrides.css

@@ -125,3 +125,29 @@ button.button.is-primary {
 button.button > span.icon > svg {
   font-size: 2em;
 }
+
+.tabs > ul {
+  border: none;
+  margin-top: 1em;
+}
+
+.tabs a {
+  border: none;
+}
+
+.tabs > ul > li {
+  border-bottom: 1px solid transparent;
+}
+
+.tabs > ul > li > a {
+  color: var(--bulma-text-color)
+}
+
+.tabs > ul > li.is-active > a, .tabs > ul > li:hover > a {
+  color: var(--theme-highlight-color);
+  text-decoration: none;
+}
+
+.tabs > ul > li.is-active, .tabs > ul > li:hover {
+  border-bottom-color: var(--theme-highlight-color);
+}

ohmg/frontend/static/css/site_base.css

@@ -86,7 +86,7 @@ samp {
 }
 
 h1 {
-  font-size: 2em;
+  font-size: 1.8em;
 }
 h2 {
   font-size: 1.6em;
@@ -630,4 +630,40 @@ img.lead-image {
 #step-list div > p {
   font-size: 1.25em;
   margin-bottom: 0px;
-}
+}
+
+/* ALLAUTH TEMPLATE STYLES */
+
+.allauth-form > p {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+
+.allauth-form > p:has(input[type="radio"]), .allauth-form > p:has(input[type="checkbox"]) {
+  display: block;
+  font-size: unset;
+}
+
+.allauth-form > p > label {
+  font-size: .8em;
+}
+
+
+.allauth-form > p > input {
+  text-align: left;
+}
+
+.allauth-form button {
+  width: fit-content !important;
+}
+
+/* AVATAR MANAGEMENT TEMPLATES */
+
+ul#avatar-select-form {
+  margin-bottom: .5em;
+}
+ul#avatar-select-form > li > div {
+  display: flex;
+  gap: 15px;
+}