igniteui-cli 15.2.2-alpha.3 → 15.3.0

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;
+}

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

@@ -0,0 +1,67 @@
+import { useState, type FormEvent } from 'react';
+import { IgrButton, IgrIcon, IgrInput } from 'igniteui-react';
+import { useAuth } from '../AuthContext';
+import type { RegisterInfo } from '../models/register-info';
+import styles from './Register.module.css';
+
+interface RegisterProps {
+  onLogin: () => void;
+  onSuccess: () => void;
+}
+
+export function Register({ onLogin, onSuccess }: RegisterProps) {
+  const { register } = useAuth();
+  const [givenName, setGivenName] = useState('');
+  const [familyName, setFamilyName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+
+  const canSubmit = givenName.trim() !== '' && email.trim() !== '' && password !== '';
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+    const data: RegisterInfo = {
+      given_name: givenName,
+      family_name: familyName,
+      email,
+      password
+    };
+    const err = await register(data);
+    if (err) {
+      setError(err);
+    } else {
+      setPassword('');
+      onSuccess();
+    }
+  };
+
+  return (
+    <form className={styles.form} onSubmit={handleSubmit} noValidate>
+      <IgrInput outlined type="text" name="given_name" label="First Name" autoComplete="given-name" required={true}
+        value={givenName} onInput={(e: any) => setGivenName(e.detail ?? '')}>
+        <IgrIcon slot="suffix" name="assignment_ind" collection="material" />
+      </IgrInput>
+      <IgrInput outlined type="text" name="family_name" label="Last Name" autoComplete="family-name"
+        value={familyName} onInput={(e: any) => setFamilyName(e.detail ?? '')}>
+        <IgrIcon slot="suffix" name="assignment_ind" collection="material" />
+      </IgrInput>
+      <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="new-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>Sign Up</span>
+        </IgrButton>
+        <a className={styles.linkBtn} onClick={onLogin} role="button" tabIndex={0}>Have an account?</a>
+      </div>
+    </form>
+  );
+}

package/templates/react/igr-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/react/igr-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/react/igr-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/react/igr-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;
+}

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

@@ -0,0 +1,87 @@
+.container {
+  display: flex;
+  justify-content: center;
+  padding: 48px 16px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.card {
+  align-self: flex-start;
+  width: 100%;
+  max-width: 640px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
+  padding: 32px;
+  box-sizing: border-box;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid #d7eaf8;
+}
+
+.avatar {
+  flex: 0 0 auto;
+  --ig-avatar-background: #e0f2ff;
+  --ig-avatar-color: #0075d2;
+  --ig-avatar-size: 4rem;
+}
+
+.intro {
+  min-width: 0;
+}
+
+.status {
+  margin: 0 0 4px;
+  color: #000;
+  font-size: .875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.name {
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: #09f;
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.description {
+  margin: 8px 0 0;
+  color: #000;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.details {
+  margin: 28px 0 0;
+  padding: 0;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 140px minmax(0, 1fr);
+  gap: 24px;
+  padding: 14px 0;
+  border-bottom: 1px solid #eef3f7;
+}
+
+.dt {
+  color: rgba(0, 0, 0, .62);
+  font-size: .875rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.dd {
+  margin: 0;
+  font-size: 1rem;
+  color: #2d2d2d;
+}

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

@@ -0,0 +1,42 @@
+import { IgrAvatar } from 'igniteui-react';
+import { useAuth } from '../AuthContext';
+import styles from './Profile.module.css';
+
+export default function Profile() {
+  const { currentUser } = useAuth();
+  const initials = ((currentUser?.given_name?.[0] ?? '') + (currentUser?.family_name?.[0] ?? '')).toUpperCase() || 'U';
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <div className={styles.header}>
+          <IgrAvatar
+            className={styles.avatar}
+            shape="circle"
+            initials={initials}
+            src={currentUser?.picture ?? ''}
+          />
+          <div className={styles.intro}>
+            <p className={styles.status}>Signed in</p>
+            <h1 className={styles.name}>{currentUser?.name || 'Your profile'}</h1>
+            <p className={styles.description}>Your account details are available on this protected route.</p>
+          </div>
+        </div>
+        <dl className={styles.details}>
+          <div className={styles.row}>
+            <dt className={styles.dt}>First name</dt>
+            <dd className={styles.dd}>{currentUser?.given_name || 'Not provided'}</dd>
+          </div>
+          <div className={styles.row}>
+            <dt className={styles.dt}>Last name</dt>
+            <dd className={styles.dd}>{currentUser?.family_name || 'Not provided'}</dd>
+          </div>
+          <div className={styles.row}>
+            <dt className={styles.dt}>Email</dt>
+            <dd className={styles.dd}>{currentUser?.email || 'No email available'}</dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ExternalAuth } from '../services/externalAuth';
+import { useAuth } from '../AuthContext';
+
+/**
+ * Handles the Facebook login redirect.
+ * Facebook uses a popup (JS SDK) instead of PKCE, so this page reads the profile
+ * that was stored in sessionStorage during the FB.login() callback.
+ */
+export default function RedirectFacebook() {
+  const { loginWith } = useAuth();
+  const navigate = useNavigate();
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const externalUser = await ExternalAuth.handleRedirect('facebook');
+        const err = await loginWith(externalUser);
+        if (err) {
+          setError(err);
+        } else {
+          navigate('/auth/profile');
+        }
+      } catch (e: any) {
+        console.error('Facebook sign-in failed:', e);
+        setError('Facebook sign-in failed. Please try again.');
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (error) {
+    return (
+      <div style={{ padding: '2rem', color: '#d32f2f' }}>
+        <p>{error}</p>
+        <button onClick={() => navigate('/')}>Back to Home</button>
+      </div>
+    );
+  }
+
+  return <p style={{ padding: '2rem' }}>Signing in with Facebook…</p>;
+}