Implement MaterialInput directive for BSB theme inputs

Vitor Durante · Vitor Durante · commit 49f53ee5e345 · 2017-06-19T14:47:55.000-03:00
diff --git a/angular/src/account/account.module.ts b/angular/src/account/account.module.ts
@@ -20,6 +20,7 @@ import { RegisterComponent } from './register/register.component';
 import { AccountLanguagesComponent } from './layout/account-languages.component';
 
 import { LoginService } from './login/login.service';
+import { MaterialInput } from '@shared/directives/material-input.directive';
 
 @NgModule({
     imports: [
@@ -39,12 +40,13 @@ import { LoginService } from './login/login.service';
         TenantChangeModalComponent,
         LoginComponent,
         RegisterComponent,
-        AccountLanguagesComponent
+        AccountLanguagesComponent,
+        MaterialInput
     ],
     providers: [
         LoginService
     ]
 })
 export class AccountModule {
 
-}
+}
diff --git a/angular/src/account/login/login.component.html b/angular/src/account/login/login.component.html
@@ -8,16 +8,16 @@ <h4 class="text-center">{{l("LogIn")}}</h4>
                     <i class="material-icons">person</i>
                 </span>
                 <div class="form-line">
-                    <input [(ngModel)]="loginService.authenticateModel.userNameOrEmailAddress" autoFocus class="form-control" type="text" autocomplete="off" placeholder="{{l('UserNameOrEmail')}}" name="userNameOrEmailAddress" required maxlength="255" />
+                    <input materialInput [(ngModel)]="loginService.authenticateModel.userNameOrEmailAddress" autoFocus class="form-control" type="text" autocomplete="off" placeholder="{{l('UserNameOrEmail')}}" name="userNameOrEmailAddress" required maxlength="255" />
                 </div>
             </div>
-            
+
             <div class="input-group">
                 <span class="input-group-addon">
                     <i class="material-icons">lock</i>
                 </span>
                 <div class="form-line">
-                    <input type="password" [(ngModel)]="loginService.authenticateModel.password" class="form-control" name="password" placeholder="{{l('Password')}}" required maxlength="32">
+                    <input materialInput type="password" [(ngModel)]="loginService.authenticateModel.password" class="form-control" name="password" placeholder="{{l('Password')}}" required maxlength="32">
                 </div>
             </div>
             <div class="row">
@@ -29,14 +29,14 @@ <h4 class="text-center">{{l("LogIn")}}</h4>
                     <button id="LoginButton" class="btn btn-block bg-pink waves-effect" type="submit">{{l("LogIn")}}</button>
                 </div>
             </div>
-            
+
             <div class="row m-t-15 m-b--20" *ngIf="isSelfRegistrationAllowed">
                 <div class="col-xs-12">
                     <a [routerLink]="['../register']">{{l("Register")}}</a>
                 </div>
             </div>
         </form>
-        
+
         <div class="login-options" *ngIf="multiTenancySideIsTeanant && loginService.externalLoginProviders.length > 0">
             <h4>{{l("OrLoginWith")}}</h4>
             <ul class="social-icons">
@@ -48,4 +48,4 @@ <h4>{{l("OrLoginWith")}}</h4>
             </ul>
         </div>
     </div>
-</div>
+</div>
diff --git a/angular/src/account/login/login.component.ts b/angular/src/account/login/login.component.ts
@@ -10,7 +10,7 @@ import { AbpSessionService } from '@abp/session/abp-session.service';
     styleUrls: [
         './login.component.less'
     ],
-    animations: [accountModuleAnimation()] 
+    animations: [accountModuleAnimation()]
 })
 export class LoginComponent extends AppComponentBase {
 
@@ -28,7 +28,6 @@ export class LoginComponent extends AppComponentBase {
     }
 
     ngAfterViewInit(): void {
-        ($ as any).AdminBSB.input.activate($(this.cardBody.nativeElement));
         $(this.cardBody.nativeElement).find('input:first').focus();
     }
 
@@ -54,4 +53,4 @@ export class LoginComponent extends AppComponentBase {
     externalLogin(provider: ExternalLoginProvider) {
         this.loginService.externalAuthenticate(provider);
     }
-}
+}
diff --git a/angular/src/account/register/register.component.html b/angular/src/account/register/register.component.html
@@ -5,35 +5,35 @@ <h4 class="text-center">{{l("Register")}}</h4>
 
             <div class="form-group form-float">
                 <div class="form-line">
