From 5a56a822b0e34b0e5c13803283cc905e1e0eb18d Mon Sep 17 00:00:00 2001 From: Stan Silvert Date: Wed, 25 Apr 2018 15:04:56 -0400 Subject: [PATCH] KEYCLAOK-7170 device activity component (#5169) * KEYCLOAK-7170: Create Device Activity Page * KEYCLOAK-7170: Create Device Activity Page * Fixes KEYCLOAK-7205 - Device activity - update HTML --- .../account/messages/messages_en.properties | 1 + .../theme/keycloak-preview/account/index.ftl | 2 +- .../resources/app/app-routing.module.ts | 1 + .../device-activity-page.component.css | 0 .../device-activity-page.component.html | 219 ++++++++++++++++++ .../device-activity-page.component.ts | 48 ++++ .../device-activity-routing.module.ts | 31 +++ .../device-activity.module.ts | 34 +++ .../app/side-nav/side-nav.component.ts | 1 + .../account/resources/styles.css | 138 ++++++----- 10 files changed, 422 insertions(+), 53 deletions(-) create mode 100644 themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.css create mode 100644 themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.html create mode 100644 themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.ts create mode 100644 themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-routing.module.ts create mode 100644 themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity.module.ts diff --git a/themes/src/main/resources/theme/base/account/messages/messages_en.properties b/themes/src/main/resources/theme/base/account/messages/messages_en.properties index ec7852ffec..43c4a692ae 100755 --- a/themes/src/main/resources/theme/base/account/messages/messages_en.properties +++ b/themes/src/main/resources/theme/base/account/messages/messages_en.properties @@ -98,6 +98,7 @@ applications=Applications account=Account federatedIdentity=Federated Identity authenticator=Authenticator +device-activity=Device Activity sessions=Sessions log=Log 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 02dc9df82b..2755da1249 100644 --- a/themes/src/main/resources/theme/keycloak-preview/account/index.ftl +++ b/themes/src/main/resources/theme/keycloak-preview/account/index.ftl @@ -189,7 +189,7 @@

${msg("authenticatorTitle")}

-

${msg("deviceActivityHtmlTitle")}

+

${msg("deviceActivityHtmlTitle")}

${msg("federatedIdentity")}

diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/app-routing.module.ts b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/app-routing.module.ts index f11cdaf77e..792c48a9f6 100644 --- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/app-routing.module.ts +++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/app-routing.module.ts @@ -28,6 +28,7 @@ export const routes: Routes = [ { path: 'account', loadChildren: resourceUrl + '/app/content/account-page/account.module.js#AccountModule' }, { path: 'password', loadChildren: resourceUrl + '/app/content/password-page/password.module.js#PasswordModule' }, { path: 'authenticator', loadChildren: resourceUrl + '/app/content/authenticator-page/authenticator.module.js#AuthenticatorModule' }, + { path: 'device-activity', loadChildren: resourceUrl + '/app/content/device-activity-page/device-activity.module.js#DeviceActivityModule' }, { path: 'sessions', loadChildren: resourceUrl + '/app/content/sessions-page/sessions.module.js#SessionsModule' }, { path: 'applications', loadChildren: resourceUrl + '/app/content/applications-page/applications.module.js#ApplicationsModule' }, { path: ':**', loadChildren: resourceUrl + '/app/content/page-not-found/page-not-found.module.js#PageNotFoundModule' }, diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.css b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.html new file mode 100644 index 0000000000..026c471efe --- /dev/null +++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.html @@ -0,0 +1,219 @@ +
+

{{'deviceActivityHtmlTitle' | translate}}

+
+ +
+
+
+
+ +

+ Signed In Devices +

+

You can find devices that have logged into your account from the list. Log out any of them if the device is unfamiliar or logged in wrong place and time.

+ +
+
+
+
+
+
+
+
+ +
+ +
+
+ +
+
+
+
+ Asus A3G +
+
+ Current device +
+
+ +
+
+
+ +
+
+
+
+ +
+ +
+
+ +
+
+
+
+ Asus A3G +
+
+ Last Access + Raleigh, US - January 8, 17:33:52 +
+
+ +
+
+
+ +
+
+
+
+
+
+ +
+
+

+ Recently Used Devices +

+

You can find devices that you used in the last month, but they have not logged into your account anymore.

+ +
+
+
+
+ +
+ +
+
+
+ +
+ +
+
+ +
+
+
+
+ Asus A3G +
+
+ Last Access + Raleigh, US - January 8, 17:33:52 +
+
+ +
+
+
+ +
+
+
+
+ +
+
+ +
+
+ + + + + + + diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.ts b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.ts new file mode 100644 index 0000000000..0ecf6f1607 --- /dev/null +++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.ts @@ -0,0 +1,48 @@ +/* + * Copyright 2017 Red Hat, Inc. and/or its affiliates + * and other contributors as indicated by the @author tags. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import {Component, OnInit, ViewChild} from '@angular/core'; +import {Response} from '@angular/http'; +import {FormGroup} from '@angular/forms'; + +import {AccountServiceClient} from '../../account-service/account.service'; + +@Component({ + selector: 'app-device-activity-page', + templateUrl: './device-activity-page.component.html', + styleUrls: ['./device-activity-page.component.css'] +}) +export class DeviceActivityPageComponent implements OnInit { + + @ViewChild('formGroup') private formGroup: FormGroup; + + constructor(private accountSvc: AccountServiceClient) { + } + + public deviceActivity() { + console.log("posting: " + JSON.stringify(this.formGroup.value)); + this.accountSvc.doPostRequest("/device-activity", (res: Response) => this.handlePostResponse(res), this.formGroup.value); + } + + protected handlePostResponse(res: Response) { + console.log('**** response from account POST ***'); + console.log(JSON.stringify(res)); + console.log('***************************************'); + } + + ngOnInit() { + } +} diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-routing.module.ts b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-routing.module.ts new file mode 100644 index 0000000000..24a689bd0e --- /dev/null +++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-routing.module.ts @@ -0,0 +1,31 @@ +/* + * Copyright 2018 Red Hat, Inc. and/or its affiliates + * and other contributors as indicated by the @author tags. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { DeviceActivityPageComponent } from './device-activity-page.component'; + +const routes: Routes = [ + { path: '**', component: DeviceActivityPageComponent }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class DeviceActivityRoutingModule {} + diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity.module.ts b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity.module.ts new file mode 100644 index 0000000000..8c2f46317f --- /dev/null +++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity.module.ts @@ -0,0 +1,34 @@ +/* + * Copyright 2018 Red Hat, Inc. and/or its affiliates + * and other contributors as indicated by the @author tags. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { TranslateModule } from '@ngx-translate/core'; + +import { DeviceActivityPageComponent } from './device-activity-page.component'; +import { DeviceActivityRoutingModule } from './device-activity-routing.module'; + +@NgModule({ + imports: [ CommonModule, FormsModule, TranslateModule, DeviceActivityRoutingModule ], + declarations: [ DeviceActivityPageComponent ], + providers: [ ] +}) +export class DeviceActivityModule {} + + + diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/side-nav/side-nav.component.ts b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/side-nav/side-nav.component.ts index 60d2548504..df0577c618 100644 --- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/side-nav/side-nav.component.ts +++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/side-nav/side-nav.component.ts @@ -47,6 +47,7 @@ export class SideNavComponent implements OnInit, MenuClickListener { this.makeSideNavItem("account", new Icon("pficon", "user"), "active"), this.makeSideNavItem("password", new Icon("pficon", "key")), this.makeSideNavItem("authenticator", new Icon("pficon", "cloud-security")), + this.makeSideNavItem("device-activity", new Icon("fa", "desktop")), this.makeSideNavItem("sessions", new Icon("fa", "clock-o")), this.makeSideNavItem("applications", new Icon("fa", "th")) ]; diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css b/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css index 0c85b5f80c..2f212bd72c 100644 --- a/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css +++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css @@ -1,52 +1,86 @@ -/* Welcome Page */ - -body { - background: #f5f5f5; -} - -p.description { - font-size: 14px; - margin: 10px auto 20px; - max-width: 60%; - padding: 0 10px; - text-align: center; -} - -.btn-sign { - margin-top: 10px; -} - -.layout-pf-alt.layout-pf-alt-fixed .container-pf-alt-nav-pf-vertical-alt { - margin-left: 210px; -} - -.nav .nav-item-iconic { - color: #d1d1d1; -} - -.content-area { - padding: 30px 30px 20px; - background: #ffffff; - font-size: 13px; - margin-bottom: 10px; -} - -/* personal Info Style */ -.subtitle { - color: #4d5258; - font-size: 12px; -} - -.content-area .required{ - color: #cc0000; -} - -.page-header { - border-bottom: 0; -} - - -/* Introduction Message on the left */ -.introMessage { - margin: 10px 20px 20px 0; -} +/* Welcome Page */ + +body { + background: #f5f5f5; +} + +p.description { + font-size: 14px; + margin: 10px auto 20px; + max-width: 60%; + padding: 0 10px; + text-align: center; +} + +.btn-sign { + margin-top: 10px; +} + +.layout-pf-alt.layout-pf-alt-fixed .container-pf-alt-nav-pf-vertical-alt { + margin-left: 210px; +} + +.nav .nav-item-iconic { + color: #d1d1d1; +} + +.content-area { + padding: 30px 30px 20px; + background: #ffffff; + font-size: 13px; + margin-bottom: 10px; +} + +/* personal Info Style */ +.subtitle { + color: #4d5258; + font-size: 12px; +} + +.content-area .required{ + color: #cc0000; +} + +.page-header { + border-bottom: 0; +} + + +/* Introduction Message on the left */ +.introMessage { + margin: 10px 20px 20px 0; + +/* Device Activity */ +.card-title{ + margin-left: 20px; + margin-bottom: 30px; +} +.detail-description{ + margin-top:-10px; +} +.list-view-pf-view { + margin-top: 0; +} +.m-l{ + margin-left: 20px; +} +.activity-item { + padding-left: 60px; +} +.activity-item ul{ + list-style: none; +} +.activity-item h3 .fa{ + margin-left: -30px; + margin-right: 5px; + font-size: 20px; +} +.btn-logout{ + margin-left: 40px; + margin-bottom: 20px; + margin-top: 5px; +} +.list-view-pf .current-color{ + font-weight: bold; + color: #4F9207!important; +}