igniteui-cli 15.2.2 → 15.3.1-beta.1

package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/app.css

@@ -0,0 +1,84 @@
+.app {
+  display: flex;
+  flex-flow: column nowrap;
+  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__navbar-spacer {
+  flex: 1 1 auto;
+}
+
+.app__title {
+  margin: 0 0 0 16px;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1;
+  color: #000;
+}
+
+.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__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;
+}
+
+.app__content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: stretch;
+  min-width: 0;
+  overflow: auto;
+}

package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/app.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useMemo, useState } from "react";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import {
+  IgrIcon,
+  IgrNavDrawer,
+  IgrNavDrawerItem,
+  registerIcon,
+} from "igniteui-react";
+import { configureTheme } from "igniteui-webcomponents";
+import { AuthProvider, useAuth } from "./authentication/AuthContext";
+import { LoginBar } from "./authentication/components/LoginBar";
+import { routes } from "./app-routes";
+import "igniteui-webcomponents/themes/light/material.css";
+import "./app.css";
+
+configureTheme('material', 'light');
+
+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")
+);
+
+function AppContent() {
+  const name = "$(name)";
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { currentUser } = useAuth();
+  const [drawerOpen, setDrawerOpen] = useState(true);
+  const [drawerPosition, setDrawerPosition] = useState<"relative" | "start">("relative");
+
+  const visibleRoutes = useMemo(() => {
+    return routes.filter((route) => {
+      if (!route.path || !route.text) return false;
+      if ((route as any).requiresAuth && !currentUser) return false;
+      return true;
+    });
+  }, [currentUser]);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(min-width: 1025px)");
+    const updateDrawerState = () => {
+      setDrawerOpen(mediaQuery.matches);
+      setDrawerPosition(mediaQuery.matches ? "relative" : "start");
+    };
+
+    updateDrawerState();
+    mediaQuery.addEventListener("change", updateDrawerState);
+
+    return () => mediaQuery.removeEventListener("change", updateDrawerState);
+  }, []);
+
+  const handleRouteClick = (path: string) => {
+    navigate(path);
+
+    if (window.matchMedia("(max-width: 1024px)").matches) {
+      setDrawerOpen(false);
+    }
+  };
+
+  return (
+    <div className="app">
+      <header className="app__navbar">
+        <button
+          className="app__menu-button"
+          type="button"
+          aria-label="Toggle navigation"
+          onClick={() => setDrawerOpen((open) => !open)}
+        >
+          <IgrIcon name="menu" collection="material" />
+        </button>
+        <h1 className="app__title">{name}</h1>
+        <div className="app__navbar-spacer" />
+        <LoginBar />
+      </header>
+      <div className="app__body">
+        <IgrNavDrawer
+          className="app__drawer"
+          open={drawerOpen}
+          position={drawerPosition}
+        >
+          {visibleRoutes.map((route) => (
+            <IgrNavDrawerItem
+              key={route.path}
+              active={location.pathname === route.path}
+              onClick={() => handleRouteClick(route.path)}
+            >
+              <IgrIcon
+                slot="icon"
+                name={route.icon || "home"}
+                collection="material"
+                style={{
+                  color: location.pathname === route.path ? "#0075D2" : "#2d2d2d",
+                }}
+              />
+              <span slot="content">{route.text}</span>
+            </IgrNavDrawerItem>
+          ))}
+        </IgrNavDrawer>
+        <main className="app__content">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <AuthProvider>
+      <AppContent />
+    </AuthProvider>
+  );
+}

package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/AuthContext.tsx

