Merge pull request #3 from laravelcm/meta-data

Add Meta data for SEO

Author: mckenziearts

src/app/core/components/app/app.component.ts

@@ -1,55 +1,62 @@
 import { Component, OnInit } from '@angular/core';
 
+import { SeoService } from '@app/shared/services/seo.service';
+
 @Component({
   selector: 'admin-root',
   template: '<router-outlet></router-outlet>',
 })
 export class AppComponent implements OnInit {
   mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
 
+  public constructor(private seoService: SeoService) {}
+
+  ngOnInit(): void {
+    document.documentElement.setAttribute('data-theme', this.updateTheme());
+
+    new MutationObserver(([{ oldValue }]) => {
+      let newValue = document.documentElement.getAttribute('data-theme')!;
+      if (newValue !== oldValue) {
+        try {
+          window.localStorage.setItem('theme', newValue);
+        } catch {}
+        this.updateThemeWithoutTransitions(newValue);
+      }
+    }).observe(document.documentElement, {
+      attributeFilter: ['data-theme'],
+      attributeOldValue: true,
+    });
+  }
+
   updateTheme(savedTheme: string | null = null): string {
-    let theme = 'system'
+    let theme = 'system';
     try {
       if (!savedTheme) {
-        savedTheme = window.localStorage.getItem('theme')
+        savedTheme = window.localStorage.getItem('theme');
       }
       if (savedTheme === 'dark') {
-        theme = 'dark'
-        document.documentElement.classList.add('dark')
+        theme = 'dark';
+        document.documentElement.classList.add('dark');
       } else if (savedTheme === 'light') {
-        theme = 'light'
-        document.documentElement.classList.remove('dark')
+        theme = 'light';
+        document.documentElement.classList.remove('dark');
       } else if (this.mediaQuery.matches) {
-        document.documentElement.classList.add('dark')
+        document.documentElement.classList.add('dark');
       } else {
-        document.documentElement.classList.remove('dark')
+        document.documentElement.classList.remove('dark');
       }
     } catch {
-      theme = 'light'
-      document.documentElement.classList.remove('dark')
+      theme = 'light';
+      document.documentElement.classList.remove('dark');
     }
-    return theme
+    return theme;
   }
 
   updateThemeWithoutTransitions(savedTheme: string | null = null): void {
-    this.updateTheme(savedTheme)
-    document.documentElement.classList.add('[&_*]:!transition-none')
+    this.updateTheme(savedTheme);
+    document.documentElement.classList.add('[&_*]:!transition-none');
     window.setTimeout(() => {
-      document.documentElement.classList.remove('[&_*]:!transition-none')
-    }, 0)
-  }
-
-  ngOnInit(): void {
-    document.documentElement.setAttribute('data-theme', this.updateTheme())
-
-    new MutationObserver(([{ oldValue }]) => {
-      let newValue = document.documentElement.getAttribute('data-theme')!
-      if (newValue !== oldValue) {
-        try {
-          window.localStorage.setItem('theme', newValue)
-        } catch {}
-        this.updateThemeWithoutTransitions(newValue)
-      }
-    }).observe(document.documentElement, { attributeFilter: ['data-theme'], attributeOldValue: true })
+      document.documentElement.classList.remove('[&_*]:!transition-none');
+    }, 0);
   }
 }

src/app/modules/authentication/pages/forgot-password/forgot-password.component.ts

