fix: set public profile name after login (#7892)

* adding frontend ans server version on admin page

* set public profile name after login

* set public profile name after login

* setting afterModel hook with timeOut

* reduce timeout time

Author: maze-runnar

app/components/modals/confirm-modal.js

@@ -7,6 +7,12 @@ export default ModalBase.extend({
   },
 
   actions: {
+    savePublicName() {
+      this.authManager.currentUser.save();
+      this.confirm.pendingPromise?.resolve();
+      this.set('isOpen', false);
+    },
+
     deny() {
       if (this.confirm.pendingPromise.reject) {
         this.confirm.pendingPromise.reject();

app/helpers/confirm.js

@@ -15,6 +15,11 @@ export default Helper.extend({
           .then(() => {
             params[1](...arguments);
           });
+      } else if (params[1] === 'publicName') {
+        confirm.prompt(params[0], { 'publicName': true })
+          .then(() => {
+            params[1](...arguments);
+          });
       } else if (params.length >= 6) {
         confirm.prompt('Are You Sure?', { 'denyText': params[2], 'approveText': params[3], 'denyColor': params[4], 'approveColor': params[5], 'extra': params[0] })
           .then(() => {

app/routes/index.js

@@ -171,6 +171,7 @@ export default class IndexRoute extends Route {
       }
     ];
 
+
     return hash({
       filteredEvents: this.store.query('event', {
         upcoming     : true,
@@ -196,6 +197,20 @@ export default class IndexRoute extends Route {
         'page[size]' : 6
       })
     });
+
+  }
+
+  async afterModel() {
+    const prevRoute = this.session.currentRouteName;
+    setTimeout(() => {
+      if (this.session.isAuthenticated && this.session.currentRouteName === 'index' && prevRoute === 'login' && !this.authManager.currentUser.publicName) {
+        try {
+          this.confirm.prompt(this.l10n.t('You have not set a Public Profile Name yet. A public name is displayed on user profiles and video sessions instead of a fantasy name. You can change it later on your account page. Please set your public name now.'), { 'publicName': true });
+        } catch {
+          console.warn('User public profile name not set.');
+        }
+      }
+    }, 2000);
   }
 
   setupController(controller, model) {

app/templates/components/forms/user-profile-form.hbs

@@ -48,7 +48,7 @@
           <UiPopup
             @tagName="i"
             @class="info circle icon"
-            @content={{'Public profile name, if set, is displayed to other users on profiles and video sessions instead of real name.'}} />
+            @content={{'Public profile name, if set, is displayed to other users on profiles and video sessions instead of a fantasy name.'}} />
         </label>
         <Input
           @type="text"

app/templates/components/modals/confirm-modal.hbs

@@ -6,19 +6,35 @@
     {{sanitize this.confirm.options.extra}}
   </div>
 {{/if}}
-<div class="actions">
-  {{#if this.confirm.options.infoModal}}
-    <button type="button" class="ui blue button" {{action 'deny'}}>
-      {{t 'Ok'}}
+{{#if this.confirm.options.publicName}}
+  <div class="content">
+    <div class="field ui fluid input">
+      <Input type="text" @id="public_name" placeholder={{t "Public Profile Name"}}  @value={{this.authManager.currentUser.publicName}}/>
+    </div>
+  </div>
+  <div class="actions">
+    <button type="button" class="ui green button" {{action 'savePublicName'}}>
+      {{t 'Save'}}
     </button>
-  {{else}}
-    {{#unless this.confirm.options.hideDeny}}
-      <button type="button" class="ui {{if this.confirm.options.denyText this.confirm.options.denyColor 'black'}} button" {{action 'deny'}}>
-        {{if this.confirm.options.denyText this.confirm.options.denyText (t 'No')}}
-      </button>
-    {{/unless}}
-    <button type="button" class="ui {{if this.confirm.options.denyText this.confirm.options.approveColor 'green'}} button" {{action 'confirm'}}>
-      {{if this.confirm.options.approveText this.confirm.options.approveText (t 'Yes')}}
+    <button type="button" class="ui black button" {{action 'deny'}}>
+      {{t 'Cancel'}}
     </button>
-  {{/if}}
-</div>
+  </div>
+{{else}}
+  <div class="actions">
+    {{#if this.confirm.options.infoModal}}
+      <button type="button" class="ui blue button" {{action 'deny'}}>
+        {{t 'Ok'}}
+      </button>
+    {{else}}
+      {{#unless this.confirm.options.hideDeny}}
+        <button type="button" class="ui {{if this.confirm.options.denyText this.confirm.options.denyColor 'black'}} button" {{action 'deny'}}>
+          {{if this.confirm.options.denyText this.confirm.options.denyText (t 'No')}}
+        </button>
+      {{/unless}}
+      <button type="button" class="ui {{if this.confirm.options.denyText this.confirm.options.approveColor 'green'}} button" {{action 'confirm'}}>
+        {{if this.confirm.options.approveText this.confirm.options.approveText (t 'Yes')}}
+      </button>
+    {{/if}}
+  </div>
+{{/if}}