-                    <input class="form-control" autoFocus type="text" [(ngModel)]="model.name" name="Name" required maxlength="32" />
+                    <input materialInput class="form-control" autoFocus type="text" [(ngModel)]="model.name" name="Name" required maxlength="32" />
                     <label class="form-label">{{l('Name')}}</label>
                 </div>
             </div>
-            
+
             <div class="form-group form-float">
                 <div class="form-line">
-                    <input class="form-control" type="text" [(ngModel)]="model.surname" name="Surname" required maxlength="32" />
+                    <input materialInput class="form-control" type="text" [(ngModel)]="model.surname" name="Surname" required maxlength="32" />
                     <label class="form-label">{{l('Surname')}}</label>
                 </div>
             </div>
 
             <div class="form-group form-float">
                 <div class="form-line">
-                    <input class="form-control" type="email" [(ngModel)]="model.emailAddress" name="EmailAddress" required maxlength="255" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$" />
+                    <input materialInput class="form-control" type="email" [(ngModel)]="model.emailAddress" name="EmailAddress" required maxlength="255" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$" />
                     <label class="form-label">{{l('EmailAddress')}}</label>
                 </div>
             </div>
 
             <div class="form-group form-float">
                 <div class="form-line">
-                    <input class="form-control" type="text" autocomplete="off" [(ngModel)]="model.userName" name="UserName" required maxlength="32" />
+                    <input materialInput class="form-control" type="text" autocomplete="off" [(ngModel)]="model.userName" name="UserName" required maxlength="32" />
                     <label class="form-label">{{l('UserName')}}</label>
                 </div>
             </div>
-            
+
             <div class="form-group form-float">
                 <div class="form-line">
-                    <input class="form-control" type="password" [(ngModel)]="model.password" name="Password" required maxlength="32" />
+                    <input materialInput class="form-control" type="password" [(ngModel)]="model.password" name="Password" required maxlength="32" />
                     <label class="form-label">{{l('Password')}}</label>
                 </div>
             </div>
@@ -45,4 +45,4 @@ <h4 class="text-center">{{l("Register")}}</h4>
 
         </form>
     </div>
-</div>
+</div>
diff --git a/angular/src/account/register/register.component.ts b/angular/src/account/register/register.component.ts
@@ -27,7 +27,6 @@ export class RegisterComponent extends AppComponentBase implements AfterViewInit
     }
 
     ngAfterViewInit(): void {
-        ($ as any).AdminBSB.input.activate($(this.cardBody.nativeElement));
         $(this.cardBody.nativeElement).find('input:first').focus();
     }
 
@@ -53,4 +52,4 @@ export class RegisterComponent extends AppComponentBase implements AfterViewInit
                 this._loginService.authenticate(() => { this.saving = false; });
             });
     }
-}
+}
diff --git a/angular/src/account/tenant/tenant-change-modal.component.html b/angular/src/account/tenant/tenant-change-modal.component.html
@@ -17,7 +17,7 @@ <h4 class="modal-title">
                 <div class="modal-body">
                     <div class="form-group form-float">
                         <div class="form-line">
-                            <input #tenancyNameInput type="text" name="TenancyName" class="form-control" [ngClass]="{'edited':tenancyName}" [(ngModel)]="tenancyName" maxlength="64">
+                            <input #tenancyNameInput materialInput  type="text" name="TenancyName" class="form-control" [ngClass]="{'edited':tenancyName}" [(ngModel)]="tenancyName" maxlength="64">
                             <label class="form-label">{{l("TenancyName")}}</label>
                         </div>
                     </div>
