FEATURE: Add anonymous username generator plugin (#1)

* FEATURE: Add anonymous username generator plugin

With this PR we add the core functionalities for this plugin:

- Blocks usernames that contain parts of the user's real last name.
- Provides a button to generate random usernames during sign-up (currently only in invites).

* DEV: update

* DEV: reduce random word list

* DEV: make random word list optional

* DEV: update name to invite-username-input

* DEV: use username_validator modifier

* DEV: rename modifier to username_validations

* DEV: update based on core changes

* DEV: update modifier naming + context.user

* DEV: lint

* DEV: revert name again!

* dev: update spec to use model directly

Author: Grubba27

README.md

@@ -2,4 +2,13 @@
 
 **Plugin Summary**
 
-For more information, please see: **url to meta topic**
+> [!WARNING]
+> Currently only works with `invite only` setups.
+
+This plugin provides functionality to generate anonymous usernames for users during sign-up.
+
+- [x] Generates random usernames based on a predefined list of words(`random words list` + random number).
+- [x] Option to restrict users to only use generated usernames (`only generated usernames` setting).
+
+> [!IMPORTANT]
+> Ensure to have `full_name_requirement` setting as  `"required_at_signup"`.

app/controllers/discourse_anon_usernames/examples_controller.rb

@@ -3,9 +3,5 @@
 module ::DiscourseAnonUsernames
   class ExamplesController < ::ApplicationController
     requires_plugin PLUGIN_NAME
-
-    def index
-      render json: { hello: "world" }
-    end
   end
 end

assets/javascripts/discourse/components/randomizer-button.gjs

@@ -0,0 +1,53 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+
+const getFirstName = (fullName) => fullName.split(" ")[0];
+
+export default class RandomizerButton extends Component {
+  @service siteSettings;
+
+  get randomWordsList() {
+    return this.siteSettings.random_words_list.split("|") || [];
+  }
+
+  fetchRandomWord() {
+    if (this.randomWordsList.length === 0) {
+      return "";
+    }
+    return this.randomWordsList[
+      Math.floor(Math.random() * this.randomWordsList.length)
+    ];
+  }
+
+  @action
+  async generate() {
+    const randomizeFrom = getFirstName(this.args.randomizeFrom);
+    const randomWord = this.fetchRandomWord();
+
+    this.args.onGenerate({
+      target: {
+        value: randomizeFrom + randomWord + Math.floor(Math.random() * 1000),
+      },
+    });
+  }
+
+  get canGenerate() {
+    return (
+      this.args.randomizeFrom &&
+      this.args.randomizeFrom.length !== 0 &&
+      getFirstName(this.args.randomizeFrom).trim() !==
+        this.args.randomizeFrom.trim()
+    );
+  }
+
+  <template>
+    <DButton
+      @icon="rotate"
+      class="btn-primary randomizer-btn"
+      @action={{this.generate}}
+      disabled={{if this.canGenerate false true}}
+    />
+  </template>
+}

assets/javascripts/discourse/initializers/sign-up-username-override.gjs

@@ -0,0 +1,42 @@
+import { on } from "@ember/modifier";
+import InputTip from "discourse/components/input-tip";
+import valueEntered from "discourse/helpers/value-entered";
+import { apiInitializer } from "discourse/lib/api";
+import { i18n } from "discourse-i18n";
+import RandomizerButton from "../components/randomizer-button";
+
+export default apiInitializer((api) => {
+  const siteSettings = api.container.lookup("service:site-settings");
+
+  api.renderInOutlet(
+    "invite-username-input",
+    <template>
+      <div class="input-with-randomizer-btn">
+        <input
+          {{on "focusin" @scrollInputIntoView}}
+          {{on "input" @setAccountUsername}}
+          type="text"
+          value={{@accountUsername}}
+          class={{valueEntered @accountUsername}}
+          id="new-account-username"
+          name="username"
+          disabled={{siteSettings.only_generated_usernames}}
+          maxlength={{@maxUsernameLength}}
+          autocomplete="off"
+        />
+
+        <RandomizerButton
+          @randomizeFrom={{@accountName}}
+          @onGenerate={{@setAccountUsername}}
+        />
+
+      </div>
+      {{#unless @accountUsername}}
+        <label class="alt-placeholder" for="new-account-username">
+          {{i18n "user.username.title"}}
+        </label>
+      {{/unless}}
+      <InputTip @validation={{@usernameValidation}} id="username-validation" />
+    </template>
+  );
+});

assets/stylesheets/anon-usernames.scss

@@ -0,0 +1,37 @@
+@use "lib/viewport";
+
+// change ordering of username input in invite sign up
+.invites-show {
+  .invite-form form {
+    .input-group {
+      &.email-input {
+        order: 1;
+      }
+
+      &.name-input.name-required {
+        order: 2;
+      }
+
+      &.username-input {
+        order: 3;
+      }
+
+      &.password-input {
+        order: 4;
+      }
+    }
+
+    .invitation-cta {
+      order: 5;
+    }
+  }
+}
+
+.input-with-randomizer-btn {
+  display: flex;
+
+  .btn-primary {
+    margin-left: 0.5rem;
+    height: 2.5rem;
+  }
+}

config/locales/client.en.yml

@@ -6,4 +6,7 @@ en:
           discourse_anon_usernames: "Discourse Anon Usernames"
   js:
     discourse_anon_usernames:
-      placeholder: placeholder
+      errors:
+        full_name_required:
+          title: "Full name required"
+          message: "Please enter your full name (first and last) to generate an anonymous username."

config/locales/server.en.yml

@@ -1 +1,4 @@
 en:
+    discourse_anon_usernames:
+      errors:
+        username_invalid: "The chosen username appears to contain your last name. Please choose a different username."

config/routes.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 DiscourseAnonUsernames::Engine.routes.draw do
-  get "/examples" => "examples#index"
   # define routes here
 end
 

config/settings.yml

@@ -2,3 +2,10 @@ discourse_anon_usernames:
   discourse_anon_usernames_enabled:
     default: false
     client: true
+  only_generated_usernames:
+    default: false
+    client: true
+  random_words_list:
+    type: list
+    default: ""
+    client: true

plugin.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 # name: discourse-anon-usernames
-# about: TODO
+# about: Generate anonymous usernames for users and blocks them from using their real names in usernames
 # meta_topic_id: TODO
 # version: 0.0.1
 # authors: Discourse
@@ -16,6 +16,17 @@ module ::DiscourseAnonUsernames
 
 require_relative "lib/discourse_anon_usernames/engine"
 
+register_asset "stylesheets/anon-usernames.scss"
+
 after_initialize do
-  # Code which should run after Rails has finished booting
+  register_modifier(:username_validation) do |errors, context|
+    next if context.object.nil? || context.object.name.blank?
+
+    username = context.username
+    last_name = context.object.name.split(" ").last
+
+    is_leaking_last_name = username.downcase.include?(last_name.downcase)
+
+    errors << I18n.t("discourse_anon_usernames.errors.username_invalid") if is_leaking_last_name
+  end
 end