From 9d797704bd01947a14802864d96118a6f7d8f48e Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Fri, 7 Sep 2018 15:19:13 -0700
Subject: [PATCH 1/5] SHIBUI-811 Implemented customizable theme

---
 ui/src/app/app.brand.ts                | 44 ++++++++++++++++++++++++++
 ui/src/app/app.component.html          | 23 ++++++++------
 ui/src/app/app.component.ts            |  6 ++++
 ui/src/app/core/model/brand.ts         | 29 +++++++++++++++++
 ui/src/app/shared/pipe/replace.pipe.ts | 10 ++++++
 ui/src/app/shared/shared.module.ts     |  5 ++-
 ui/src/brand.scss                      | 31 ++++++++++++++++++
 ui/src/brand.ts                        | 21 ++++++++++++
 ui/src/theme/_palette.scss             | 26 ++++++++-------
 9 files changed, 172 insertions(+), 23 deletions(-)
 create mode 100644 ui/src/app/app.brand.ts
 create mode 100644 ui/src/app/core/model/brand.ts
 create mode 100644 ui/src/app/shared/pipe/replace.pipe.ts
 create mode 100644 ui/src/brand.scss
 create mode 100644 ui/src/brand.ts

diff --git a/ui/src/app/app.brand.ts b/ui/src/app/app.brand.ts
new file mode 100644
index 000000000..a17c34cc0
--- /dev/null
+++ b/ui/src/app/app.brand.ts
@@ -0,0 +1,44 @@
+import { brand as customBrand } from '../brand';
+import { Brand } from './core/model/brand';
+
+export const brand: Brand = {
+    header: {
+        title: 'Source Management'
+    },
+    logo: {
+        default: '/assets/shibboleth_logowordmark_color.png',
+        small: '/assets/shibboleth_icon_color_130x130.png',
+        large: '/assets/shibboleth_logowordmark_color.png',
+        alt: 'Shibboleth Logo - Click to be directed to www.shibboleth.net',
+        link: {
+            label: 'Shibboleth',
+            url: 'https://www.shibboleth.net/'
+        }
+    },
+    footer: {
+        links: [
+            {
+                label: 'Home Page',
+                url: 'https://www.shibboleth.net/',
+                description: 'Shibboleth.net open-source community home page'
+            },
+            {
+                label: 'Wiki',
+                url: 'https://wiki.shibboleth.net/',
+                description: 'Shibboleth.net open-source community wiki'
+            },
+            {
+                label: 'Issue Tracker',
+                url: 'https://issues.shibboleth.net/',
+                description: 'Shibboleth.net open-source community issue tracker'
+            },
+            {
+                label: 'Mailing List',
+                url: 'https://www.shibboleth.net/community/lists/',
+                description: 'Shibboleth.net open-source community mailing list'
+            }
+        ],
+        text: 'Links to Shibboleth resources:'
+    },
+    ...customBrand
+};
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 17b5742e3..694a691ab 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -1,10 +1,10 @@
 <!--The content below is only a placeholder and can be replaced.-->
 <nav class="navbar navbar-expand-md fixed-top">
-    <a class="navbar-brand" href="https://www.shibboleth.net/" target="_blank">
-        <img src="/assets/shibboleth_icon_color_130x130.png" width="30" height="30" class="d-inline-block align-top" alt="Shibboleth Logo - Click to be directed to www.shibboleth.net">
-        <span class="d-lg-inline d-none">Shibboleth</span>
+    <a class="navbar-brand" [href]="brand.logo.link.url" target="_blank" [title]="brand.logo.link.description">
+        <img [src]="brand.logo.small" width="30" height="30" class="d-inline-block align-top" [alt]="brand.logo.alt">
+        <span class="d-lg-inline d-none">{{ brand.logo.link.label }}</span>
     </a>
-    <span class="navbar-text" i18n="@@label--app">Source Management</span>
+    <span class="navbar-text" i18n="@@label--app">{{ brand.header.title }}</span>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar"
             aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -66,11 +66,12 @@
     <div class="row">
         <div class="col-md-8 copyright">
             <ul class="list-inline">
