diff --git a/README.md b/README.md index 5414a32..f10837f 100644 --- a/README.md +++ b/README.md @@ -25,3 +25,9 @@ Make sure you have updated the `config.json` with your application credentials. [1]: #getting-started [2]: #running-the-app-locally + +## Silent Login +This app has silent login enabled which allows you to automatically obtain new tokens for a user without the user having to re-authenticate using a popup. This will attempt to authenticate the user in a hidden iframe. + +You will need to enable Cloud Directory SSO. +Sign in will be successful only if the user has previously signed in using Cloud Directory and their session is not expired. diff --git a/public/index.css b/public/index.css index f9ba612..6c76d8d 100644 --- a/public/index.css +++ b/public/index.css @@ -62,18 +62,35 @@ body { outline: none; } -#error { - padding-top: 20px; +#password { + font-family: 'IBMPlexSans-Medium', sans-serif; font-size: 14px; - color: red; + letter-spacing: 0; + text-align: center; + background-color: #EBF0F7; + border: none; + padding: 10px 40px; + text-decoration: none; + cursor: pointer; + width: 200px; + height: 40px; + margin: 0 auto; + outline: none; + margin-bottom: 10px; } @-moz-document url-prefix() { - #login { + #login, #password { font-family: 'IBM Plex Sans Medium', 'Helvetica Neue', Arial, sans-serif; } } +#error { + padding-top: 20px; + font-size: 14px; + color: red; +} + .hintSection { display: flex; justify-content: center; @@ -97,10 +114,6 @@ body { } } -#chevronIconI, #chevronIconII { - margin-right: 20px; -} - .expand { margin-right: 20px; } @@ -127,8 +140,13 @@ body { font-family: 'IBMPlexSans-Medium', sans-serif; box-shadow: 0px -1px 5px 0px rgba(0, 0, 0, 0.15); } + @-moz-document url-prefix() { + .collapsible button { + font-family: 'IBM Plex Sans Medium', sans-serif; + } +} - .content { +.content { display: none; overflow: hidden; padding: 15px; @@ -139,14 +157,43 @@ body { font-size: 1vw; word-break: break-all; box-shadow: 0px -1px 5px 0px rgba(0, 0, 0, 0.15); - } +} - .collapsible.active .content { - display: block; - } +.collapsible.active .content { + display: block; +} + +@-moz-document url-prefix() { + .content { + font-family: 'IBM Plex Sans Light', sans-serif; + } +} .active button { width: 800px; margin-top: 20px; box-shadow: 0px -1px 5px 0px rgba(0, 0, 0, 0.15); } + +.loader { + /* display: block; */ + margin: 0 auto; + border: 16px solid #f3f3f3; + border-radius: 50%; + border-top: 16px solid #EBF0F7; + border-bottom: 16px solid #EBF0F7; + width: 60px; + height: 60px; + -webkit-animation: spin 2s linear infinite; + animation: spin 2s linear infinite; + } + + @-webkit-keyframes spin { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); } + } + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } \ No newline at end of file diff --git a/public/index.html b/public/index.html index e98dc52..719e86e 100644 --- a/public/index.html +++ b/public/index.html @@ -9,7 +9,7 @@
IBM Cloud AppID SDK Sample SPA
- +
@@ -20,7 +20,8 @@ Sample App

- +
+
@@ -36,7 +37,7 @@