From 863237d282f9988e83c6d20df944b84fbd15e85c Mon Sep 17 00:00:00 2001
From: Chris Hickingbottom <developer.hickingbottom@gmail.com>
Date: Tue, 24 Jan 2023 10:43:39 -0600
Subject: [PATCH] Update to add demo for class changes and style changes (#40)

* update to add demo for class changes and style changes;

Authored-by: Christopher Hickingbottom <chris@vantageworx.com>
---
 .gitignore                               |  2 +
 src/App.svelte                           | 58 +++++++++++++++++++-----
 src/components/LoginButton.svelte        |  2 +-
 src/components/LogoutButton.svelte       |  6 ++-
 src/components/RefreshTokenButton.svelte |  4 +-
 5 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/.gitignore b/.gitignore
index a95311b..273983c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,5 @@
 cypress/videos
 cypress/screenshots
 /public/bundle.*
+
+.idea
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
index 94a6df5..dc5830f 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -12,11 +12,21 @@ import {
   accessToken,
   isAuthenticated,
   isLoading,
-  login,
-  logout,
-  refreshToken,
   userInfo,
 } from './components/components.module.js';
+
+let styles = ""
+let classes = ""
+const changeColor = (event) => {
+  classes = ''
+  styles = 'background-color: ' + event.target.value + ';'
+}
+
+const addClass = () => {
+  classes = 'red'
+}
+
+
 </script>
 
 <svelte:head>
@@ -30,21 +40,45 @@ import {
   redirect_uri="process.env.OIDC_REDIRECT_URI"
   post_logout_redirect_uri="process.env.OIDC_POST_LOGOUT_REDIRECT_URI"
 >
-  <LoginButton>Login</LoginButton>
-  <LogoutButton>Logout</LogoutButton>
-  <RefreshTokenButton>refreshToken</RefreshTokenButton>
-  <table>
-    <thead>
+  <div class="row">
+    <div class="col s12 m6">
+      <LoginButton styles="{styles}" classes="{classes}">Login</LoginButton>
+      <LogoutButton styles="{styles}" classes="{classes}">Logout</LogoutButton>
+      <RefreshTokenButton styles="{styles}" classes="{classes}">refreshToken</RefreshTokenButton>
+    </div>
+    <div class="col s12 m6">
+      <div class="row">
+          <input
+                  type="color"
+                  id="login-btn-color"
+                  name="login-btn-color"
+                  value="#26a69a"
+                  on:change={changeColor}
+          />
+          <label for="login-btn-color">Change Button Colors via styles</label>
+      </div>
+      <div class="row">
+        <button class="btn" on:click={addClass}>Change Button Colors via class attribute</button>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+
+  </div>
+  <div class="row">
+    <table>
+      <thead>
       <tr><th style="width: 20%;">store</th><th style="width: 80%;">value</th></tr>
-    </thead>
-    <tbody>
+      </thead>
+      <tbody>
       <tr><td>isLoading</td><td>{$isLoading}</td></tr>
       <tr><td>isAuthenticated</td><td>{$isAuthenticated}</td></tr>
       <tr><td>accessToken</td><td style="word-break: break-all;">{$accessToken}</td></tr>
       <tr><td>idToken</td><td style="word-break: break-all;">{$idToken}</td></tr>
       <tr><td>userInfo</td><td><Highlight language={json} code={JSON.stringify($userInfo, null, 2) || ''} /></td></tr>
       <tr><td>authError</td><td>{$authError}</td></tr>
-    </tbody>
-  </table>
+      </tbody>
+    </table>
+  </div>
 </OidcContext>
 </div>
\ No newline at end of file
diff --git a/src/components/LoginButton.svelte b/src/components/LoginButton.svelte
index 03ad86d..fff8a42 100644
--- a/src/components/LoginButton.svelte
+++ b/src/components/LoginButton.svelte
@@ -13,4 +13,4 @@
     export let styles = ''
 </script>
 
-<button class="btn {classes}" style="{styles}" on:click|preventDefault='{() => login(oidcPromise, preserveRoute, callback_url) }'><slot></slot></button>
+<button class="btn {classes}" style="{styles}" on:click|preventDefault='{() => login(oidcPromise, preserveRoute, callback_url) }'><slot></slot></button>
\ No newline at end of file
diff --git a/src/components/LogoutButton.svelte b/src/components/LogoutButton.svelte
index 6ab52a9..6a837e0 100644
--- a/src/components/LogoutButton.svelte
+++ b/src/components/LogoutButton.svelte
@@ -10,6 +10,10 @@
     export let logout_url = getContext(OIDC_CONTEXT_POST_LOGOUT_REDIRECT_URI)
     export let classes = ''
     export let styles = ''
+
+    const changeColor = (event) => {
+        styles = 'background-color: ' + event.target.value
+    }
 </script>
 
-<button class="btn {classes}" style="{styles} on:click|preventDefault='{() => logout(oidcPromise, logout_url) }'><slot></slot></button>
+<button class="btn {classes}" style="{styles}" on:click|preventDefault='{() => logout(oidcPromise, logout_url) }'><slot></slot></button>
\ No newline at end of file
diff --git a/src/components/RefreshTokenButton.svelte b/src/components/RefreshTokenButton.svelte
index 21dc872..a885760 100644
--- a/src/components/RefreshTokenButton.svelte
+++ b/src/components/RefreshTokenButton.svelte
@@ -6,6 +6,8 @@
     } from './OidcContext.svelte';
 
     const oidcPromise = getContext(OIDC_CONTEXT_CLIENT_PROMISE)
+    export let classes = ''
+    export let styles = ''
 </script>
 
-<button class="btn" on:click|preventDefault='{() => refreshToken(oidcPromise) }'><slot></slot></button>
+<button class="btn {classes}" style="{styles}" on:click|preventDefault='{() => refreshToken(oidcPromise) }'><slot></slot></button>
\ No newline at end of file