Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(auth): ability to configure social link #205

Merged
merged 2 commits into from
Feb 9, 2018
Merged

feat(auth): ability to configure social link #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5f1e725
feat(auth): ability to configure social link
nnixaa Feb 9, 2018
72dc8be
Merge branch 'master' into feature/auth-links
nnixaa Feb 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions docs/articles/auth-ui.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,27 @@ You can configure each specific form separately, here're the default values:

```typescript

export interface NbAuthSocialLink {
link?: string,
url?: string,
target?: string,
title?: string,
icon?: string,
}

const socialLinks: NbAuthSocialLink[] = [];

export const defaultSettings: any = {
forms: {
login: {
redirectDelay: 500, // delay before redirect after a successful login, while success message is shown to the user
provider: 'email', // provider id key. If you have multiple providers, or what to use your own you need to tell a component to use it here
provider: 'email', // provider id key. If you have multiple providers, or what to use your own
rememberMe: true, // whether to show or not the `rememberMe` checkbox
showMessages: { // show/not show success/error messages
success: true,
error: true,
},
socialLinks: socialLinks, // social links at the bottom of a page
},
register: {
redirectDelay: 500,
Expand All @@ -58,6 +70,7 @@ You can configure each specific form separately, here're the default values:
error: true,
},
terms: true,
socialLinks: socialLinks,
},
requestPassword: {
redirectDelay: 500,
Expand All @@ -66,6 +79,7 @@ You can configure each specific form separately, here're the default values:
success: true,
error: true,
},
socialLinks: socialLinks,
},
resetPassword: {
redirectDelay: 500,
Expand All @@ -74,12 +88,13 @@ You can configure each specific form separately, here're the default values:
success: true,
error: true,
},
socialLinks: socialLinks,
},
logout: {
redirectDelay: 500,
provider: 'email',
},
validation: { // fields validation rules. The validations are shared between all forms.
validation: {
password: {
required: true,
minLength: 4,
Expand All @@ -94,7 +109,8 @@ You can configure each specific form separately, here're the default values:
maxLength: 50,
},
},
},
},
};
```