-                <li class="list-inline-item" i18n="@@link--links-to-shibboleth-resources">Links to Shibboleth resources:</li>
-                <li class="list-inline-item"><a href="https://www.shibboleth.net/" target="_blank" i18n="@@link--home-page" aria-label="Shibboleth.net open-source community home page">Home Page</a></li>
-                <li class="list-inline-item"><a href="https://wiki.shibboleth.net/" target="_blank" i18n="@@link--wiki" aria-label="Shibboleth.net open-source community wiki">Wiki</a></li>
-                <li class="list-inline-item"><a href="https://issues.shibboleth.net/" target="_blank" i18n="@@link--issue-tracker" aria-label="Shibboleth.net open-source community issue tracker">Issue Tracker</a></li>
-                <li class="list-inline-item"><a href="https://www.shibboleth.net/community/lists/" target="_blank" i18n="@@link--mailing-list" aria-label="Shibboleth.net open-source community mailing list">Mailing List</a></li>
+                <li class="list-inline-item">{{ brand.footer.text }}</li>
+                <li class="list-inline-item" *ngFor="let link of brand.footer.links">
+                    <a [href]="link.url" target="_blank" [attr.aria-label]="link.description" [title]="link.description">
+                        {{ link.label }}
+                    </a>
+                </li>
             </ul>
             <p>
                 <ng-container *ngIf="version$ | async">
@@ -81,7 +82,9 @@
             </p>
         </div>
         <div class="col-md-4 logo">
-            <a href="https://www.shibboleth.net/" target="_blank"><img src="/assets/shibboleth_logowordmark_color.png" class="img-fluid float-right" alt="Shibboleth Logo - Click to be directed to www.shibboleth.net"></a>
+            <a [href]="brand.logo.link.url" target="_blank" [title]="brand.logo.link.label">
+                <img [src]="brand.logo.default" class="img-fluid float-right" [alt]="brand.logo.alt">
+            </a>
         </div>
     </div>
 </footer>
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
index f3e44f399..8f011a533 100644
--- a/ui/src/app/app.component.ts
+++ b/ui/src/app/app.component.ts
@@ -7,6 +7,9 @@ import { Store } from '@ngrx/store';
 import * as fromRoot from './core/reducer';
 import { VersionInfo } from './core/model/version';
 import { VersionInfoLoadRequestAction } from './core/action/version.action';
