Better login page styles and incentive (#2293)

Fixes https://github.com/umap-project/umap-dsfr/issues/21

Rel.
24f23874f7

pyproject.toml

@@ -66,7 +66,7 @@ docker = [
   "uwsgi==2.0.28",
 ]
 sync = [
-  "channels==4.1.0",
+  "channels==4.2.0",
   "daphne==4.1.2",
   "pydantic==2.9.2",
   "websockets==13.1",

umap/static/umap/content.css

@@ -24,11 +24,11 @@ input:-moz-placeholder, :-moz-placeholder {
 body.login {
     width:  320px;
     margin: auto;
-    text-align: center;
+    background-color: var(--color-lighterGray);
+    color: var(--color-darkerGray);
 }
 body.login header {
     display: flex;
-    justify-content: center;
 }
 .login-grid {
     display: grid;

umap/static/umap/js/modules/utils.js

@@ -174,15 +174,15 @@ export function toHTML(r, options) {
 
   // iframe
   r = r.replace(
-    /{{{(h_t_t_ps?[^ |{]*)}}}/g,
+    /{{{(h_t_t_ps?[^|{]*)}}}/g,
     '<div><iframe frameborder="0" src="$1" width="100%" height="300px"></iframe></div>'
   )
   r = r.replace(
-    /{{{(h_t_t_ps?[^ |{]*)\|(\d*)(px)?}}}/g,
+    /{{{(h_t_t_ps?[^|{]*)\|(\d*)(px)?}}}/g,
     '<div><iframe frameborder="0" src="$1" width="100%" height="$2px"></iframe></div>'
   )
   r = r.replace(
-    /{{{(h_t_t_ps?[^ |{]*)\|(\d*)(px)?\*(\d*)(px)?}}}/g,
+    /{{{(h_t_t_ps?[^|{]*)\|(\d*)(px)?\*(\d*)(px)?}}}/g,
     '<div><iframe frameborder="0" src="$1" width="$4px" height="$2px"></iframe></div>'
   )
 

umap/static/umap/js/umap.forms.js

@@ -405,7 +405,7 @@ L.FormBuilder.LicenceChooser = L.FormBuilder.Select.extend({
   },
 
   toHTML: function () {
-    return this.get().name
+    return this.get()?.name
   },
 
   toJS: function () {

umap/static/umap/unittests/utils.js

@@ -147,7 +147,7 @@ describe('Utils', () => {
       )
     })
 
-    it('should handle iframe with height with px', () => {
+    it('should handle double iframe', () => {
       assert.equal(
         Utils.toHTML(
           'A double iframe: {{{https://osm.org/pouet}}}{{{https://osm.org/boudin}}}'
@@ -156,6 +156,15 @@ describe('Utils', () => {
       )
     })
 
+    it('should handle iframe with query string and space', () => {
+      assert.equal(
+        Utils.toHTML(
+          'An iframe with query string: {{{https://osm.org/pouet.html?name=foobar&description=baz baz}}}'
+        ),
+        'An iframe with query string: <div><iframe height="300px" width="100%" src="https://osm.org/pouet.html?name=foobar&amp;description=baz baz" frameborder="0"></iframe></div>'
+      )
+    })
+
     it('http link with http link as parameter as variable', () => {
       assert.equal(
         Utils.toHTML('A phrase with a [[http://iframeurl.com?to=http://another.com]].'),
@@ -263,6 +272,19 @@ describe('Utils', () => {
       )
     })
 
+    it('should process variables in http links', () => {
+      assert.equal(
+        Utils.greedyTemplate(
+          'A phrase with a {{{https://osm.org/pouet?name={name}&description={description}}}}.',
+          {
+            name: 'foobar',
+            description: 'bazbaz',
+          }
+        ),
+        'A phrase with a {{{https://osm.org/pouet?name=foobar&description=bazbaz}}}.'
+      )
+    })
+
     it('should not accept dash', () => {
       assert.equal(
         Utils.greedyTemplate('A phrase with a {var-iable}.', { 'var-iable': 'value' }),

umap/static/umap/vars.css

@@ -2,6 +2,7 @@
     /* Colors. */
     --color-waterMint: #B9F5D2;
     --color-darkBlue: #263B58;
+    --color-lighterGray: #f6f6f6;
     --color-lightGray: #ddd;
     --color-mediumGray: #3e4444;
     --color-darkGray: #323737;

umap/templates/registration/login.html

@@ -19,10 +19,11 @@
     <header class="umap-nav">
       {% include "umap/branding.html" %}
     </header>
+    <h2>{% trans "To save and easily find your maps, identify yourself." %}</h2>
     {% if ENABLE_ACCOUNT_LOGIN %}
-      <h2>
-        {% trans "Please log in with your account" %}
-      </h2>
+      <h3>
+        {% trans "Please log in with your account:" %}
+      </h3>
       <div>
         {% if form.non_field_errors %}
           <ul class="form-errors">
@@ -47,9 +48,9 @@
       </div>
     {% endif %}
     {% if backends.backends|length %}
-      <h2>
-        {% trans "Please choose a provider" %}
-      </h2>
+      <h3>
+        {% trans "Please choose a provider:" %}
+      </h3>
       <div>
         <ul class="login-grid block-grid">
           {% for name in backends.backends %}