Organization: auto populate slug on creation (#623)

Show the `slug` field when creating the organization and auto-populate
it based
on the name of the organization.


[Peek 2025-07-03
17-43.webm](https://github.com/user-attachments/assets/1addb2d3-056f-48db-89d0-19dbe6a4510b)


Requires readthedocs/readthedocs.org#12297
Closes #25

Author: humitos

readthedocsext/theme/static/readthedocsext/theme/js/site.js

@@ -1,20 +1,19 @@
 {% extends "organizations/base.html" %}
 
-{% load i18n %}
-{% load crispy_forms_tags %}
+{% load trans blocktrans from i18n %}
+{% load crispy from crispy_forms_tags %}
+{% load alter_field from ext_theme_tags %}
 
 {% block title %}
   {% blocktrans %}Create a new organization{% endblocktrans %}
-{% endblock %}
+{% endblock title %}
 
 {% block content %}
   <div class="ui very padded container">
     <div class="ui stackable centered grid">
       <div class="eight wide computer sixteen wide tablet left aligned column">
 
-        <h2 class="ui medium heading">
-          {% trans "Join or create an organization" %}
-        </h2>
+        <h2 class="ui medium heading">{% trans "Join or create an organization" %}</h2>
 
         <div class="ui segment">
           <div class="ui link list" data-bind="semanticui: { tabmenu: {} }">
@@ -28,9 +27,7 @@ <h2 class="ui medium heading">
             <a class="item" data-tab="registered">
               <i class="fad fa-building big icon"></i>
               <div class="content">
-                <div class="header">
-                  {% trans "Join an existing organization" %}
-                </div>
+                <div class="header">{% trans "Join an existing organization" %}</div>
                 <div class="description">
                   <p>
                     {% blocktrans trimmed %}
@@ -44,9 +41,7 @@ <h2 class="ui medium heading">
             <a class="item" data-tab="new">
               <i class="fad fa-plus big icon"></i>
               <div class="content">
-                <div class="header">
-                  {% trans "Create a new organization" %}
-                </div>
+                <div class="header">{% trans "Create a new organization" %}</div>
                 <div class="description">
                   <p>
                     {% blocktrans trimmed %}
@@ -60,9 +55,7 @@ <h2 class="ui medium heading">
             <a class="item" data-tab="not-sure">
               <i class="fad fa-question big icon"></i>
               <div class="content">
-                <div class="header">
-                  {% trans "I'm not sure" %}
-                </div>
+                <div class="header">{% trans "I'm not sure" %}</div>
                 <div class="description">
                   <p>
                     {% blocktrans trimmed %}
@@ -90,11 +83,24 @@ <h2 class="ui medium heading">
           {% endblocktrans %}
         </div>
 
-        <div class="ui tab" data-tab="new">
+        <div class="ui tab"
+             data-tab="new"
+             data-bind="using: new OrganizationCreateView()">
           <form class="ui form" action="" method="post">
             {% csrf_token %}
+            {% alter_field form.name data_bind="valueInit: name, textInput: name" %}
+            {% alter_field form.slug data_bind="valueInit:slug, text: slug, textInput: slug" %}
             {{ form|crispy }}
 
+            <div class="ui segment">
+              <div class="ui list">
+                <div class="item">
+                  <div class="sub header">{% trans "Example URL for a project" %}</div>
+                  <code data-bind="text: example"></code>
+                </div>
+              </div>
+            </div>
+
             <button class="ui primary button" type="submit">
               {% trans "Create organization" %}
             </button>
@@ -118,9 +124,7 @@ <h2 class="ui medium heading">
 
           <div class="basic card">
             <div class="content">
-              <div class="header">
-                {% trans "30 day trial" %}
-              </div>
+              <div class="header">{% trans "30 day trial" %}</div>
               <div class="description">
                 {% blocktrans %}
                   No need to decide now. You can pick a plan that fits your
@@ -134,4 +138,4 @@ <h2 class="ui medium heading">
       </div>
     </div>
   </div>
-{% endblock %}
+{% endblock content %}

readthedocsext/theme/templates/organizations/organization_form.html

@@ -39,3 +39,40 @@ export class OrganizationSettingsAuthorizationView {
   }
 }
 Registry.add_view(OrganizationSettingsAuthorizationView);
+
+/**
+ * Organization creation
+ */
+export class OrganizationCreateView {
+  static view_name = "OrganizationCreateView";
+
+  constructor() {
+    this.name = ko.observable();
+    this.slug = ko.observable();
+    this.name.subscribe((name) => {
+      const slugified = this.slugify(name);
+      this.slug(slugified);
+    });
+    this.example = ko.computed(() => {
+      const slug = this.slug() || "organization";
+      const example = "https://" + slug + "-project.readthedocs-hosted.com";
+      return example;
+    });
+  }
+
+  slugify(val) {
+    if (!val) return "";
+    return (
+      val
+        .toString()
+        .toLowerCase()
+        .trim()
+        // Replace spaces, non-word chars, underscores and dashes with a single '-'
+        // Copied from Django, which is what we are using under the hood
+        // https://github.com/django/django/blob/1e9db35/django/utils/text.py#L469-L470
+        .replace(/[^\w\s-_]+/g, "-")
+        .replace(/[-\s]+/g, "-")
+    );
+  }
+}
+Registry.add_view(OrganizationCreateView);