@@ -33,4 +33,4 @@ <h4 class="modal-title">
 
         </div>
     </div>
-</div>
+</div>
diff --git a/angular/src/account/tenant/tenant-change-modal.component.ts b/angular/src/account/tenant/tenant-change-modal.component.ts
@@ -33,7 +33,6 @@ export class TenantChangeModalComponent extends AppComponentBase {
     }
 
     onShown(): void {
-        ($ as any).AdminBSB.input.activate($(this.modalContent.nativeElement));
         $(this.tenancyNameInput.nativeElement).focus().select();
     }
 
@@ -73,4 +72,4 @@ export class TenantChangeModalComponent extends AppComponentBase {
         this.active = false;
         this.modal.hide();
     }
-}
+}
diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts
@@ -25,6 +25,7 @@ import { SideBarUserAreaComponent } from '@app/layout/sidebar-user-area.componen
 import { SideBarNavComponent } from '@app/layout/sidebar-nav.component';
 import { SideBarFooterComponent } from '@app/layout/sidebar-footer.component';
 import { RightSideBarComponent } from '@app/layout/right-sidebar.component';
+import { MaterialInput } from '@shared/directives/material-input.directive';
 
 @NgModule({
     declarations: [
@@ -40,7 +41,8 @@ import { RightSideBarComponent } from '@app/layout/right-sidebar.component';
         SideBarUserAreaComponent,
         SideBarNavComponent,
         SideBarFooterComponent,
-        RightSideBarComponent
+        RightSideBarComponent,
+        MaterialInput
     ],
     imports: [
         CommonModule,
@@ -57,4 +59,4 @@ import { RightSideBarComponent } from '@app/layout/right-sidebar.component';
 
     ]
 })
-export class AppModule { }
+export class AppModule { }
diff --git a/angular/src/app/layout/topbar.component.html b/angular/src/app/layout/topbar.component.html
@@ -3,7 +3,7 @@
     <div class="search-icon">
         <i class="material-icons">search</i>
     </div>
-    <input type="text" placeholder="START TYPING...">
+    <input materialInput type="text" placeholder="START TYPING...">
     <div class="close-search">
         <i class="material-icons">close</i>
     </div>
@@ -24,4 +24,4 @@
             </ul>
         </div>
     </div>
-</nav>
+</nav>
diff --git a/angular/src/app/tenants/create-tenant-modal.component.html b/angular/src/app/tenants/create-tenant-modal.component.html
@@ -17,25 +17,25 @@ <h4 class="modal-title">
                 <div class="modal-body">
                     <div class="form-group form-float">
                         <div class="form-line">
-                            <input class="form-control" type="text" name="TenancyName" [(ngModel)]="tenant.tenancyName" required maxlength="64" minlength="2">
+                            <input materialInput class="form-control" type="text" name="TenancyName" [(ngModel)]="tenant.tenancyName" required maxlength="64" minlength="2">
                             <label class="form-label">{{l("TenancyName")}}</label>
                         </div>
                     </div>
                     <div class="form-group form-float">
                         <div class="form-line">
-                            <input type="text" name="Name" class="form-control" [(ngModel)]="tenant.name" required maxlength="128">
+                            <input materialInput type="text" name="Name" class="form-control" [(ngModel)]="tenant.name" required maxlength="128">
                             <label class="form-label">{{l("Name")}}</label>
                         </div>
                     </div>
                     <div class="form-group form-float">
                         <div class="form-line">
-                            <input type="text" name="ConnectionString" class="form-control" [(ngModel)]="tenant.connectionString" maxlength="1024">
+                            <input materialInput type="text" name="ConnectionString" class="form-control" [(ngModel)]="tenant.connectionString" maxlength="1024">
                             <label class="form-label">{{l("DatabaseConnectionString")}} ({{l("Optional")}})</label>
                         </div>
                     </div>
                     <div class="form-group form-float">
                         <div class="form-line">
