| boolean | UrlTree {
15 |
16 | if (this.service.isloggedin()) {
17 | if (route.url.length > 0) {
18 | let menu = route.url[0].path;
19 | if (menu == 'user') {
20 | if (this.service.getrole() == 'admin') {
21 | return true;
22 | } else {
23 | this.router.navigate(['']);
24 | this.tostr.warning('You dont have access.')
25 | return false;
26 | }
27 | }else{
28 | return true;
29 | }
30 | } else {
31 | return true;
32 | }
33 | }
34 | else {
35 | this.router.navigate(['login']);
36 | return false;
37 | }
38 | }
39 |
40 | }
41 |
--------------------------------------------------------------------------------
/src/app/home/home.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nihira2020/Angular15authentication/5825304499ff061b335f2f92752737acc4f5cd12/src/app/home/home.component.css
--------------------------------------------------------------------------------
/src/app/home/home.component.html:
--------------------------------------------------------------------------------
1 |
2 |
Welcome To Nihira Techiees
3 | Angular 15 Tutorial
4 | Authentication using JSON SERVER
5 |
6 |
--------------------------------------------------------------------------------
/src/app/home/home.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { HomeComponent } from './home.component';
4 |
5 | describe('HomeComponent', () => {
6 | let component: HomeComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ HomeComponent ]
12 | })
13 | .compileComponents();
14 |
15 | fixture = TestBed.createComponent(HomeComponent);
16 | component = fixture.componentInstance;
17 | fixture.detectChanges();
18 | });
19 |
20 | it('should create', () => {
21 | expect(component).toBeTruthy();
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/src/app/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-home',
5 | templateUrl: './home.component.html',
6 | styleUrls: ['./home.component.css']
7 | })
8 | export class HomeComponent {
9 |
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/login/login.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nihira2020/Angular15authentication/5825304499ff061b335f2f92752737acc4f5cd12/src/app/login/login.component.css
--------------------------------------------------------------------------------
/src/app/login/login.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | User Login
4 |
5 |
6 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/src/app/login/login.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { LoginComponent } from './login.component';
4 |
5 | describe('LoginComponent', () => {
6 | let component: LoginComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ LoginComponent ]
12 | })
13 | .compileComponents();
14 |
15 | fixture = TestBed.createComponent(LoginComponent);
16 | component = fixture.componentInstance;
17 | fixture.detectChanges();
18 | });
19 |
20 | it('should create', () => {
21 | expect(component).toBeTruthy();
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/src/app/login/login.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { FormBuilder, Validators } from '@angular/forms';
3 | import { Router } from '@angular/router';
4 | import { ToastrService } from 'ngx-toastr'
5 | import { AuthService } from '../service/auth.service';
6 |
7 | @Component({
8 | selector: 'app-login',
9 | templateUrl: './login.component.html',
10 | styleUrls: ['./login.component.css']
11 | })
12 | export class LoginComponent {
13 | constructor(private builder: FormBuilder, private toastr: ToastrService, private service: AuthService,
14 | private router: Router) {
15 | sessionStorage.clear();
16 |
17 | }
18 | result: any;
19 |
20 | loginform = this.builder.group({
21 | id: this.builder.control('', Validators.required),
22 | password: this.builder.control('', Validators.required)
23 | });
24 |
25 | proceedlogin() {
26 | if (this.loginform.valid) {
27 | this.service.GetUserbyCode(this.loginform.value.id).subscribe(item => {
28 | this.result = item;
29 | if (this.result.password === this.loginform.value.password) {
30 | if (this.result.isactive) {
31 | sessionStorage.setItem('username',this.result.id);
32 | sessionStorage.setItem('role',this.result.role);
33 | this.router.navigate(['']);
34 | } else {
35 | this.toastr.error('Please contact Admin', 'InActive User');
36 | }
37 | } else {
38 | this.toastr.error('Invalid credentials');
39 | }
40 | });
41 | } else {
42 | this.toastr.warning('Please enter valid data.')
43 | }
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/app/model/usermodel.ts:
--------------------------------------------------------------------------------
1 | export interface usermodel{
2 |
3 | }
--------------------------------------------------------------------------------
/src/app/register/register.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nihira2020/Angular15authentication/5825304499ff061b335f2f92752737acc4f5cd12/src/app/register/register.component.css
--------------------------------------------------------------------------------
/src/app/register/register.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Registeration
4 |
5 |
6 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/src/app/register/register.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { RegisterComponent } from './register.component';
4 |
5 | describe('RegisterComponent', () => {
6 | let component: RegisterComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ RegisterComponent ]
12 | })
13 | .compileComponents();
14 |
15 | fixture = TestBed.createComponent(RegisterComponent);
16 | component = fixture.componentInstance;
17 | fixture.detectChanges();
18 | });
19 |
20 | it('should create', () => {
21 | expect(component).toBeTruthy();
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/src/app/register/register.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { FormBuilder, Validators } from '@angular/forms';
3 | import { Router } from '@angular/router';
4 | import { AuthService } from '../service/auth.service';
5 | import { ToastrService } from 'ngx-toastr'
6 |
7 | @Component({
8 | selector: 'app-register',
9 | templateUrl: './register.component.html',
10 | styleUrls: ['./register.component.css']
11 | })
12 | export class RegisterComponent {
13 |
14 | constructor(private builder: FormBuilder, private service: AuthService, private router: Router,
15 | private toastr: ToastrService) {
16 |
17 | }
18 |
19 | registerform = this.builder.group({
20 | id: this.builder.control('', Validators.compose([Validators.required, Validators.minLength(5)])),
21 | name: this.builder.control('', Validators.required),
22 | password: this.builder.control('', Validators.compose([Validators.required, Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}')])),
23 | email: this.builder.control('', Validators.compose([Validators.required, Validators.email])),
24 | gender: this.builder.control('male'),
25 | role: this.builder.control(''),
26 | isactive: this.builder.control(false)
27 | });
28 | proceedregister() {
29 | if (this.registerform.valid) {
30 | this.service.RegisterUser(this.registerform.value).subscribe(result => {
31 | this.toastr.success('Please contact admin for enable access.','Registered successfully')
32 | this.router.navigate(['login'])
33 | });
34 | } else {
35 | this.toastr.warning('Please enter valid data.')
36 | }
37 | }
38 |
39 | }
40 |
--------------------------------------------------------------------------------
/src/app/service/auth.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { AuthService } from './auth.service';
4 |
5 | describe('AuthService', () => {
6 | let service: AuthService;
7 |
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({});
10 | service = TestBed.inject(AuthService);
11 | });
12 |
13 | it('should be created', () => {
14 | expect(service).toBeTruthy();
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/app/service/auth.service.ts:
--------------------------------------------------------------------------------
1 | import { HttpClient } from '@angular/common/http';
2 | import { Injectable } from '@angular/core';
3 |
4 | @Injectable({
5 | providedIn: 'root'
6 | })
7 | export class AuthService {
8 |
9 | constructor(private http:HttpClient) {
10 |
11 | }
12 | apiurl='http://localhost:3000/user';
13 |
14 | RegisterUser(inputdata:any){
15 | return this.http.post(this.apiurl,inputdata)
16 | }
17 | GetUserbyCode(id:any){
18 | return this.http.get(this.apiurl+'/'+id);
19 | }
20 | Getall(){
21 | return this.http.get(this.apiurl);
22 | }
23 | updateuser(id:any,inputdata:any){
24 | return this.http.put(this.apiurl+'/'+id,inputdata);
25 | }
26 | getuserrole(){
27 | return this.http.get('http://localhost:3000/role');
28 | }
29 | isloggedin(){
30 | return sessionStorage.getItem('username')!=null;
31 | }
32 | getrole(){
33 | return sessionStorage.getItem('role')!=null?sessionStorage.getItem('role')?.toString():'';
34 | }
35 | GetAllCustomer(){
36 | return this.http.get('http://localhost:3000/customer');
37 | }
38 | Getaccessbyrole(role:any,menu:any){
39 | return this.http.get('http://localhost:3000/roleaccess?role='+role+'&menu='+menu)
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/app/updatepopup/updatepopup.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nihira2020/Angular15authentication/5825304499ff061b335f2f92752737acc4f5cd12/src/app/updatepopup/updatepopup.component.css
--------------------------------------------------------------------------------
/src/app/updatepopup/updatepopup.component.html:
--------------------------------------------------------------------------------
1 | Update User
2 |
--------------------------------------------------------------------------------
/src/app/updatepopup/updatepopup.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { UpdatepopupComponent } from './updatepopup.component';
4 |
5 | describe('UpdatepopupComponent', () => {
6 | let component: UpdatepopupComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ UpdatepopupComponent ]
12 | })
13 | .compileComponents();
14 |
15 | fixture = TestBed.createComponent(UpdatepopupComponent);
16 | component = fixture.componentInstance;
17 | fixture.detectChanges();
18 | });
19 |
20 | it('should create', () => {
21 | expect(component).toBeTruthy();
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/src/app/updatepopup/updatepopup.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Inject, OnInit } from '@angular/core';
2 | import { FormBuilder, Validators } from '@angular/forms'
3 | import { ToastrService } from 'ngx-toastr';
4 | import { AuthService } from '../service/auth.service';
5 | import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
6 |
7 | @Component({
8 | selector: 'app-updatepopup',
9 | templateUrl: './updatepopup.component.html',
10 | styleUrls: ['./updatepopup.component.css']
11 | })
12 | export class UpdatepopupComponent implements OnInit {
13 |
14 | constructor(private builder: FormBuilder, private service: AuthService, private toastr: ToastrService,
15 | private dialogref: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: any) {
16 |
17 | this.service.getuserrole().subscribe(res => {
18 | this.rolelist = res;
19 | });
20 |
21 |
22 |
23 | }
24 | ngOnInit(): void {
25 | if (this.data.usercode != '' && this.data.usercode != null) {
26 | this.loaduserdata(this.data.usercode);
27 | }
28 | }
29 | rolelist: any;
30 | editdata: any;
31 |
32 | registerform = this.builder.group({
33 | id: this.builder.control(''),
34 | name: this.builder.control(''),
35 | password: this.builder.control(''),
36 | email: this.builder.control(''),
37 | gender: this.builder.control('male'),
38 | role: this.builder.control('', Validators.required),
39 | isactive: this.builder.control(false)
40 | });
41 |
42 | loaduserdata(code: any) {
43 | this.service.GetUserbyCode(code).subscribe(res => {
44 | this.editdata = res;
45 | console.log(this.editdata);
46 | this.registerform.setValue({
47 | id: this.editdata.id, name: this.editdata.name,
48 | password: this.editdata.password, email: this.editdata.email, gender: this.editdata.gender,
49 | role: this.editdata.role, isactive: this.editdata.isactive
50 | });
51 | });
52 | }
53 | UpdateUser() {
54 | this.service.updateuser(this.registerform.value.id, this.registerform.value).subscribe(res => {
55 | this.toastr.success('Updated successfully.');
56 | this.dialogref.close();
57 | });
58 | }
59 |
60 | }
61 |
--------------------------------------------------------------------------------
/src/app/user/user.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nihira2020/Angular15authentication/5825304499ff061b335f2f92752737acc4f5cd12/src/app/user/user.component.css
--------------------------------------------------------------------------------
/src/app/user/user.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | User Listing
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | | Username |
12 | {{element.id}} |
13 |
14 |
15 |
16 |
17 | Name |
18 | {{element.name}} |
19 |
20 |
21 |
22 |
23 | Email |
24 | {{element.email}} |
25 |
26 |
27 |
28 |
29 | Status |
30 | {{element.isactive ? 'Active':'In Active'}} |
31 |
32 |
33 | Role |
34 | {{element.role ===''? 'Un Assigned':element.role}} |
35 |
36 |
37 | Action |
38 |
39 |
40 | |
41 |
42 |
43 | |
44 | |
45 |
46 |
47 |
50 |
51 |
312 | Welcome
313 | Home
314 | User
315 | Customer
316 |
317 |
318 | Logout
319 |