Add password visibility toggle to homepage registration (#31092)

* Add password visibility toggle to homepage registration

* Update text to "Create password" in registration form on the homepage

* Use material-symbol instead

GitOrigin-RevId: c40f3e9f696929108bad2e54acacfe3323ff70db

services/web/frontend/stylesheets/pages/homepage.scss

@@ -1,4 +1,6 @@
 .homepage-container {
+  --password-visibility-toggle-width: 44px;
+
   padding-top: $header-height;
 
   .home-animation-text-container {
@@ -156,6 +158,34 @@
       input {
         flex: 1;
       }
+
+      .form-complex-input-container {
+        position: relative;
+        flex: 1;
+
+        input {
+          padding-right: var(--password-visibility-toggle-width);
+        }
+      }
+
+      .visibility-toggle {
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: var(--password-visibility-toggle-width);
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        background-color: transparent;
+        cursor: pointer;
+        color: var(--content-secondary);
+
+        &:hover {
+          color: var(--content-primary);
+        }
+      }
     }
 
     .home-registration-sign-up {

services/web/locales/en.json

@@ -478,6 +478,7 @@
   "create_new_account": "Create new account",
   "create_new_subscription": "Create new subscription",
   "create_new_tag": "Create new tag",
+  "create_password": "Create password",
   "create_project_in_github": "Create a GitHub repository",
   "create_summaries": "Create summaries",
   "create_your_account": "Create your account",
@@ -731,7 +732,6 @@
   "enter_your_email": "Enter your email",
   "enter_your_email_address_below_and_we_will_send_you_a_link_to_reset_your_password": "Enter your email address below, and we will send you a link to reset your password",
   "enter_your_email_and_we_will_send_reset_instructions": "Enter your email and we’ll send reset instructions.",
-  "enter_your_password": "Enter your password",
   "equation_generator": "Equation Generator",
   "equation_preview": "Equation preview",
   "error": "Error",