-                            <input type="email" name="AdminEmailAddress" class="form-control" [(ngModel)]="tenant.adminEmailAddress" required maxlength="256" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$">
+                            <input materialInput type="email" name="AdminEmailAddress" class="form-control" [(ngModel)]="tenant.adminEmailAddress" required maxlength="256" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$">
                             <label class="form-label">{{l("AdminEmailAddress")}}</label>
                         </div>
                     </div>
@@ -51,4 +51,4 @@ <h4 class="modal-title">
 
         </div>
     </div>
-</div>
+</div>
diff --git a/angular/src/app/tenants/create-tenant-modal.component.ts b/angular/src/app/tenants/create-tenant-modal.component.ts
@@ -34,10 +34,6 @@ export class CreateTenantModalComponent extends AppComponentBase {
         this.tenant = new CreateTenantInput();
     }
 
-    onShown(): void {
-        ($ as any).AdminBSB.input.activate($(this.modalContent.nativeElement));
-    }
-
     save(): void {
 
         this.saving = true;
@@ -54,4 +50,4 @@ export class CreateTenantModalComponent extends AppComponentBase {
         this.active = false;
         this.modal.hide();
     }
-}
+}
diff --git a/angular/src/app/users/create-user-modal.component.html b/angular/src/app/users/create-user-modal.component.html
@@ -17,31 +17,31 @@ <h4 class="modal-title">
                 <div class="modal-body">
                     <div class="form-group form-float">
                         <div class="form-line">
-                            <input class="form-control" type="text" name="UserName" [(ngModel)]="user.userName" required maxlength="32" minlength="2">
+                            <input materialInput class="form-control" type="text" name="UserName" [(ngModel)]="user.userName" required maxlength="32" minlength="2">
                             <label class="form-label">{{l("UserName")}}</label>
                         </div>
                     </div>
                     <div class="form-group form-float">
                         <div class="form-line">
-                            <input type="text" name="Name" class="form-control" [(ngModel)]="user.name" required maxlength="32">
+                            <input materialInput type="text" name="Name" class="form-control" [(ngModel)]="user.name" required maxlength="32">
                             <label class="form-label">{{l("Name")}}</label>
                         </div>
                     </div>
                     <div class="form-group form-float">
                         <div class="form-line">
-                            <input type="text" name="Surname" class="form-control" [(ngModel)]="user.surname" required maxlength="32">
+                            <input materialInput type="text" name="Surname" class="form-control" [(ngModel)]="user.surname" required maxlength="32">
                             <label class="form-label">{{l("Surname")}}</label>
                         </div>
                     </div>
                     <div class="form-group form-float">
                         <div class="form-line">
-                            <input type="email" name="EmailAddress" class="form-control" [(ngModel)]="user.emailAddress" maxlength="256" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$">
+                            <input materialInput type="email" name="EmailAddress" class="form-control" [(ngModel)]="user.emailAddress" maxlength="256" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$">
                             <label class="form-label">{{l("EmailAddress")}}</label>
                         </div>
                     </div>
                     <div class="form-group form-float">
                         <div class="form-line">
-                            <input type="password" name="Password" class="form-control" [(ngModel)]="user.password" required maxlength="32">
+                            <input materialInput type="password" name="Password" class="form-control" [(ngModel)]="user.password" required maxlength="32">
                             <label class="form-label">{{l("Password")}}</label>
                         </div>
                     </div>
@@ -60,4 +60,4 @@ <h4 class="modal-title">
 
         </div>
     </div>
-</div>
+</div>
diff --git a/angular/src/app/users/create-user-modal.component.ts b/angular/src/app/users/create-user-modal.component.ts
@@ -33,10 +33,6 @@ export class CreateUserModalComponent extends AppComponentBase {
         this.user = new CreateUserInput({ isActive: true });
     }
 