@@ -0,0 +1,73 @@
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+import type { User } from './models/user';
+import type { Login } from './models/login';
+import type { RegisterInfo } from './models/register-info';
+import type { ExternalLogin } from './models/external-login';
+import { Authentication } from './services/authentication';
+import { UserStore } from './services/userStore';
+import { ExternalAuth } from './services/externalAuth';
+
+interface AuthContextType {
+  currentUser: User | null;
+  initials: string | null;
+  login: (data: Login) => Promise<string | null>;
+  register: (data: RegisterInfo) => Promise<string | null>;
+  loginWith: (data: ExternalLogin) => Promise<string | null>;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [currentUser, setCurrentUser] = useState<User | null>(() => UserStore.getUser());
+
+  const initials = currentUser ? UserStore.getInitials(currentUser) : null;
+
+  const login = useCallback(async (data: Login): Promise<string | null> => {
+    const result = await Authentication.login(data);
+    if (result.user) {
+      UserStore.setUser(result.user);
+      setCurrentUser(result.user);
+      return null;
+    }
+    return result.error ?? 'Login failed';
+  }, []);
+
+  const register = useCallback(async (data: RegisterInfo): Promise<string | null> => {
+    const result = await Authentication.register(data);
+    if (result.user) {
+      UserStore.setUser(result.user);
+      setCurrentUser(result.user);
+      return null;
+    }
+    return result.error ?? 'Registration failed';
+  }, []);
+
+  const loginWith = useCallback(async (data: ExternalLogin): Promise<string | null> => {
+    const result = await Authentication.loginWith(data);
+    if (result.user) {
+      UserStore.setUser(result.user);
+      setCurrentUser(result.user);
+      return null;
+    }
+    return result.error ?? 'Social login failed';
+  }, []);
+
+  const logout = useCallback(() => {
+    ExternalAuth.logout();
+    UserStore.clearUser();
+    setCurrentUser(null);
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ currentUser, initials, login, register, loginWith, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
+  return ctx;
+}

package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/AuthGuard.tsx

@@ -0,0 +1,14 @@
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuth } from './AuthContext';
+import type { ReactNode } from 'react';
+
+export function AuthGuard({ children }: { children: ReactNode }) {
+  const { currentUser } = useAuth();
+  const location = useLocation();
+
+  if (!currentUser) {
+    return <Navigate to="/" state={{ returnUrl: location.pathname }} replace />;
+  }
+
+  return <>{children}</>;
+}

package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Login.module.css

@@ -0,0 +1,93 @@
+.form {
+  display: flex;
+  flex-flow: column;
+  gap: 16px;
+  padding: 8px 0 0;
+}
+
+.form igc-input {
+  width: 100%;
+  --ig-input-group-focused-secondary-color: #239ef0;
+  --ig-input-group-focused-border-color: #239ef0;
+  --ig-input-group-filled-text-color: #2d2d2d;
+}
+
+.form igc-input igc-icon {
+  color: #0075d2;
+  --ig-icon-size: 1.50rem;
+}
+
+.error {
+  margin: 0;
+  font-size: .875rem;
+  color: #d32f2f;
+}
+
+.actions {
+  display: flex;
+  flex-flow: column;
+  gap: 8px;
+  padding-top: 4px;
+}
+
+.submitBtn {
+  display: block;
+}
+
+.submitBtn::part(base) {
+  width: 100%;
+  min-height: 40px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.submitBtn:not([disabled])::part(base) {
+  background: #239ef0;
+  color: #fff;
+}
+
+.submitBtn:not([disabled])::part(base):hover {
+  background: #1a8fd8;
+}
+
+.submitBtn[disabled]::part(base) {
+  background: #e0e0e0;
+  color: #767676;
+}
+
+.linkBtn {
+  align-self: center;
+  color: #0075d2;
+  font-size: .875rem;
+  cursor: pointer;
+  text-decoration: underline;
+  text-transform: none;
+}
+
+.linkBtn:hover,
+.linkBtn:focus-visible {
+  color: #005da8;
+}
+
+.socialLogin {
+  display: grid;
+  gap: 8px;
+  padding-top: 16px;
+  border-top: 1px solid #d7d7d7;
+}
+
+.socialBtn {
+  display: block;
+}
+
+.socialBtn::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); }

package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Login.tsx

