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

@@ -5,3 +5,5 @@
 cypress/videos
 cypress/screenshots
 /public/bundle.*
+
+.idea

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>

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>

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>

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>