Skip to content

Commit

Permalink
Working on Password Reset
Browse files Browse the repository at this point in the history
  • Loading branch information
DerekTBrown committed Aug 23, 2017
1 parent bcbdc32 commit ea11466
Show file tree
Hide file tree
Showing 13 changed files with 402 additions and 27 deletions.
29 changes: 29 additions & 0 deletions client/imports/account/account.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<div class="tuxlab-account" *ngIf="user" fxLayout="column" fxLayoutAlign="start center">

<h1>Account</h1>

<!-- Profile -->
<md-card>
<md-card-header>
<img md-card-avatar [src]="user?.profile?.picture" />
<md-card-title>{{ user?.profile?.name }}</md-card-title>
<md-card-subtitle>{{ user?.profile?.email }}</md-card-subtitle>
</md-card-header>
</md-card>

<!-- Actions -->
<div class="actions" fxLayout="row">

<!-- Change Password -->
<button md-raised-button>
<md-icon>security</md-icon>
Change Password
</button>

<!-- Delete Account -->
<button md-raised-button (click)="deleteAccount()">
<md-icon>delete_forever</md-icon>
Delete Account
</button>
</div>
</div>
51 changes: 51 additions & 0 deletions client/imports/account/account.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
div.tuxlab-account{
width: 100%;
min-height: 80vh;

h1, h2, h3{
width: 100%;
max-width: 960px;

margin-bottom: 5px !important;

text-align: left;
font-weight: 300;
}

md-card{
width: 100%;
max-width: 960px;

margin:12px 0px;

&:first-child{
margin-top:0px;
}

md-card-title{
font-size: 20px;
}

md-card-subtitle{
font-size: 16px;
}

md-card-avatar{
height: 40px;
width: 40px;
}
}

div.actions{
width: 100%;
max-width: 960px;

padding: 8px;

background-color: #ddd;

button {
margin:0px 5px;
}
}
}
49 changes: 49 additions & 0 deletions client/imports/account/account.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
// Meteor Imports
import { Meteor } from 'meteor/meteor';
import { Accounts } from 'meteor/accounts-base';
import { MeteorComponent } from 'angular2-meteor';

// Angular Imports
import { Component, NgZone } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

// Collections
import { User } from '../../../both/models/user.model';
import { Users } from '../../../both/collections/user.collection';

// Define Dashboard Component
import template from "./account.component.html";
import style from "./account.component.scss";

@Component({
selector: 'tuxlab-account',
template,
styles: [ style ]
})

// Export Dashboard Class
export class AccountView extends MeteorComponent {
private user : User;

constructor(private zone : NgZone, private router : Router) {
super();
}

ngOnInit(){

// Get User
this.zone.run(() => {
this.user = <User>Meteor.user();
});
}

resetPassword(){
this.route.navigate(['']);
}

deleteAccount(){
Meteor.call('Users.remove', { user_id : Meteor.userId()}, () => {
this.router.navigate(['/']);
})
}
}
31 changes: 31 additions & 0 deletions client/imports/account/reset.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<div class="tuxlab-reset">
<div class="page">

<h1>Reset Password</h1>

<md-list>
<md-list-item>
<md-input-container>
<input mdInput type="password" placeholder="Old Password" />
</md-input-container>
</md-list-item>

<md-list-item>
<md-input-container>
<input mdInput type="password" placeholder="New Password" />
</md-input-container>
</md-list-item>

<md-list-item>
<md-input-container>
<input mdInput type="password" placeholder="New Password (Confirm)" />
</md-input-container>
</md-list-item>
</md-list>

<md-divider></md-divider>

<button md-raised-button><md-icon>settings_backup_restore</md-icon>Reset Password</button>

</div>
</div>
85 changes: 85 additions & 0 deletions client/imports/account/reset.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
@import '../../../node_modules/@angular/material/theming';
@import '../app.theme';

