zmiguel
/
ENEI2019-Public
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

sistema login com roles

This commit is contained in:
henrydays 2018-09-12 03:41:07 +01:00
parent f160985f88
commit 12389f58d1
28 changed files with 1127 additions and 459 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
api/Controllers/AdminController.cs
View File

@ -1,5 +1,12 @@
using System.Threading.Tasks;
using api.Data;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
using Microsoft.EntityFrameworkCore;
using api.Dtos;
using Microsoft.AspNetCore.Identity;
using api.Models;
namespace api.Controllers
{
@ -7,11 +14,59 @@ namespace api.Controllers
[Route("api/[controller]")]
public class AdminController : ControllerBase
{
private readonly DataContext _context;
private readonly UserManager<User> _userManager;
public AdminController(DataContext context, UserManager<User> userManager)
{
_context = context;
_userManager = userManager;
}
[Authorize(Policy= "RequireAdminRole")]
[HttpGet("userWithRoles")]
public IActionResult GetUsersWithRole() {
public async Task<IActionResult> GetUsersWithRole() {
var userList= await (from user in _context.Users orderby user.UserName
select new{
Id = user.Id,
UserName= user.UserName,
Roles = (from userRole in user.UserRoles join role in _context.Roles
on userRole.RoleId
equals role.Id
select role.Name).ToList()
}
).ToListAsync();
return Ok(userList);
}
[Authorize(Policy= "RequireAdminRole")]
[HttpPost("editRoles/{userName}")]
public async Task<IActionResult> editRoles(string userName, RoleEditDto roleEditDto) {
var user = await _userManager.FindByNameAsync(userName);
var userRoles = await _userManager.GetRolesAsync(user);
var selectedRoles = roleEditDto.RoleNames;
//selected = selectedRoles != null ? selectedRoles : new String[] {}
selectedRoles = selectedRoles ?? new string[] {};
var result= await _userManager.AddToRolesAsync(user, selectedRoles.Except(userRoles));
if(!result.Succeeded)
return BadRequest("Falha ao adicionar roles");
result = await _userManager.RemoveFromRolesAsync(user, userRoles.Except(selectedRoles));
if(!result.Succeeded)
return BadRequest("Falha ao remover as roles");
return Ok(await _userManager.GetRolesAsync(user));
return Ok("Só admins");
}

4
api/Controllers/AuthController.cs
View File

@ -75,7 +75,7 @@ namespace api.Controllers
return Ok(new
{
token = GenerateJwtToken(appUser)
token = GenerateJwtToken(appUser).Result
});
}
@ -106,7 +106,7 @@ namespace api.Controllers
//criamos um token
var tokenDescriptor = new SecurityTokenDescriptor
{
Subject = new ClaimsIdentity(claims),
Subject = new ClaimsIdentity(claims),
//data de expiração (atual + 24 horas)
Expires = DateTime.Now.AddDays(1),

14
api/Controllers/usersController.cs
View File

@ -77,19 +77,5 @@ namespace api.Controllers
return Ok();
}
//adiciona role a um utilizador
[HttpPost("setRole")]
public async Task<IActionResult> setRole(setRoleDto roleDto) {
User user = await _repo.GetUser(roleDto.Id);
_userManager.AddToRoleAsync(user, roleDto.RoleName).Wait();
return Ok();
}
}
}

2
api/Data/AuthRepository.cs
View File

@ -39,6 +39,8 @@ namespace api.Data
return user;
}
}
}

7
api/Dtos/RoleEditDto.cs Normal file
View File

@ -0,0 +1,7 @@
namespace api.Dtos
{
public class RoleEditDto
{
public string[] RoleNames { get; set; }
}
}

BIN
api/api.db
View File

Binary file not shown.

BIN
api/bin/Debug/netcoreapp2.1/api.dll
View File

Binary file not shown.

BIN
api/bin/Debug/netcoreapp2.1/api.pdb
View File

Binary file not shown.

2
api/obj/Debug/netcoreapp2.1/api.csproj.CoreCompileInputs.cache
View File

@ -1 +1 @@
5c42e60f9517460e0b20965eea4adfe8a31af8a1
77af4abd8cf37cbeb51cdcc99cc23234deb7eef7

BIN
api/obj/Debug/netcoreapp2.1/api.dll
View File

Binary file not shown.

BIN
api/obj/Debug/netcoreapp2.1/api.pdb
View File

Binary file not shown.

0
backoffice/src/app/admin/admin.component.css Normal file
View File

3
backoffice/src/app/admin/admin.component.html Normal file
View File

@ -0,0 +1,3 @@
<p>
admin works!
</p>

28
backoffice/src/app/admin/admin.component.spec.ts Normal file
View File

