refactor(core): ♻️ handle anon

i18n/en.json

@@ -63,5 +63,7 @@
 	"citizen-feature-custom-width-name": "Width",
 	"citizen-feature-custom-width-standard-label": "Standard",
 	"citizen-feature-custom-width-wide-label": "Wide",
-	"citizen-feature-custom-width-full-label": "Full"
+	"citizen-feature-custom-width-full-label": "Full",
+
+	"citizen-user-info-text-anon": "Your IP address will be publicly visible if you make any edits."
 }

i18n/qqq.json

@@ -62,5 +62,6 @@
 	"citizen-feature-custom-width-name": "Heading label for page width",
 	"citizen-feature-custom-width-standard-label": "Label for standard page width. An adjective that describes \"text\" ({{msg-mw|Citizen-feature-custom-width-name}}).",
 	"citizen-feature-custom-width-wide-label": "Label for wide page width. An adjective that describes \"text\" ({{msg-mw|Citizen-feature-custom-width-name}}).",
-	"citizen-feature-custom-width-full-label": "Label for full page width. An adjective that describes \"text\" ({{msg-mw|Citizen-feature-custom-width-name}})."
+	"citizen-feature-custom-width-full-label": "Label for full page width. An adjective that describes \"text\" ({{msg-mw|Citizen-feature-custom-width-name}}).",
+	"citizen-user-info-text-anon": "Description in the user menu when user is not logged in."
 }

includes/Components/CitizenComponentUserInfo.php

@@ -154,6 +154,7 @@ private function getUserPage(): array {
 	 * @inheritDoc
 	 */
 	public function getTemplateData(): array {
+		$localizer = $this->localizer;
 		$data = [];
 
 		if ( $this->isRegistered ) {
@@ -162,6 +163,11 @@ public function getTemplateData(): array {
 				'data-user-page' => $this->getUserPage(),
 				'data-user-edit' => $this->getUserEditCount()
 			];
+		} else {
+			$data = [
+				'title' => $localizer->msg( 'notloggedin' ),
+				'text' => $localizer->msg( 'citizen-user-info-text-anon' )
+			];
 		}
 
 		return $data;

resources/skins.citizen.styles/components/UserInfo.less

@@ -1,8 +1,17 @@
 .citizen-userInfo {
-	padding: var( --space-sm ) var( --space-md );
+	padding: var( --space-sm ) var( --space-md ) var( --space-md );
 	margin-bottom: var( --space-xs );
 	border-bottom: 1px solid var( --border-color-base );
 
+	&-title {
+		font-weight: var( --font-weight-medium );
+
+		> div {
+			padding-top: var( --space-xs );
+			padding-bottom: var( --space-xs );
+		}
+	}
+
 	&-title,
 	#pt-userpage-2 > a {
 		font-size: var( --font-size-medium );

skin.json

@@ -59,8 +59,8 @@
 						"citizen-drawer-toggle",
 						"citizen-jumptotop",
 						"citizen-languages-toggle",
-						"citizen-usermenu-toggle",
 						"citizen-search-toggle",
+						"citizen-usermenu-toggle",
 						"randompage",
 						"search",
 						"sitetitle",

templates/UserInfo.mustache

@@ -1,8 +1,10 @@
 <div class="citizen-userInfo">
 	<div class="citizen-userInfo-title">
+		{{#title}}<div>{{.}}</div>{{/title}}
 		{{#data-user-page}}{{>Menu}}{{/data-user-page}}
 	</div>
 	<div class="citizen-userInfo-text">
+		{{#text}}<div>{{.}}</div>{{/text}}
 		{{#data-user-groups}}
 			<ul class="citizen-userInfo-usergroups">
 					{{#array-list-items}}{{>MenuListItem}}{{/array-list-items}}