Improve registration

 * Add ability to set the user display name
 * Use display name to guess the username/channel name
 * Add explanations about what is the purpose of a username/channel name
 * Add a loader at the "done" step

2 files changed, 7 insertions, 1 deletions

diff --git a/shared/extra-utils/users/users.ts b/shared/extra-utils/users/users.ts
index 0f2f0ae15..c09211b71 100644
--- a/shared/extra-utils/users/users.ts
+++ b/shared/extra-utils/users/users.ts
@@ -73,7 +73,7 @@ function registerUser (url: string, username: string, password: string, specialS
 
 function registerUserWithChannel (options: {
   url: string,
-  user: { username: string, password: string },
+  user: { username: string, password: string, displayName?: string },
   channel: { name: string, displayName: string }
 }) {
   const path = '/api/v1/users/register'
@@ -84,6 +84,10 @@ function registerUserWithChannel (options: {
     channel: options.channel
   }
 
+  if (options.user.displayName) {
+    Object.assign(body, { displayName: options.user.displayName })
+  }
+
   return makePostBodyRequest({
     url: options.url,
     path,
diff --git a/shared/models/users/user-register.model.ts b/shared/models/users/user-register.model.ts
index ce5c9c3d2..cf9a43a67 100644
--- a/shared/models/users/user-register.model.ts
+++ b/shared/models/users/user-register.model.ts
@@ -3,6 +3,8 @@ export interface UserRegister {
   password: string
   email: string
 
+  displayName?: string
+
   channel?: {
     name: string
     displayName: string