igniteui-cli 15.2.2 → 15.3.0

package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/app.ts

@@ -0,0 +1,251 @@
+import { Router } from '@vaadin/router';
+import { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcIconComponent,
+  IgcNavDrawerComponent,
+  IgcNavDrawerItemComponent,
+  registerIcon,
+} from 'igniteui-webcomponents';
+import { routes, type AppRoute } from './app-routing.js';
+import { UserStore } from './authentication/services/userStore.js';
+import './authentication/login-bar/login-bar.js';
+
+defineComponents(
+  IgcIconComponent,
+  IgcNavDrawerComponent,
+  IgcNavDrawerItemComponent,
+);
+
+const materialIcons = [
+  ['home', 'action/svg/production/ic_home_24px.svg'],
+  ['menu', 'navigation/svg/production/ic_menu_24px.svg'],
+  ['apps', 'navigation/svg/production/ic_apps_24px.svg'],
+  ['code', 'action/svg/production/ic_code_24px.svg'],
+  ['build', 'action/svg/production/ic_build_24px.svg'],
+  ['palette', 'image/svg/production/ic_palette_24px.svg'],
+  ['account_circle', 'action/svg/production/ic_account_circle_24px.svg'],
+  ['lock', 'action/svg/production/ic_lock_24px.svg'],
+  ['assignment_ind', 'action/svg/production/ic_assignment_ind_24px.svg'],
+] as const;
+
+materialIcons.forEach(([name, path]) =>
+  registerIcon(name, `https://unpkg.com/material-design-icons@3.0.1/${path}`, 'material')
+);
+
+@customElement('app-root')
+export default class App extends LitElement {
+  @state()
+  private drawerOpen = true;
+
+  @state()
+  private drawerPosition: 'relative' | 'start' = 'relative';
+
+  @state()
+  private currentPath = window.location.pathname;
+
+  @state()
+  private isLoggedIn = Boolean(UserStore.getUser());
+
+  private mediaQuery?: MediaQueryList;
+
+  static styles = css`
+    :host {
+      display: flex;
+      height: 100%;
+    }
+
+    .app {
+      display: flex;
+      flex-flow: column nowrap;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .app__navbar {
+      display: flex;
+      align-items: center;
+      flex: 0 0 auto;
+      height: 56px;
+      padding: 0 16px;
+      background: #239ef0;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
+      box-sizing: border-box;
+      position: relative;
+      z-index: 10;
+    }
+
+    .app__menu-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      padding: 0;
+      color: #000;
+      border: 0;
+      background: transparent;
+      cursor: pointer;
+    }
+
+    .app__menu-button igc-icon {
+      font-size: 24px;
+    }
+
+    .app__title {
+      margin: 0 0 0 16px;
+      color: #000;
+      font-size: 1.25rem;
+      font-weight: 600;
+      line-height: 1;
+    }
+
+    .app__navbar-spacer {
+      flex: 1 1 auto;
+    }
+
+    .app__body {
+      display: flex;
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+
+    .app__drawer {
+      flex: 0 0 auto;
+      height: 100%;
+      --menu-full-width: 280px;
+    }
+
+    igc-nav-drawer-item::part(base) {
+      min-height: 48px;
+      color: #2d2d2d;
+    }
+
+    igc-nav-drawer-item[active]::part(base) {
+      background: #e0f2ff;
+      color: #0075d2;
+    }
+
+    igc-nav-drawer-item[active] igc-icon {
+      color: #0075d2;
+    }
+
+    igc-nav-drawer-item:not([active]) igc-icon {
+      color: #2d2d2d;
+    }
+
+    router-outlet {
+      flex: 1 1 auto;
+      display: flex;
+      align-items: stretch;
+      justify-content: center;
+      min-width: 0;
+      overflow: auto;
+    }
+  `;
+
+  render() {
+    const visibleRoutes = (routes as AppRoute[]).filter((route) => {
+      if (!route.name) return false;
+      if (route.requiresAuth && !this.isLoggedIn) return false;
+      return true;
+    });
+
+    return html`
+      <div class="app">
+        <header class="app__navbar">
+          <button
+            class="app__menu-button"
+            type="button"
+            aria-label="Toggle navigation"
+            @click=${this.toggleDrawer}
+          >
+            <igc-icon name="menu" collection="material"></igc-icon>
+          </button>
+          <h1 class="app__title">$(name)</h1>
+          <div class="app__navbar-spacer"></div>
+          <auth-login-bar @auth-change=${this.handleAuthChange}></auth-login-bar>
+        </header>
+        <div class="app__body">
+          <igc-nav-drawer
+            class="app__drawer"
+            ?open=${this.drawerOpen}
+            position=${this.drawerPosition}
+          >
+            ${visibleRoutes.map((route) => html`
+              <igc-nav-drawer-item
+                ?active=${this.currentPath === route.path}
+                @click=${() => this.navigate(route.path)}
+              >
+                <igc-icon
+                  slot="icon"
+                  name=${route.icon || 'home'}
+                  collection="material"
+                ></igc-icon>
+                <span slot="content">${route.name}</span>
+              </igc-nav-drawer-item>
+            `)}
+          </igc-nav-drawer>
+          <router-outlet></router-outlet>
+        </div>
+      </div>
+    `;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.mediaQuery = window.matchMedia('(min-width: 1025px)');
+    this.updateDrawerState();
+    this.mediaQuery.addEventListener('change', this.updateDrawerState);
+    window.addEventListener('popstate', this.updateCurrentPath);
+    // Listen globally so redirect components (Google/Facebook/Microsoft) in the router
+    // outlet can also trigger a shell state update after a successful OAuth redirect.
+    window.addEventListener('auth-change', this.handleAuthChange);
+  }
+
+  disconnectedCallback() {
+    this.mediaQuery?.removeEventListener('change', this.updateDrawerState);
+    window.removeEventListener('popstate', this.updateCurrentPath);
+    window.removeEventListener('auth-change', this.handleAuthChange);
+
+    super.disconnectedCallback();
+  }
+
+  firstUpdated() {
+    const outlet = this.shadowRoot?.querySelector('router-outlet');
+    const router = new Router(outlet);
+    router.setRoutes(routes);
+  }
+
+  private toggleDrawer = () => {
+    this.drawerOpen = !this.drawerOpen;
+  };
+
+  private navigate(path: string) {
+    this.currentPath = path;
+    Router.go(path);
+
+    if (!this.mediaQuery?.matches) {
+      this.drawerOpen = false;
+    }
+  }
+
+  private updateDrawerState = () => {
+    const pinned = Boolean(this.mediaQuery?.matches);
+
+    this.drawerOpen = pinned;
+    this.drawerPosition = pinned ? 'relative' : 'start';
+  };
+
+  private updateCurrentPath = () => {
+    this.currentPath = window.location.pathname;
+  };
+
+  private handleAuthChange = () => {
+    this.isLoggedIn = Boolean(UserStore.getUser());
+    this.currentPath = window.location.pathname;
+  };
+}

