From fd481ea336f31ea41ec37ad7caa5b28bd5116b99 Mon Sep 17 00:00:00 2001 From: crochefort Date: Thu, 6 Jul 2023 16:05:18 -0400 Subject: [PATCH] Patch - Authentification A href VS button (#2139) * Update index.json-ld * Update authentication.html * Create signedoffuser-en.html * Create signedoffuser-fr.html * Authentification - Active session pattern adjustment * Authentification - Community disclaimer for the active session example Patch - Authentication - Fix hovering contrast colour when containing a primary styled anchor --------- Co-authored-by: Pierre Dubois Co-authored-by: Pierre Dubois --- _data/sites.json | 10 +++++ _includes/alert-community-stable.html | 37 ++++++++++++++++ sites/authentication/_base.scss | 2 +- .../authentication/activeusersession-en.html | 42 +++++++++++++++++++ .../authentication/activeusersession-fr.html | 42 +++++++++++++++++++ sites/authentication/authentication-en.html | 3 +- sites/authentication/authentication-fr.html | 4 +- .../includes/authentication.html | 3 ++ sites/authentication/index.json-ld | 10 +++++ sites/includes/i18n-core.liquid | 2 + 10 files changed, 152 insertions(+), 3 deletions(-) create mode 100644 _includes/alert-community-stable.html create mode 100644 sites/authentication/activeusersession-en.html create mode 100644 sites/authentication/activeusersession-fr.html diff --git a/_data/sites.json b/_data/sites.json index 3cc56f987a..1936294d99 100644 --- a/_data/sites.json +++ b/_data/sites.json @@ -124,6 +124,16 @@ "title": "Page de contenu - Modèle de session ouverte", "language": "fr", "path": "signedon-fr.html" + }, + { + "title": "Active user session", + "language": "en", + "path": "activeusersession-en.html" + }, + { + "title": "Session utilisateur active", + "language": "fr", + "path": "activeusersession-fr.html" } ] } diff --git a/_includes/alert-community-stable.html b/_includes/alert-community-stable.html new file mode 100644 index 0000000000..0a09e2c2da --- /dev/null +++ b/_includes/alert-community-stable.html @@ -0,0 +1,37 @@ +{%- if page.language == "fr" -%} +
+

Veuillez noter que la présente page web représente une contribution communautaire et qu'elle ne bénéficie pas de la validation ni de l'approbation formelle du Bureau de la transformation numérique comparativement à une conception officielle. Il est à souligner que cette contribution ne va pas à l'encontre d'une version officielle publiée au moment de l'ajout. Si une conception officielle équivalente est élaborée et soit formellement publiée, il est possible que la conception démontrée sur la présente page en diffère en partie ou en totalité.

+ +

Cette conception est stable et par conséquent elle bénificie des mêmes avantages que toutes autres fonctionnalités et conceptions stables telles que définies par l'ébauche de l'API publique de version de GCWeb.

+ + {%- if page.concerns -%} +

Veuillez noter, cet example a soulevé les préoccupations et/ou les commentaires suivants qui devrait être prise en compte:

+
    + {% for concern in page.concerns %} +
  • {{ concern }}
    • + {% endfor %} +
+ {%- endif -%} + {%- if page.discussionUrl -%} +

Participer à la discussion.

+ {%- endif -%} +
+{%- elsif page.language == "en" -%} +
+

Please note that the current web page represents a community contribution and does not yet have formal validation or approval from the Digital Transformation Office compared to an official design. It should be noted that this contribution does not contradict any officially published version at the time of its addition. It is possible that when an equivalent official design is developed and gets formally published, it may differ partially or entirely from the design shown on this page.

+ +

This stable design does share the same benefits as any other stable functionalities and design as defined by the GCWeb public versioning API draft.

+ + {%- if page.concerns -%} +

Please note, this example have raised the following concerns/comments for consideration:

+
    + {% for concern in page.concerns %} +
  • {{ concern }}
    • + {% endfor %} +
+ {%- endif -%} + {%- if page.discussionUrl -%} +

Participate at the discussion

+ {%- endif -%} +
+{%- endif -%} diff --git a/sites/authentication/_base.scss b/sites/authentication/_base.scss index 4aae982325..3cacab0d33 100644 --- a/sites/authentication/_base.scss +++ b/sites/authentication/_base.scss @@ -9,7 +9,7 @@ margin-top: 5px; } - a.btn:hover { + a.btn-primary:hover { background-color: #444; } } diff --git a/sites/authentication/activeusersession-en.html b/sites/authentication/activeusersession-en.html new file mode 100644 index 0000000000..70c33e4a04 --- /dev/null +++ b/sites/authentication/activeusersession-en.html @@ -0,0 +1,42 @@ +--- +{ + "altLangPage": "activeusersession-fr.html", + "breadcrumb": { + "title": "Canada.ca", "link": "https://www.canada.ca/en.html" + }, + "dateModified": "2023-03-28", + "description": "Example of a session user with an active session.", + "language": "en", + "title": "Authentication - User active session", + "auth": { + "type": "active" + }, + "concerns": [ + "Need clarification: Context of use is ambiguous (raised by DTO)", + "Alignment/Consistency: How does it align with how the major authentication services currently do it? (e.g. CRA MyAccount, Service Canada MSCA) (raised by DTO)", + "Alignment/Consistency: Does this align with the direction that TBS OCIO is heading with their Sign in Canada project? (raised by DTO)", + "Alignment/Consistency: Does this impact other authentication patterns? (raised by DTO)", + "Comment: Concern about the use of the power icon on the sign out button - not sure this makes sense for the action (raised by DTO)" + ], + "discussionUrl": "https://github.com/wet-boew/GCWeb/pull/2139" +} +--- +
+ +{% include alert-community-stable.html %} + +

Expected output code

+
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
+	<section id="wb-so">
+		<h2 class="wb-inv">Sign-on information</h2>
+		<a class="btn btn-sm btn-default" href="#"><span class="glyphicon glyphicon-user"></span> (User name)</a>
+		<a class="btn btn-sm btn-primary" href="#"><span class="glyphicon glyphicon-off"></span> Sign out</a>
+	</section>
+</div>
+ +

Where (User name) is replaced by the user name of the logged user.

+ +

GCWeb Jekyll - Front matter example

+
"auth": {
+		"type": "active"
+	}
diff --git a/sites/authentication/activeusersession-fr.html b/sites/authentication/activeusersession-fr.html new file mode 100644 index 0000000000..f692c1fd76 --- /dev/null +++ b/sites/authentication/activeusersession-fr.html @@ -0,0 +1,42 @@ +--- +{ + "altLangPage": "activeusersession-en.html", + "breadcrumb": { + "title": "Canada.ca", "link": "https://www.canada.ca/en.html" + }, + "dateModified": "2023-03-28", + "description": "Exemple d'une session utilisateur active.", + "language": "fr", + "title": "Authentification - Session utilisateur active", + "auth": { + "type": "active" + }, + "concerns": [ + "À clarifier: Le context d'utilisation est ambigu (soulevé par DTO)", + "Alignement et consitance: Comment cela s’aligne-t-il avec la façon dont les principaux services d’authentification le font actuellement? (ex. MonDossier ARC, Service Canada MDSC) (soulevé par DTO)", + "Alignement et consitance: Cela s’aligne-t-il avec la direction que prend le TBS OCIO avec leur projet Sign in Canada? (soulevé par DTO)", + "Alignement et consitance: Cela a-t-il un impact sur d’autres modèles d’authentification? (soulevé par DTO)", + "Commentaire: Préoccupation concernant l’utilisation de l’icône d’alimentation sur le bouton de déconnexion - pas sûr que cela ait du sens pour l’action. (soulevé par DTO)" + ], + "discussionUrl": "https://github.com/wet-boew/GCWeb/pull/2139" +} +--- +
+ +{% include alert-community-stable.html %} + +

Code source attendu

+
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
+	<section id="wb-so">
+		<h2 class="wb-inv">Information de l'utilisateur actuel</h2>
+		<a class="btn btn-sm btn-default" href="#"><span class="glyphicon glyphicon-user"></span> (Nom d'utlisateur)</a>
+		<a class="btn btn-sm btn-primary" href="#"><span class="glyphicon glyphicon-off"></span> Se déconnecter</a>
+	</section>
+</div>
+ +

Où (Nom d'utlisateur) est remplacé par le nom d'utilisateur de la personne connecté.

+ +

Exemple de l'initialisation pour GCWeb Jekyll

+
"auth": {
+		"type": "active"
+	}
diff --git a/sites/authentication/authentication-en.html b/sites/authentication/authentication-en.html index 90b9a5c46a..67b1c2cfa8 100644 --- a/sites/authentication/authentication-en.html +++ b/sites/authentication/authentication-en.html @@ -10,11 +10,12 @@ "title": "Authentication patterns" } --- -

This component support the following 3 design pattern variant:

+

This component support the following 4 design pattern variant:

  • Contextual Sign in button: A link pointing to a dedicated sign in web page
  • Signed-off: A pattern that show how the user can sign-on directly from the current page. Note: The prompt sign in dialog and the interaction resulting of the signed-on are currently out-of-scope.
  • Signed-on: A pattern that shows that the user is logged in, a way to access user's account and how to disconnect.
    • +
  • Active user session: A pattern that show the active user session information (connected), with a personalized user name.

Contextual Sign in button

diff --git a/sites/authentication/authentication-fr.html b/sites/authentication/authentication-fr.html index 282dc3a07a..44796c5c0a 100644 --- a/sites/authentication/authentication-fr.html +++ b/sites/authentication/authentication-fr.html @@ -10,11 +10,13 @@ "title": "Modèles d'authentification" } --- -

Ce composant supporte les 3 variants de modèle de conception suivants:

+

Ce composant supporte les 4 variants de modèle de conception suivants:

  • Bouton contextuel « Se connecter »: Un lien pointant vers une page d'authentification désignée
  • Session fermée: Un modèle qui présente un bouton d'inscription et un bouton de connexion.
  • Session ouverte: Un modèle qui présente un bouton afin d'acceder au compte de l'utilisateur, un bouton de déconnexion ainsi qu'un texte confirmant que l'utilisateur est bien connecté. Note: La boîte de dialogue d'invite et l'intéraction résultant de la connexion sont actuellement hors de portée.
    • +
  • Session utilisateur active: Un modèle affichant l'information de la session d'un utilisateur avec une session active (connecté), personnalisé avec son nom d'utilisateur.
    • +

Bouton contextuel « Se connecter »

diff --git a/sites/authentication/includes/authentication.html b/sites/authentication/includes/authentication.html index 141c9bcc96..9789444cfe 100644 --- a/sites/authentication/includes/authentication.html +++ b/sites/authentication/includes/authentication.html @@ -22,6 +22,9 @@

{%- elsif page.auth.type == "signedoff" -%} +{%- elsif page.auth.type == "active" -%} +

{{ i18nText-signUsername }} + {{ i18nText-signOut }}

{% else %} diff --git a/sites/authentication/index.json-ld b/sites/authentication/index.json-ld index ea1a31a94a..96c7f49147 100644 --- a/sites/authentication/index.json-ld +++ b/sites/authentication/index.json-ld @@ -90,6 +90,16 @@ "title": "Page de contenu - Modèle de session ouverte", "language": "fr", "path": "signedon-fr.html" + }, + { + "title": "Active user session", + "language": "en", + "path": "activeusersession-en.html" + }, + { + "title": "Session utilisateur active", + "language": "fr", + "path": "activeusersession-fr.html" } ] } diff --git a/sites/includes/i18n-core.liquid b/sites/includes/i18n-core.liquid index 05babc74b9..c78498cc8d 100644 --- a/sites/includes/i18n-core.liquid +++ b/sites/includes/i18n-core.liquid @@ -32,6 +32,7 @@ {% assign i18nText-signAs = "Connecté en tant que" %} {% assign i18nText-signOut = "Déconnexion" %} {% assign i18nText-signAccount = "Mon compte" %} + {% assign i18nText-signUsername = "(Nom d'utlisateur)" %} {% assign i18nText-footerSite = "À propos de ce site" %} @@ -62,6 +63,7 @@ {% assign i18nText-signAs = "Signed in as" %} {% assign i18nText-signOut = "Sign out" %} {% assign i18nText-signAccount = "My account" %} + {% assign i18nText-signUsername = "(User name)" %} {% assign i18nText-footerSite = "About this site" %}