-    onShown(): void {
-        ($ as any).AdminBSB.input.activate($(this.modalContent.nativeElement));
-    }
-
     save(): void {
 
         this.saving = true;
@@ -53,4 +49,4 @@ export class CreateUserModalComponent extends AppComponentBase {
         this.active = false;
         this.modal.hide();
     }
-}
+}
diff --git a/angular/src/shared/app-component-base.ts b/angular/src/shared/app-component-base.ts
@@ -21,7 +21,7 @@ export abstract class AppComponentBase {
     message: MessageService;
     multiTenancy: AbpMultiTenancyService;
     appSession: AppSessionService;
-    domNode: HTMLElement = null;
+    elementRef: ElementRef;
 
     constructor(injector: Injector) {
         this.localization = injector.get(LocalizationService);
@@ -32,11 +32,7 @@ export abstract class AppComponentBase {
         this.message = injector.get(MessageService);
         this.multiTenancy = injector.get(AbpMultiTenancyService);
         this.appSession = injector.get(AppSessionService);
-        this.domNode = injector.get(ElementRef).nativeElement;
-    }
-    
-    ngAfterViewInit(): void {
-        ($ as any).AdminBSB.input.activate($(this.domNode));
+        this.elementRef = injector.get(ElementRef);
     }
 
     l(key: string, ...args: any[]): string {
diff --git a/angular/src/shared/directives/material-input.directive.ts b/angular/src/shared/directives/material-input.directive.ts
@@ -0,0 +1,14 @@
+import { Directive, ElementRef, Injectable } from '@angular/core';
+
+@Directive({
+  selector: '[materialInput]'
+})
+
+@Injectable()
+export class MaterialInput {
+
+  constructor(el: ElementRef) {
+    ($ as any).AdminBSB.input.activate($(el.nativeElement).parent());
+  }
+
+}

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ import { AbpSessionService } from '@abp/session/abp-session.service';`
`10`	`10`	`styleUrls: [`
`11`	`11`	`'./login.component.less'`
`12`	`12`	`],`
`13`		`- animations: [accountModuleAnimation()]`
	`13`	`+ animations: [accountModuleAnimation()]`
`14`	`14`	`})`
`15`	`15`	`export class LoginComponent extends AppComponentBase {`
`16`	`16`
`@@ -28,7 +28,6 @@ export class LoginComponent extends AppComponentBase {`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`ngAfterViewInit(): void {`
`31`		`- ($ as any).AdminBSB.input.activate($(this.cardBody.nativeElement));`
`32`	`31`	`$(this.cardBody.nativeElement).find('input:first').focus();`
`33`	`32`	`}`
`34`	`33`
`@@ -54,4 +53,4 @@ export class LoginComponent extends AppComponentBase {`
`54`	`53`	`externalLogin(provider: ExternalLoginProvider) {`
`55`	`54`	`this.loginService.externalAuthenticate(provider);`
`56`	`55`	`}`
`57`		`-}`
	`56`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,6 @@ export class RegisterComponent extends AppComponentBase implements AfterViewInit`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`ngAfterViewInit(): void {`
`30`		`- ($ as any).AdminBSB.input.activate($(this.cardBody.nativeElement));`
`31`	`30`	`$(this.cardBody.nativeElement).find('input:first').focus();`
`32`	`31`	`}`
`33`	`32`
`@@ -53,4 +52,4 @@ export class RegisterComponent extends AppComponentBase implements AfterViewInit`
`53`	`52`	`this._loginService.authenticate(() => { this.saving = false; });`
`54`	`53`	`});`
`55`	`54`	`}`
`56`		`-}`
	`55`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,6 @@ export class TenantChangeModalComponent extends AppComponentBase {`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`onShown(): void {`
`36`		`- ($ as any).AdminBSB.input.activate($(this.modalContent.nativeElement));`
`37`	`36`	`$(this.tenancyNameInput.nativeElement).focus().select();`
`38`	`37`	`}`
`39`	`38`
`@@ -73,4 +72,4 @@ export class TenantChangeModalComponent extends AppComponentBase {`
`73`	`72`	`this.active = false;`
`74`	`73`	`this.modal.hide();`
`75`	`74`	`}`
`76`		`-}`
	`75`	`+}`