@@ -0,0 +1,69 @@
+import { useState, type FormEvent } from 'react';
+import { IgrButton, IgrIcon, IgrInput } from 'igniteui-react';
+import { useAuth } from '../AuthContext';
+import { ExternalAuth } from '../services/externalAuth';
+import type { Login as LoginData } from '../models/login';
+import styles from './Login.module.css';
+
+interface LoginProps {
+  onRegister: () => void;
+  onSuccess: () => void;
+}
+
+export function Login({ onRegister, onSuccess }: LoginProps) {
+  const { login } = useAuth();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+
+  const canSubmit = email.trim() !== '' && password !== '';
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+    const data: LoginData = { email, password };
+    const err = await login(data);
+    if (err) {
+      setError(err);
+    } else {
+      setPassword('');
+      onSuccess();
+    }
+  };
+
+  return (
+    <form className={styles.form} onSubmit={handleSubmit} noValidate>
+      <IgrInput outlined type="email" name="email" label="Email" autoComplete="email" required={true}
+        value={email} onInput={(e: any) => setEmail(e.detail ?? '')}>
+        <IgrIcon slot="suffix" name="account_circle" collection="material" />
+      </IgrInput>
+      <IgrInput outlined type="password" name="password" label="Password" autoComplete="current-password" required={true}
+        value={password} onInput={(e: any) => setPassword(e.detail ?? '')}>
+        <IgrIcon slot="suffix" name="lock" collection="material" />
+      </IgrInput>
+      {error && <p className={styles.error}>{error}</p>}
+      <div className={styles.actions}>
+        <IgrButton variant="contained" type="submit" className={styles.submitBtn} disabled={!canSubmit}>
+          <span>Log In</span>
+        </IgrButton>
+        <a className={styles.linkBtn} onClick={onRegister} role="button" tabIndex={0}>Create new account</a>
+      </div>
+      {ExternalAuth.hasProvider() && (
+        <div className={styles.socialLogin}>
+          {ExternalAuth.hasProvider('google') && (
+            <IgrButton variant="contained" type="button" className={`${styles.socialBtn} ${styles.google}`}
+              onClick={() => ExternalAuth.login('google')}><span>Sign in with Google</span></IgrButton>
+          )}
+          {ExternalAuth.hasProvider('facebook') && (
+            <IgrButton variant="contained" type="button" className={`${styles.socialBtn} ${styles.facebook}`}
+              onClick={() => ExternalAuth.login('facebook')}><span>Sign in with Facebook</span></IgrButton>
+          )}
+          {ExternalAuth.hasProvider('microsoft') && (
+            <IgrButton variant="contained" type="button" className={`${styles.socialBtn} ${styles.microsoft}`}
+              onClick={() => ExternalAuth.login('microsoft')}><span>Sign in with Microsoft</span></IgrButton>
+          )}
+        </div>
+      )}
+    </form>
+  );
+}

package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginBar.module.css

@@ -0,0 +1,42 @@
+.loginBtn::part(base) {
+  color: #0075d2;
+  background: #fff;
+  border-color: rgba(0, 117, 210, 0.35);
+  font-weight: 600;
+  white-space: nowrap;
+  transition: background .15s;
+}
+
+.loginBtn::part(base):hover {
+  background: #e8f3fc;
+}
+
+.profileAvatar {
+  cursor: pointer;
+  color: #0075d2;
+  --ig-avatar-background: #fff;
+  --ig-avatar-color: #0075d2;
+}
+
+:global(igc-dropdown-item:hover),
+:global(igc-dropdown-item[active]:hover) {
+  background: #e8f3fc;
+  color: #0075d2;
+}
+
+:global(igc-dropdown-item[active]) {
+  background: #e8f3fc;
+  color: #0075d2;
+}
+
+:global(igc-dropdown-item[selected]),
+:global(igc-dropdown-item[selected]:hover),
+:global(igc-dropdown-item[selected][active]) {
+  background: #e8f3fc;
+  color: #0075d2;
+}
+
+.profileAvatar:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}

