diff --git a/packages/sdk-angular/README.md b/packages/sdk-angular/README.md index 8768775..a2b5abb 100644 --- a/packages/sdk-angular/README.md +++ b/packages/sdk-angular/README.md @@ -4,6 +4,7 @@ An SDK for using FusionAuth in Angular applications. - [Overview](#overview) - [Getting Started](#getting-started) + - [Quickstart](#quickstart) - [Installation](#installation) - [Usage](#usage) - [FusionAuthService](#fusionauthservice) @@ -11,7 +12,6 @@ An SDK for using FusionAuth in Angular applications. - [State Parameter](#state-parameter) - [SSR](#ssr) - [Known issues](#known-issues) -- [Quickstart](#quickstart) - [Documentation](#documentation) - [Releases](#releases) @@ -57,6 +57,12 @@ compliant identity server. ## Getting Started +If you are new to Angular development, you may want to start with the Quickstart guide. If you are already familiar with Angular development, skip to the Configuration section. + +### Quickstart + +See the [FusionAuth Angular Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-angular-web) for a full tutorial on using FusionAuth and Angular. + ### Installation NPM: @@ -183,10 +189,6 @@ The SDK supports Angular applications using SSR. No additional configuration is None. -## Quickstart - -See the [FusionAuth Angular Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-angular-web) for a full tutorial on using FusionAuth and Angular. - ## Documentation [Full library documentation](https://github.com/FusionAuth/fusionauth-javascript-sdk/tree/main/packages/sdk-angular/docs) diff --git a/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fa-button.scss b/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fa-button.scss new file mode 100644 index 0000000..cbdf96c --- /dev/null +++ b/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fa-button.scss @@ -0,0 +1,16 @@ +.fa-button { + padding: 16px 16px 13px 16px; + border-radius: 8px; + background-color: #083b94; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 18px; + font-weight: 600; + text-align: center; + color: #fff; + + &:hover { + cursor: pointer; + } + + width: 400px; +} \ No newline at end of file diff --git a/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.scss b/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.scss index c8c92b4..e69de29 100644 --- a/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.scss +++ b/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.scss @@ -1,15 +0,0 @@ -.fa-button { - padding: 16px 16px 13px 16px; - border-radius: 8px; - background-color: #083b94; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, - Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; - font-size: 18px; - font-weight: 600; - text-align: center; - color: #fff; - &:hover { - cursor: pointer; - } - width: 400px; -} diff --git a/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.ts b/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.ts index ea09be6..3db385a 100644 --- a/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.ts +++ b/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.ts @@ -4,7 +4,7 @@ import { FusionAuthService } from '../../fusion-auth.service'; @Component({ selector: 'fa-login', templateUrl: './fusion-auth-login-button.component.html', - styleUrls: ['./fusion-auth-login-button.component.scss'], + styleUrls: ['../fa-button.scss', './fusion-auth-login-button.component.scss'] }) export class FusionAuthLoginButtonComponent { @Input() state: string | undefined; diff --git a/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.html b/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.html index 59fd407..76d66b6 100644 --- a/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.html +++ b/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.html @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.scss b/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.scss index f1d17b3..e69de29 100644 --- a/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.scss +++ b/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.scss @@ -1,14 +0,0 @@ -.fa-logout-button { - padding: 7px 13px; - border-radius: 3px; - display: block; - border: solid 1px #083b94; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, - Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; - font-size: 12px; - text-align: center; - color: #083b94; - &:hover { - cursor: pointer; - } -} diff --git a/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.ts b/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.ts index 7029d8a..d93015b 100644 --- a/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.ts +++ b/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.ts @@ -4,7 +4,7 @@ import { FusionAuthService } from '../../fusion-auth.service'; @Component({ selector: 'fa-logout', templateUrl: './fusion-auth-logout-button.component.html', - styleUrls: ['./fusion-auth-logout-button.component.scss'], + styleUrls: ['../fa-button.scss', './fusion-auth-logout-button.component.scss'] }) export class FusionAuthLogoutButtonComponent { constructor(private fusionAuth: FusionAuthService) {} diff --git a/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-register.button/fusion-auth-register-button.component.scss b/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-register.button/fusion-auth-register-button.component.scss index a7abbc9..e69de29 100644 --- a/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-register.button/fusion-auth-register-button.component.scss +++ b/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-register.button/fusion-auth-register-button.component.scss @@ -1,16 +0,0 @@ -.fa-button { - padding: 16px 16px 13px 16px; - border-radius: 8px; - background-color: #083b94; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, - Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; - font-size: 18px; - font-weight: 600; - text-align: center; - color: #fff; - &:hover { - cursor: pointer; - } - - width: 400px; -} diff --git a/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-register.button/fusion-auth-register-button.component.ts b/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-register.button/fusion-auth-register-button.component.ts index c4efaba..be2b4fb 100644 --- a/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-register.button/fusion-auth-register-button.component.ts +++ b/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-register.button/fusion-auth-register-button.component.ts @@ -4,7 +4,7 @@ import { FusionAuthService } from '../../fusion-auth.service'; @Component({ selector: 'fa-register', templateUrl: './fusion-auth-register-button.component.html', - styleUrls: ['./fusion-auth-register-button.component.scss'], + styleUrls: ['../fa-button.scss', './fusion-auth-register-button.component.scss'] }) export class FusionAuthRegisterButtonComponent { @Input() state: string | undefined; diff --git a/packages/sdk-react/README.md b/packages/sdk-react/README.md index 08826ae..64703e7 100644 --- a/packages/sdk-react/README.md +++ b/packages/sdk-react/README.md @@ -4,6 +4,7 @@ An SDK for using FusionAuth in React applications. - [Overview](#overview) - [Getting Started](#getting-started) + - [Quickstart](#quickstart) - [Installation](#installation) - [Configuration](#configuration) - [Configuration with NextJS](#configuration-with-nextjs) @@ -13,7 +14,6 @@ An SDK for using FusionAuth in React applications. - [Protecting content](#protecting-content) - [UI Components](#ui-components) - [Known issues](#known-issues) -- [Quickstart](#quickstart) - [Documentation](#documentation) - [Formatting](#formatting) - [Releases](#releases) @@ -61,6 +61,12 @@ compliant identity server. ## Getting Started +If you are new to React development, you may want to start with the Quickstart guide. If you are already familiar with React development, skip to the Configuration section. + +### Quickstart + +See the [FusionAuth React Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-react-web) for a full tutorial on using FusionAuth and React. + ### Installation NPM: @@ -226,10 +232,6 @@ export const AccountPage = () => ( None. -## Quickstart - -See the [FusionAuth React Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-react-web) for a full tutorial on using FusionAuth and React. - ## Documentation [Full library documentation](https://github.com/FusionAuth/fusionauth-javascript-sdk/tree/main/packages/sdk-react/docs) diff --git a/packages/sdk-vue/README.md b/packages/sdk-vue/README.md index 0974536..6064aaa 100644 --- a/packages/sdk-vue/README.md +++ b/packages/sdk-vue/README.md @@ -4,7 +4,8 @@ An SDK for using FusionAuth in Vue applications. - [Overview](#overview) - [Getting Started](#getting-started) -- [Installation](#installation) + - [Quickstart](#quickstart) + - [Installation](#installation) - [Usage](#usage) - [Configuring the SDK](#configuring-the-sdk) - [Configuring with Nuxt](#configuring-with-nuxt) @@ -13,7 +14,6 @@ An SDK for using FusionAuth in Vue applications. - [UI Components](#ui-components) - [Protecting Content](#protecting-content) - [Pre-built buttons](#pre-built-buttons) -- [Quickstart](#quickstart) - [Documentation](#documentation) - [Known Issues](#known-issues) - [Releases](#releases) @@ -61,6 +61,12 @@ compliant identity server. ## Getting Started +If you are new to Vue development, you may want to start with the Quickstart guide. If you are already familiar with Vue development, skip to the Configuration section. + +### Quickstart + +See the [FusionAuth Vue Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-vue-web) for a full tutorial on using FusionAuth and Vue. + ### Installation NPM: @@ -230,10 +236,6 @@ is. With the CSS variables, you can customize the buttons to match your app’s style. -## Quickstart - -See the [FusionAuth Vue Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-vue-web) for a full tutorial on using FusionAuth and Vue. - ## Documentation [Full library documentation](https://github.com/FusionAuth/fusionauth-javascript-sdk/tree/main/packages/sdk-vue/docs)