Patch - Authentification A href VS button (wet-boew#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 <[email protected]> Co-authored-by: Pierre Dubois <[email protected]>
SebastianBurke · Mar 6, 2024 · fd481ea · fd481ea
1 parent b4d7d61
commit fd481ea
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 3 deletions.
diff --git 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
@@ -0,0 +1,37 @@
+{%- if page.language == "fr" -%}
+<div class="alert alert-info">
+	<p>Veuillez noter que la présente page web représente une contribution communautaire et qu'elle <strong>ne bénéficie pas</strong> 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é.</p>
+
+	<p>Cette conception est <strong>stable</strong> et par conséquent elle bénificie des mêmes avantages que toutes autres fonctionnalités et conceptions stables telles que définies par <a href="https://wet-boew.github.io/wet-boew-documentation/decision/14.html" hreflang="en">l'ébauche de l'API publique de version de GCWeb</a>.</p>
+
+	{%- if page.concerns -%}
+		<p>Veuillez noter, cet example a soulevé les préoccupations et/ou les commentaires suivants qui devrait être prise en compte:</p>
+		<ul>
+			{% for concern in page.concerns %}
+				<li>{{ concern }}</li>
+			{% endfor %}
+		</ul>
+	{%- endif -%}
+	{%- if page.discussionUrl -%}
+		<p><a href="{{ page.discussionUrl }}">Participer à la discussion.</a></p>
+	{%- endif -%}
+</div>
+{%- elsif page.language == "en" -%}
+<div class="alert alert-info">
+	<p>Please note that the current web page represents a community contribution and <strong>does not yet have</strong> 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.</p>
+
+	<p>This <strong>stable</strong> design does share the same benefits as any other stable functionalities and design as defined by the <a href="https://wet-boew.github.io/wet-boew-documentation/decision/14.html">GCWeb public versioning API draft</a>.</p>
+
+	{%- if page.concerns -%}
+		<p>Please note, this example have raised the following concerns/comments for consideration:</p>
+		<ul>
+			{% for concern in page.concerns %}
+				<li>{{ concern }}</li>
+			{% endfor %}
+		</ul>
+	{%- endif -%}
+	{%- if page.discussionUrl -%}
+		<p><a href="{{ page.discussionUrl }}">Participate at the discussion</a></p>
+	{%- endif -%}
+</div>
+{%- endif -%}
diff --git 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
@@ -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"
+}
+---
+<div class="wb-prettify all-pre hide"></div>
+
+{% include alert-community-stable.html %}
+
+<h2>Expected output code</h2>
+<pre>&lt;div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4"&gt;
+	&lt;section id="wb-so"&gt;
+		&lt;h2 class="wb-inv"&gt;Sign-on information&lt;/h2&gt;
+		&lt;a class="btn btn-sm btn-default" href="#"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; (User name)&lt;/a&gt;
+		&lt;a class="btn btn-sm btn-primary" href="#"&gt;&lt;span class="glyphicon glyphicon-off"&gt;&lt;/span&gt; Sign out&lt;/a&gt;
+	&lt;/section&gt;
+&lt;/div&gt;</code></pre>
+
+<p>Where <em>(User name)</em> is replaced by the user name of the logged user.</p>
+
+<h2>GCWeb Jekyll - Front matter example</h2>
+<pre><code>"auth": {
+		"type": "active"
+	}</code></pre>
diff --git a/sites/authentication/activeusersession-fr.html 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"
+}
+---
+<div class="wb-prettify all-pre hide"></div>
+
+{% include alert-community-stable.html %}
+
+<h2>Code source attendu</h2>
+<pre>&lt;div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4"&gt;
+	&lt;section id="wb-so"&gt;
+		&lt;h2 class="wb-inv"&gt;Information de l'utilisateur actuel&lt;/h2&gt;
+		&lt;a class="btn btn-sm btn-default" href="#"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; (Nom d'utlisateur)&lt;/a&gt;
+		&lt;a class="btn btn-sm btn-primary" href="#"&gt;&lt;span class="glyphicon glyphicon-off"&gt;&lt;/span&gt; Se déconnecter&lt;/a&gt;
+	&lt;/section&gt;
+&lt;/div&gt;</code></pre>
+
+<p>Où <em>(Nom d'utlisateur)</em> est remplacé par le nom d'utilisateur de la personne connecté.</p>
+
+<h2>Exemple de l'initialisation pour GCWeb Jekyll</h2>
+<pre><code>"auth": {
+		"type": "active"
+	}</code></pre>
diff --git a/sites/authentication/authentication-en.html b/sites/authentication/authentication-en.html
@@ -10,11 +10,12 @@
 	"title": "Authentication patterns"
 }
 ---
-<p>This component support the following 3 design pattern variant:</p>
+<p>This component support the following 4 design pattern variant:</p>
 <ul>
 	<li>Contextual Sign in button: A link pointing to a dedicated sign in web page</li>
 	<li>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.</li>
 	<li>Signed-on: A pattern that shows that the user is logged in, a way to access user's account and how to disconnect.</li>
+	<li><a href="activeusersession-en.html">Active user session</a>: A pattern that show the active user session information (connected), with a personalized user name.</li>
 </ul>
 
 <h2>Contextual Sign in button</h2>

diff --git a/sites/authentication/authentication-fr.html b/sites/authentication/authentication-fr.html
@@ -10,11 +10,13 @@
 	"title": "Modèles d'authentification"
 }
 ---
-<p>Ce composant supporte les 3 variants de modèle de conception suivants:</p>
+<p>Ce composant supporte les 4 variants de modèle de conception suivants:</p>
 <ul>
 	<li>Bouton contextuel « Se connecter »: Un lien pointant vers une page d'authentification désignée</li>
 	<li>Session fermée: Un modèle qui présente un bouton d'inscription et un bouton de connexion.</li>
 	<li>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.</li>
+	<li><a href="activeusersession-fr.html">Session utilisateur active</a>: Un modèle affichant l'information de la session d'un utilisateur avec une session active (connecté), personnalisé avec son nom d'utilisateur.</li>
+
 </ul>
 
 <h2>Bouton contextuel « Se connecter »</h2>

diff --git a/sites/authentication/includes/authentication.html b/sites/authentication/includes/authentication.html
@@ -22,6 +22,9 @@ <h2 class="wb-inv">
 {%- elsif page.auth.type == "signedoff" -%}
 		<button class="btn btn-default" type="button">{{ i18nText-signOnRegister }}</button>
 		<button class="btn btn-primary" type="button">{{ i18nText-signIn }}</button>
+{%- elsif page.auth.type == "active" -%}
+		<p><a class="btn btn-sm btn-default" href="#"><span class="glyphicon glyphicon-user"></span> {{ i18nText-signUsername }}</a>
+		<a class="btn btn-sm btn-primary" href="#"><span class="glyphicon glyphicon-off"></span> {{ i18nText-signOut }}</a></p>
 {% else %}
 		<button class="btn btn-default" type="button">{{ i18nText-signAccount }}</button>
 		<button class="btn btn-primary" type="button">{{ i18nText-signOut }}</button>

diff --git 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
@@ -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" %}