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

Links are placed at the bottom of login and register pages, accepts `link`, `url`, `title` and `icon` class. Closes: #171
akveo · Feb 9, 2018 · 86b2784 · 86b2784
1 parent 23c9e7d
commit 86b2784
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 17 deletions.
diff --git a/docs/articles/auth-ui.md b/docs/articles/auth-ui.md
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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:

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -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: {

diff --git a/src/framework/auth/auth.options.ts b/src/framework/auth/auth.options.ts
@@ -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,
@@ -28,6 +39,7 @@ export const defaultSettings: any = {
  error: true,
  },
  terms: true,
+ socialLinks: socialLinks,
  },
  requestPassword: {
  redirectDelay: 500,
@@ -36,6 +48,7 @@ export const defaultSettings: any = {
  success: true,
  error: true,
  },
+ socialLinks: socialLinks,
  },
  resetPassword: {
  redirectDelay: 500,
@@ -44,6 +57,7 @@ export const defaultSettings: any = {
  success: true,
  error: true,
  },
+ socialLinks: socialLinks,
  },
  logout: {
  redirectDelay: 500,
@@ -65,7 +79,6 @@ export const defaultSettings: any = {
  },
  },
  },
-
 };
 
 export const NB_AUTH_OPTIONS_TOKEN = new InjectionToken<NbAuthOptions>('Nebular Auth Options');

diff --git a/src/framework/auth/components/auth-block/auth-block.component.scss b/src/framework/auth/components/auth-block/auth-block.component.scss
@@ -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;
+ }
  }
  }
 }
diff --git a/src/framework/auth/components/login/login.component.ts b/src/framework/auth/components/login/login.component.ts
@@ -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';
@@ -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="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/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>
@@ -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 = {},
@@ -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 {

diff --git a/src/framework/auth/components/register/register.component.ts b/src/framework/auth/components/register/register.component.ts
@@ -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';
@@ -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>
@@ -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 = {},
@@ -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 {