diff --git a/angular.json b/angular.json index 74e542b05a..61ac2dec46 100644 --- a/angular.json +++ b/angular.json @@ -26,7 +26,6 @@ "src/favicon.ico" ], "styles": [ - "node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/nebular-icons/scss/nebular-icons.scss", "src/styles.scss" ], @@ -78,7 +77,6 @@ "tsConfig": "src/tsconfig.spec.json", "scripts": [], "styles": [ - "node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/nebular-icons/scss/nebular-icons.scss", "src/styles.scss" ], @@ -147,7 +145,6 @@ "src/favicon.ico" ], "styles": [ - "node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/nebular-icons/scss/nebular-icons.scss", "src/styles.scss" ], @@ -199,7 +196,6 @@ "tsConfig": "src/tsconfig.spec.json", "scripts": [], "styles": [ - "node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/nebular-icons/scss/nebular-icons.scss", "src/styles.scss" ], diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 1bdce5058c..a5bbd1e241 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,3 +1,18 @@ .framework-options-bar { display: flex; } + +/deep/ { + .options-bar { + display: flex; + align-items: center; + } + .options-show { + margin-left: auto; + } + .options-show.fixed { + position: fixed; + right: 0; + top: 0; + } +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 86cbd601fd..98d9e6bc24 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -22,20 +22,6 @@ import { Component } from '@angular/core'; `, - styles: [` - .options-bar { - display: flex; - align-items: center; - } - .options-show { - margin-left: auto; - } - .options-show.fixed { - position: fixed; - right: 0; - top: 0; - } - `], }) export class NbAppComponent { diff --git a/src/framework/auth/components/_auth.component.theme.scss b/src/framework/auth/components/_auth.component.theme.scss new file mode 100644 index 0000000000..369fc72a70 --- /dev/null +++ b/src/framework/auth/components/_auth.component.theme.scss @@ -0,0 +1,11 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@mixin nb-auth-theme() { + nb-auth .navigation .link .icon { + font-weight: nb-theme(font-weight-bold); + } +} diff --git a/src/framework/auth/components/auth-block/_auth-block.component.theme.scss b/src/framework/auth/components/auth-block/_auth-block.component.theme.scss index 7b48d910ea..19279ff64f 100644 --- a/src/framework/auth/components/auth-block/_auth-block.component.theme.scss +++ b/src/framework/auth/components/auth-block/_auth-block.component.theme.scss @@ -6,16 +6,16 @@ @mixin nb-auth-block-theme() { nb-auth-block { - - .form-text a { + .text-link { color: nb-theme(color-fg); + font-weight: nb-theme(font-weight-bold); } - .accept-group { - nb-checkbox .custom-control-description { - color: nb-theme(color-fg); - } + .error-message { + color: nb-theme(color-danger); + } + .accept-group { a { color: nb-theme(accept-group-link-color); } @@ -32,3 +32,4 @@ } } } + diff --git a/src/framework/auth/components/auth-block/auth-block.component.scss b/src/framework/auth/components/auth-block/auth-block.component.scss index 0b86268064..2127b6a64b 100644 --- a/src/framework/auth/components/auth-block/auth-block.component.scss +++ b/src/framework/auth/components/auth-block/auth-block.component.scss @@ -4,66 +4,101 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -:host /deep/ { - // TODO rewrite when develop responsive - @media (max-width: 550px) { - .accept-group { - font-size: 12px; - padding: 0; +:host { + display: block; + width: 100%; + max-width: 35rem; + + /deep/ { + form { + width: 100%; } - } - form { - width: 100%; - } + .label { + display: block; + margin-bottom: 0.5rem; + } - .alert { - text-align: center; - } + .error-message { + margin-top: 0.5rem; + } - .title { - margin-bottom: 0.75rem; - text-align: center; - } + .alert { + text-align: center; + } - .sub-title { - margin-bottom: 2rem; - text-align: center; - } + .title { + margin-top: 0; + margin-bottom: 0.75rem; + text-align: center; + } - .checkbox { - display: flex; - justify-content: space-between; - margin-bottom: 10px; - font-weight: normal; - } + .sub-title { + margin-bottom: 2rem; + text-align: center; + } + + .checkbox { + display: flex; + justify-content: space-between; + margin-bottom: 10px; + font-weight: normal; + } + + .form-control-group { + margin-bottom: 2rem; + } - .form-group.accept-group { - display: flex; - justify-content: space-between; - margin: 2rem 0; + .form-control-group.accept-group { + display: flex; + justify-content: space-between; + margin: 2rem 0; - .forgot-password { - line-height: 2; + .forgot-password { + line-height: 2; + } } - } - .links { - text-align: center; - margin-top: 1.75rem; + .links { + text-align: center; + margin-top: 1.75rem; + + .socials { + margin-top: 1.5rem; + } - .socials { - margin: 1.5rem 0 2.5rem; + .socials a { + margin: 0 1rem; + text-decoration: none; + font-size: 1rem; + vertical-align: middle; + + &.with-icon { + font-size: 2rem; + } + } + } + + .another-action { + margin-top: 2rem; + text-align: center; } - .socials a { - margin: 0 1rem; - text-decoration: none; - font-size: 1rem; - vertical-align: middle; + .sign-in-or-up { + margin-top: 2rem; + display: flex; + justify-content: space-between; + } - &.with-icon { - font-size: 2rem; + nb-alert { + .alert-title, + .alert-message { + margin: 0 0 0.5rem; + } + .alert-message-list { + list-style-type: none; + padding: 0; + margin: 0; } } } diff --git a/src/framework/auth/components/auth-block/auth-block.component.ts b/src/framework/auth/components/auth-block/auth-block.component.ts index 95e281f3bc..e39806ccdf 100644 --- a/src/framework/auth/components/auth-block/auth-block.component.ts +++ b/src/framework/auth/components/auth-block/auth-block.component.ts @@ -1,3 +1,9 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + import { Component } from '@angular/core'; @Component({ diff --git a/src/framework/auth/components/auth.component.scss b/src/framework/auth/components/auth.component.scss index 836fec7542..d2c4f9f20b 100644 --- a/src/framework/auth/components/auth.component.scss +++ b/src/framework/auth/components/auth.component.scss @@ -1,44 +1,44 @@ -:host /deep/ { - $auth-layout-padding: 2.5rem; +@import '../../theme/styles/global/breakpoints'; - nb-layout .layout .layout-container .content .columns nb-layout-column { - padding: $auth-layout-padding; - } +:host { + $auth-layout-padding: 2.5rem; nb-card { + margin: 0; height: calc(100vh - 2 * #{$auth-layout-padding}); } - nb-card-header { - a { - text-decoration: none; - i { - font-size: 2rem; - font-weight: bold; - } + .navigation .link { + text-decoration: none; + + .icon { + font-size: 2rem; } } - nb-card { - margin: 0; - } - .flex-centered { - margin: auto; - } nb-card-body { display: flex; + width: 100%; } - // TODO rewrite when develop responsive - @media (max-width: 550px) { - /deep/ nb-layout .layout .layout-container .content .columns nb-layout-column { - padding: 0; - } + nb-auth-block { + margin: auto; + } + @include media-breakpoint-down(sm) { nb-card { border-radius: 0; height: 100vh; } } + /deep/ { + nb-layout .layout .layout-container .content .columns nb-layout-column { + padding: $auth-layout-padding; + + @include media-breakpoint-down(sm) { + padding: 0; + } + } + } } diff --git a/src/framework/auth/components/auth.component.ts b/src/framework/auth/components/auth.component.ts index 1ba9740970..cd5e020619 100644 --- a/src/framework/auth/components/auth.component.ts +++ b/src/framework/auth/components/auth.component.ts @@ -17,12 +17,14 @@ import { takeWhile } from 'rxjs/operators'; - + -
+ -
+ diff --git a/src/framework/auth/components/login/login.component.html b/src/framework/auth/components/login/login.component.html index ef1d17baf6..92d717a720 100644 --- a/src/framework/auth/components/login/login.component.html +++ b/src/framework/auth/components/login/login.component.html @@ -1,105 +1,106 @@ - -

Sign In

- Hello! Sign in with your username or email +

Sign In

+

Hello! Sign in with your username or email.

-
+ +

Oh snap!

+
    +
  • {{ error }}
    • +
+ - -
Oh snap!
-
{{ error }}
- + +

Hooray!

+
    +
  • {{ message }}
    • +
+ - -
Hooray!
-
{{ message }}
- + -
- - - +
+ + + +

Email is required! - - +

+

Email should be the real one! - -

+

+ +
-
- - - +
+ + + +

Password is required! - - +

+

Password should contains from {{ getConfigValue('forms.validation.password.minLength') }} to {{ getConfigValue('forms.validation.password.maxLength') }} characters - -

- -
- Remember me - Forgot Password? -
- - - +

+ +
-
+
+ Remember me + Forgot Password? +
- - Or connect with: + + -
- - {{ socialLink.title }} - {{ socialLink.title }} - -
+
+ Or connect with: +
+ + {{ socialLink.title }} + {{ socialLink.title }} - - - Don't have an account? Sign Up -
- +
+ +
+ Don't have an account? Sign Up +
diff --git a/src/framework/auth/components/login/login.component.ts b/src/framework/auth/components/login/login.component.ts index 38bf96195b..394f86a5c0 100644 --- a/src/framework/auth/components/login/login.component.ts +++ b/src/framework/auth/components/login/login.component.ts @@ -42,7 +42,8 @@ export class NbLoginComponent { } login(): void { - this.errors = this.messages = []; + this.errors = []; + this.messages = []; this.submitted = true; this.service.authenticate(this.strategy, this.user).subscribe((result: NbAuthResult) => { diff --git a/src/framework/auth/components/register/register.component.html b/src/framework/auth/components/register/register.component.html index a45f95b6c0..4a64707c81 100644 --- a/src/framework/auth/components/register/register.component.html +++ b/src/framework/auth/components/register/register.component.html @@ -1,153 +1,156 @@ - -

Sign Up

-
+

Sign Up

- -
Oh snap!
-
{{ error }}
- + +

Oh snap!

+
    +
  • {{ error }}
    • +
+ - -
Hooray!
-
{{ message }}
- + +

Hooray!

+
    +
  • {{ message }}
    • +
+ -
- - - + + +
+ + + +

Full name is required! - - +

+

Full name should contains from {{getConfigValue('forms.validation.fullName.minLength')}} to {{getConfigValue('forms.validation.fullName.maxLength')}} characters - -

+

+ +
-
- - - +
+ + + +

Email is required! - - +

+

Email should be the real one! - -

+

+ +
-
- - - +
+ + + +

Password is required! - - +

+

Password should contains from {{ getConfigValue('forms.validation.password.minLength') }} to {{ getConfigValue('forms.validation.password.maxLength') }} characters - -

+

+ +
-
- - - +
+ + + +

Password confirmation is required! - - +

+

Password does not match the confirm password. - -

- -
- - Agree to Terms & Conditions - -
- - - +

+ +
-
+
+ + Agree to Terms & Conditions + +
- - Or connect with: + + -
- - {{ socialLink.title }} - {{ socialLink.title }} - -
+
+ Or connect with: +
+ + {{ socialLink.title }} + {{ socialLink.title }} - - - Already have an account? Sign in -
- +
+ +
+ Already have an account? Sign in +
diff --git a/src/framework/auth/components/request-password/request-password.component.html b/src/framework/auth/components/request-password/request-password.component.html index 9da4a87ea9..42fba16964 100644 --- a/src/framework/auth/components/request-password/request-password.component.html +++ b/src/framework/auth/components/request-password/request-password.component.html @@ -1,55 +1,60 @@ - -

Forgot Password

- Enter your email address and we’ll send a link to reset your password -
+

Forgot Password

+

Enter your email address and we’ll send a link to reset your password

- -
Oh snap!
-
{{ error }}
- + +

Oh snap!

+
    +
  • {{ error }}
    • +
+ - -
Hooray!
-
{{ message }}
- + +

Hooray!

+
    +
  • {{ message }}
    • +
+ -
- - - + + +
+ + + +

Email is required! - - +

+

Email should be the real one! - -

+

+ +
- -
+ + -
- - Already have an account? Sign In - - - Sign Up - -
- + diff --git a/src/framework/auth/components/request-password/request-password.component.scss b/src/framework/auth/components/request-password/request-password.component.scss index 9ee89d3d76..11a9b4e9f9 100644 --- a/src/framework/auth/components/request-password/request-password.component.scss +++ b/src/framework/auth/components/request-password/request-password.component.scss @@ -4,11 +4,6 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ :host { - .links { - display: flex; - justify-content: space-between; - } - .form-group:last-of-type { margin-bottom: 3rem; } diff --git a/src/framework/auth/components/reset-password/reset-password.component.html b/src/framework/auth/components/reset-password/reset-password.component.html index 8c4f65fbad..3f2939fe46 100644 --- a/src/framework/auth/components/reset-password/reset-password.component.html +++ b/src/framework/auth/components/reset-password/reset-password.component.html @@ -1,88 +1,90 @@ - -

Change password

- Please enter a new password -
+

Change password

+

Please enter a new password

- -
Oh snap!
-
{{ error }}
- + +

Oh snap!

+
    +
  • {{ error }}
    • +
+ - -
Hooray!
-
{{ message }}
- + +

Hooray!

+
    +
  • {{ message }}
    • +
+ -
- - - + + +
+ + + +

Password is required! - - +

+

Password should contains from {{getConfigValue('forms.validation.password.minLength')}} to {{getConfigValue('forms.validation.password.maxLength')}} characters - -

+

+ +
-
- - - +
+ + + +

Password confirmation is required! - - +

+

Password does not match the confirm password. - -

+

+ +
- -
+ + -
- - Already have an account? Sign In - - - Sign Up - -
- + diff --git a/src/framework/auth/components/reset-password/reset-password.component.scss b/src/framework/auth/components/reset-password/reset-password.component.scss index 9ee89d3d76..11a9b4e9f9 100644 --- a/src/framework/auth/components/reset-password/reset-password.component.scss +++ b/src/framework/auth/components/reset-password/reset-password.component.scss @@ -4,11 +4,6 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ :host { - .links { - display: flex; - justify-content: space-between; - } - .form-group:last-of-type { margin-bottom: 3rem; } diff --git a/src/framework/auth/package.json b/src/framework/auth/package.json index 118c9f2d77..d6b68df8e2 100644 --- a/src/framework/auth/package.json +++ b/src/framework/auth/package.json @@ -33,7 +33,6 @@ "@angular/forms": "^6.0.0", "@angular/http": "^6.0.0", "@nebular/theme": "2.0.0-rc.10", - "@nebular/bootstrap": "2.0.0-rc.10", "rxjs": "^6.1.0" } } diff --git a/src/framework/auth/styles/_themes.scss b/src/framework/auth/styles/_themes.scss index 4f09abc7a1..b0475fe714 100644 --- a/src/framework/auth/styles/_themes.scss +++ b/src/framework/auth/styles/_themes.scss @@ -1,2 +1,3 @@ @import 'themes/default'; @import 'themes/cosmic'; +@import 'themes/corporate'; diff --git a/src/framework/auth/styles/global/_components.scss b/src/framework/auth/styles/global/_components.scss index 403dc4ca2e..a26d4a3986 100644 --- a/src/framework/auth/styles/global/_components.scss +++ b/src/framework/auth/styles/global/_components.scss @@ -4,9 +4,11 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@import '../../components/auth.component.theme'; @import '../../components/auth-block/auth-block.component.theme'; // Create a theme @mixin nb-auth-components() { + @include nb-auth-theme(); @include nb-auth-block-theme(); } diff --git a/src/framework/auth/styles/themes/_corporate.scss b/src/framework/auth/styles/themes/_corporate.scss new file mode 100644 index 0000000000..96f69ba4d8 --- /dev/null +++ b/src/framework/auth/styles/themes/_corporate.scss @@ -0,0 +1,14 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +$theme: ( + accept-group-link-color: color-fg, + + socials-color: color-fg, + socials-hover-color: color-fg-text, +); + +$nb-themes: nb-register-theme($theme, corporate, corporate); diff --git a/src/framework/theme/styles/global/_normalize.scss b/src/framework/theme/styles/global/_normalize.scss index 70ebb3e245..f27c0b612f 100644 --- a/src/framework/theme/styles/global/_normalize.scss +++ b/src/framework/theme/styles/global/_normalize.scss @@ -6,3 +6,15 @@ @import '~normalize.css/normalize.css'; +html { + box-sizing: border-box; +} +*, *::before, *::after { + box-sizing: inherit; +} + +html, body { + margin: 0; + padding: 0; +} + diff --git a/src/playground/auth/auth-routing.module.ts b/src/playground/auth/auth-routing.module.ts index f9c4ddb723..ca12d26b2e 100644 --- a/src/playground/auth/auth-routing.module.ts +++ b/src/playground/auth/auth-routing.module.ts @@ -32,7 +32,8 @@ export const routes: Routes = [ children: [ { path: '', - component: NbLoginComponent, + redirectTo: 'login', + pathMatch: 'full', }, { path: 'login', diff --git a/src/playground/oauth2-password/oauth2-password-login.component.html b/src/playground/oauth2-password/oauth2-password-login.component.html new file mode 100644 index 0000000000..ce9c3026c1 --- /dev/null +++ b/src/playground/oauth2-password/oauth2-password-login.component.html @@ -0,0 +1,99 @@ + + + +

You are currently authenticated

+

+

Current User Access Token: {{ token.getValue() | json }}

+

Current User Access Token Payload : {{getClaims(token.getValue()) | json}}

+

Current User Refresh Token: {{ token.getRefreshToken() | json }}

+ + +

No User Authenticated

 + + + + +

OAuth2 Sign In with email/password

+

Hello! Sign in with your username or email

+ + +

Oh snap!

+
    +
  • {{ error }}
    • +
+ + + +

Hooray!

+
    +
  • {{ message }}
    • +
+ + +
+ +
+ + + +

+ Email is required! +

+

+ Email should be the real one! +

+ +
+ +
+ + + +

+ Password is required! +

+

+ Password should contains + from {{ getConfigValue('forms.validation.password.minLength') }} + to {{ getConfigValue('forms.validation.password.maxLength') }} + characters +

+ +
+ + +
+ + + + + diff --git a/src/playground/oauth2-password/oauth2-password-login.component.scss b/src/playground/oauth2-password/oauth2-password-login.component.scss new file mode 100644 index 0000000000..f807999ea4 --- /dev/null +++ b/src/playground/oauth2-password/oauth2-password-login.component.scss @@ -0,0 +1,3 @@ +:host nb-auth-block { + margin: 0 auto; +} diff --git a/src/playground/oauth2-password/oauth2-password-login.component.ts b/src/playground/oauth2-password/oauth2-password-login.component.ts index 6c0100cb7b..5ce8ad7038 100644 --- a/src/playground/oauth2-password/oauth2-password-login.component.ts +++ b/src/playground/oauth2-password/oauth2-password-login.component.ts @@ -17,68 +17,8 @@ import { getDeepFromObject } from '../../framework/auth/helpers'; @Component({ selector: 'nb-playground-auth', - template: ` - - - -

You are currently authenticated

-

-

Current User Access Token: {{ token.getValue() | json }}

-

Current User Access Token Payload : {{getClaims(token.getValue()) | json}}

-

Current User Refresh Token: {{ token.getRefreshToken() | json }}

- - -

No User Authenticated

 - - - -

OAuth2 Sign In with email/password

- Hello! Sign in with your username or email -
- - -
- - Email is required! - - Email should be the real one! - -
-
- Password is required! - - Password should contains - from {{ getConfigValue('forms.validation.password.minLength') }} to - {{ getConfigValue('forms.validation.password.maxLength') }} characters - -
- -
- - - - - `, + templateUrl: './oauth2-password-login.component.html', + styleUrls: ['./oauth2-password-login.component.scss'], }) export class NbOAuth2PasswordLoginComponent { diff --git a/src/playground/oauth2-password/oauth2-password.module.ts b/src/playground/oauth2-password/oauth2-password.module.ts index bdbd2dc69e..ac31481500 100644 --- a/src/playground/oauth2-password/oauth2-password.module.ts +++ b/src/playground/oauth2-password/oauth2-password.module.ts @@ -11,13 +11,15 @@ import { RouterModule } from '@angular/router'; import { HttpClientModule } from '@angular/common/http'; import { - NbCardModule, - NbLayoutModule, + NbAlertModule, NbCardModule, NbInputModule, NbLayoutModule, } from '@nebular/theme'; import { - NbAuthModule, NbAuthOAuth2JWTToken, - NbOAuth2AuthStrategy, NbOAuth2ClientAuthMethod, NbOAuth2GrantType, + NbAuthModule, + NbAuthOAuth2JWTToken, + NbOAuth2AuthStrategy, + NbOAuth2ClientAuthMethod, + NbOAuth2GrantType, } from '@nebular/auth'; import { NbOAuth2PasswordLoginComponent } from './oauth2-password-login.component'; @@ -69,6 +71,8 @@ import { NbOAuth2PasswordLoginComponent } from './oauth2-password-login.componen NbCardModule, NbLayoutModule, + NbAlertModule, + NbInputModule, ], declarations: [ NbOAuth2PasswordLoginComponent, diff --git a/src/playground/smart-home/auth/login/login.component.html b/src/playground/smart-home/auth/login/login.component.html index 28098a7976..5758a0c282 100644 --- a/src/playground/smart-home/auth/login/login.component.html +++ b/src/playground/smart-home/auth/login/login.component.html @@ -1,104 +1,105 @@ - -

Sign In

+

Sign In

-
+ +

Oh snap!

+
    +
  • {{ error }}
    • +
+ - -
Oh snap!
-
{{ error }}
- + +

Hooray!

+
    +
  • {{ message }}
    • +
+ - -
Hooray!
-
{{ message }}
- + -
- - - +
+ + + +

Email is required! - - +

+

Email should be the real one! - -

+

+ +
-
- - - +
+ + + +

Password is required! - - +

+

Password should contains from {{ getConfigValue('forms.validation.password.minLength') }} to {{ getConfigValue('forms.validation.password.maxLength') }} characters - -

- -
- Remember me - Forgot Password? -
- - - +

+ +
-
+
+ Remember me + Forgot Password? +
- - Or connect with: + + -
- - {{ socialLink.title }} - {{ socialLink.title }} - -
+
+ Or connect with: +
+ + {{ socialLink.title }} + {{ socialLink.title }} - - - Don't have an account? Sign Up -
- +
+ +
+ Don't have an account? Sign Up +
diff --git a/src/playground/styles/styles.scss b/src/playground/styles/styles.scss index 459de8ec70..cd444ce6fd 100644 --- a/src/playground/styles/styles.scss +++ b/src/playground/styles/styles.scss @@ -1,10 +1,10 @@ @import 'themes'; @import '../../framework/theme/styles/globals'; -@import '../../framework/bootstrap/styles/globals'; +@import '../../framework/auth/styles/globals'; @include nb-install() { @include nb-theme-global(); - @include nb-bootstrap-global(); + @include nb-auth-global(); }; body {