From 2a25d71effcbce62816f9bc059b956d7d58d3f23 Mon Sep 17 00:00:00 2001 From: Julian Lobbes Date: Tue, 1 Aug 2023 15:46:50 +0200 Subject: [PATCH] feat: add registration finalization and fix UI bugs --- README.md | 5 -- .../authentication/register-finalize.html | 11 +++- app/authentication/views.py | 19 +++---- app/core/settings.py | 3 +- app/medwings/templates/medwings/index.html | 11 ++-- .../templates/medwings/mews-continue.html | 23 ++++++-- assets/css/styles.css | 53 ++++++++++++++++++- development.docker-compose.yml | 1 + 8 files changed, 98 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 7c8bc50..4cd4311 100644 --- a/README.md +++ b/README.md @@ -39,11 +39,6 @@ as well as an [API reference guide](https://developer.withings.com/api-reference # Development -## TODOs - -- [ ] fix overflow on `mews-continue` -- [ ] add `register-final` view - ## Starting the dev environment To start the development compose-stack, run the following command: diff --git a/app/authentication/templates/authentication/register-finalize.html b/app/authentication/templates/authentication/register-finalize.html index c27d9e7..638de0c 100644 --- a/app/authentication/templates/authentication/register-finalize.html +++ b/app/authentication/templates/authentication/register-finalize.html @@ -5,8 +5,15 @@ {% endblock title %} {% block content %} -
+

Register

-

Nothing to see here.

+

To finalize your registration and receive regular notifications, please take the following steps:

+
+
    +
  1. Install the Gotify App on your smartphone, available on F-Droid or on the Google Play Store.
    2. +
  2. Open the app, and connect to our notification server {{ gotify_public_url }} and log in using your Medwings username and password.
    3. +
+
+

All set! You can now log in to view your data or take your first MEWS measurement.

{% endblock content %} diff --git a/app/authentication/views.py b/app/authentication/views.py index 244f181..05128e5 100644 --- a/app/authentication/views.py +++ b/app/authentication/views.py @@ -23,8 +23,8 @@ def register_init(request): # Generate a unique token and save it for later request.session.flush() - spoof_protection_token = str(uuid4()) - request.session['spoof_protection_token'] = spoof_protection_token + registration_sequence_token = str(uuid4()) + request.session['registration_sequence_token'] = registration_sequence_token auth_url_base = 'https://account.withings.com/oauth2_user/authorize2' auth_url_params = { @@ -32,7 +32,7 @@ def register_init(request): 'client_id': settings.WITHINGS_CONFIG['CLIENT_ID'], 'scope': 'user.metrics,user.activity', 'redirect_uri': request.build_absolute_uri(reverse('register-continue')), - 'state': spoof_protection_token + 'state': registration_sequence_token } auth_url = f"{auth_url_base}?{urlencode(auth_url_params)}" @@ -53,7 +53,7 @@ def register_continue(request): return HttpResponseBadRequest() if not authorization_state: return HttpResponseBadRequest() - if not request.session.get('spoof_protection_token', None) == authorization_state: + if not request.session.get('registration_sequence_token', None) == authorization_state: return HttpResponseBadRequest() if request.method == 'GET': @@ -111,12 +111,11 @@ def register_continue(request): withings_api_account, withings_access_token, withings_refresh_token ]: instance.save() - request.session.flush() + request.session.flush() withings_api_account.update_records() - # TODO redirect user to some other page and ask them to log in - return redirect('dashboard') + return redirect('register-finalize') context = { 'user_form': user_form, @@ -130,6 +129,8 @@ def register_finalize(request): if request.user.is_authenticated: raise PermissionDenied('You are already registered and logged in.') - # TODO implement + context = { + "gotify_public_url": settings.GOTIFY_CONFIG['PUBLIC_URL'] + } - return render(request, 'authentication/register-finalize.html') + return render(request, 'authentication/register-finalize.html', context) diff --git a/app/core/settings.py b/app/core/settings.py index 08fe60b..d66e69e 100644 --- a/app/core/settings.py +++ b/app/core/settings.py @@ -138,5 +138,6 @@ WITHINGS_CONFIG = { GOTIFY_CONFIG = { 'USERNAME': getenv('GOTIFY_USER'), 'PASSWORD': getenv('GOTIFY_PASSWORD'), - 'HOST': getenv('GOTIFY_HOST') + 'HOST': getenv('GOTIFY_HOST'), + 'PUBLIC_URL': getenv('GOTIFY_PUBLIC_URL') } diff --git a/app/medwings/templates/medwings/index.html b/app/medwings/templates/medwings/index.html index 491f149..155dafd 100644 --- a/app/medwings/templates/medwings/index.html +++ b/app/medwings/templates/medwings/index.html @@ -23,12 +23,13 @@ blood pressure, and body temperature - providing you and your healthcare team with a detailed and continuous picture of your health status.

-
+
{% if not request.user.is_authenticated %} -

To use the platform, please log in:

- Log In -

If you do not have an account yet, please register:

- Create An Account +

To use the platform, please log in. If you do not have an account yet, please register.

+
+ Log In + Register +
{% else %}

View your latest health data to stay up to date:

Go to your personal dashboard diff --git a/app/medwings/templates/medwings/mews-continue.html b/app/medwings/templates/medwings/mews-continue.html index 3d06e05..e5ca8db 100644 --- a/app/medwings/templates/medwings/mews-continue.html +++ b/app/medwings/templates/medwings/mews-continue.html @@ -8,11 +8,13 @@ {% block content %}

Record your health status

-
-

Please start measuring your vitals using your devices now.

-

Your measurement results will be synchronized automatically.

+
+

Please start measuring your vitals using your devices now.

+

Your measurement results will be synchronized automatically.

+ +
-
+

Blood Pressure (systolic)

@@ -124,6 +126,8 @@ "mews_value": null }; + const helpDiv = document.getElementById('help-div'); + async function fetchData() { if (fetchingData || fetchingComplete) return; @@ -156,6 +160,16 @@ if (Object.values(currentData).every(value => value !== null)) { fetchingComplete = true; + + helpDiv.classList.add('help-div--changing'); + for (let element of document.getElementsByClassName('fadeout')) { + element.addEventListener('animationend', () => { + element.remove(); + for (let element of document.getElementsByClassName('fadein')) { + element.classList.remove('hidden'); + } + }) + } } fetchingData = false; @@ -171,6 +185,7 @@ }); } + fetchData(); function loadValue(element, value) { diff --git a/assets/css/styles.css b/assets/css/styles.css index cf0b01e..4a58eeb 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -18,7 +18,7 @@ h1 { h1.title { @apply font-title font-bold; - @apply underline text-secondary-500/90; + @apply underline text-primary-200/90; } h2 { @@ -84,7 +84,29 @@ label { } a:not(.btn, .btn-outline) { - @apply underline text-secondary; + @apply underline text-secondary-300; +} +div.call-to-action-box a { + @apply text-secondary-200; +} + +ul, ol { + list-style-position: outside; +} +ul { + list-style-type: disc; +} +ol { + list-style-type: decimal; +} +li { + @apply text-start; +} + +code { + @apply bg-neutral-800/75 rounded-md; + @apply px-1 py-0.5; + @apply text-neutral-200 font-mono; } .btn { @@ -94,6 +116,7 @@ a:not(.btn, .btn-outline) { @apply font-semibold text-primary-100 hover:text-primary-200; @apply hover:drop-shadow-xl; @apply border-2 border-accent hover:border-accent-700; + @apply transition-all; } .btn-outline { @@ -103,6 +126,7 @@ a:not(.btn, .btn-outline) { @apply font-semibold text-accent hover:text-primary-100; @apply hover:drop-shadow-xl; @apply border-2 border-accent hover:border-accent-700; + @apply transition-all; } body.global { @@ -312,3 +336,28 @@ path.hamburger-path { transform-origin: center; transform: rotate(0deg); } + +.help-div--changing p.fadeout { + animation: 1s fadeout ease-in-out both; +} +.help-div--changing p.fadein, a.fadein { + animation: 1s fadein ease-in-out 1s both; +} +@keyframes fadeout { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} +@keyframes fadein { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} diff --git a/development.docker-compose.yml b/development.docker-compose.yml index a87c8b4..d3642f0 100644 --- a/development.docker-compose.yml +++ b/development.docker-compose.yml @@ -53,6 +53,7 @@ services: GOTIFY_USER: ${GOTIFY_USER} GOTIFY_PASSWORD: ${GOTIFY_PASSWORD} GOTIFY_HOST: ${GOTIFY_HOST} + GOTIFY_PUBLIC_URL: ${GOTIFY_PUBLIC_URL} medwings-postgres: image: postgres:alpine container_name: ${PG_HOST}