So, for instance, to remove the redirectDelay setting and disable the success message, we can do the following:
Expand Down
17 changes: 17 additions & 0 deletions src/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,23 @@ const NB_TEST_COMPONENTS = [
forms: {
login: {
redirectDelay: 3000,
socialLinks: [
{
url: 'https://github.com/akveo',
target: '_blank',
title: 'GitHub',
},
{
url: 'https://www.facebook.com/akveo',
target: '_blank',
icon: 'nb-home',
},
{
url: 'https://www.facebook.com/akveo',
target: '_blank',
title: 'Twitter',
},
],
},
},
providers: {
Expand Down
23 changes: 18 additions & 5 deletions src/framework/auth/auth.options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,27 @@ export interface NbAuthProviders {
[key: string]: any;
}

export interface NbAuthSocialLink {
link?: string,
url?: string,
target?: string,
title?: string,
icon?: string,
}

const socialLinks: NbAuthSocialLink[] = [];

export const defaultSettings: any = {
forms: {
login: {
redirectDelay: 500,
provider: 'email',
rememberMe: true,
showMessages: {
redirectDelay: 500, // delay before redirect after a successful login, while success message is shown to the user
provider: 'email', // provider id key. If you have multiple providers, or what to use your own
rememberMe: true, // whether to show or not the `rememberMe` checkbox
showMessages: { // show/not show success/error messages
success: true,
error: true,
},
socialLinks: socialLinks, // social links at the bottom of a page
},
register: {
redirectDelay: 500,
Expand All @@ -28,6 +39,7 @@ export const defaultSettings: any = {
error: true,
},
terms: true,
socialLinks: socialLinks,
},
requestPassword: {
redirectDelay: 500,
Expand All @@ -36,6 +48,7 @@ export const defaultSettings: any = {
success: true,
error: true,
},
socialLinks: socialLinks,
},
resetPassword: {
redirectDelay: 500,
Expand All @@ -44,6 +57,7 @@ export const defaultSettings: any = {
success: true,
error: true,
},
socialLinks: socialLinks,
},
logout: {
redirectDelay: 500,
Expand All @@ -65,7 +79,6 @@ export const defaultSettings: any = {
},
},
},

};

export const NB_AUTH_OPTIONS_TOKEN = new InjectionToken<NbAuthOptions>('Nebular Auth Options');
Expand Down
7 changes: 6 additions & 1 deletion src/framework/auth/components/auth-block/auth-block.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,14 @@
}

.socials a {
font-size: 2rem;
margin: 0 1rem;
text-decoration: none;
font-size: 1rem;
vertical-align: middle;

&.with-icon {
font-size: 2rem;
}
}
}
}
28 changes: 21 additions & 7 deletions src/framework/auth/components/login/login.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/
import { Component, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { NB_AUTH_OPTIONS_TOKEN } from '../../auth.options';
import { NB_AUTH_OPTIONS_TOKEN, NbAuthSocialLink } from '../../auth.options';
import { getDeepFromObject } from '../../helpers';

import { NbAuthService } from '../../services/auth.service';
Expand Down Expand Up @@ -80,13 +80,25 @@ import { NbAuthResult } from '../../services/auth-result';
</form>

<div class="links">
<small class="form-text">Or connect with:</small>

<div class="socials">
<a href="https://github.com/akveo" target="_blank" class="socicon-github"></a>
<a href="https://www.facebook.com/akveo/" target="_blank" class="socicon-facebook"></a>
<a href="https://twitter.com/akveo_inc" target="_blank" class="socicon-twitter"></a>
</div>
<ng-container *ngIf="socialLinks && socialLinks.length > 0">
<small class="form-text">Or connect with:</small>

<div class="socials">
<ng-container *ngFor="let socialLink of socialLinks">
<a *ngIf="socialLink.link"
[routerLink]="socialLink.link"
[attr.target]="socialLink.target"
[attr.class]="socialLink.icon"
[class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
<a *ngIf="socialLink.url"
[attr.href]="socialLink.url"
[attr.target]="socialLink.target"
[attr.class]="socialLink.icon"
[class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
</ng-container>
</div>
</ng-container>

<small class="form-text">
Don't have an account? <a routerLink="../register"><strong>Sign Up</strong></a>
Expand All @@ -105,6 +117,7 @@ export class NbLoginComponent {
messages: string[] = [];
user: any = {};
submitted: boolean = false;
socialLinks: NbAuthSocialLink[] = [];

constructor(protected service: NbAuthService,
@Inject(NB_AUTH_OPTIONS_TOKEN) protected config = {},
Expand All @@ -113,6 +126,7 @@ export class NbLoginComponent {
this.redirectDelay = this.getConfigValue('forms.login.redirectDelay');
this.showMessages = this.getConfigValue('forms.login.showMessages');
this.provider = this.getConfigValue('forms.login.provider');
this.socialLinks = this.getConfigValue('forms.login.socialLinks');
}

login(): void {
Expand Down
24 changes: 23 additions & 1 deletion src/framework/auth/components/register/register.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/
import { Component, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { NB_AUTH_OPTIONS_TOKEN } from '../../auth.options';
import { NB_AUTH_OPTIONS_TOKEN, NbAuthSocialLink } from '../../auth.options';
import { getDeepFromObject } from '../../helpers';

import { NbAuthService } from '../../services/auth.service';
Expand Down Expand Up @@ -120,6 +120,26 @@ import { NbAuthResult } from '../../services/auth-result';
</form>

<div class="links">

<ng-container *ngIf="socialLinks && socialLinks.length > 0">
<small class="form-text">Or connect with:</small>

<div class="socials">
<ng-container *ngFor="let socialLink of socialLinks">
<a *ngIf="socialLink.link"
[routerLink]="socialLink.link"
[attr.target]="socialLink.target"
[attr.class]="socialLink.icon"
[class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
<a *ngIf="socialLink.url"
[attr.href]="socialLink.url"
[attr.target]="socialLink.target"
[attr.class]="socialLink.icon"
[class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
</ng-container>
</div>
</ng-container>

<small class="form-text">
Already have an account? <a routerLink="../login"><strong>Sign in</strong></a>
</small>
Expand All @@ -137,6 +157,7 @@ export class NbRegisterComponent {
errors: string[] = [];
messages: string[] = [];
user: any = {};
socialLinks: NbAuthSocialLink[] = [];

constructor(protected service: NbAuthService,
@Inject(NB_AUTH_OPTIONS_TOKEN) protected config = {},
Expand All @@ -145,6 +166,7 @@ export class NbRegisterComponent {
this.redirectDelay = this.getConfigValue('forms.register.redirectDelay');
this.showMessages = this.getConfigValue('forms.register.showMessages');
this.provider = this.getConfigValue('forms.register.provider');
this.socialLinks = this.getConfigValue('forms.login.socialLinks');
}

register(): void {
Expand Down