@ -0,0 +1,28 @@
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { AdminComponent } from './admin.component';
describe('AdminComponent', () => {
let component: AdminComponent;
let fixture: ComponentFixture<AdminComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AdminComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AdminComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
backoffice/src/app/admin/admin.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-admin',
templateUrl: './admin.component.html',
styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

6
backoffice/src/app/app.module.ts
View File

@ -25,6 +25,8 @@ import { UserComponent } from './users/user/user.component';
import { FooterComponent } from './footer/footer.component';
import { EditComponent } from './users/edit/edit.component';
import { PreventUnsavedChanges } from './guards/prevent-unsaved-changes.guard';
import { AdminComponent } from './admin/admin.component';
import { HasRoleDirective } from './directives/hasRole.directive';
export function tokenGetter() {
@ -44,7 +46,9 @@ export function tokenGetter() {
UsersListComponent,
UserComponent,
FooterComponent,
EditComponent
EditComponent,
AdminComponent,
HasRoleDirective
],
imports: [
BrowserModule,

849
backoffice/src/app/dashboard/dashboard.component.html
View File

@ -6,354 +6,507 @@
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-3">
<!-- Profile Image -->
<div class="box box-primary">
<div class="box-body box-profile">
<img class="profile-user-img img-responsive img-circle" src="{{user.profileIcon}}" alt="User profile picture">
<h3 class="profile-username text-center">{{user.fullName}}</h3>
<p class="text-muted text-center">@{{user.username}}</p>
<div class="qr_code box"> <img src="https://preview.ibb.co/kpNOH9/qr_code.png" alt=""></div>
<a href="#" class="btn btn-primary btn-block"><b><i class="fa fa-pencil" aria-hidden="true"></i> Editar informações pessoais</b></a>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
<!-- About Me Box -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Sobre min</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<strong><i class="fa fa-book margin-r-5"></i> Estudos</strong>
<p class="text-muted">
<strong>{{user.degree}}</strong>
</p>
<p>{{user.university}}</p>
<hr>
<strong><i class="fa fa-map-marker margin-r-5"></i> Origem </strong>
<p class="text-muted">{{user.city}}, {{user.country}}</p>
<hr>
<strong><i class="fa fa-pencil margin-r-5"></i> Skills</strong>
<p>
<span class="label label-danger">UI Design</span>
<span class="label label-success">Coding</span>
<span class="label label-info">Javascript</span>
<span class="label label-warning">PHP</span>
<span class="label label-primary">Node.js</span>
</p>
<hr>
<strong><i class="fa fa-file-text-o margin-r-5"></i> Sobre min: </strong>
<p>{{user.about}}</p>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-9">
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active"><a href="#activity" data-toggle="tab">Activity</a></li>
<li><a href="#timeline" data-toggle="tab">Timeline</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
<div class="active tab-pane" id="activity">
<!-- Post -->
<div class="post">
<div class="user-block">
<img class="img-circle img-bordered-sm" src="assets/img/user1-128x128.jpg" alt="user image">
<span class="username">
<a href="#">Jonathan Burke Jr.</a>
<a href="#" class="pull-right btn-box-tool"><i class="fa fa-times"></i></a>
</span>
<span class="description">Shared publicly - 7:30 PM today</span>
</div>
<!-- /.user-block -->
<p>
Lorem ipsum represents a long-held tradition for designers,
typographers and the like. Some people hate it and argue for
its demise, but others ignore the hate as they create awesome
tools to help create filler text for everyone from bacon lovers
to Charlie Sheen fans.
</p>
<ul class="list-inline">
<li><a href="#" class="link-black text-sm"><i class="fa fa-share margin-r-5"></i> Share</a></li>
<li><a href="#" class="link-black text-sm"><i class="fa fa-thumbs-o-up margin-r-5"></i> Like</a>
</li>
<li class="pull-right">
<a href="#" class="link-black text-sm"><i class="fa fa-comments-o margin-r-5"></i> Comments
(5)</a></li>
</ul>
<input class="form-control input-sm" type="text" placeholder="Type a comment">
</div>
<!-- /.post -->
<!-- Post -->
<div class="post clearfix">
<div class="user-block">
<img class="img-circle img-bordered-sm" src="assets/img/user7-128x128.jpg" alt="User Image">
<span class="username">
<a href="#">Sarah Ross</a>
<a href="#" class="pull-right btn-box-tool"><i class="fa fa-times"></i></a>
</span>
<span class="description">Sent you a message - 3 days ago</span>
</div>
<!-- /.user-block -->
<p>
Lorem ipsum represents a long-held tradition for designers,
typographers and the like. Some people hate it and argue for
its demise, but others ignore the hate as they create awesome
tools to help create filler text for everyone from bacon lovers
to Charlie Sheen fans.
</p>
<form class="form-horizontal">
<div class="form-group margin-bottom-none">
<div class="col-sm-9">
<input class="form-control input-sm" placeholder="Response">
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-danger pull-right btn-block btn-sm">Send</button>
</div>
</div>
</form>
</div>
<!-- /.post -->
<!-- Post -->
<div class="post">
<div class="user-block">
<img class="img-circle img-bordered-sm" src="assets/img/user6-128x128.jpg" alt="User Image">
<span class="username">
<a href="#">Adam Jones</a>
<a href="#" class="pull-right btn-box-tool"><i class="fa fa-times"></i></a>
</span>
<span class="description">Posted 5 photos - 5 days ago</span>
</div>
<!-- /.user-block -->
<div class="row margin-bottom">
<div class="col-sm-6">
<img class="img-responsive" src="assets/img/photo1.png" alt="Photo">
</div>
<!-- /.col -->
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<img class="img-responsive" src="assets/img/photo2.png" alt="Photo">
<br>
<img class="img-responsive" src="assets/img/photo3.jpg" alt="Photo">
</div>
<!-- /.col -->
<div class="col-sm-6">
<img class="img-responsive" src="assets/img/photo4.jpg" alt="Photo">
<br>
<img class="img-responsive" src="assets/img/photo1.png" alt="Photo">
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<ul class="list-inline">
<li><a href="#" class="link-black text-sm"><i class="fa fa-share margin-r-5"></i> Share</a></li>
<li><a href="#" class="link-black text-sm"><i class="fa fa-thumbs-o-up margin-r-5"></i> Like</a>
</li>
<li class="pull-right">
<a href="#" class="link-black text-sm"><i class="fa fa-comments-o margin-r-5"></i> Comments
(5)</a></li>
</ul>
<input class="form-control input-sm" type="text" placeholder="Type a comment">
</div>
<!-- /.post -->
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="timeline">
<!-- The timeline -->
<ul class="timeline timeline-inverse">
<!-- timeline time label -->
<li class="time-label">
<span class="bg-red">
10 Feb. 2014
</span>
</li>
<!-- /.timeline-label -->
<!-- timeline item -->
<li>
<i class="fa fa-envelope bg-blue"></i>
<div class="timeline-item">
<span class="time"><i class="fa fa-clock-o"></i> 12:05</span>
<h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3>
<div class="timeline-body">
Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles,
weebly ning heekya handango imeem plugg dopplr jibjab, movity
jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle
quora plaxo ideeli hulu weebly balihoo...
</div>
<div class="timeline-footer">
<a class="btn btn-primary btn-xs">Read more</a>
<a class="btn btn-danger btn-xs">Delete</a>
</div>
</div>
</li>
<!-- END timeline item -->
<!-- timeline item -->
<li>
<i class="fa fa-user bg-aqua"></i>
<div class="timeline-item">
<span class="time"><i class="fa fa-clock-o"></i> 5 mins ago</span>
<h3 class="timeline-header no-border"><a href="#">Sarah Young</a> accepted your friend request
</h3>
</div>
</li>
<!-- END timeline item -->
<!-- timeline item -->
<li>
<i class="fa fa-comments bg-yellow"></i>
<div class="timeline-item">
<span class="time"><i class="fa fa-clock-o"></i> 27 mins ago</span>
<h3 class="timeline-header"><a href="#">Jay White</a> commented on your post</h3>
<div class="timeline-body">
Take me to your leader!
Switzerland is small and neutral!
We are more like Germany, ambitious and misunderstood!
</div>
<div class="timeline-footer">
<a class="btn btn-warning btn-flat btn-xs">View comment</a>
</div>
</div>
</li>
<!-- END timeline item -->
<!-- timeline time label -->
<li class="time-label">
<span class="bg-green">
3 Jan. 2014
</span>
</li>
<!-- /.timeline-label -->
<!-- timeline item -->
<li>
<i class="fa fa-camera bg-purple"></i>
<div class="timeline-item">
<span class="time"><i class="fa fa-clock-o"></i> 2 days ago</span>
<h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
<div class="timeline-body">
<img src="http://placehold.it/150x100" alt="..." class="margin">
<img src="http://placehold.it/150x100" alt="..." class="margin">
<img src="http://placehold.it/150x100" alt="..." class="margin">
<img src="http://placehold.it/150x100" alt="..." class="margin">
</div>
</div>
</li>
<!-- END timeline item -->
<li>
<i class="fa fa-clock-o bg-gray"></i>
</li>
</ul>
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="settings">
<form class="form-horizontal">
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputExperience" class="col-sm-2 control-label">Experience</label>
<div class="col-sm-10">
<textarea class="form-control" id="inputExperience" placeholder="Experience"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputSkills" class="col-sm-2 control-label">Skills</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSkills" placeholder="Skills">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> I agree to the <a href="#">terms and conditions</a>
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-danger">Submit</button>
</div>
</div>
</form>
</div>
<!-- /.tab-pane -->
</div>
<!-- /.tab-content -->
</div>
<!-- /.nav-tabs-custom -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-aqua">
<div class="inner">
<h3>150</h3>
<p>New Orders</p>
</div>
<div class="icon">
<i class="ion ion-bag"></i>
</div>
<a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3>53<sup style="font-size: 20px">%</sup></h3>
<p>Bounce Rate</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>
<a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-yellow">
<div class="inner">
<h3>44</h3>
<p>User Registrations</p>
</div>
<div class="icon">
<i class="ion ion-person-add"></i>
</div>
<a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3>65</h3>
<p>Unique Visitors</p>
</div>
<div class="icon">
<i class="ion ion-pie-graph"></i>
</div>
<a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
</div>
<!-- /.row -->
<!-- Main row -->
<div class="row">
<!-- Left col -->
<section class="col-lg-7 connectedSortable">
<!-- Custom tabs (Charts with tabs)-->
<div class="nav-tabs-custom">
<!-- Tabs within a box -->
<ul class="nav nav-tabs pull-right">
<li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li>
<li><a href="#sales-chart" data-toggle="tab">Donut</a></li>
<li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li>
</ul>
<div class="tab-content no-padding">
<!-- Morris chart - Sales -->
<div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
<div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
</div>
</div>
<!-- /.nav-tabs-custom -->
<!-- Chat box -->
<div class="box box-success">
<div class="box-header">
<i class="fa fa-comments-o"></i>
<h3 class="box-title">Chat</h3>
<div class="box-tools pull-right" data-toggle="tooltip" title="Status">
<div class="btn-group" data-toggle="btn-toggle">
<button type="button" class="btn btn-default btn-sm active"><i class="fa fa-square text-green"></i>
</button>
<button type="button" class="btn btn-default btn-sm"><i class="fa fa-square text-red"></i></button>
</div>
</div>
</div>
<div class="box-body chat" id="chat-box">
<!-- chat item -->
<div class="item">
<img src="dist/img/user4-128x128.jpg" alt="user image" class="online">
<p class="message">
<a href="#" class="name">
<small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 2:15</small>
Mike Doe
</a>
I would like to meet you to discuss the latest news about
the arrival of the new theme. They say it is going to be one the
best themes on the market
</p>
<div class="attachment">
<h4>Attachments:</h4>
<p class="filename">
Theme-thumbnail-image.jpg
</p>
<div class="pull-right">
<button type="button" class="btn btn-primary btn-sm btn-flat">Open</button>
</div>
</div>
<!-- /.attachment -->
</div>
<!-- /.item -->
<!-- chat item -->
<div class="item">
<img src="dist/img/user3-128x128.jpg" alt="user image" class="offline">
<p class="message">
<a href="#" class="name">
<small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:15</small>
Alexander Pierce
</a>
I would like to meet you to discuss the latest news about
the arrival of the new theme. They say it is going to be one the
best themes on the market
</p>
</div>
<!-- /.item -->
<!-- chat item -->
<div class="item">
<img src="dist/img/user2-160x160.jpg" alt="user image" class="offline">
<p class="message">
<a href="#" class="name">
<small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:30</small>
Susan Doe
</a>
I would like to meet you to discuss the latest news about
the arrival of the new theme. They say it is going to be one the
best themes on the market
</p>
</div>
<!-- /.item -->
</div>
<!-- /.chat -->
<div class="box-footer">
<div class="input-group">
<input class="form-control" placeholder="Type message...">
<div class="input-group-btn">
<button type="button" class="btn btn-success"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
</div>
<!-- /.box (chat box) -->
<!-- TO DO List -->
<div class="box box-primary">
<div class="box-header">
<i class="ion ion-clipboard"></i>
<h3 class="box-title">To Do List</h3>
<div class="box-tools pull-right">
<ul class="pagination pagination-sm inline">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- See dist/js/pages/dashboard.js to activate the todoList plugin -->
<ul class="todo-list">
<li>
<!-- drag handle -->
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<!-- checkbox -->
<input type="checkbox" value="">
<!-- todo text -->
<span class="text">Design a nice theme</span>
<!-- Emphasis label -->
<small class="label label-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
<!-- General tools such as edit or delete-->
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
<li>
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="">
<span class="text">Make the theme responsive</span>
<small class="label label-info"><i class="fa fa-clock-o"></i> 4 hours</small>
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
<li>
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="">
<span class="text">Let theme shine like a star</span>
<small class="label label-warning"><i class="fa fa-clock-o"></i> 1 day</small>
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
<li>
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="">
<span class="text">Let theme shine like a star</span>
<small class="label label-success"><i class="fa fa-clock-o"></i> 3 days</small>
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
<li>
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="">
<span class="text">Check your messages and notifications</span>
<small class="label label-primary"><i class="fa fa-clock-o"></i> 1 week</small>
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
<li>
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="">
<span class="text">Let theme shine like a star</span>
<small class="label label-default"><i class="fa fa-clock-o"></i> 1 month</small>
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
</ul>
</div>
<!-- /.box-body -->
<div class="box-footer clearfix no-border">
<button type="button" class="btn btn-default pull-right"><i class="fa fa-plus"></i> Add item</button>
</div>
</div>
<!-- /.box -->
<!-- quick email widget -->
<div class="box box-info">
<div class="box-header">
<i class="fa fa-envelope"></i>
<h3 class="box-title">Quick Email</h3>
<!-- tools box -->
<div class="pull-right box-tools">
<button type="button" class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip"
title="Remove">
<i class="fa fa-times"></i></button>
</div>
<!-- /. tools -->
</div>
<div class="box-body">
<form action="#" method="post">
<div class="form-group">
<input type="email" class="form-control" name="emailto" placeholder="Email to:">
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" placeholder="Subject">
</div>
<div>
<textarea class="textarea" placeholder="Message"
style="width: 100%; height: 125px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
</div>
</form>
</div>
<div class="box-footer clearfix">
<button type="button" class="pull-right btn btn-default" id="sendEmail">Send
<i class="fa fa-arrow-circle-right"></i></button>
</div>
</div>
</section>
<!-- /.Left col -->
<!-- right col (We are only adding the ID to make the widgets sortable)-->
<section class="col-lg-5 connectedSortable">
<!-- Map box -->
<div class="box box-solid bg-light-blue-gradient">
<div class="box-header">
<!-- tools box -->
<div class="pull-right box-tools">
<button type="button" class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip"
title="Date range">
<i class="fa fa-calendar"></i></button>
<button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse"
data-toggle="tooltip" title="Collapse" style="margin-right: 5px;">
<i class="fa fa-minus"></i></button>
</div>
<!-- /. tools -->
<i class="fa fa-map-marker"></i>
<h3 class="box-title">
Visitors
</h3>
</div>
<div class="box-body">
<div id="world-map" style="height: 250px; width: 100%;"></div>
</div>
<!-- /.box-body-->
<div class="box-footer no-border">
<div class="row">
<div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
<div id="sparkline-1"></div>
<div class="knob-label">Visitors</div>
</div>
<!-- ./col -->
<div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
<div id="sparkline-2"></div>
<div class="knob-label">Online</div>
</div>
<!-- ./col -->
<div class="col-xs-4 text-center">
<div id="sparkline-3"></div>
<div class="knob-label">Exists</div>
</div>
<!-- ./col -->
</div>
<!-- /.row -->
</div>
</div>
<!-- /.box -->
<!-- solid sales graph -->
<div class="box box-solid bg-teal-gradient">
<div class="box-header">
<i class="fa fa-th"></i>
<h3 class="box-title">Sales Graph</h3>
<div class="box-tools pull-right">
<button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn bg-teal btn-sm" data-widget="remove"><i class="fa fa-times"></i>
</button>
</div>
</div>
<div class="box-body border-radius-none">
<div class="chart" id="line-chart" style="height: 250px;"></div>
</div>
<!-- /.box-body -->
<div class="box-footer no-border">
<div class="row">
<div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
<input type="text" class="knob" data-readonly="true" value="20" data-width="60" data-height="60"
data-fgColor="#39CCCC">
<div class="knob-label">Mail-Orders</div>
</div>
<!-- ./col -->
<div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
<input type="text" class="knob" data-readonly="true" value="50" data-width="60" data-height="60"
data-fgColor="#39CCCC">
<div class="knob-label">Online</div>
</div>
<!-- ./col -->
<div class="col-xs-4 text-center">
<input type="text" class="knob" data-readonly="true" value="30" data-width="60" data-height="60"
data-fgColor="#39CCCC">
<div class="knob-label">In-Store</div>
</div>
<!-- ./col -->
</div>
<!-- /.row -->
</div>
<!-- /.box-footer -->
</div>
<!-- /.box -->
<!-- Calendar -->
<div class="box box-solid bg-green-gradient">
<div class="box-header">
<i class="fa fa-calendar"></i>
<h3 class="box-title">Calendar</h3>
<!-- tools box -->
<div class="pull-right box-tools">
<!-- button with a dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bars"></i></button>
<ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">Add new event</a></li>
<li><a href="#">Clear events</a></li>
<li class="divider"></li>
<li><a href="#">View calendar</a></li>
</ul>
</div>
<button type="button" class="btn btn-success btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-success btn-sm" data-widget="remove"><i class="fa fa-times"></i>
</button>
</div>
<!-- /. tools -->
</div>
<!-- /.box-header -->
<div class="box-body no-padding">
<!--The calendar -->
<div id="calendar" style="width: 100%"></div>
</div>
<!-- /.box-body -->
<div class="box-footer text-black">
<div class="row">
<div class="col-sm-6">
<!-- Progress bars -->
<div class="clearfix">
<span class="pull-left">Task #1</span>
<small class="pull-right">90%</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 90%;"></div>
</div>
<div class="clearfix">
<span class="pull-left">Task #2</span>
<small class="pull-right">70%</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 70%;"></div>
</div>
</div>
<!-- /.col -->
<div class="col-sm-6">
<div class="clearfix">
<span class="pull-left">Task #3</span>
<small class="pull-right">60%</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 60%;"></div>
</div>
<div class="clearfix">
<span class="pull-left">Task #4</span>
<small class="pull-right">40%</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 40%;"></div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
</div>
<!-- /.box -->
</section>
<!-- right col -->
</div>
<!-- /.row (main row) -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->

11
backoffice/src/app/directives/hasRole.directive.spec.ts Normal file
View File

@ -0,0 +1,11 @@
/* tslint:disable:no-unused-variable */
import { TestBed, async } from '@angular/core/testing';
import { HasRoleDirective } from './hasRole.directive';
describe('Directive: HasRole', () => {
it('should create an instance', () => {
const directive = new HasRoleDirective();
expect(directive).toBeTruthy();
});
});

36
backoffice/src/app/directives/hasRole.directive.ts Normal file
View File

@ -0,0 +1,36 @@
import { Directive, Input, ViewContainerRef, TemplateRef, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
@Directive({
selector: '[appHasRole]'
})
export class HasRoleDirective implements OnInit {
@Input() appHasRole: string[];
isVisible = false;
constructor(private viewContainerRef: ViewContainerRef,
private templateRef: TemplateRef<any>, private authService: AuthService) {
}
ngOnInit() {
const userRoles = this.authService.decodedToken.role as Array<string>;
if (!userRoles) {
this.viewContainerRef.clear();
}
//se o utilizador tem a role para o elemento
if (this.authService.roleMatch(this.appHasRole)) {
if (!this.isVisible) {
this.isVisible = true;
this.viewContainerRef.createEmbeddedView(this.templateRef);
} else {
this.isVisible = false;
this.viewContainerRef.clear();
}
}
}
}

19
backoffice/src/app/guards/auth.guard.ts
View File

@ -1,15 +1,30 @@
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { CanActivate, Router } from '@angular/router';
import { CanActivate, Router, ActivatedRouteSnapshot } from '@angular/router';
import { AuthService } from '../services/auth.service';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
canActivate(): boolean {
canActivate(next: ActivatedRouteSnapshot): boolean {
const roles = next.data['roles'] as Array<String>;
if (roles) {
const match = this.authService.roleMatch(roles);
if (match) {
return true;
} else {
this.router.navigate(['dashboard']);
console.log("não tens acesso a esta página");
}
}
if (this.authService.loggedIn()) {
return true;
}
console.log("you shall not pass");
this.router.navigate(['/login']);
return false;

10
backoffice/src/app/home/home.component.css
View File

@ -0,0 +1,10 @@
.qr_code
{
width: 60%;
margin: 0 auto;
margin-bottom: 5%;
}
.qr_code img{
width:100%;
}

340
backoffice/src/app/home/home.component.html
View File

@ -1,3 +1,337 @@
<p>
home works!
</p>
<app-navigation></app-navigation>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-3">
<!-- Profile Image -->
<div class="box box-primary">
<div class="box-body box-profile">
<img class="profile-user-img img-responsive img-circle" src="{{user?.profileIcon}}" alt="User profile picture">
<h3 class="profile-username text-center">{{user?.fullName}}</h3>
<p class="text-muted text-center">@{{user?.username}}</p>
<div class="qr_code box"> <img src="https://preview.ibb.co/kpNOH9/qr_code.png" alt=""></div>
<a href="#" class="btn btn-primary btn-block"><b><i class="fa fa-pencil" aria-hidden="true"></i> Editar informações pessoais</b></a>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
<!-- About Me Box -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Sobre min</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<strong><i class="fa fa-book margin-r-5"></i> Estudos</strong>
<p class="text-muted">
<strong>{{user?.degree}}</strong>
</p>
<p>{{user?.university}}</p>
<hr>
<strong><i class="fa fa-map-marker margin-r-5"></i> Origem </strong>
<p class="text-muted">{{user?.city}}, {{user?.country}}</p>
<hr>
<strong><i class="fa fa-pencil margin-r-5"></i> Skills</strong>
<p>
<span class="label label-danger">UI Design</span>
<span class="label label-success">Coding</span>
<span class="label label-info">Javascript</span>
<span class="label label-warning">PHP</span>
<span class="label label-primary">Node.js</span>
</p>
<hr>
<strong><i class="fa fa-file-text-o margin-r-5"></i> Sobre min: </strong>
<p>{{user?.about}}</p>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-6">
<!-- Custom Tabs -->
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab_1" data-toggle="tab">Dia 1</a></li>
<li><a href="#tab_2" data-toggle="tab">Dia 2</a></li>
<li><a href="#tab_3" data-toggle="tab">Dia 3</a></li>
<li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_1">
<b>How to use:</b>
<p>Exactly like the original bootstrap tabs except you should use
the custom wrapper <code>.nav-tabs-custom</code> to achieve this style.</p>
A wonderful serenity has taken possession of my entire soul,
like these sweet mornings of spring which I enjoy with my whole heart.
I am alone, and feel the charm of existence in this spot,
which was created for the bliss of souls like mine. I am so happy,
my dear friend, so absorbed in the exquisite sense of mere tranquil existence,
that I neglect my talents. I should be incapable of drawing a single stroke
at the present moment; and yet I feel that I never was a greater artist than now.
The European languages are members of the same family. Their separate existence is a myth.
For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ
in their grammar, their pronunciation and their most common words. Everyone realizes why a
new common language would be desirable: one could refuse to pay expensive translators. To
achieve this, it would be necessary to have uniform grammar, pronunciation and more common
words. If several languages coalesce, the grammar of the resulting language is more simple
and regular than that of the individual languages.
The European languages are members of the same family. Their separate existence is a myth.
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="tab_2">
The European languages are members of the same family. Their separate existence is a myth.
For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ
in their grammar, their pronunciation and their most common words. Everyone realizes why a
new common language would be desirable: one could refuse to pay expensive translators. To
achieve this, it would be necessary to have uniform grammar, pronunciation and more common
words. If several languages coalesce, the grammar of the resulting language is more simple
and regular than that of the individual languages.
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="tab_3">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<!-- /.tab-pane -->
</div>
<!-- /.tab-content -->
</div>
<!-- nav-tabs-custom -->
</div>
<!-- /.col -->
<div class="col-md-3">
<!-- DIRECT CHAT PRIMARY -->
<div class="box box-primary direct-chat direct-chat-primary">
<div class="box-header with-border">
<h3 class="box-title">Direct Chat</h3>
<div class="box-tools pull-right">
<span data-toggle="tooltip" title="" class="badge bg-light-blue" data-original-title="3 New Messages">3</span>
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="" data-widget="chat-pane-toggle" data-original-title="Contacts">
<i class="fa fa-comments"></i></button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Conversations are loaded here -->
<div class="direct-chat-messages">
<!-- Message. Default to the left -->
<div class="direct-chat-msg">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">{{user?.fullName}}</span>
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
</div>
<!-- /.direct-chat-info -->
<img class="direct-chat-img" src="https://preview.ibb.co/e1XO0U/Webp_net_compress_image_1.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
<!-- Message to the right -->
<div class="direct-chat-msg right">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-right">{{user.fullName}}</span>
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
</div>
<!-- /.direct-chat-info -->
<img class="direct-chat-img" src="https://preview.ibb.co/e1XO0U/Webp_net_compress_image_1.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
<div class="direct-chat-text">
You better believe it!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
</div>
<!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
<div class="direct-chat-contacts">
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="https://preview.ibb.co/e1XO0U/Webp_net_compress_image_1.jpg" alt="User Image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
<small class="contacts-list-date pull-right">2/28/2015</small>
</span>
<span class="contacts-list-msg">How have you been? I was...</span>
</div>
<!-- /.contacts-list-info -->
</a>
</li>
<!-- End Contact Item -->
</ul>
<!-- /.contatcts-list -->
</div>
<!-- /.direct-chat-pane -->
</div>
<!-- /.box-body -->
<div class="box-footer">
<form action="#" method="post">
<div class="input-group">
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-primary btn-flat">Send</button>
</span>
</div>
</form>
</div>
<!-- /.box-footer-->
</div>
<!--/.direct-chat -->
</div>
<div class="col-md-5">
<div class="box">
<div class="box-header">
<h3 class="box-title">Striped Full Width Table</h3>
</div>
<!-- /.box-header -->
<div class="box-body no-padding">
<table class="table table-striped">
<tbody><tr>
<th style="width: 10px">#</th>
<th>Task</th>
<th>Progress</th>
<th style="width: 40px">Label</th>
</tr>
<tr>
<td>1.</td>
<td>Update software</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
</div>
</td>
<td><span class="badge bg-red">55%</span></td>
</tr>
<tr>
<td>2.</td>
<td>Clean database</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
</div>
</td>
<td><span class="badge bg-yellow">70%</span></td>
</tr>
<tr>
<td>3.</td>
<td>Cron job running</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar progress-bar-primary" style="width: 30%"></div>
</div>
</td>
<td><span class="badge bg-light-blue">30%</span></td>
</tr>
<tr>
<td>4.</td>
<td>Fix and squish bugs</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar progress-bar-success" style="width: 90%"></div>
</div>
</td>
<td><span class="badge bg-green">90%</span></td>
</tr>
</tbody></table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<div class="col-md-4">
<!-- Widget: user widget style 1 -->
<div class="box box-widget widget-user">
<!-- Add the bg color to the header using any of the bg-* classes -->
<div class="widget-user-header bg-aqua-active">
<h3 class="widget-user-username">{{user.fullName}}</h3>
<h5 class="widget-user-desc">Founder &amp; CEO</h5>
</div>
<div class="widget-user-image">
<img class="img-circle" src="https://preview.ibb.co/e1XO0U/Webp_net_compress_image_1.jpg" alt="User Avatar">
</div>
<div class="box-footer">
<div class="row">
<div class="col-sm-4 border-right">
<div class="description-block">
<h5 class="description-header">3,200</h5>
<span class="description-text">SALES</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
<div class="col-sm-4 border-right">
<div class="description-block">
<h5 class="description-header">13,000</h5>
<span class="description-text">FOLLOWERS</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
<div class="col-sm-4">
<div class="description-block">
<h5 class="description-header">35</h5>
<span class="description-text">PRODUCTS</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
</div>
<!-- /.widget-user -->
</div>
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<app-footer></app-footer>

23
backoffice/src/app/home/home.component.ts
View File

@ -1,4 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/user.service';
import { AuthService } from '../services/auth.service';
import { ActivatedRoute } from '@angular/router';
import { User } from '../models/user';
import { JwtHelperService } from '@auth0/angular-jwt';
@Component({
selector: 'app-home',
@ -7,9 +12,25 @@ import { Component, OnInit } from '@angular/core';
})
export class HomeComponent implements OnInit {
constructor() { }
jwtHelper = new JwtHelperService();
decodedToken: any;
user: User;
constructor(private userService: UserService, private route: ActivatedRoute, private authService: AuthService) { }
ngOnInit() {
this.decodedToken = this.jwtHelper.decodeToken(localStorage.getItem('token'));
this.loadUser();
}
// members/...
loadUser() {
// o mais é para garantir que a route retorna um inteiro
this.userService.getUser(this.decodedToken.nameid).subscribe((user: User) => {
this.user = user;
}, error => {
console.log(error);
});
}
}

6
backoffice/src/app/login/login.component.ts
View File

@ -16,19 +16,19 @@ export class LoginComponent implements OnInit {
ngOnInit() {
if (this.authService.loggedIn)
{
this.router.navigate(['/dashboard']);
this.router.navigate(['/']);
}
}
login() {
this.authService.login(this.model).subscribe(next => {
this.router.navigate(['/dashboard']);
this.router.navigate(['/']);
}, error => {
console.log('Failed to login');
}, () => {
this.router.navigate(['/dashboard']);
this.router.navigate(['/']);
});
}

59
backoffice/src/app/navigation/navigation.component.html
View File

@ -4,7 +4,7 @@
<nav class="navbar navbar-static-top">
<div class="container">
<div class="navbar-header">
<a href="../../index2.html" class="navbar-brand"><b>ENEI </b>2019</a>
<a routerLink="/home" routerLinkActive="active" href="" class="navbar-brand"><b>ENEI </b>2019</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-bars"></i>
</button>
@ -13,31 +13,48 @@
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a routerLink="/dashboard" routerLinkActive="active"><i class="fa fa-dashboard"></i> Dashboard <span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<a href="dashboard/#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-users"></i> Utilizadores<span class="caret"></span></a>
<li><a routerLink="/home" routerLinkActive="active"><i class="fa fa-home"></i> Home <span class="sr-only">(current)</span></a></li>
<li *appHasRole="['Admin']"><a routerLink="/dashboard" routerLinkActive="active"><i class="fa fa-lock"></i> Dashboard <span class="sr-only">(current)</span></a></li>
<li *appHasRole="['Admin']" class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-lock"></i> Utilizadores<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a routerLink="../users" > Lista completa</a></li>
<li><a href="#">User</a></li>
<li><a routerLink="/users" > Todos Utilizadores</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">Procurar Utilizador</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="dashboard/#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
<li><a href="#">Estatísticas</a></li>
<li class="divider"></li>
<li><a href="#">Adicionar Utilizador</a></li>
</ul>
</li>
<li *appHasRole="['Admin']" class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-lock"></i> Palestras<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a routerLink="/users" > Todos Utilizadores</a></li>
<li class="divider"></li>
<li><a href="#">Procurar Utilizador</a></li>
<li class="divider"></li>
<li><a href="#">Estatísticas</a></li>
<li class="divider"></li>
<li><a href="#">Adicionar Utilizador</a></li>
</ul>
</li>
<li *appHasRole="['Admin']" class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-lock"></i> Eventos<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a routerLink="/users" > Todos Utilizadores</a></li>
<li class="divider"></li>
<li><a href="#">Procurar Utilizador</a></li>
<li class="divider"></li>
<li><a href="#">Estatísticas</a></li>
<li class="divider"></li>
<li><a href="#">Adicionar Utilizador</a></li>
</ul>
</li>
</ul>
</div>

18
backoffice/src/app/routes.ts
View File

@ -10,6 +10,7 @@ import { UserComponent } from './users/user/user.component';
import { Component } from '@angular/core';
import { EditComponent } from './users/edit/edit.component';
import { PreventUnsavedChanges } from './guards/prevent-unsaved-changes.guard';
import { AdminComponent } from './admin/admin.component';
@ -17,7 +18,7 @@ import { PreventUnsavedChanges } from './guards/prevent-unsaved-changes.guard';
export const appRoutes: Routes = [
{
path: '',
component: DashboardComponent,
component: HomeComponent,
canActivate: [AuthGuard]
},
{
@ -49,11 +50,22 @@ export const appRoutes: Routes = [
{
path: 'dashboard',
component: DashboardComponent,
canActivate: [AuthGuard]
canActivate: [AuthGuard],
data: {
roles: ['Admin']
}
},
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard],
data: {
roles: ['Admin']
}
},
{
path: '**',
redirectTo: 'home',
redirectTo: '',
pathMatch: 'full'
}
];

17
backoffice/src/app/services/auth.service.ts
View File

@ -33,7 +33,22 @@ loggedIn() {
return !this.jwtHelper.isTokenExpired(token);
}
roleMatch(allowedRoles): boolean {
let isMatch = false;
const userRoles = this.decodedToken.role as Array<String>;
console.log(this.decodedToken);
allowedRoles.forEach(element => {
if (userRoles.includes(element)) {
isMatch = true;
return;
}
});
return isMatch;
}
}

58
backoffice/src/app/users/usersList/usersList.component.html
View File

@ -50,63 +50,7 @@
</div>
<!-- /.box-body -->
</div>
<div class="box">
<div class="box-header">
<h3 class="box-title">Striped Full Width Table</h3>
</div>
<!-- /.box-header -->
<div class="box-body no-padding">
<table class="table table-striped">
<tr>
<th style="width: 10px">#</th>
<th>Task</th>
<th>Progress</th>
<th style="width: 40px">Label</th>
</tr>
<tr>
<td>1.</td>
<td>Update software</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
</div>
</td>
<td><span class="badge bg-red">55%</span></td>
</tr>
<tr>
<td>2.</td>
<td>Clean database</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
</div>
</td>
<td><span class="badge bg-yellow">70%</span></td>
</tr>
<tr>
<td>3.</td>
<td>Cron job running</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar progress-bar-primary" style="width: 30%"></div>
</div>
</td>
<td><span class="badge bg-light-blue">30%</span></td>
</tr>
<tr>
<td>4.</td>
<td>Fix and squish bugs</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar progress-bar-success" style="width: 90%"></div>
</div>
</td>
<td><span class="badge bg-green">90%</span></td>
</tr>
</table>
</div>
<!-- /.box-body -->
</div>
</section>
<!-- /.content -->
</div>