@@ -1,8 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Meta, Title } from '@angular/platform-browser';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 
+import { environment } from 'environments/environment';
 import { forgotPasswordAction } from '../../store/auth.actions';
 import {
   selectError,
@@ -13,8 +15,8 @@ import {
 @Component({
   templateUrl: './forgot-password.component.html',
 })
-export class ForgotPasswordComponent {
-  public form: FormGroup = this.formBuilder.group({
+export class ForgotPasswordComponent implements OnInit {
+  public form: FormGroup = this.fb.group({
     email: ['', [Validators.required, Validators.email]],
   });
 
@@ -24,7 +26,28 @@ export class ForgotPasswordComponent {
 
   public loading$: Observable<boolean> = this.store.select(selectLoading);
 
-  constructor(private formBuilder: FormBuilder, private store: Store) {}
+  constructor(
+    private fb: FormBuilder,
+    private store: Store,
+    private meta: Meta,
+    private title: Title
+  ) {}
+
+  ngOnInit(): void {
+    this.title.setTitle($localize`Mot de passe oublié | Admin CPanel`);
+    this.meta.updateTag({
+      property: 'og:url',
+      content: environment.baseUrl + '/forgot-password',
+    });
+    this.meta.updateTag({
+      property: 'og:title',
+      content: $localize`Mot de passe oublié | Admin CPanel`,
+    });
+    this.meta.updateTag({
+      property: 'og:description',
+      content: $localize`Réinitialisez votre mot de passe`,
+    });
+  }
 
   public submit() {
     if (this.form.valid) {

src/app/modules/authentication/pages/login/login.component.html

@@ -36,7 +36,7 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900 dark:text-white" i18n>Conn
 
   <div class="flex items-center justify-between">
     <label for="remember-me" class="flex items-center cursor-pointer">
-      <input id="remember-me" name="remember-me" type="checkbox" class="w-4 h-4 rounded text-primary-600 border-slate-300 focus:ring-primary-500">
+      <input id="remember-me" name="remember-me" type="checkbox" class="w-4 h-4 bg-white rounded text-primary-600 border-slate-300 focus:ring-primary-500 dark:bg-gray-800 dark:border-slate-700 dark:focus:ring-offset-gray-800">
       <span class="block ml-2 text-sm text-slate-700 dark:text-slate-300" i18n>Se souvenir de moi</span>
     </label>
 

src/app/modules/authentication/pages/login/login.component.ts

@@ -14,7 +14,7 @@ import {
   templateUrl: './login.component.html',
 })
 export class LoginComponent {
-  public form: FormGroup = this.formBuilder.group({
+  public form: FormGroup = this.fb.group({
     email: ['', [Validators.required, Validators.email]],
     password: ['', Validators.required],
   });
@@ -25,7 +25,7 @@ export class LoginComponent {
 
   public loading$: Observable<boolean> = this.store.select(selectLoading);
 
-  constructor(private formBuilder: FormBuilder, private store: Store) {}
+  constructor(private fb: FormBuilder, private store: Store) {}
 
   public submit() {
     if (this.form.valid) {

src/app/modules/dashboard/pages/dashboard/dashboard.component.ts

@@ -1,13 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { Title } from '@angular/platform-browser';
 
 @Component({
   templateUrl: './dashboard.component.html',
 })
-export class DashboardComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+export class DashboardComponent {
+  constructor(private title: Title) {}
 }

src/app/modules/index.ts

@@ -8,10 +8,10 @@ import { Observable } from 'rxjs';
       [type]="type"
       [disabled]="loading$ | async"
       [ngClass]="class"
-      class="inline-flex items-center px-4 py-2 text-sm font-medium bg-white border rounded-md shadow-sm border-slate-300 text-slate-600 hover:bg-slate-50 hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
+      class="inline-flex items-center px-4 py-2 text-sm font-medium bg-white border rounded-md shadow-sm border-slate-300 text-slate-600 hover:bg-slate-50 hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-slate-300 dark:hover:text-white dark:focus:ring-offset-gray-800">
       <span *ngIf="loading$ | async">
         <svg
-          class="w-5 h-5 mr-3 -ml-1 text-slate-500 animate-spin"
+          class="w-5 h-5 mr-3 -ml-1 text-slate-500 dark:text-slate-400 animate-spin"
           fill="none"
           viewBox="0 0 24 24">
           <circle

src/app/shared/components/buttons/default.component.ts

@@ -6,7 +6,7 @@ import { Component, Input } from '@angular/core';
     <a
       [routerLink]="link"
       [ngClass]="class"
-      class="inline-flex items-center rounded-md border border-transparent bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
+      class="inline-flex items-center rounded-md border border-transparent bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-slate-300 dark:hover:text-white dark:focus:ring-offset-gray-800">
       <ng-content></ng-content>
     </a>
   `,

src/app/shared/components/buttons/link.component.ts

@@ -7,7 +7,7 @@ import { Observable } from 'rxjs';
     <button
       [type]="type"
       [disabled]="loading$ | async"
-      class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 border border-transparent rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition ease-in-out duration-150"
+      class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 border border-transparent rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition ease-in-out duration-150 dark:focus:ring-offset-gray-800"
       [ngClass]="class"
       matRipple
       matRippleColor="primary">

src/app/shared/components/buttons/primary.component.ts

@@ -0,0 +1,41 @@
+import { environment } from 'environments/environment';
+
+export const siteTitle = environment.appName;
+
+export interface SeoInterface {
+  [key: string]: {
+    title: string;
+    description?: string;
+    keywords?: string;
+    metaTags?: {
+      [key: string]: string;
+    };
+  };
+}
+
+export const meta: SeoInterface = {
+  '/auth/login': {
+    title: $localize`Connexion | ${siteTitle}`,
+    description: $localize`Connexion à votre compte`,
+    keywords: $localize`connexion, compte, admin, cpanel`,
+    metaTags: {
+      'og:url': `${environment.baseUrl}/auth/login`,
+    },
+  },
+  '/auth/forgot-password': {
+    title: $localize`Mot de passe oublié | ${siteTitle}`,
+    description: $localize`Réinitialisez votre mot de passe`,
+    keywords: $localize`mot de passe, oublié, admin, cpanel`,
+    metaTags: {
+      'og:url': `${environment.baseUrl}/auth/forgot-password`,
+    },
+  },
+  '/dashboard': {
+    title: $localize`Tableau de bord | ${siteTitle}`,
+    description: $localize`Tableau de bord`,
+    keywords: $localize`tableau de bord, admin, cpanel`,
+    metaTags: {
+      'og:url': `${environment.baseUrl}/dashboard`,
+    },
+  },
+};