diff --git a/services/src/main/java/org/keycloak/services/resources/account/AccountConsole.java b/services/src/main/java/org/keycloak/services/resources/account/AccountConsole.java
index 85cf2a7947..e073848c55 100644
--- a/services/src/main/java/org/keycloak/services/resources/account/AccountConsole.java
+++ b/services/src/main/java/org/keycloak/services/resources/account/AccountConsole.java
@@ -89,6 +89,8 @@ public class AccountConsole {
             map.put("authUrl", session.getContext().getContextPath());
             map.put("baseUrl", session.getContext().getContextPath() + "/realms/" + realm.getName() + "/account");
             map.put("realm", realm.getName());
+            map.put("isRegistrationEmailAsUsername", realm.isRegistrationEmailAsUsername());
+            map.put("isEditUserNameAllowed", realm.isEditUsernameAllowed());
             map.put("resourceUrl", Urls.themeRoot(baseUri).getPath() + "/account/" + theme.getName());
             map.put("resourceVersion", Version.RESOURCES_VERSION);
             
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/index.ftl b/themes/src/main/resources/theme/keycloak-preview/account/index.ftl
index 4183d14825..bbf4fd510f 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/index.ftl
+++ b/themes/src/main/resources/theme/keycloak-preview/account/index.ftl
@@ -8,6 +8,8 @@
             var baseUrl = '${baseUrl}';
             var realm = '${realm}';
             var resourceUrl = '${resourceUrl}';
+            var isRegistrationEmailAsUsername = ${isRegistrationEmailAsUsername?c};
+            var isEditUserNameAllowed = ${isEditUserNameAllowed?c};
 
             <#if referrer??>
                 var referrer = '${referrer}';
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.html
index 7d2ffb1353..94a356e884 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.html
@@ -15,13 +15,14 @@
 
     <form #formGroup="ngForm" (ngSubmit)="saveAccount()" class="form-horizontal">
 
-        <div class="form-group ">
+        <div *ngIf="!isRegistrationEmailAsUsername" class="form-group ">
             <div class="col-sm-2 col-md-2">
-                <label for="username" class="control-label">{{'username' | translate}}</label>
+                <label for="username" class="control-label">{{'username' | translate}}</label><span *ngIf="isEditUserNameAllowed" class="required">*</span>
             </div>
 
             <div class="col-sm-10 col-md-10">
-                <input type="text" class="form-control" id="username" name="username" disabled value="{{username}}" >
+                <input *ngIf="isEditUserNameAllowed" type="text" class="form-control" required ngModel id="username" name="username" value="{{username}}" >
+                <span *ngIf="!isEditUserNameAllowed">{{ username }}</span>
             </div>
         </div>
 
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.ts b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.ts
index eeae139305..ab51ab675d 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.ts
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.ts
@@ -20,18 +20,22 @@ import {FormGroup} from '@angular/forms';
 
 import {AccountServiceClient} from '../../account-service/account.service';
 
+declare const isRegistrationEmailAsUsername: boolean;
+declare const isEditUserNameAllowed: boolean;
+
 @Component({
     selector: 'app-account-page',
     templateUrl: './account-page.component.html',
     styleUrls: ['./account-page.component.css']
 })
 export class AccountPageComponent implements OnInit {
+    private isRegistrationEmailAsUsername: boolean = isRegistrationEmailAsUsername;
+    private isEditUserNameAllowed: boolean = isEditUserNameAllowed;
     
     @ViewChild('formGroup') private formGroup: FormGroup;
     
-    // using ordinary variable here
-    // disabled fields not working properly with FormGroup
-    // FormGroup.getRawValue() causes page refresh.  Not sure why?
+    // using ordinary variable here for case where username
+    // is not editable and not controlled by formGroup
     private username: string;
 
     constructor(private accountSvc: AccountServiceClient ) {