package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginBar.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { IgrAvatar, IgrButton, IgrDropdown, IgrDropdownItem } from 'igniteui-react';
+import { useAuth } from '../AuthContext';
+import { LoginDialog } from './LoginDialog';
+import styles from './LoginBar.module.css';
+
+export function LoginBar() {
+  const { currentUser, initials, logout } = useAuth();
+  const navigate = useNavigate();
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  if (!currentUser) {
+    return (
+      <>
+        <IgrButton variant="outlined" className={styles.loginBtn} onClick={() => setDialogOpen(true)}>
+          <span>Log In</span>
+        </IgrButton>
+        <LoginDialog open={dialogOpen} onClose={() => setDialogOpen(false)} />
+      </>
+    );
+  }
+
+  return (
+    <IgrDropdown placement="bottom-end">
+      <IgrAvatar
+        slot="target"
+        className={styles.profileAvatar}
+        shape="circle"
+        size="small"
+        initials={initials}
+        src={currentUser.picture ?? ''}
+        tabIndex={0}
+        aria-label="Open profile menu"
+      />
+      <IgrDropdownItem onClick={() => navigate('/auth/profile')}>
+        <span>Profile</span>
+      </IgrDropdownItem>
+      <IgrDropdownItem onClick={() => { logout(); navigate('/'); }}>
+        <span>Log Out</span>
+      </IgrDropdownItem>
+    </IgrDropdown>
+  );
+}

package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginDialog.module.css

@@ -0,0 +1,14 @@
+.dialog::part(base) {
+  max-width: 24rem;
+  width: calc(100vw - 48px);
+}
+
+.dialog::part(title) {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #2d2d2d;
+}
+
+.body {
+  padding: 4px 0;
+}

package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginDialog.tsx

@@ -0,0 +1,49 @@
+import { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { IgrDialog } from 'igniteui-react';
+import { Login } from './Login';
+import { Register } from './Register';
+import styles from './LoginDialog.module.css';
+
+interface LoginDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function LoginDialog({ open, onClose }: LoginDialogProps) {
+  const [showLogin, setShowLogin] = useState(true);
+  const dialogRef = useRef<IgrDialog>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (open) {
+      setShowLogin(true);
+      dialogRef.current?.show();
+    } else {
+      dialogRef.current?.hide();
+    }
+  }, [open]);
+
+  const handleSuccess = () => {
+    dialogRef.current?.hide();
+    navigate('/auth/profile');
+  };
+
+  return (
+    <IgrDialog
+      ref={dialogRef}
+      className={styles.dialog}
+      title={showLogin ? 'Login' : 'Register'}
+      closeOnOutsideClick={true}
+      onClosed={onClose}
+    >
+      <div className={styles.body}>
+        {showLogin
+          ? <Login onRegister={() => setShowLogin(false)} onSuccess={handleSuccess} />
+          : <Register onLogin={() => setShowLogin(true)} onSuccess={handleSuccess} />
+        }
+      </div>
+      <span slot="footer" />
+    </IgrDialog>
+  );
+}

package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Register.module.css

@@ -0,0 +1,74 @@
+.form {
+  display: flex;
+  flex-flow: column;
+  gap: 16px;
+  padding: 8px 0 0;
+}
+
+.form igc-input {
+  width: 100%;
+  --ig-input-group-focused-secondary-color: #239ef0;
+  --ig-input-group-focused-border-color: #239ef0;
+  --ig-input-group-filled-text-color: #2d2d2d;
+}
+
+.form igc-input igc-icon {
+  color: #0075d2;
+  --ig-icon-size: 1.50rem;
+}
+
+.error {
+  margin: 0;
+  font-size: .875rem;
+  color: #d32f2f;
+}
+
+.actions {
+  display: flex;
+  flex-flow: column;
+  gap: 8px;
+  padding-top: 4px;
+}
+
+.submitBtn {
+  display: block;
+}
+
+.submitBtn::part(base) {
+  width: 100%;
+  min-height: 40px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.submitBtn:not([disabled])::part(base) {
+  background: #239ef0;
+  color: #fff;
+}
+
+.submitBtn:not([disabled])::part(base):hover {
+  background: #1a8fd8;
+}
+
+.submitBtn[disabled]::part(base) {
+  background: #e0e0e0;
+  color: #767676;
+}
+
+.linkBtn {
+  align-self: center;
+  color: #0075d2;
+  font-size: .875rem;
+  cursor: pointer;
+  text-decoration: underline;
+  text-transform: none;
+}
+
+.linkBtn:hover,
+.linkBtn:focus-visible {
+  color: #005da8;
+}
+
+.linkBtn::part(base):hover {
+  color: #005da8;
+}