From cc761d58e5d6203d34ebdb990a9f346ba0adb31e Mon Sep 17 00:00:00 2001 From: sercan Date: Tue, 11 May 2021 12:48:51 +0300 Subject: [PATCH] (pages/settings) Added new Settings page --- src/app/app.routing.ts | 3 + src/app/mock-api/common/navigation/data.ts | 7 + .../settings/account/account.component.html | 174 ++++++++++++++++++ .../settings/account/account.component.ts | 45 +++++ .../notifications.component.html | 149 +++++++++++++++ .../notifications/notifications.component.ts | 43 +++++ .../plan-billing/plan-billing.component.html | 167 +++++++++++++++++ .../plan-billing/plan-billing.component.ts | 81 ++++++++ .../settings/security/security.component.html | 111 +++++++++++ .../settings/security/security.component.ts | 40 ++++ .../pages/settings/settings.component.html | 92 +++++++++ .../pages/settings/settings.component.ts | 119 ++++++++++++ .../admin/pages/settings/settings.module.ts | 48 +++++ .../admin/pages/settings/settings.routing.ts | 9 + .../pages/settings/team/team.component.html | 87 +++++++++ .../pages/settings/team/team.component.ts | 110 +++++++++++ 16 files changed, 1285 insertions(+) create mode 100644 src/app/modules/admin/pages/settings/account/account.component.html create mode 100644 src/app/modules/admin/pages/settings/account/account.component.ts create mode 100644 src/app/modules/admin/pages/settings/notifications/notifications.component.html create mode 100644 src/app/modules/admin/pages/settings/notifications/notifications.component.ts create mode 100644 src/app/modules/admin/pages/settings/plan-billing/plan-billing.component.html create mode 100644 src/app/modules/admin/pages/settings/plan-billing/plan-billing.component.ts create mode 100644 src/app/modules/admin/pages/settings/security/security.component.html create mode 100644 src/app/modules/admin/pages/settings/security/security.component.ts create mode 100644 src/app/modules/admin/pages/settings/settings.component.html create mode 100644 src/app/modules/admin/pages/settings/settings.component.ts create mode 100644 src/app/modules/admin/pages/settings/settings.module.ts create mode 100644 src/app/modules/admin/pages/settings/settings.routing.ts create mode 100644 src/app/modules/admin/pages/settings/team/team.component.html create mode 100644 src/app/modules/admin/pages/settings/team/team.component.ts diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts index d54337e0..ed35b6a8 100644 --- a/src/app/app.routing.ts +++ b/src/app/app.routing.ts @@ -130,6 +130,9 @@ export const appRoutes: Route[] = [ // Profile {path: 'profile', loadChildren: () => import('app/modules/admin/pages/profile/profile.module').then(m => m.ProfileModule)}, + + // Settings + {path: 'settings', loadChildren: () => import('app/modules/admin/pages/settings/settings.module').then(m => m.SettingsModule)}, ]}, // User interface diff --git a/src/app/mock-api/common/navigation/data.ts b/src/app/mock-api/common/navigation/data.ts index b30f629d..2f3ae883 100644 --- a/src/app/mock-api/common/navigation/data.ts +++ b/src/app/mock-api/common/navigation/data.ts @@ -651,6 +651,13 @@ export const defaultNavigation: FuseNavigationItem[] = [ type : 'basic', icon : 'heroicons_outline:user-circle', link : '/pages/profile' + }, + { + id : 'pages.settings', + title: 'Settings', + type : 'basic', + icon : 'heroicons_outline:cog', + link : '/pages/settings' } ] }, diff --git a/src/app/modules/admin/pages/settings/account/account.component.html b/src/app/modules/admin/pages/settings/account/account.component.html new file mode 100644 index 00000000..64249f2d --- /dev/null +++ b/src/app/modules/admin/pages/settings/account/account.component.html @@ -0,0 +1,174 @@ +
+ + +
Account
+ + +
+ +
+
Profile
+
Following information is publicly displayed, be careful!
+
+
+ +
+ + Name + + + +
+ +
+ + Username +
+ fusetheme.com/ +
+ + +
+ +
+ + Title + + + +
+ +
+ + Company + + + +
+ +
+ + About + + +
Brief description for your profile. Basic HTML and Emoji are allowed.
+
+
+ + +
+ + +
+
Personal Information
+
Communication details in case we want to connect with you. These will be kept private.
+
+
+ +
+ + Email + + + +
+ +
+ + Phone + + + +
+ +
+ + Country + + + United States + Canada + Mexico + France + Germany + Italy + + +
+ +
+ + Language + + + English + French + Spanish + German + Italian + + +
+
+ + +
+ + +
+ + +
+
+ +
diff --git a/src/app/modules/admin/pages/settings/account/account.component.ts b/src/app/modules/admin/pages/settings/account/account.component.ts new file mode 100644 index 00000000..9db2044d --- /dev/null +++ b/src/app/modules/admin/pages/settings/account/account.component.ts @@ -0,0 +1,45 @@ +import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; + +@Component({ + selector : 'settings-account', + templateUrl : './account.component.html', + encapsulation : ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class SettingsAccountComponent implements OnInit +{ + accountForm: FormGroup; + + /** + * Constructor + */ + constructor( + private _formBuilder: FormBuilder + ) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Create the form + this.accountForm = this._formBuilder.group({ + name : ['Brian Hughes'], + username: ['brianh'], + title : ['Senior Frontend Developer'], + company : ['YXZ Software'], + about : ['Hey! This is Brian; husband, father and gamer. I\'m mostly passionate about bleeding edge tech and chocolate! 🍫'], + email : ['hughes.brian@mail.com', Validators.email], + phone : ['121-490-33-12'], + country : ['usa'], + language: ['english'] + }); + } +} diff --git a/src/app/modules/admin/pages/settings/notifications/notifications.component.html b/src/app/modules/admin/pages/settings/notifications/notifications.component.html new file mode 100644 index 00000000..5e2f70b7 --- /dev/null +++ b/src/app/modules/admin/pages/settings/notifications/notifications.component.html @@ -0,0 +1,149 @@ +
+ + +
Notifications
+ + +
+ + +
Alerts
+
+ +
+
+
Communication
+
Get news, announcements, and product updates.
+
+ + +
+ +
+
+
Security
+
+ Get important notifications about your account security. +
+
+ + +
+ +
+
+
Meetups
+
+ Get an email when a Meetup is posted close to my location. +
+
+ + +
+
+ + +
+ + +
Account Activity
+
Email me when:
+
+ +
+
+ someone comments on one of my items +
+ + +
+ +
+
+ someone mentions me +
+ + +
+ +
+
+ someone follows me +
+ + +
+ +
+
+ someone replies to my job posting +
+ + +
+
+ + +
+ + +
+ + +
+
+ +
diff --git a/src/app/modules/admin/pages/settings/notifications/notifications.component.ts b/src/app/modules/admin/pages/settings/notifications/notifications.component.ts new file mode 100644 index 00000000..0877cc73 --- /dev/null +++ b/src/app/modules/admin/pages/settings/notifications/notifications.component.ts @@ -0,0 +1,43 @@ +import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; + +@Component({ + selector : 'settings-notifications', + templateUrl : './notifications.component.html', + encapsulation : ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class SettingsNotificationsComponent implements OnInit +{ + notificationsForm: FormGroup; + + /** + * Constructor + */ + constructor( + private _formBuilder: FormBuilder + ) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Create the form + this.notificationsForm = this._formBuilder.group({ + communication: [true], + security : [true], + meetups : [false], + comments : [false], + mention : [true], + follow : [true], + inquiry : [true] + }); + } +} diff --git a/src/app/modules/admin/pages/settings/plan-billing/plan-billing.component.html b/src/app/modules/admin/pages/settings/plan-billing/plan-billing.component.html new file mode 100644 index 00000000..d38bd40a --- /dev/null +++ b/src/app/modules/admin/pages/settings/plan-billing/plan-billing.component.html @@ -0,0 +1,167 @@ +
+ + +
Plan & Billing
+ + +
+ +
+
Change your plan
+
Upgrade or downgrade your current plan.
+
+
+ +
+ + Changing the plan will take effect immediately. You will be charged for the rest of the current month. + +
+ + +
+ + + +
{{plan.label}}
+
{{plan.details}}
+
+
+ {{plan.price | currency:'USD':'symbol':'1.0'}} + / month +
+
+ +
+ + +
+ + +
+
Payment Details
+
Update your billing information. Make sure to set your location correctly as it could affect your tax rates.
+
+
+ +
+ + Card holder + + + +
+ +
+ + Card number + + + +
+ +
+ + Expiration date + + + +
+ +
+ + CVC / CVC2 + + + +
+ +
+ + Country + + + United States + Canada + Mexico + France + Germany + Italy + + +
+ +
+ + ZIP / Postal code + + + +
+
+ + +
+ + +
+ + +
+
+ +
diff --git a/src/app/modules/admin/pages/settings/plan-billing/plan-billing.component.ts b/src/app/modules/admin/pages/settings/plan-billing/plan-billing.component.ts new file mode 100644 index 00000000..27ec5550 --- /dev/null +++ b/src/app/modules/admin/pages/settings/plan-billing/plan-billing.component.ts @@ -0,0 +1,81 @@ +import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; + +@Component({ + selector : 'settings-plan-billing', + templateUrl : './plan-billing.component.html', + encapsulation : ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class SettingsPlanBillingComponent implements OnInit +{ + planBillingForm: FormGroup; + plans: any[]; + + /** + * Constructor + */ + constructor( + private _formBuilder: FormBuilder + ) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Create the form + this.planBillingForm = this._formBuilder.group({ + plan : ['team'], + cardHolder : ['Brian Hughes'], + cardNumber : [''], + cardExpiration: [''], + cardCVC : [''], + country : ['usa'], + zip : [''] + }); + + // Setup the plans + this.plans = [ + { + value : 'basic', + label : 'BASIC', + details: 'Starter plan for individuals.', + price : '10' + }, + { + value : 'team', + label : 'TEAM', + details: 'Collaborate up to 10 people.', + price : '20' + }, + { + value : 'enterprise', + label : 'ENTERPRISE', + details: 'For bigger businesses.', + price : '40' + } + ]; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + trackByFn(index: number, item: any): any + { + return item.id || index; + } +} diff --git a/src/app/modules/admin/pages/settings/security/security.component.html b/src/app/modules/admin/pages/settings/security/security.component.html new file mode 100644 index 00000000..f1c23418 --- /dev/null +++ b/src/app/modules/admin/pages/settings/security/security.component.html @@ -0,0 +1,111 @@ +
+ + +
Security
+ + +
+ +
+
Change your password
+
You can only change your password twice within 24 hours!
+
+
+ +
+ + Current password + + + +
+ +
+ + New password + + + +
Minimum 8 characters. Must include numbers, letters and special characters.
+
+
+ + +
+ + +
+
Security preferences
+
Keep your account more secure with following preferences.
+
+
+ +
+
+
Enable 2-step authentication
+
+ Protects you against password theft by requesting an authentication code via SMS on every login. +
+
+ + +
+ +
+
+
Ask to change password on every 6 months
+
+ A simple but an effective way to be protected against data leaks and password theft. +
+
+ + +
+
+ + +
+ + +
+ + +
+
+ +
diff --git a/src/app/modules/admin/pages/settings/security/security.component.ts b/src/app/modules/admin/pages/settings/security/security.component.ts new file mode 100644 index 00000000..376a3c4c --- /dev/null +++ b/src/app/modules/admin/pages/settings/security/security.component.ts @@ -0,0 +1,40 @@ +import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; + +@Component({ + selector : 'settings-security', + templateUrl : './security.component.html', + encapsulation : ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class SettingsSecurityComponent implements OnInit +{ + securityForm: FormGroup; + + /** + * Constructor + */ + constructor( + private _formBuilder: FormBuilder + ) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Create the form + this.securityForm = this._formBuilder.group({ + currentPassword : [''], + newPassword : [''], + twoStep : [true], + askPasswordChange: [false] + }); + } +} diff --git a/src/app/modules/admin/pages/settings/settings.component.html b/src/app/modules/admin/pages/settings/settings.component.html new file mode 100644 index 00000000..ef24d984 --- /dev/null +++ b/src/app/modules/admin/pages/settings/settings.component.html @@ -0,0 +1,92 @@ +
+ + + + + + +
Settings
+ +
+ +
+ +
+
+ {{panel.title}} +
+
+ {{panel.description}} +
+
+
+ +
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
diff --git a/src/app/modules/admin/pages/settings/settings.component.ts b/src/app/modules/admin/pages/settings/settings.component.ts new file mode 100644 index 00000000..974a7d9f --- /dev/null +++ b/src/app/modules/admin/pages/settings/settings.component.ts @@ -0,0 +1,119 @@ +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; + +@Component({ + selector : 'settings', + templateUrl : './settings.component.html', + encapsulation : ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class SettingsComponent implements OnInit, OnDestroy +{ + drawerMode: 'over' | 'side' = 'side'; + drawerOpened: boolean = true; + panels: any[] = []; + selectedPanel: string = 'account'; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _fuseMediaWatcherService: FuseMediaWatcherService + ) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Setup available panels + this.panels = [ + { + id : 'account', + icon : 'heroicons_outline:user-circle', + title : 'Account', + description: 'Manage your public profile and private information' + }, + { + id : 'security', + icon : 'heroicons_outline:lock-closed', + title : 'Security', + description: 'Manage your password and 2-step verification preferences' + }, + { + id : 'plan-billing', + icon : 'heroicons_outline:credit-card', + title : 'Plan & Billing', + description: 'Manage your subscription plan, payment method and billing information' + }, + { + id : 'notifications', + icon : 'heroicons_outline:bell', + title : 'Notifications', + description: 'Manage when you\'ll be notified on which channels' + }, + { + id : 'team', + icon : 'heroicons_outline:user-group', + title : 'Team', + description: 'Manage your existing team and change roles/permissions' + } + ]; + + // Subscribe to media changes + this._fuseMediaWatcherService.onMediaChange$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(({matchingAliases}) => { + + // Set the drawerMode and drawerOpened + if ( matchingAliases.includes('lg') ) + { + this.drawerMode = 'side'; + this.drawerOpened = true; + } + else + { + this.drawerMode = 'over'; + this.drawerOpened = false; + } + + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + trackByFn(index: number, item: any): any + { + return item.id || index; + } +} diff --git a/src/app/modules/admin/pages/settings/settings.module.ts b/src/app/modules/admin/pages/settings/settings.module.ts new file mode 100644 index 00000000..2040765f --- /dev/null +++ b/src/app/modules/admin/pages/settings/settings.module.ts @@ -0,0 +1,48 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatRadioModule } from '@angular/material/radio'; +import { MatSelectModule } from '@angular/material/select'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +import { MatSidenavModule } from '@angular/material/sidenav'; +import { FuseAlertModule } from '@fuse/components/alert'; +import { FuseAutogrowModule } from '@fuse/directives/autogrow'; +import { SharedModule } from 'app/shared/shared.module'; +import { SettingsComponent } from 'app/modules/admin/pages/settings/settings.component'; +import { SettingsAccountComponent } from 'app/modules/admin/pages/settings/account/account.component'; +import { SettingsSecurityComponent } from 'app/modules/admin/pages/settings/security/security.component'; +import { SettingsPlanBillingComponent } from 'app/modules/admin/pages/settings/plan-billing/plan-billing.component'; +import { SettingsNotificationsComponent } from 'app/modules/admin/pages/settings/notifications/notifications.component'; +import { SettingsTeamComponent } from 'app/modules/admin/pages/settings/team/team.component'; +import { settingsRoutes } from 'app/modules/admin/pages/settings/settings.routing'; + +@NgModule({ + declarations: [ + SettingsComponent, + SettingsAccountComponent, + SettingsSecurityComponent, + SettingsPlanBillingComponent, + SettingsNotificationsComponent, + SettingsTeamComponent + ], + imports : [ + RouterModule.forChild(settingsRoutes), + MatButtonModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + MatRadioModule, + MatSelectModule, + MatSidenavModule, + MatSlideToggleModule, + FuseAlertModule, + FuseAutogrowModule, + SharedModule + ] +}) +export class SettingsModule +{ +} diff --git a/src/app/modules/admin/pages/settings/settings.routing.ts b/src/app/modules/admin/pages/settings/settings.routing.ts new file mode 100644 index 00000000..aa36e61a --- /dev/null +++ b/src/app/modules/admin/pages/settings/settings.routing.ts @@ -0,0 +1,9 @@ +import { Route } from '@angular/router'; +import { SettingsComponent } from 'app/modules/admin/pages/settings/settings.component'; + +export const settingsRoutes: Route[] = [ + { + path : '', + component: SettingsComponent + } +]; diff --git a/src/app/modules/admin/pages/settings/team/team.component.html b/src/app/modules/admin/pages/settings/team/team.component.html new file mode 100644 index 00000000..73af7b40 --- /dev/null +++ b/src/app/modules/admin/pages/settings/team/team.component.html @@ -0,0 +1,87 @@ +
+ + +
Team
+ + +
+ + Add team members + + + + +
+ + +
+ +
+
+
+ + Contact avatar + + +
+ {{member.name.charAt(0)}} +
+ +
+
+
{{member.name}}
+
{{member.email}}
+
+
+
+
+ + + + Role: + {{roleSelect.value | titlecase}} + + + +
{{role.label}}
+
{{role.description}}
+ + + + +
+
+ +
+
+
+ +
+ +
diff --git a/src/app/modules/admin/pages/settings/team/team.component.ts b/src/app/modules/admin/pages/settings/team/team.component.ts new file mode 100644 index 00000000..d007e1a0 --- /dev/null +++ b/src/app/modules/admin/pages/settings/team/team.component.ts @@ -0,0 +1,110 @@ +import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector : 'settings-team', + templateUrl : './team.component.html', + encapsulation : ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class SettingsTeamComponent implements OnInit +{ + members: any[]; + roles: any[]; + + /** + * Constructor + */ + constructor() + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Setup the team members + this.members = [ + { + avatar: 'assets/images/avatars/male-01.jpg', + name : 'Dejesus Michael', + email : 'dejesusmichael@mail.org', + role : 'admin' + }, + { + avatar: 'assets/images/avatars/male-03.jpg', + name : 'Mclaughlin Steele', + email : 'mclaughlinsteele@mail.me', + role : 'admin' + }, + { + avatar: 'assets/images/avatars/female-02.jpg', + name : 'Laverne Dodson', + email : 'lavernedodson@mail.ca', + role : 'write' + }, + { + avatar: 'assets/images/avatars/female-03.jpg', + name : 'Trudy Berg', + email : 'trudyberg@mail.us', + role : 'read' + }, + { + avatar: 'assets/images/avatars/male-07.jpg', + name : 'Lamb Underwood', + email : 'lambunderwood@mail.me', + role : 'read' + }, + { + avatar: 'assets/images/avatars/male-08.jpg', + name : 'Mcleod Wagner', + email : 'mcleodwagner@mail.biz', + role : 'read' + }, + { + avatar: 'assets/images/avatars/female-07.jpg', + name : 'Shannon Kennedy', + email : 'shannonkennedy@mail.ca', + role : 'read' + } + ]; + + // Setup the roles + this.roles = [ + { + label : 'Read', + value : 'read', + description: 'Can read and clone this repository. Can also open and comment on issues and pull requests.' + }, + { + label : 'Write', + value : 'write', + description: 'Can read, clone, and push to this repository. Can also manage issues and pull requests.' + }, + { + label : 'Admin', + value : 'admin', + description: 'Can read, clone, and push to this repository. Can also manage issues, pull requests, and repository settings, including adding collaborators.' + } + ]; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + trackByFn(index: number, item: any): any + { + return item.id || index; + } +}