+
+import { brand } from './app.brand';
+import { Brand } from './core/model/brand';
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
@@ -18,6 +21,9 @@ export class AppComponent implements OnInit {
     version: string;
     formatted$: Observable<string>;
     today = new Date();
+    year = new Date().getFullYear();
+
+    brand: Brand = brand;
 
     formatter = v => v && v.build ? `${v.build.version}-${v.git.commit.id}` : '';
 
diff --git a/ui/src/app/core/model/brand.ts b/ui/src/app/core/model/brand.ts
new file mode 100644
index 000000000..2713957e3
--- /dev/null
+++ b/ui/src/app/core/model/brand.ts
@@ -0,0 +1,29 @@
+export interface Brand {
+    logo: Logo;
+    footer: Footer;
+    header: Header;
+}
+
+export interface Header {
+    title: string;
+}
+
+export interface Logo {
+    default: string;
+    small: string;
+    large: string;
+    alt: string;
+    link: Link;
+    [propName: string]: any;
+}
+
+export interface Footer {
+    links: Link[];
+    text: string;
+}
+
+export interface Link {
+    label: string;
+    url: string;
+    description?: string;
+}
diff --git a/ui/src/app/shared/pipe/replace.pipe.ts b/ui/src/app/shared/pipe/replace.pipe.ts
new file mode 100644
index 000000000..16fd97ce3
--- /dev/null
+++ b/ui/src/app/shared/pipe/replace.pipe.ts
@@ -0,0 +1,10 @@
+import { PipeTransform, Pipe } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({ name: 'replace' })
+export class ReplacePipe implements PipeTransform {
+    constructor(public sanitizer: DomSanitizer) { }
+    transform(value: string, query: { [propName: string]: string }): SafeHtml {
+        return '';
+    }
+}
diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts
index 1c148a5ea..db0bdb213 100644
--- a/ui/src/app/shared/shared.module.ts
+++ b/ui/src/app/shared/shared.module.ts
@@ -11,6 +11,7 @@ import { InfoLabelDirective } from './directive/info-label.directive';
 import { PrettyXml } from './pipe/pretty-xml.pipe';
 import { ToggleSwitchComponent } from './switch/switch.component';
 import { ContenteditableDirective } from './contenteditable/contenteditable.directive';
+import { ReplacePipe } from './pipe/replace.pipe';
 
 @NgModule({
     imports: [
@@ -28,6 +29,7 @@ import { ContenteditableDirective } from './contenteditable/contenteditable.dire
         ValidFormIconComponent,
         InfoLabelDirective,
         PrettyXml,
+        ReplacePipe,
         ContenteditableDirective
     ],
     exports: [
@@ -42,7 +44,8 @@ import { ContenteditableDirective } from './contenteditable/contenteditable.dire
         ValidFormIconComponent,
         ValidationClassDirective,
         InfoLabelDirective,
-        ContenteditableDirective
+        ContenteditableDirective,
+        ReplacePipe
     ]
 })
 export class SharedModule { }
diff --git a/ui/src/brand.scss b/ui/src/brand.scss
new file mode 100644
index 000000000..874fb4337
--- /dev/null
+++ b/ui/src/brand.scss
@@ -0,0 +1,31 @@
+//
+// Color system
+// Override these colors by uncommenting them and changing the value.
+//
+
+// $white:  #FFF;
+// $gray-100: #f8f9fa;
+// $gray-200: #e9ecef;
+// $gray-300: #dee2e6;
+// $gray-400: #ced4da;
+// $gray-500: #adb5bd;
+// $gray-600: #868e96;
+// $gray-700: #495057;
+// $gray-800: #343a40;
+// $gray-900: #212529;
+// $black:  #000;
+
+// $blue:    #00355f;
+// $light-blue: #007db1;
+// $indigo:  #6610f2;
+// $purple:  #6f42c1;
+// $pink:    #e83e8c;
+// $red:     #d3190f;
+// $orange:  #fd7e14;
+// $yellow:  #ffc107;
+// $green:   #498500;
+// $teal:    #20c997;
+// $cyan:    #17a2b8;
+
+// $dark-grey: #666666;
+// $light-grey: #EEEEEE;
diff --git a/ui/src/brand.ts b/ui/src/brand.ts
new file mode 100644
index 000000000..2ceffe5af
--- /dev/null
+++ b/ui/src/brand.ts
@@ -0,0 +1,21 @@
+/*
+export const brand = {
+    logo: {
+        default: '',
+        small: '',
+        large: ''
+    },
+    footer: {
+        links: [
+            {
+                label: '',
+                url: ''
+            }
+        ],
+        text: '',
+        copyright: ''
+    }
+};
+*/
+
+export const brand = {};
diff --git a/ui/src/theme/_palette.scss b/ui/src/theme/_palette.scss
index 4a8adb95a..640b15603 100644
--- a/ui/src/theme/_palette.scss
+++ b/ui/src/theme/_palette.scss
@@ -14,18 +14,6 @@ $gray-800: #343a40;
 $gray-900: #212529;
 $black:  #000;
 
-$grays: (
-  100: $gray-100,
-  200: $gray-200,
-  300: $gray-300,
-  400: $gray-400,
-  500: $gray-500,
-  600: $gray-600,
-  700: $gray-700,
-  800: $gray-800,
-  900: $gray-900
-);
-
 $blue:    #00355f;
 $light-blue: #007db1;
 $indigo:  #6610f2;
@@ -41,6 +29,20 @@ $cyan:    #17a2b8;
 $dark-grey: #666666;
 $light-grey: #EEEEEE;
 
+@import "../brand";
+
+$grays: (
+  100: $gray-100,
+  200: $gray-200,
+  300: $gray-300,
+  400: $gray-400,
+  500: $gray-500,
+  600: $gray-600,
+  700: $gray-700,
+  800: $gray-800,
+  900: $gray-900
+);
+
 $colors: (
   blue: $blue,
   indigo: $indigo,

From 05963ad163b067fcf65d6e237968891090c778a2 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Mon, 10 Sep 2018 12:02:11 -0700
Subject: [PATCH 2/5] SHIBUI-811 Added documentation for changing theme

---
 ui/README.md               | 60 ++++++++++++++++++++++++++++++++++++++
 ui/src/brand.scss          | 13 +++++++++
 ui/src/theme/_palette.scss | 26 ++++++++++++-----
 3 files changed, 91 insertions(+), 8 deletions(-)

diff --git a/ui/README.md b/ui/README.md
index a24915b12..172506219 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -30,6 +30,66 @@ For Providers and Filters, the forms in SHIB-UI are built based on the standard
 
 [Bootstrap](http://getbootstrap.com/) 4 is used for the css framework in SHIB-UI, and provides our base theme, a responsive grid system, consistent styling across all major browsers, and pre-styled components which are connected to Angular using ng-bootstrap, a 3rd party framework.
 
+# Customizing UI
+
+Within the `ui > src` folder, there are two files which can be used to customize the user interface quickly.
+
+### Color Scheme
+The `Brand.scss` contains the palette information used by bootstrap to color the user interface buttons and other components. Uncomment the color you wish to override and change the hex value accordingly and rebuild the user interface.
+
+For example:
+
+`// $blue: #00355f;`
+
+change to...
+
+`$blue: #0000FF;`
+
+If you wish to change the __"primary"__ color or any other mapping according to Bootstrap's conventions, there is a block of mappings at the bottom of the `Brand.scss` file to accomodate this as well. Uncomment and change the value allocated to the corresponding aspect of the theme you wish to change.
+
+The supported values are:
+
+`$brand-primary: $blue;` - The primary color used throughout the site. Default: dark blue.
+
+`$brand-secondary: $gray-700;` - An accept color used throughout the site. Default: dark gray.
+
+`$brand-success: $green;` - Indicates success or some other positive action. Default: green.
+
+`$brand-info: $light-blue;` - Indicates some sort of informative text or action for the user. Default: light blue.
+
+`$brand-warning: $yellow;` - Indicates a warning to the user. Default: yellow.
+
+`$brand-danger: $red;` - Indicates a dangerous action or error. Default: red.
+
+`$brand-light: $light-grey;` - Color used for accents, text, etc throughout application. Default: light grey.
+
+`$brand-dark: $dark-grey;` - Color used for accents, text, etc throughout application. Default: dark grey.
+
+### Logos / Footer
+The `Brand.ts` contains the links, text, and image paths to modify the logos, text, and links found within the header and footer. Override the values within this Typescript file and rebuild the user interface to view changes.
+
+For example:
+
+`export const brand = {};`
+
+change to...
+
+`export const brand = {
+    header: 'Metadata Management'
+};`
+
+### Sitewide text
+Finally, this project has support for internationalization (i18n). In the folder `backend > src > main > resources > i18n` folder there is a group of files which can be used to modify the text seen throughout the application. In order to change the default value, you can override the text in the messages_en file with the desired text.
+
+For example:
+
+`action.logout=Logout`
+
+change to...
+
+`action.logout=Sign Out`
+
+
 # Development
 
 ## Scaffolding
diff --git a/ui/src/brand.scss b/ui/src/brand.scss
index 874fb4337..d94e75b5c 100644
--- a/ui/src/brand.scss
+++ b/ui/src/brand.scss
@@ -29,3 +29,16 @@
 
 // $dark-grey: #666666;
 // $light-grey: #EEEEEE;
+
+/*
+*** Brand definitions
+*/
+
+// $brand-primary: $blue;
+$brand-secondary: $gray-700;
+$brand-success: $green;
+$brand-info: $light-blue;
+$brand-warning: $yellow;
+$brand-danger: $red;
+$brand-light: $light-grey;
+$brand-dark: $dark-grey;
diff --git a/ui/src/theme/_palette.scss b/ui/src/theme/_palette.scss
index 640b15603..b0ecdfba8 100644
--- a/ui/src/theme/_palette.scss
+++ b/ui/src/theme/_palette.scss
@@ -29,6 +29,16 @@ $cyan:    #17a2b8;
 $dark-grey: #666666;
 $light-grey: #EEEEEE;
 
+
+$brand-primary: $blue;
+$brand-secondary: $gray-700;
+$brand-success: $green;
+$brand-info: $light-blue;
+$brand-warning: $yellow;
+$brand-danger: $red;
+$brand-light: $light-grey;
+$brand-dark: $dark-grey;
+
 @import "../brand";
 
 $grays: (
@@ -60,14 +70,14 @@ $colors: (
 );
 
 $theme-colors: (
-  primary: $blue,
-  secondary: $gray-700,
-  success: $green,
-  info: $light-blue,
-  warning: $yellow,
-  danger: $red,
-  light: $light-grey,
-  dark: $dark-grey
+  primary: $brand-primary,
+  secondary: $brand-secondary,
+  success: $brand-success,
+  info: $brand-info,
+  warning: $brand-warning,
+  danger: $brand-danger,
+  light: $brand-light,
+  dark: $brand-dark
 );
 
 // Set a specific jump point for requesting color jumps

From cd0ff8fe3e32fb8d005989ce0db8579981dd1d4c Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Mon, 10 Sep 2018 12:18:10 -0700
Subject: [PATCH 3/5] commented out colors

---
 ui/src/brand.scss | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/ui/src/brand.scss b/ui/src/brand.scss
index d94e75b5c..71b60f991 100644
--- a/ui/src/brand.scss
+++ b/ui/src/brand.scss
@@ -35,10 +35,10 @@
 */
 
 // $brand-primary: $blue;
-$brand-secondary: $gray-700;
-$brand-success: $green;
-$brand-info: $light-blue;
-$brand-warning: $yellow;
-$brand-danger: $red;
-$brand-light: $light-grey;
-$brand-dark: $dark-grey;
+// $brand-secondary: $gray-700;
+// $brand-success: $green;
+// $brand-info: $light-blue;
+// $brand-warning: $yellow;
+// $brand-danger: $red;
+// $brand-light: $light-grey;
+// $brand-dark: $dark-grey;

From deb41132bc66a11d327fe753e4b329bd0d73c40c Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Mon, 10 Sep 2018 12:42:06 -0700
Subject: [PATCH 4/5] SHIBUI-811 Updated colors to use brand

---
 ui/src/app/metadata/manager/container/manager.component.scss | 4 ++--
 ui/src/app/shared/switch/switch.component.scss               | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/src/app/metadata/manager/container/manager.component.scss b/ui/src/app/metadata/manager/container/manager.component.scss
index be974d8a3..4c063a6a6 100644
--- a/ui/src/app/metadata/manager/container/manager.component.scss
+++ b/ui/src/app/metadata/manager/container/manager.component.scss
@@ -6,10 +6,10 @@
     }
 
     .nav-tabs, .nav-link.active {
-        border-color: $blue;
+        border-color: $brand-primary;
     }
 
     .nav-link:hover {
-        border-bottom-color: $blue;
+        border-bottom-color: $brand-primary;
     }
 }
\ No newline at end of file
diff --git a/ui/src/app/shared/switch/switch.component.scss b/ui/src/app/shared/switch/switch.component.scss
index db1d8b0e4..0571b7ce9 100644
--- a/ui/src/app/shared/switch/switch.component.scss
+++ b/ui/src/app/shared/switch/switch.component.scss
@@ -7,8 +7,8 @@
 
     $transition-duration: 400ms;
 
-    $off-color: $red;
-    $on-color: $light-blue;
+    $off-color: $brand-danger;
+    $on-color: $brand-info;
 
     $distance: 26px;
 

From 86ba4eadc70ad7c646939f63927790d59d42375b Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Tue, 11 Sep 2018 13:14:55 -0700
Subject: [PATCH 5/5] SHIBUI-811

---
 ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/README.md b/ui/README.md
index 172506219..0e52b0fc9 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -66,7 +66,7 @@ The supported values are:
 `$brand-dark: $dark-grey;` - Color used for accents, text, etc throughout application. Default: dark grey.
 
 ### Logos / Footer
-The `Brand.ts` contains the links, text, and image paths to modify the logos, text, and links found within the header and footer. Override the values within this Typescript file and rebuild the user interface to view changes.
+The `Brand.ts` contains the links, text, and image paths to modify the logos, text, and links found within the header and footer. Override the values within this Typescript file and rebuild the user interface to view changes. If the local server should host these files, they should be added to the assets folder.
 
 For example: