Add warning when username starts with a lowercase letter (#194)

* add username warning

Warning for people who select a username starting with a lowercase letter

* Update main.js

* add comma from Kenny2github

Co-authored-by: AbyxDev <ken@abyx.dev>

* Update main.js

---------

Co-authored-by: AbyxDev <ken@abyx.dev>

extension.json

@@ -74,7 +74,8 @@
 			],
 			"localBasePath": "resources",
 			"messages": [
-				"scratch-confirmaccount-click-copy-alert"
+				"scratch-confirmaccount-click-copy-alert",
+				"createacct-normalization"
 			],
 			"dependencies": [
 				"mediawiki.util",

resources/main.js

@@ -35,6 +35,7 @@ $(function () {
     if (!elem) return;
     elem.onclick = function() {
         copyToClipboard(document.getElementById("mw-scratch-confirmaccount-verifcode"));
+        mw.notify( mw.message( 'scratch-confirmaccount-click-copy-alert', { autoHide: true }, {autoHideSeconds: 5}) ); // Use an i18n message to send a notification
     }
 });
 
@@ -48,6 +49,23 @@ function copyToClipboard(temptext) {
         tempItem.focus();
         tempItem.select();
         document.execCommand('copy');
-        mw.notify( mw.message( 'scratch-confirmaccount-click-copy-alert', { autoHide: true }, {autoHideSeconds: 5}) ); // Use an i18n message to send a notification
         tempItem.parentElement.removeChild(tempItem);
       }
+
+
+$(function () {
+    const elem = document.getElementsByName("scratchusername")[0];
+    if (!elem) return;
+
+    elem.onblur = function() {
+	var currentname = elem.value || "";
+        var usernameblock = new OO.ui.infuse(elem.closest('.oo-ui-layout'));
+	// Start with username input field, and go to the entire username container that OOUI will infuse onto
+	var noticebox = [];
+	if(currentname.length > 0 && currentname[0].match("[a-z]")){// Compare first letter to a regex, to check if it starts with a lowercase letter
+		noticebox[0] = new mw.message("createacct-normalization", "", currentname[0].toUpperCase() + currentname.slice(1)).text();
+		// If it'd change, add a notice with the first letter captialized
+	}
+	usernameblock.setNotices(noticebox);// Save out any notices (importantly, this will *remove* a notice if it no longer applies)
+    }
+});

src/SpecialRequestAccount.php

@@ -186,12 +186,14 @@ function usernameAndVerificationArea() {
 					new OOUI\TextInputWidget( [
 						'name' => 'scratchusername',
 						'required' => true,
-						'value' => $request->getText('scratchusername')
+						'value' => $request->getText('scratchusername'),
 					] ),
 					[
 						'label' => wfMessage('scratch-confirmaccount-scratchusername')->text(),
 						'align' => 'top',
-					]
+						'infusable' => true,
+					],
+
 				),
 				new OOUI\FieldLayout(
 					new OOUI\TextInputWidget( [