package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.ts

@@ -0,0 +1,124 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { Router } from '@vaadin/router';
+import { defineComponents, IgcAvatarComponent, IgcButtonComponent, IgcDropdownComponent, IgcDropdownItemComponent } from 'igniteui-webcomponents';
+import { UserStore } from '../services/userStore.js';
+import { ExternalAuth } from '../services/externalAuth.js';
+import type { User } from '../models/user.js';
+import '../login-dialog/login-dialog.js';
+
+defineComponents(IgcAvatarComponent, IgcButtonComponent, IgcDropdownComponent, IgcDropdownItemComponent);
+
+@customElement('auth-login-bar')
+export class LoginBarElement extends LitElement {
+  @state() private currentUser: User | null = UserStore.getUser();
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+
+    .login-btn::part(base) {
+      color: #0075d2;
+      background: #fff;
+      border-color: rgba(0, 117, 210, 0.35);
+      font-weight: 600;
+      white-space: nowrap;
+    }
+
+    .login-btn::part(base):hover {
+      background: #e8f3fc;
+    }
+
+    .profile-avatar {
+      cursor: pointer;
+      color: #0075d2;
+      --ig-avatar-background: #fff;
+      --ig-avatar-color: #0075d2;
+      --ig-avatar-initials-font-size: 0.875rem;
+    }
+
+    igc-dropdown-item:hover,
+    igc-dropdown-item[active]:hover {
+      background: #e8f3fc;
+      color: #0075d2;
+    }
+
+    igc-dropdown-item[active] {
+      background: #e8f3fc;
+      color: #0075d2;
+    }
+
+    igc-dropdown-item[selected],
+    igc-dropdown-item[selected]:hover,
+    igc-dropdown-item[selected][active] {
+      background: #e8f3fc;
+      color: #0075d2;
+    }
+
+    .profile-avatar:focus-visible {
+      outline: 2px solid #fff;
+      outline-offset: 2px;
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('auth-change', this.handleAuthChange as EventListener);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('auth-change', this.handleAuthChange as EventListener);
+    super.disconnectedCallback();
+  }
+
+  private handleAuthChange = () => {
+    this.currentUser = UserStore.getUser();
+  };
+
+  private handleMenuSelect(e: CustomEvent) {
+    // igcChange detail is the selected IgcDropdownItemComponent element
+    const value = (e.detail as any)?.value;
+    if (value === 'profile') {
+      Router.go('/auth/profile');
+    } else if (value === 'logout') {
+      ExternalAuth.logout();
+      UserStore.clearUser();
+      this.currentUser = null;
+      Router.go('/');
+    }
+  }
+
+  render() {
+    if (!this.currentUser) {
+      return html`
+        <igc-button variant="outlined" class="login-btn" @click=${() => (this.shadowRoot?.querySelector('auth-login-dialog') as any)?.open()}>Log In</igc-button>
+        <auth-login-dialog @auth-change=${this.handleAuthChange}></auth-login-dialog>
+      `;
+    }
+
+    const initials = UserStore.getInitials(this.currentUser);
+
+    return html`
+      <igc-dropdown placement="bottom-end" @igcChange=${this.handleMenuSelect}>
+        <igc-avatar
+          slot="target"
+          class="profile-avatar"
+          shape="circle"
+          size="small"
+          src=${this.currentUser.picture ?? ''}
+          tabindex="0"
+          aria-label="Open profile menu"
+        >${initials}</igc-avatar>
+        <igc-dropdown-item value="profile">Profile</igc-dropdown-item>
+        <igc-dropdown-item value="logout">Log Out</igc-dropdown-item>
+      </igc-dropdown>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'auth-login-bar': LoginBarElement;
+  }
+}

package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.ts

@@ -0,0 +1,253 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { Router } from '@vaadin/router';
+import { defineComponents, IgcButtonComponent, IgcDialogComponent, IgcIconComponent, IgcInputComponent } from 'igniteui-webcomponents';
+import { Authentication } from '../services/authentication.js';
+import { ExternalAuth } from '../services/externalAuth.js';
+import { UserStore } from '../services/userStore.js';
+import type { User } from '../models/user.js';
+
+defineComponents(IgcButtonComponent, IgcDialogComponent, IgcIconComponent, IgcInputComponent);
+
+@customElement('auth-login-dialog')
+export class LoginDialogElement extends LitElement {
+  @state() private showLogin = true;
+  @state() private error = '';
+  @state() private _loginValid = false;
+  @state() private _registerValid = false;
+
+  static styles = css`
+    igc-dialog::part(base) {
+      max-width: 24rem;
+      width: calc(100vw - 48px);
+    }
+
+    igc-dialog::part(title) {
+      font-size: 1.125rem;
+      font-weight: 600;
+      color: #2d2d2d;
+      border-bottom: none;
+    }
+
+    .form {
+      display: flex;
+      flex-flow: column;
+      gap: 16px;
+      padding: 8px 0 0;
+    }
+
+    .form > * {
+      width: 100%;
+    }
+
+    igc-input {
+      --ig-input-group-focused-secondary-color: #239ef0;
+      --ig-input-group-focused-border-color: #239ef0;
+      --ig-input-group-filled-text-color: #2d2d2d;
+    }
+
+    igc-input igc-icon {
+      color: #0075d2;
+      --ig-icon-size: 1.50rem;
+    }
+
+    .error {
+      margin: 0;
+      font-size: .875rem;
+      color: #d32f2f;
+    }
+
+    .submit-btn {
+      display: block;
+    }
+
+    .submit-btn::part(base) {
+      width: 100%;
+      min-height: 40px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .submit-btn:not([disabled])::part(base) {
+      background: #239ef0;
+      color: #fff;
+    }
+
+    .submit-btn:not([disabled])::part(base):hover {
+      background: #1a8fd8;
+    }
+
+    .submit-btn[disabled]::part(base) {
+      background: #e0e0e0;
+      color: #767676;
+    }
+
+    .link-btn {
+      align-self: center;
+      text-align: center;
+      color: #0075d2;
+      font-size: .875rem;
+      cursor: pointer;
+      text-decoration: underline;
+      text-transform: none;
+    }
+
+    .link-btn:hover,
+    .link-btn:focus-visible {
+      color: #005da8;
+    }
+
+    .social-login {
+      display: grid;
+      gap: 8px;
+      padding-top: 16px;
+      border-top: 1px solid #d7d7d7;
+    }
+
+    .social-btn {
+      display: block;
+    }
+
+    .social-btn::part(base) {
+      width: 100%;
+      min-height: 40px;
+      color: #fff;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .google::part(base)    { background: rgb(255, 19, 74); }
+    .facebook::part(base)  { background: rgb(19, 119, 213); }
+    .microsoft::part(base) { background: rgb(27, 158, 245); }
+  `;
+
+  private dialogRef: IgcDialogComponent | null = null;
+
+  public open() {
+    this.showLogin = true;
+    this.error = '';
+    this.dialogRef?.show();
+  }
+
+  firstUpdated() {
+    this.dialogRef = this.shadowRoot?.querySelector('igc-dialog') ?? null;
+  }
+
+  private checkLoginValidity = (e: Event) => {
+    this._loginValid = (e.currentTarget as HTMLFormElement).checkValidity();
+  };
+
+  private checkRegisterValidity = (e: Event) => {
+    this._registerValid = (e.currentTarget as HTMLFormElement).checkValidity();
+  };
+
+  private handleLoginSubmit = async (e: Event) => {
+    e.preventDefault();
+    this.error = '';
+    const form = e.target as HTMLFormElement;
+    const data = new FormData(form);
+    const result = await Authentication.login({
+      email: data.get('email') as string,
+      password: data.get('password') as string,
+    });
+    if (result.user) {
+      form.reset();
+      this._loginValid = false;
+      UserStore.setUser(result.user as User);
+      this.dialogRef?.hide();
+      this.dispatchEvent(new CustomEvent('auth-change', { bubbles: true, composed: true }));
+      Router.go('/auth/profile');
+    } else {
+      this.error = result.error ?? 'Login failed';
+    }
+  };
+
+  private handleRegisterSubmit = async (e: Event) => {
+    e.preventDefault();
+    this.error = '';
+    const form = e.target as HTMLFormElement;
+    const data = new FormData(form);
+    const result = await Authentication.register({
+      given_name: data.get('given_name') as string,
+      family_name: data.get('family_name') as string,
+      email: data.get('email') as string,
+      password: data.get('password') as string,
+    });
+    if (result.user) {
+      form.reset();
+      this._registerValid = false;
+      UserStore.setUser(result.user as User);
+      this.dialogRef?.hide();
+      this.dispatchEvent(new CustomEvent('auth-change', { bubbles: true, composed: true }));
+      Router.go('/auth/profile');
+    } else {
+      this.error = result.error ?? 'Registration failed';
+    }
+  };
+
+  render() {
+    const title = this.showLogin ? 'Login' : 'Register';
+
+    const loginForm = html`
+      <form class="form" @submit=${this.handleLoginSubmit} @input=${this.checkLoginValidity} novalidate>
+        <igc-input outlined type="email" name="email" label="Email" autocomplete="email" required>
+          <igc-icon slot="suffix" name="account_circle" collection="material"></igc-icon>
+        </igc-input>
+        <igc-input outlined type="password" name="password" label="Password" autocomplete="current-password" required>
+          <igc-icon slot="suffix" name="lock" collection="material"></igc-icon>
+        </igc-input>
+        ${this.error ? html`<p class="error">${this.error}</p>` : ''}
+        <igc-button class="submit-btn" variant="contained" type="submit" ?disabled=${!this._loginValid}>Log In</igc-button>
+        <a class="link-btn" @click=${() => { this.showLogin = false; this.error = ''; }} role="button" tabindex="0">Create new account</a>
+        ${ExternalAuth.hasProvider() ? html`
+          <div class="social-login">
+            ${ExternalAuth.hasProvider('google') ? html`
+              <igc-button class="social-btn google" variant="contained" type="button"
+                @click=${() => ExternalAuth.login('google')}>Sign in with Google</igc-button>
+            ` : ''}
+            ${ExternalAuth.hasProvider('facebook') ? html`
+              <igc-button class="social-btn facebook" variant="contained" type="button"
+                @click=${() => ExternalAuth.login('facebook')}>Sign in with Facebook</igc-button>
+            ` : ''}
+            ${ExternalAuth.hasProvider('microsoft') ? html`
+              <igc-button class="social-btn microsoft" variant="contained" type="button"
+                @click=${() => ExternalAuth.login('microsoft')}>Sign in with Microsoft</igc-button>
+            ` : ''}
+          </div>
+        ` : ''}
+      </form>
+    `;
+
+    const registerForm = html`
+      <form class="form" @submit=${this.handleRegisterSubmit} @input=${this.checkRegisterValidity} novalidate>
+        <igc-input outlined type="text" name="given_name" label="First Name" autocomplete="given-name" required>
+          <igc-icon slot="suffix" name="assignment_ind" collection="material"></igc-icon>
+        </igc-input>
+        <igc-input outlined type="text" name="family_name" label="Last Name" autocomplete="family-name">
+          <igc-icon slot="suffix" name="assignment_ind" collection="material"></igc-icon>
+        </igc-input>
+        <igc-input outlined type="email" name="email" label="Email" autocomplete="email" required>
+          <igc-icon slot="suffix" name="account_circle" collection="material"></igc-icon>
+        </igc-input>
+        <igc-input outlined type="password" name="password" label="Password" autocomplete="new-password" required>
+          <igc-icon slot="suffix" name="lock" collection="material"></igc-icon>
+        </igc-input>
+        ${this.error ? html`<p class="error">${this.error}</p>` : ''}
+        <igc-button class="submit-btn" variant="contained" type="submit" ?disabled=${!this._registerValid}>Sign Up</igc-button>
+        <a class="link-btn" @click=${() => { this.showLogin = true; this.error = ''; }} role="button" tabindex="0">Have an account?</a>
+      </form>
+    `;
+    return html`
+      <igc-dialog .title=${title} .closeOnOutsideClick=${true}>
+        <span slot="footer"></span>
+        ${this.showLogin ? loginForm : registerForm}
+      </igc-dialog>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'auth-login-dialog': LoginDialogElement;
+  }
+}

package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/models/external-login.ts

@@ -0,0 +1,10 @@
+/** User profile returned by a social (external) auth provider. */
+export interface ExternalLogin {
+  id: string;
+  name: string;
+  email?: string; // not always present use id as fallback key
+  given_name?: string;
+  family_name?: string;
+  picture?: string;
+  externalToken: string;
+}

package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/models/login.ts

@@ -0,0 +1,4 @@
+export interface Login {
+  email: string;
+  password: string;
+}

package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/models/register-info.ts

@@ -0,0 +1,6 @@
+export interface RegisterInfo {
+  given_name: string;
+  family_name: string;
+  email: string;
+  password: string;
+}

package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/models/user.ts

@@ -0,0 +1,19 @@
+/** Data transfer model expected from backend API JWT-s */
+export interface UserJWT {
+  exp: number;
+  name: string;
+  given_name: string;
+  family_name: string;
+  email: string;
+  picture?: string;
+}
+
+/** Client user model */
+export interface User extends UserJWT {
+  token: string;
+}
+
+export interface LoginResult {
+  user?: User;
+  error?: string;
+}