div.tuxlab-login{
height: 80vh;
position: relative;

div.page {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

width: 100%;
height: 100%;
max-width: 600px;
max-height: 600px;

background-color: #fff;

h1 {
width: 100%;

padding:20px 0px;
background-color: mat-color($tuxlab-app-primary);

color: #fff;
text-align: center;
font-weight: 300;
font-size: 40px;
margin-bottom:40px;
}

h2 {
text-align: center;
font-weight: 300;
font-size: 25px;
}

button{
margin: 0px 10px;
font-size: 16px;

md-icon{
font-size: 16px;
line-height: 22px;
margin-right: 5px;
}
}

md-list{
width: 100%;
margin:0 auto;

md-list-item{
width: 100%;
margin-bottom:30px;

&.error{
margin-bottom: 10px;
font-size: 16px;

md-icon{
color: mat-color($tuxlab-app-warn);
margin-right: 6px;
}
}

md-input-container{
width: 80%;
font-size: 22px;

margin: 0 auto;

span[mdPrefix]{
font-size: 14px;
line-height: 22px;

margin-right: 15px;
}
}
}
}
}
}
35 changes: 35 additions & 0 deletions client/imports/account/reset.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
// Meteor Imports
import { Meteor } from 'meteor/meteor';
import { MeteorComponent } from 'angular2-meteor';

// Angular Imports
import { Component, ActivatedRoute } from '@angular/core';

// Define Dashboard Component
import template from "./reset.component.html";
import style from "./reset.component.scss";

@Component({
selector: 'tuxlab-reset',
template,
styles: [ style ]
})

// Export Dashboard Class
export default class Reset extends MeteorComponent {
private token : string;

constructor(private route: ActivatedRoute) {
super();
}

ngOnInit(){

// Get Token
this.route.queryParamMap
.map(params => params.get('token') || '')
.subscribe((token) => {
this.token = token;
})
}
}
18 changes: 10 additions & 8 deletions client/imports/admin/admin_user_list.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -494,16 +494,18 @@
div.actions{
padding: 4px;
background-color: #ddd;
}
button{
height: 30px;
font-size: 12px;
line-height: 30px;
button{
height: 30px;
font-size: 12px;
line-height: 30px;
md-icon{
line-height: 30px;
font-size: 18px;
}
margin:0px 3px !important;
md-icon{
line-height: 30px;
font-size: 18px;
}
}
Expand Down
2 changes: 1 addition & 1 deletion client/imports/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<div class="username">{{ user?.profile?.name }}</div>
<div class="org">{{ user?.profile?.organization }}</div>
<div class="buttons">
<a md-raised-button><md-icon>person</md-icon>Account</a>
<a md-raised-button [routerLink]="['account']"><md-icon>person</md-icon>Account</a>
<a md-raised-button (click)="accountService.logout()" ><md-icon>vpn_key</md-icon>Log Out</a>
</div>
</div>
Expand Down
12 changes: 9 additions & 3 deletions client/imports/app.routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,12 @@ import { SortablejsModule } from 'angular-sortablejs';
import SelectUser from './dialogs/select_user.dialog';

// Account
import { AccountView } from './account/account.component';
import AccountService from './account/account.service';
import AuthGuard from './account/auth-guard.service';
import Dashboard from './account/dashboard.component';
import Login from './account/login.component';
import { Users } from '../../both/collections/user.collection';
import Reset from './account/reset.component';

// Admin
import { AdminView } from './admin/admin_view.component';
Expand Down Expand Up @@ -51,6 +52,8 @@ export const AppRoutes : Routes = [
// Account
{ path: 'dashboard', component: Dashboard, canActivate: [AuthGuard] },
{ path: 'login', component: Login },
{ path: 'account', component: AccountView, canActivate: [AuthGuard] },
{ path: 'reset', component: Reset },

// Static
{ path: 'help', component: Help },
Expand All @@ -75,12 +78,15 @@ export const AppRoutes : Routes = [
@NgModule({
declarations: [

// Static
// Account
AccountView,
Dashboard,
Login,

// Static
Help,
ErrorPage,
Legal,
Login,

// Dialogs
SelectUser,
Expand Down
Loading

0 comments on commit ea11466

Please sign in to comment.