Skip to content

Commit

Permalink
fix router (#352)
Browse files Browse the repository at this point in the history
* update styles (#349) (#350)

* config for running int tests on cloud

* Feature/carousels (#340)

* working demo of carousel

* presentable example

* remove unneeded tests

* remove scss file

* presentable with examples

* get rid of 508 bad thingies

* config for running int tests on cloud (#339) (#341)

* fix navigation (#343)

* Delete docker-build.yml



* Update README.md



* fix navigation (#345)

* Dropdown logout (#347)

---------

Signed-off-by: usiiasirrush <[email protected]>

* fix angular routing (#351)

* fix angular routing

* remove remaining navcontents

* uneeded test

---------

Signed-off-by: usiiasirrush <[email protected]>
  • Loading branch information
UsiDiamond authored Jul 31, 2023
1 parent 2318fa7 commit d19deae
Show file tree
Hide file tree
Showing 26 changed files with 1,847 additions and 1,637 deletions.
13 changes: 13 additions & 0 deletions src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,24 @@ import { CookiePolicyComponent } from './cookie-policy/cookie-policy.component';
import { SlaveryPolicyComponent } from './slavery-policy/slavery-policy.component';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { MemberStartComponent } from './member-start/member-start.component';
import { VolunteerStartComponent } from './volunteer-start/volunteer-start.component';
import { HubComponent } from './hub/hub.component';
import { ContactUsComponent } from './contact-us/contact-us.component';

const routes: Routes = [
{ path: 'privacy', component: PrivacyPolicyComponent },
{ path: 'cookie', component: CookiePolicyComponent },
{ path: 'slavery', component: SlaveryPolicyComponent },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'member-start', component: MemberStartComponent },
{ path: 'research', component: HomeComponent },
{ path: 'volunteer-start', component: VolunteerStartComponent },
{ path: 'hub', component: HubComponent },
{ path: 'contact-us', component: ContactUsComponent },
{ path: '**', component: HomeComponent },
];

@NgModule({
Expand Down
2 changes: 1 addition & 1 deletion src/app/app.component.css
Original file line number Diff line number Diff line change
Expand Up @@ -80,4 +80,4 @@ button {
.logout-button {
color: white;
font-weight: bold;
}
}
128 changes: 1 addition & 127 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,127 +1 @@
<span class="accessibility-tools">
<a
#skipLink
id="skipLink"
href="#pageHeader"
class="skip-to-main-content-link"
>Skip to main content</a
>
</span>

<span *ngIf="isContentShown">
<nav class="navbar navbar-light bg-light mb-3 navigation">
<div class="container-fluid">
<span *ngIf="isMobileLayout" class="col-sm-3">
<img
style="width: 100px"
class="logo"
src="../assets/logo.png"
alt="Neurodiversity in Buisness Logo"
/>
</span>

<div *ngIf="!isMobileLayout" class="col-sm-3">
<img
class="logo"
src="../assets/logo.png"
alt="Neurodiversity in Buisness Logo"
/>
</div>

<div class="col" style="text-align: right">
<div>
<button
class="login-button btn btn-primary"
*ngIf="!loginDisplay"
(click)="loginRedirect()"
>
Login
</button>

<div *ngIf="loginDisplay" ngbDropdown class="d-inline-block">
<button
type="button"
ngbDropdownToggle
class="btn btn-outline-primary"
id="dropdownBasic1"
>
{{ username }}
</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem (click)="logout()">Logout</button>
</div>
</div>
</div>
<br /><br />
<div [(ngbCollapse)]="isMenuCollapsed" class="collapse navbar-collapse">
<ul
[keyboard]="true"
ngbNav
[(ngbCollapse)]="isMenuCollapsed"
#nav="ngbNav"
[(activeId)]="navActiveId"
class="nav"
>
<li [ngbNavItem]="1">
<button #homeButton id="homeButton" ngbNavLink>Home</button>
<ng-template ngbNavContent> <app-home></app-home></ng-template>
</li>
<li [ngbNavItem]="2">
<button id="aboutButton" ngbNavLink>About Us</button>
<ng-template ngbNavContent> <app-about></app-about></ng-template>
</li>
<li [ngbNavItem]="3">
<button id="memberButton" ngbNavLink>Become A Member</button>
<ng-template ngbNavContent>
<app-member-start></app-member-start
></ng-template>
</li>
<li [ngbNavItem]="4">
<button id="researchButton" ngbNavLink>Research</button>
<ng-template ngbNavContent>
<app-research></app-research
></ng-template>
</li>
<li [ngbNavItem]="5">
<button id="volunteerButton" ngbNavLink>Volunteer With Us</button>
<ng-template ngbNavContent>
<app-volunteer-start></app-volunteer-start
></ng-template>
</li>
<li [ngbNavItem]="6">
<button
onClick="location.href='https://neurodiversityinbusiness.org/ndresourcehub/'"
id="hubButton"
ngbNavLink
>
ND Resource Hub
</button>
<ng-template ngbNavContent> <app-hub></app-hub></ng-template>
</li>
<li [ngbNavItem]="7">
<button id="contactButton" ngbNavLink>Contact Us</button>
<ng-template ngbNavContent>
<app-contact-us></app-contact-us
></ng-template>
</li>
</ul>
</div>
<div class="md-auto">
<button
class="navbar-toggler"
type="button"
(click)="isMenuCollapsed = !isMenuCollapsed"
>
&#9776;
</button>
</div>
</div>
</div>
</nav>
<div [ngbNavOutlet]="nav" id="navOutlet" class="mt-2"></div
></span>
<div *ngIf="!isContentShown">
<router-outlet></router-outlet>
</div>

<app-footer> </app-footer>
<app-landing></app-landing>
182 changes: 3 additions & 179 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,186 +1,10 @@
import {
AfterViewInit,
Component,
ElementRef,
Inject,
OnDestroy,
OnInit,
ViewChild,
} from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { DisplayContentService } from './display-content.service';
import {
MsalService,
MsalBroadcastService,
MSAL_GUARD_CONFIG,
MsalGuardConfiguration,
} from '@azure/msal-angular';
import {
InteractionStatus,
RedirectRequest,
EventMessage,
EventType,
} from '@azure/msal-browser';
import { Location } from '@angular/common';
import { Subject } from 'rxjs/internal/Subject';
import { filter, takeUntil } from 'rxjs/operators';
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('nav') nav: ElementRef;
export class AppComponent {
title = 'Neurodiversity in Business';
navActiveId = 1;
isContentShown = true;
isMenuCollapsed = window.innerWidth <= 991;
loginDisplay = false;
username = '';
private readonly _destroying$ = new Subject<void>();

public isMobileLayout = false;
history: string[];

constructor(
private displayContentService: DisplayContentService,
private router: Router,
@Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
private authService: MsalService,
private msalBroadcastService: MsalBroadcastService,
private angularLocation: Location
) {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
if (this.history != undefined) {
this.history.push(event.urlAfterRedirects);
}
}
});
}

ngOnInit() {
if (window.innerWidth <= 991) {
this.isMobileLayout = true;
}
window.onresize = () => {
this.isMobileLayout = window.innerWidth <= 991;
this.isMenuCollapsed = this.isMobileLayout;
};
this.setLoginDisplay();
this.authService.handleRedirectObservable().subscribe((res) => {
this.isContentShown = true;
this.username = this.authService.instance.getActiveAccount()?.name!;
console.log(res);
});

this.authService.instance.enableAccountStorageEvents(); // Optional - This will enable ACCOUNT_ADDED and ACCOUNT_REMOVED events emitted when a user logs in or out of another tab or window
this.msalBroadcastService.msalSubject$
.pipe(
filter(
(msg: EventMessage) =>
msg.eventType === EventType.ACCOUNT_ADDED ||
msg.eventType === EventType.ACCOUNT_REMOVED
)
)
.subscribe((result: EventMessage) => {
if (this.authService.instance.getAllAccounts().length === 0) {
window.location.pathname = '/';
} else {
this.setLoginDisplay();
}
});

this.msalBroadcastService.inProgress$
.pipe(
filter(
(status: InteractionStatus) => status === InteractionStatus.None
),
takeUntil(this._destroying$)
)
.subscribe(() => {
this.setLoginDisplay();
this.checkAndSetActiveAccount();
});
}

ngAfterViewInit(): void {
let this$ = this;

if (window.location.hash == '#/' || window.location.hash.length == 0) {
this.displayContentService.hideContent();
this.router.navigate([
'/',
window.location.hash.replace('/', '').replace('#', ''),
]);
}

this.displayContentService.displayContentObservable$.subscribe({
next(flag) {
if (flag == 'hide') {
this$.isContentShown = false;
} else {
this$.isContentShown = true;
}
},
});
}
setLoginDisplay() {
this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
}
checkAndSetActiveAccount() {
/**
* If no active account set but there are accounts signed in, sets first account to active account
* To use active account set here, subscribe to inProgress$ first in your component
* Note: Basic usage demonstrated. Your app may require more complicated account selection logic
*/
let activeAccount = this.authService.instance.getActiveAccount();

if (
!activeAccount &&
this.authService.instance.getAllAccounts().length > 0
) {
let accounts = this.authService.instance.getAllAccounts();
this.authService.instance.setActiveAccount(accounts[0]);
}
}
loginRedirect() {
if (this.msalGuardConfig.authRequest) {
this.authService.loginRedirect({
...this.msalGuardConfig.authRequest,
} as RedirectRequest);
} else {
this.authService.loginRedirect();
}
}

logout(popup?: boolean) {
if (popup) {
this.authService.logoutPopup({
mainWindowRedirectUri: '/',
});
} else {
this.authService.logoutRedirect();
}
}

ngOnDestroy(): void {
this._destroying$.next(undefined);
this._destroying$.complete();
}
toggleContent(flag: string) {
if (flag == 'hide') {
this.isContentShown = false;
} else {
this.isContentShown = true;
}
}
back(): void {
this.history.pop();
if (this.history.length > 0) {
this.angularLocation.back();
} else {
this.router.navigate([this.angularLocation.path()]);
}
}
}
8 changes: 4 additions & 4 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { VolunteerStartComponent } from './volunteer-start/volunteer-start.compo
import { ContactUsComponent } from './contact-us/contact-us.component';
import { NgbCarouselModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { PdfViewerModule } from 'ng2-pdf-viewer';

import { LandingComponent } from './landing/landing.component';
import { HubComponent } from './hub/hub.component';

import { PrivacyPolicyComponent } from './privacy-policy/privacy-policy.component';
Expand Down Expand Up @@ -47,8 +47,7 @@ const isIE =
window.navigator.userAgent.indexOf('MSIE ') > -1 ||
window.navigator.userAgent.indexOf('Trident/') > -1; // Remove this line to use Angular Universal

export function loggerCallback(logLevel: LogLevel, message: string) {
}
export function loggerCallback(logLevel: LogLevel, message: string) {}

export function MSALInstanceFactory(): IPublicClientApplication {
return new PublicClientApplication({
Expand Down Expand Up @@ -111,6 +110,7 @@ export function MSALGuardConfigFactory(): MsalGuardConfiguration {
CookiePolicyComponent,
SlaveryPolicyComponent,
OrganizationCarouselComponent,
LandingComponent,
],
imports: [
BrowserModule,
Expand Down Expand Up @@ -144,6 +144,6 @@ export function MSALGuardConfigFactory(): MsalGuardConfiguration {
MsalGuard,
MsalBroadcastService,
],
bootstrap: [AppComponent, MsalRedirectComponent, HomeComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
2 changes: 1 addition & 1 deletion src/app/cookie-policy/cookie-policy.component.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="container-fluid">
<a [routerLink]="'/'" (click)="showContent()">Back to Site ...</a>
<a [routerLink]="'/'">Back to Site ...</a>
<div class="row">
<h1>Cookie Policy</h1>
</div>
Expand Down
Loading

0 comments on commit d19deae

Please sign in to comment.