Complete user area on the sidebar.

Author: hikalkan

angular/.editorconfig

@@ -1,10 +1,9 @@
-# Editor configuration, see http://editorconfig.org
+# Editor configuration, see http://editorconfig.org
 root = true
 
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 

angular/src/app/app.component.html

@@ -1,6 +1,7 @@
 <!-- Overlay For Sidebars -->
 <div class="overlay"></div>
 <!-- #END# Overlay For Sidebars -->
+
 <!-- Search Bar -->
 <div class="search-bar">
   <div class="search-icon">
@@ -12,6 +13,7 @@
   </div>
 </div>
 <!-- #END# Search Bar -->
+
 <!-- Top Bar -->
 <nav class="navbar">
   <div class="container-fluid">
@@ -31,32 +33,11 @@
 </nav>
 <!-- #Top Bar -->
 
-
 <section>
   <!-- Left Sidebar -->
   <aside id="leftsidebar" class="sidebar">
     <!-- User Info -->
-    <div class="user-info">
-      <div class="image">
-        <img src="/assets/images/user.png" width="48" height="48" alt="User" />
-      </div>
-      <div class="info-container">
-        <div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">John Doe</div>
-        <div class="email">[email protected]</div>
-        <div class="btn-group user-helper-dropdown">
-          <i class="material-icons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">keyboard_arrow_down</i>
-          <ul class="dropdown-menu pull-right">
-            <li><a href="javascript:void(0);"><i class="material-icons">person</i>Profile</a></li>
-            <li role="seperator" class="divider"></li>
-            <li><a href="javascript:void(0);"><i class="material-icons">group</i>Followers</a></li>
-            <li><a href="javascript:void(0);"><i class="material-icons">shopping_cart</i>Sales</a></li>
-            <li><a href="javascript:void(0);"><i class="material-icons">favorite</i>Likes</a></li>
-            <li role="seperator" class="divider"></li>
-            <li><a href="javascript:void(0);"><i class="material-icons">input</i>Sign Out</a></li>
-          </ul>
-        </div>
-      </div>
-    </div>
+      <sidebar-user-area></sidebar-user-area>
     <!-- #User Info -->
     <!-- Menu -->
     <div class="menu">

angular/src/app/app.module.ts

@@ -8,46 +8,45 @@ import { ModalModule } from 'ngx-bootstrap';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
-import { AbpModule, ABP_HTTP_PROVIDER } from '@abp/abp.module';
+import { AbpModule } from '@abp/abp.module';
 
 import { ServiceProxyModule } from '@shared/service-proxies/service-proxy.module';
 import { SharedModule } from '@shared/shared.module';
 
-import { API_BASE_URL } from '@shared/service-proxies/service-proxies';
-import { AppConsts } from '@shared/AppConsts';
-
 import { HomeComponent } from '@app/home/home.component';
 import { AboutComponent } from '@app/about/about.component';
 import { UsersComponent } from '@app/users/users.component';
 import { CreateUserModalComponent } from '@app/users/create-user-modal.component';
 import { TenantsComponent } from '@app/tenants/tenants.component';
 import { CreateTenantModalComponent } from '@app/tenants/create-tenant-modal.component';
-import { TopBarLanguageSwitchComponent } from 'app/layout/topbar-languageswitch.component';
+import { TopBarLanguageSwitchComponent } from '@app/layout/topbar-languageswitch.component';
+import { SideBarUserAreaComponent } from '@app/layout/sidebar-user-area.component';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    HomeComponent,
-    AboutComponent,
-    UsersComponent,
-    CreateUserModalComponent,
-    TenantsComponent,
-    CreateTenantModalComponent,
-    TopBarLanguageSwitchComponent
-  ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    HttpModule,
-    JsonpModule,
-    ModalModule.forRoot(),
-    AbpModule,
-    AppRoutingModule,
-    ServiceProxyModule,
-    SharedModule
-  ],
-  providers: [
-
-  ]
+    declarations: [
+        AppComponent,
+        HomeComponent,
+        AboutComponent,
+        UsersComponent,
+        CreateUserModalComponent,
+        TenantsComponent,
+        CreateTenantModalComponent,
+        TopBarLanguageSwitchComponent,
+        SideBarUserAreaComponent
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        HttpModule,
+        JsonpModule,
+        ModalModule.forRoot(),
+        AbpModule,
+        AppRoutingModule,
+        ServiceProxyModule,
+        SharedModule
+    ],
+    providers: [
+
+    ]
 })
 export class AppModule { }

angular/src/app/layout/sidebar-user-area.component.html

@@ -0,0 +1,15 @@
+    <div class="user-info">
+    <div class="image">
+        <img src="/assets/images/user.png" width="48" height="48" alt="User" />
+    </div>
+    <div class="info-container">
+        <div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{shownLoginName}}</div>
+        <div class="email">{{appSession.user.emailAddress}}</div>
+        <div class="btn-group user-helper-dropdown">
+            <i class="material-icons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">keyboard_arrow_down</i>
+            <ul class="dropdown-menu pull-right">
+                <li><a (click)="logout()"><i class="material-icons">input</i>{{l('Logout')}}</a></li>
+            </ul>
+        </div>
+    </div>
+</div>

angular/src/app/layout/sidebar-user-area.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit, Injector, ViewEncapsulation } from '@angular/core';
+import { AppComponentBase } from '@shared/app-component-base';
+import { AppAuthService } from '@shared/auth/app-auth.service';
+
+@Component({
+    templateUrl: './sidebar-user-area.component.html',
+    selector: 'sidebar-user-area',
+    encapsulation: ViewEncapsulation.None
+})
+export class SideBarUserAreaComponent extends AppComponentBase implements OnInit {
+
+    shownLoginName: string = "";
+
+    constructor(
+        injector: Injector,
+        private _authService: AppAuthService
+    ) {
+        super(injector);
+    }
+
+    ngOnInit() {
+        this.shownLoginName = this.appSession.getShownLoginName();
+    }
+
+    getCurrentLoginInformations(): void {
+        
+    }
+    
+    logout(): void {
+        this._authService.logout();
+    }
+}

angular/src/shared/core.less

@@ -1,30 +1,35 @@
 /* General */
 
 .clickable-item {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .text-bold {
-  font-weight: bold;
+    font-weight: bold;
 }
 
 /* Portlet */
 .portlet.light > .portlet-title .inputs.inputs-full-width {
-  display: block;
-  float: none;
+    display: block;
+    float: none;
 }
 
 .famfamfam-flags {
-  display: inline-block;
+    display: inline-block;
 }
 
 topbar-languageswitch {
-  float: left;
-  margin-top: 25px;
-  margin-left: 10px;
+    float: left;
+    margin-top: 25px;
+    margin-left: 10px;
 
-  a {
-    text-decoration: none;
-    color: #fff;
-  }
+    a {
+        text-decoration: none;
+        color: #fff;
+
+        &:hover {
+            text-decoration: none;
+            color: #fff;
+        }
+    }
 }

angular/src/shared/layout/topbar.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit, Injector, ViewEncapsulation, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
-import { LocalizationService } from '@abp/localization/localization.service';
 import { AbpSessionService } from '@abp/session/abp-session.service';
 import { AppComponentBase } from '../app-component-base';
 import { AppAuthService } from '../auth/app-auth.service';