external website favicon detection

[furknyavuz]

Open Template Hub - Feature Request

Description

Just replace the existing code with the ones below:

Supplementary Info

external.component.html

<div class="splash-content flex-layout-column flex-center-center">
  <div class="splash-logos flex-layout-row flex-center-center">
    <img [src]="brand.brandLogo" alt="logo"/>
    <i aria-hidden="true" class="fa fa-arrow-alt-circle-right success-text"></i>
    <img [src]="website.logo" alt="partner"
         onerror="this.src='./assets/common/globe.png'"/>
  </div>
  <div class="alert-with-icon">
    <i aria-hidden="true" class="fas fa-info fa-lg fa-fw success-text"></i>
    <p>
      {{ info }}
    </p>
    <br />
    <p>
      {{ 'Will be redirected to: ' }}<br/><a class="link green-theme" (click)="redirect()">{{ href }}</a>
    </p>
  </div>
  <div class="external-component-button-wrapper">
    <app-button1 [text]="'Home'" [lighterContrast]="true" [themeColor]="ThemeColorSettings.green" [isSleekButton]="true"
                 transparent="true" [routerLink]="URLS.root">
    </app-button1>
    <app-button1 [text]="'Proceed'" [lighterContrast]="true" [themeColor]="ThemeColorSettings.green"
                 [isSleekButton]="true" transparent="true" (click)="redirect()">
    </app-button1>
  </div>
</div>

external.component.ts

import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { environmentCommon } from '../../../../environments/environment-common';
import { ThemeColorSettings, URLS } from '../../../data/constant';
import { ThemeService } from '../../../service/theme/theme.service';

@Component( {
  selector: 'app-external',
  templateUrl: './external.component.html',
  styleUrls: [ './external.component.scss' ]
} )
export class ExternalComponent {

  href: any;
  info: string;
  website: any;

  brand = {
    brandLogo: '',
  };

  ThemeColorSettings = ThemeColorSettings;
  URLS = URLS;

  constructor(
      private route: ActivatedRoute,
      private router: Router,
      private themeService: ThemeService
  ) {
    this.brand = this.themeService.brand;

    this.route.queryParams.subscribe( params => {
      this.href = params.href;
      this.info = params.info;

      for ( const key in environmentCommon.website ) {
        if ( this.href.startsWith( environmentCommon.website[ key ].url ) ) {
          this.website = environmentCommon.website[ key ];
          break;
        }
      }

      if ( !this.website ) {
        const url = new URL( this.href );

        const favicon = 'https://www.google.com/s2/favicons?sz=64&domain=' + url.origin;

        this.website = {
          logo: favicon
        };
      }
    } );
  }

  redirect() {
    window.location.href = this.href;
  }
}

Open Template Hub © 2021

[create-issue-branch]

Branch feature/external-website-favicon-detection created!