Adds pages: /terms-of-service, /privacy-policy

dmp-frontend/src/app/app-routing.module.ts

@@ -93,6 +93,22 @@ const appRoutes: Routes = [
 			title: 'GENERAL.TITLES.DATASET-PROFILES'
 		}
 	},
+	{
+		path: 'privacy-policy',
+		loadChildren: () => import('./ui/sidebar/sidebar-footer/privacy/privacy.module').then(m => m.PrivacyModule),
+		data: {
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.PRIVACY'
+		}
+	},
+	{
+		path: 'terms-of-service',
+		loadChildren: () => import('./ui/sidebar/sidebar-footer/terms/terms.module').then(m => m.TermsModule),
+		data: {
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.TERMS'
+		}
+	},
 	{
 		path: 'home',
 		loadChildren: () => import('./ui/dashboard/dashboard.module').then(m => m.DashboardModule),

dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html

@@ -58,7 +58,7 @@
 							<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.LEVEL-OF-ACCESS' | translate}}">
 								settings
 							</mat-icon>
-							<h4 class="mt-1 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4>
+							<h4 class="mt-1 ml-1 mr-3 p-1 role">{{roleDisplay(dmp.users).toUpperCase()}}</h4>
 						</div>
 						<div class="col-auto about-item">
 							<a class="datasets-counter" [routerLink]="['/plans/edit/' + dmp.id]" [queryParams]="{ tab: 'datasetDescriptions' }">

dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss

@@ -106,3 +106,7 @@ p {
   left: 50%;
   margin: -5px 0px 0px -5px;
 }
+
+.role {
+	min-width: 74px;
+}

dmp-frontend/src/app/ui/sidebar/sidebar-footer/privacy/privacy.component.html

@@ -0,0 +1,12 @@
+<div class="container privacy-component">
+	<div class="row">
+		<div class="col-md-12">
+			<h1>{{ 'PRIVACY-POLICY.TITLE' | translate}}</h1>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-md-12">
+			<p>{{ 'PRIVACY-POLICY.MAIN-CONTENT' | translate}}</p>
+		</div>
+	</div>
+</div>

dmp-frontend/src/app/ui/sidebar/sidebar-footer/privacy/privacy.component.scss

@@ -0,0 +1,12 @@
+h1 {
+	text-align: center;
+}
+
+img {
+	height: 150px;
+	width: 100%;
+}
+
+.privacy-component {
+	margin-top: 80px;
+}

dmp-frontend/src/app/ui/sidebar/sidebar-footer/privacy/privacy.component.ts

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

dmp-frontend/src/app/ui/sidebar/sidebar-footer/privacy/privacy.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { PrivacyComponent } from './privacy.component';
+import { PrivacyRoutingModule } from './privacy.routing';
+import { CommonUiModule } from '../../../../common/ui/common-ui.module';
+
+@NgModule({
+  imports: [
+	CommonUiModule,
+	PrivacyRoutingModule
+  ],
+  declarations: [
+	PrivacyComponent
+  ]
+})
+export class PrivacyModule { }

dmp-frontend/src/app/ui/sidebar/sidebar-footer/privacy/privacy.routing.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { PrivacyComponent } from './privacy.component';
+
+const routes: Routes = [
+	{
+		path: '',
+		component: PrivacyComponent,
+	},
+];
+
+@NgModule({
+	imports: [RouterModule.forChild(routes)],
+	exports: [RouterModule]
+})
+export class PrivacyRoutingModule { }

dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css

@@ -1,27 +1,31 @@
 .sidebar-footer {
-  padding: white;
+	padding: white;
-  color: rgb(117, 117, 117);
+	color: rgb(117, 117, 117);
-  /* background-color: #ffffff; */
+	background-color: #3333333d;
-  /* box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); */
+	/* background-color: #ffffff; */
+	/* box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); */
 }
 
 .sidebar-footer .option {
-  margin: 0px;
+	margin: 0px;
-  padding-top: 2px;
+	padding-top: 2px;
-  padding-bottom: 2px;
+	padding-bottom: 2px;
-  padding-right: 10px;
+	border-radius: 0px;
-  border-radius: 0px;
+	color: white;
-  color: white;
+	cursor: pointer;
-  cursor: pointer;
+	display: inline-flex;
-  display: inline-flex;
+	font-size: small;
 }
 
 .sidebar-footer :hover {
-  color: #00b29f;
+	color: #00b29f;
 }
 
 .sidebar-footer .vl {
-  border-right: 1px solid #d4d4d4;
+	border-right: 1px solid #d4d4d4;
-  color: white;
+	color: white;
 }
 
+.option-active {
+	color: #00b29f !important;
+}

dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html

@@ -1,4 +1,4 @@
-<div class="sidebar-footer  row col-12">
+<div class="sidebar-footer col-12">
 	<!-- <div class="sidebar-footer d-flex justify-content-around">
 		<a class="option vl" href="#">
 			<i class="material-icons style-icon">mode_comment</i>
@@ -7,13 +7,33 @@
 		<a class="option vl" href="#"><i class="fa fa-book style-icon"></i>Guide</a>
 		<a class="option" href="#"><i class="fa fa-life-ring style-icon"></i>Help</a>
 	</div> -->
-	<div class="col-6 text-center">
+	<div class="row d-flex flex-reverse">
-		<p class="option" (click)="openGlossaryDialog()"><i class="fa fa-book pr-2"></i>{{'FOOTER.GLOSSARY' | translate}}</p>
+		<div class="col-auto text-center">
+			<p class="option" (click)="openGlossaryDialog()">
+				<!-- <i class="fa fa-book pr-2 pt-1"></i> -->
+				{{'FOOTER.GLOSSARY' | translate}}</p>
+		</div>
+		<div class="col-auto text-center">
+			<p class="option" (click)="openFaqDialog()">
+				<!-- <i class="fa fa-question-circle pr-2 pt-1"></i> -->
+				{{'FOOTER.FAQ' | translate}}</p>
+		</div>
+		<div class="col-auto text-center">
+			<p class="option" (click)="openContactDialog()">
+				<!-- <i class="fa fa-envelope-open pr-2 pt-1"></i> -->
+				{{'FOOTER.CONTACT-SUPPORT' | translate}}</p>
+		</div>
 	</div>
-	<div class="col-6 text-center">
+	<div class="row d-flex flex-reverse">
-		<p class="option" (click)="openFaqDialog()"><i class="fa fa-question-circle pr-2"></i>{{'FOOTER.FAQ' | translate}}</p>
+		<div class="col-auto text-center">
-	</div>
+			<a class="option" [routerLink]="['/terms-of-service']" [routerLinkActive]="['option-active']">
-	<div class="col-12 text-center">
+				<!-- <i class="fa fa-balance-scale pr-2 pt-1"></i> -->
-		<p class="option" (click)="openContactDialog()"><i class="fa fa-envelope-open pr-2"></i>{{'FOOTER.CONTACT-SUPPORT' | translate}}</p>
+				{{'FOOTER.TERMS-OF-SERVICE' | translate}}</a>
+		</div>
+		<div class="col-auto text-center">
+			<a class="option" [routerLink]="['/privacy-policy']" [routerLinkActive]="['option-active']">
+				<!-- <i class="fa fa-user-secret pr-2 pt-1"></i> -->
+				{{'FOOTER.PRIVACY-POLICY' | translate}}</a>
+		</div>
 	</div>
 </div>

dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts

@@ -42,7 +42,7 @@ export class SidebarFooterComponent extends BaseComponent implements OnInit {
 		}
 		else {
 			const dialogRef = this.dialog.open(ContactDialogComponent, {
-				width: '400px',
+				width: '550px',
 				disableClose: true,
 				data: this.formGroup
 			});

dmp-frontend/src/app/ui/sidebar/sidebar-footer/terms/terms.component.html

@@ -0,0 +1,12 @@
+<div class="container terms-component">
+	<div class="row">
+		<div class="col-md-12">
+			<h1>{{ 'TERMS-OF-SERVICE.TITLE' | translate}}</h1>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-md-12">
+			<p>{{ 'TERMS-OF-SERVICE.MAIN-CONTENT' | translate}}</p>
+		</div>
+	</div>
+</div>

dmp-frontend/src/app/ui/sidebar/sidebar-footer/terms/terms.component.scss

@@ -0,0 +1,12 @@
+h1 {
+	text-align: center;
+}
+
+img {
+	height: 150px;
+	width: 100%;
+}
+
+.terms-component {
+	margin-top: 80px;
+}

dmp-frontend/src/app/ui/sidebar/sidebar-footer/terms/terms.component.ts

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

dmp-frontend/src/app/ui/sidebar/sidebar-footer/terms/terms.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { TermsComponent } from './terms.component';
+import { TermsRoutingModule } from './terms.routing';
+import { CommonUiModule } from '../../../../common/ui/common-ui.module';
+
+@NgModule({
+	imports: [
+		CommonUiModule,
+		TermsRoutingModule
+	],
+	declarations: [
+		TermsComponent
+	],
+})
+export class TermsModule { }

dmp-frontend/src/app/ui/sidebar/sidebar-footer/terms/terms.routing.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { TermsComponent } from './terms.component';
+
+const routes: Routes = [
+	{
+		path: '',
+		component: TermsComponent,
+	},
+];
+
+@NgModule({
+	imports: [RouterModule.forChild(routes)],
+	exports: [RouterModule]
+})
+export class TermsRoutingModule { }

dmp-frontend/src/assets/i18n/en.json

@@ -74,6 +74,8 @@
 			"PREFIX": "Open DMP - ",
 			"GENERAL": "Data Management Plans Creator",
 			"ABOUT": "About",
+			"PRIVACY": "Privacy Policy",
+			"TERMS": "Terms Of Service",
 			"PLANS": "My DMPs",
 			"EXPLORE-PLANS": "Published DMPs",
 			"QUICK-WIZARD": "New DMP (Wizard)",
@@ -947,7 +949,9 @@
 	"FOOTER": {
 		"CONTACT-SUPPORT": "Contact Support",
 		"FAQ": "FAQ",
-		"GLOSSARY": "Glossary"
+		"GLOSSARY": "Glossary",
+		"TERMS-OF-SERVICE": "Terms Of Service",
+		"PRIVACY-POLICY": "Privacy Policy"
 	},
 	"GLOSSARY": {
 		"TITLE": "Glossary",
@@ -957,6 +961,14 @@
 		"TITLE": "FAQ",
 		"CLOSE": "Close"
 	},
+	"PRIVACY-POLICY": {
+		"TITLE": "-Privacy Policy-",
+		"MAIN-CONTENT": ""
+	},
+	"TERMS-OF-SERVICE": {
+		"TITLE": "-Terms Of Service-",
+		"MAIN-CONTENT": ""
+	},
 	"CONTACT": {
 		"SUPPORT": {
 			"TITLE": "Contact Support",