stash

frontend/src/views/Register.vue

@@ -47,6 +47,10 @@
                                             <div class="invalid-feedback">{{ errors.email }}</div>
                                         </div>
 
+                                        <input type="text" class="visually-hidden" autocomplete="username"
+                                               tabindex="-1" aria-hidden="true"
+                                               v-model="fullHandle"/>
+
                                         <div :class="errors.password?['mb-3','is-invalid']:['mb-3']">
                                             <label class="form-label">Password</label>
                                             <input class="form-control form-control-lg" type="password"
@@ -117,8 +121,39 @@ export default {
             domains: []
         }
     },
+    computed: {
+        fullHandle: {
+            get() {
+                return this.form.domain ? `${this.form.username}@${this.form.domain}` : this.form.username;
+            },
+            set(value) {
+                this.applyHandle(value);
+            }
+        }
+    },
+    watch: {
+        // Catches the same "user@domain" shape when it's typed or pasted
+        // directly into the visible username field instead.
+        'form.username'(value) {
+            if (value.includes('@')) {
+                this.applyHandle(value);
+            }
+        }
+    },
     methods: {
         ...mapActions(['lookupServer']),
+        applyHandle(value) {
+            const atIndex = value.indexOf('@');
+            if (atIndex === -1) {
+                this.form.username = value;
+                return;
+            }
+            this.form.username = value.slice(0, atIndex);
+            const domain = value.slice(atIndex + 1);
+            if (this.domains.includes(domain)) {
+                this.form.domain = domain;
+            }
+        },
         do_register() {
             console.log('do_register');
             console.log(this.form);