refactor: make components alive

Author: ByPort

…-password/forgot-password.component.scss …ut-card/blank-layout-card.component.scsssrc/app/pages/pages/forgot-password/forgot-password.component.scss renamed to src/app/components/blank-layout-card/blank-layout-card.component.scss src/app/pages/pages/forgot-password/forgot-password.component.scss renamed to src/app/components/blank-layout-card/blank-layout-card.component.scss

@@ -1,7 +1,6 @@
-// FIXME: same styles for login and error components
 @import '~theme/helpers';
 
-.login {
+.blank-layout-card {
   margin: auto;
 
   .mdl-button {
@@ -11,7 +10,7 @@
   font-family: Roboto, Helvetica, sans-serif;
   font-size: 14px;
 
-  .mdl-card__login.mdl-card {
+  .mdl-card__blank-layout-card.mdl-card {
     width: 450px;
     min-height: 500px;
     margin: auto;
@@ -27,18 +26,18 @@
         font-weight: bold;
       }
 
-      .login-name {
+      .blank-layout-card-name {
         font-size: 24px;
         display: block;
         padding: 0 0 8px 0;
       }
 
-      .login-link {
+      .blank-layout-card-link {
         padding: 12px 0;
       }
 
-      .login-link,
-      .login-link * {
+      .blank-layout-card-link,
+      .blank-layout-card-link * {
         display: inline-block;
         font-size: 14px;
         font-weight: inherit;

src/app/components/blank-layout-card/blank-layout-card.component.ts

@@ -0,0 +1,8 @@
+import { Component, HostBinding } from '@angular/core';
+
+import { UpgradableComponent } from 'theme/components/upgradable';
+
+@Component({ })
+export abstract class BlankLayoutCardComponent extends UpgradableComponent {
+  @HostBinding('class.blank-layout-card') protected readonly blankLayoutCard = true;
+}

src/app/components/blank-layout-card/index.ts

@@ -0,0 +1 @@
+export { BlankLayoutCardComponent } from './blank-layout-card.component';

…c/theme/components/message-menu/index.ts src/app/components/message-menu/index.tssrc/theme/components/message-menu/index.ts renamed to src/app/components/message-menu/index.ts src/theme/components/message-menu/index.ts renamed to src/app/components/message-menu/index.ts

@@ -1,5 +1,9 @@
 @import '~theme/helpers';
 
+.message-menu {
+  position: relative;
+}
+
 .messages-dropdown {
   .label {
     color: $messages-dropdown-label-text-color;

…message-menu/message-menu.component.html …message-menu/message-menu.component.htmlsrc/theme/components/message-menu/message-menu.component.html renamed to src/app/components/message-menu/message-menu.component.html src/theme/components/message-menu/message-menu.component.html renamed to src/app/components/message-menu/message-menu.component.html

@@ -3,15 +3,15 @@ import { Component, HostBinding } from '@angular/core';
 import { MessageMenuService } from './message-menu.service';
 
 @Component({
-  selector: 'base-message-menu',
+  selector: 'app-message-menu',
   styleUrls: ['./message-menu.component.scss'],
   templateUrl: './message-menu.component.html',
   providers: [MessageMenuService],
 })
 export class MessageMenuComponent {
-  @HostBinding('style.position') private position = 'relative';
+  @HostBinding('class.message-menu') private readonly messageMenu = true;
 
-  public messages: Object[];
+  private messages: Object[];
 
   constructor(messageMenuService: MessageMenuService) {
     this.messages = messageMenuService.getMessages();