@xeplr/ui-account 1.0.0

package/src/designs/AccessMatrixSample.jsx

@@ -0,0 +1,199 @@
+import './admin.css';
+
+var ACTION_LABELS = { view: 'View Only', edit: 'Add / Edit', delete: 'Delete' };
+var ACTION_CLASSES = { view: 'xeplr-admin-action-view', edit: 'xeplr-admin-action-edit', delete: 'xeplr-admin-action-delete' };
+var UNCAT_TABS = [
+  { key: 'apis', label: 'APIs' },
+  { key: 'pages', label: 'Pages' },
+  { key: 'elements', label: 'Elements' },
+  { key: 'menus', label: 'Menus' },
+];
+
+export default function AccessMatrixSample({
+  roles, modules, uncategorized, uncategorizedCount, uncatSubTab, setUncatSubTab,
+  activeView, setActiveView, search, setSearch,
+  loading, error, handleModuleToggle, handleItemToggle,
+  isItemAssigned, isModuleSaving, isItemSaving, reload
+}) {
+  return (
+    <div className="xeplr-admin-container">
+      <div className="xeplr-admin-header">
+        <h2>Access Matrix</h2>
+        <button type="button" onClick={reload} className="xeplr-admin-btn-secondary">Refresh</button>
+      </div>
+
+      {/* Top-level tabs: Modules vs Uncategorized */}
+      <div className="xeplr-admin-tabs" role="tablist">
+        <button
+          role="tab"
+          aria-selected={activeView === 'modules'}
+          className={'xeplr-admin-tab' + (activeView === 'modules' ? ' xeplr-admin-tab-active' : '')}
+          onClick={function() { setActiveView('modules'); }}
+        >
+          Modules
+        </button>
+        <button
+          role="tab"
+          aria-selected={activeView === 'uncategorized'}
+          className={'xeplr-admin-tab' + (activeView === 'uncategorized' ? ' xeplr-admin-tab-active' : '')}
+          onClick={function() { setActiveView('uncategorized'); }}
+        >
+          Uncategorized
+          {uncategorizedCount > 0 && <span className="xeplr-admin-tab-badge">{uncategorizedCount}</span>}
+        </button>
+      </div>
+
+      {/* Search */}
+      <div className="xeplr-admin-toolbar">
+        <input
+          id="xeplr-admin-access-search"
+          type="text"
+          placeholder={activeView === 'modules' ? 'Search modules...' : 'Search items...'}
+          value={search}
+          onChange={function(e) { setSearch(e.target.value); }}
+          className="xeplr-admin-search"
+        />
+      </div>
+
+      {error && <div className="xeplr-admin-alert xeplr-admin-alert-error">{error}</div>}
+
+      {loading ? (
+        <div className="xeplr-admin-loading">Loading...</div>
+      ) : activeView === 'modules' ? (
+        renderModulesView(roles, modules, handleModuleToggle, isModuleSaving)
+      ) : (
+        renderUncategorizedView(roles, uncategorized, uncatSubTab, setUncatSubTab, handleItemToggle, isItemAssigned, isItemSaving)
+      )}
+    </div>
+  );
+}
+
+function renderModulesView(roles, modules, handleModuleToggle, isModuleSaving) {
+  if (modules.length === 0) {
+    return <div className="xeplr-admin-empty-box">No modules found. Items need a <code>module:action</code> group value to appear here.</div>;
+  }
+
+  return (
+    <div className="xeplr-admin-matrix-wrapper">
+      <table className="xeplr-admin-matrix" role="grid">
+        <thead>
+          <tr>
+            <th className="xeplr-admin-sticky-col xeplr-admin-module-col">Module</th>
+            <th className="xeplr-admin-action-col">Action</th>
+            {roles.map(function(role) {
+              return <th key={role.id} className="xeplr-admin-role-header">{role.name}</th>;
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {modules.map(function(mod) {
+            return mod.actions.map(function(actionEntry, idx) {
+              var actionLabel = ACTION_LABELS[actionEntry.action] || actionEntry.action;
+              var actionClass = ACTION_CLASSES[actionEntry.action] || '';
+              return (
+                <tr key={mod.name + ':' + actionEntry.action} className={idx === 0 ? 'xeplr-admin-module-first-row' : ''}>
+                  {idx === 0 && (
+                    <td className="xeplr-admin-sticky-col xeplr-admin-module-name" rowSpan={mod.actions.length}>
+                      {mod.name}
+                    </td>
+                  )}
+                  <td className={'xeplr-admin-action-cell ' + actionClass}>
+                    {actionLabel}
+                  </td>
+                  {roles.map(function(role) {
+                    var state = actionEntry.getRoleState(role.id);
+                    var isSaving = isModuleSaving(mod.name, actionEntry.action, role.id);
+                    return (
+                      <td key={role.id} className="xeplr-admin-cell">
+                        <label className="xeplr-admin-toggle">
+                          <input
+                            type="checkbox"
+                            checked={state === 'all'}
+                            ref={function(el) {
+                              if (el) el.indeterminate = state === 'partial';
+                            }}
+                            disabled={isSaving}
+                            onChange={function() { handleModuleToggle(mod.name, actionEntry.action, role.id, state); }}
+                          />
+                          <span className={'xeplr-admin-checkmark' + (state === 'partial' ? ' xeplr-admin-partial' : '') + (isSaving ? ' xeplr-admin-saving' : '')} />
+                        </label>
+                      </td>
+                    );
+                  })}
+                </tr>
+              );
+            });
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function renderUncategorizedView(roles, uncategorized, uncatSubTab, setUncatSubTab, handleItemToggle, isItemAssigned, isItemSaving) {
+  var items = uncategorized[uncatSubTab] || [];
+
+  return (
+    <div>
+      {/* Sub-tabs for technical types */}
+      <div className="xeplr-admin-subtabs">
+        {UNCAT_TABS.map(function(tab) {
+          var count = (uncategorized[tab.key] || []).length;
+          return (
+            <button
+              key={tab.key}
+              className={'xeplr-admin-subtab' + (uncatSubTab === tab.key ? ' xeplr-admin-subtab-active' : '')}
+              onClick={function() { setUncatSubTab(tab.key); }}
+            >
+              {tab.label}
+              {count > 0 && <span className="xeplr-admin-subtab-count">{count}</span>}
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="xeplr-admin-matrix-wrapper">
+        <table className="xeplr-admin-matrix" role="grid">
+          <thead>
+            <tr>
+              <th className="xeplr-admin-sticky-col">Name</th>
+              {roles.map(function(role) {
+                return <th key={role.id} className="xeplr-admin-role-header">{role.name}</th>;
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {items.length === 0 ? (
+              <tr><td colSpan={roles.length + 1} className="xeplr-admin-empty">No uncategorized items</td></tr>
+            ) : (
+              items.map(function(item) {
+                return (
+                  <tr key={item.id}>
+                    <td className="xeplr-admin-sticky-col xeplr-admin-item-name">{item.name}</td>
+                    {roles.map(function(role) {
+                      var assigned = isItemAssigned(item, role.id);
+                      var savingThis = isItemSaving(uncatSubTab, item.id, role.id);
+                      return (
+                        <td key={role.id} className="xeplr-admin-cell">
+                          <label className="xeplr-admin-toggle">
+                            <input
+                              type="checkbox"
+                              checked={assigned}
+                              disabled={savingThis}
+                              onChange={function() { handleItemToggle(uncatSubTab, item.id, role.id, assigned); }}
+                            />
+                            <span className={'xeplr-admin-checkmark' + (savingThis ? ' xeplr-admin-saving' : '')} />
+                          </label>
+                        </td>
+                      );
+                    })}
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/src/designs/ActivateSample.jsx

@@ -0,0 +1,38 @@
+import { Link } from 'react-router-dom';
+import './auth.css';
+
+export default function ActivateSample({ token, error, success, loading }) {
+  if (!token) {
+    return (
+      <div className="xeplr-auth-container">
+        <div className="xeplr-auth-alert xeplr-auth-alert-error">Invalid activation link</div>
+        <div className="xeplr-auth-links">
+          <p><Link to="/auth/register">Register a new account</Link></p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="xeplr-auth-container">
+      <h1>Account Activation</h1>
+      {loading && <div className="xeplr-auth-alert">Activating your account...</div>}
+      {error && (
+        <>
+          <div className="xeplr-auth-alert xeplr-auth-alert-error">{error}</div>
+          <div className="xeplr-auth-links">
+            <p><Link to="/auth/login">Go to Login</Link></p>
+          </div>
+        </>
+      )}
+      {success && (
+        <>
+          <div className="xeplr-auth-alert xeplr-auth-alert-success">{success}</div>
+          <div className="xeplr-auth-links">
+            <p><Link to="/auth/login">Go to Login</Link></p>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/designs/ChangePasswordSample.jsx

@@ -0,0 +1,31 @@
+import './auth.css';
+
+export default function ChangePasswordSample({
+  currentPassword, setCurrentPassword,
+  newPassword, setNewPassword,
+  confirmPassword, setConfirmPassword,
+  error, success, loading, handleSubmit
+}) {
+  return (
+    <div className="xeplr-auth-container">
+      <h1>Change Password</h1>
+      {error && <div className="xeplr-auth-alert xeplr-auth-alert-error">{error}</div>}
+      {success && <div className="xeplr-auth-alert xeplr-auth-alert-success">{success}</div>}
+      <form onSubmit={handleSubmit}>
+        <div className="xeplr-auth-form-group">
+          <label htmlFor="xeplr-current-password">Current Password</label>
+          <input id="xeplr-current-password" type="password" value={currentPassword} onChange={e => setCurrentPassword(e.target.value)} required placeholder="Enter current password" />
+        </div>
+        <div className="xeplr-auth-form-group">
+          <label htmlFor="xeplr-new-password">New Password</label>
+          <input id="xeplr-new-password" type="password" value={newPassword} onChange={e => setNewPassword(e.target.value)} required placeholder="Enter new password" />
+        </div>
+        <div className="xeplr-auth-form-group">
+          <label htmlFor="xeplr-confirm-password">Confirm New Password</label>
+          <input id="xeplr-confirm-password" type="password" value={confirmPassword} onChange={e => setConfirmPassword(e.target.value)} required placeholder="Confirm new password" />
+        </div>
+        <button type="submit" disabled={loading}>{loading ? 'Changing...' : 'Change Password'}</button>
+      </form>
+    </div>
+  );
+}

package/src/designs/ForgotPasswordSample.jsx

@@ -0,0 +1,22 @@
+import { Link } from 'react-router-dom';
+import './auth.css';
+
+export default function ForgotPasswordSample({ email, setEmail, error, success, loading, handleSubmit }) {
+  return (
+    <div className="xeplr-auth-container">
+      <h1>Forgot Password</h1>
+      {error && <div className="xeplr-auth-alert xeplr-auth-alert-error">{error}</div>}
+      {success && <div className="xeplr-auth-alert xeplr-auth-alert-success">{success}</div>}
+      <form onSubmit={handleSubmit}>
+        <div className="xeplr-auth-form-group">
+          <label htmlFor="xeplr-email">Email</label>
+          <input id="xeplr-email" type="email" value={email} onChange={e => setEmail(e.target.value)} required placeholder="Enter your registered email" />
+        </div>
+        <button type="submit" disabled={loading}>{loading ? 'Sending...' : 'Send Reset Link'}</button>
+      </form>
+      <div className="xeplr-auth-links">
+        <p><Link to="/auth/login">Back to Login</Link></p>
+      </div>
+    </div>
+  );
+}

package/src/designs/LoginSample.jsx

@@ -0,0 +1,26 @@
+import { Link } from 'react-router-dom';
+import './auth.css';
+
+export default function LoginSample({ email, setEmail, password, setPassword, error, loading, handleSubmit }) {
+  return (
+    <div className="xeplr-auth-container">
+      <h1>Login</h1>
+      {error && <div className="xeplr-auth-alert xeplr-auth-alert-error">{error}</div>}
+      <form onSubmit={handleSubmit}>
+        <div className="xeplr-auth-form-group">
+          <label htmlFor="xeplr-email">Email</label>
+          <input id="xeplr-email" type="email" value={email} onChange={e => setEmail(e.target.value)} required placeholder="Enter your email" />
+        </div>
+        <div className="xeplr-auth-form-group">
+          <label htmlFor="xeplr-password">Password</label>
+          <input id="xeplr-password" type="password" value={password} onChange={e => setPassword(e.target.value)} required placeholder="Enter your password" />
+        </div>
+        <button type="submit" disabled={loading}>{loading ? 'Logging in...' : 'Login'}</button>
+      </form>
+      <div className="xeplr-auth-links">
+        <p>Don't have an account? <Link to="/auth/register">Register</Link></p>
+        <p><Link to="/auth/forgot-password">Forgot Password?</Link></p>
+      </div>
+    </div>
+  );
+}

package/src/designs/MasterSettingsSample.jsx

@@ -0,0 +1,206 @@
+import './admin.css';
+
+export default function MasterSettingsSample({
+  tabs, activeTab, setActiveTab, currentTab, items, search, setSearch,
+  loading, error, saving, editingItem, editForm, groupNames,
+  startAdd, startEdit, cancelEdit, updateField, handleSave, handleDelete, reload
+}) {
+  return (
+    <div className="xeplr-admin-container">
+      <div className="xeplr-admin-header">
+        <h2>Master Settings</h2>
+        <div style={{ display: 'flex', gap: '8px' }}>
+          <button type="button" onClick={startAdd} className="xeplr-admin-btn-primary" disabled={saving || editingItem === '__new__'}>
+            + Add {currentTab.label.replace(/s$/, '')}
+          </button>
+          <button type="button" onClick={reload} className="xeplr-admin-btn-secondary">Refresh</button>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="xeplr-admin-tabs" role="tablist">
+        {tabs.map(function(tab) {
+          return (
+            <button
+              key={tab.key}
+              role="tab"
+              aria-selected={activeTab === tab.key}
+              className={'xeplr-admin-tab' + (activeTab === tab.key ? ' xeplr-admin-tab-active' : '')}
+              onClick={function() { setActiveTab(tab.key); }}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Search */}
+      <div className="xeplr-admin-toolbar">
+        <input
+          id="xeplr-admin-master-search"
+          type="text"
+          placeholder={'Search ' + currentTab.label.toLowerCase() + '...'}
+          value={search}
+          onChange={function(e) { setSearch(e.target.value); }}
+          className="xeplr-admin-search"
+        />
+      </div>
+
+      {error && <div className="xeplr-admin-alert xeplr-admin-alert-error">{error}</div>}
+
+      {loading ? (
+        <div className="xeplr-admin-loading">Loading...</div>
+      ) : (
+        <div className="xeplr-admin-matrix-wrapper">
+          <table className="xeplr-admin-matrix xeplr-admin-master-table">
+            <thead>
+              <tr>
+                {currentTab.fields.map(function(field) {
+                  return <th key={field.key} className={field.key === 'name' ? 'xeplr-admin-sticky-col' : ''}>{field.label}</th>;
+                })}
+                <th className="xeplr-admin-actions-col">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {/* New item row */}
+              {editingItem === '__new__' && (
+                <tr className="xeplr-admin-editing-row">
+                  {currentTab.fields.map(function(field) {
+                    return (
+                      <td key={field.key} className={field.key === 'name' ? 'xeplr-admin-sticky-col' : ''}>
+                        {renderField(field, editForm[field.key], function(val) { updateField(field.key, val); }, groupNames)}
+                      </td>
+                    );
+                  })}
+                  <td className="xeplr-admin-actions-col">
+                    <div className="xeplr-admin-action-btns">
+                      <button onClick={handleSave} disabled={saving} className="xeplr-admin-btn-save" title="Save">
+                        {saving ? '...' : '\u2713'}
+                      </button>
+                      <button onClick={cancelEdit} className="xeplr-admin-btn-cancel" title="Cancel">
+                        {'\u2715'}
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              )}
+
+              {items.length === 0 && editingItem !== '__new__' ? (
+                <tr><td colSpan={currentTab.fields.length + 1} className="xeplr-admin-empty">No {currentTab.label.toLowerCase()} found</td></tr>
+              ) : (
+                items.map(function(item) {
+                  var isEditing = editingItem === item.id;
+                  return (
+                    <tr key={item.id} className={isEditing ? 'xeplr-admin-editing-row' : ''}>
+                      {currentTab.fields.map(function(field) {
+                        var cellClass = field.key === 'name' ? 'xeplr-admin-sticky-col' : '';
+                        if (isEditing) {
+                          return (
+                            <td key={field.key} className={cellClass}>
+                              {renderField(field, editForm[field.key], function(val) { updateField(field.key, val); }, groupNames)}
+                            </td>
+                          );
+                        }
+                        return (
+                          <td key={field.key} className={cellClass}>
+                            {renderValue(field, item[field.key])}
+                          </td>
+                        );
+                      })}
+                      <td className="xeplr-admin-actions-col">
+                        {isEditing ? (
+                          <div className="xeplr-admin-action-btns">
+                            <button onClick={handleSave} disabled={saving} className="xeplr-admin-btn-save" title="Save">
+                              {saving ? '...' : '\u2713'}
+                            </button>
+                            <button onClick={cancelEdit} className="xeplr-admin-btn-cancel" title="Cancel">
+                              {'\u2715'}
+                            </button>
+                          </div>
+                        ) : (
+                          <div className="xeplr-admin-action-btns">
+                            <button onClick={function() { startEdit(item); }} className="xeplr-admin-btn-edit" title="Edit" disabled={editingItem !== null}>
+                              {'\u270E'}
+                            </button>
+                            <button onClick={function() { if (confirm('Delete this item?')) handleDelete(item.id); }} className="xeplr-admin-btn-delete" title="Delete" disabled={saving || editingItem !== null}>
+                              {'\u2715'}
+                            </button>
+                          </div>
+                        )}
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function renderField(field, value, onChange, groupNames) {
+  if (field.type === 'boolean') {
+    return (
+      <label className="xeplr-admin-toggle">
+        <input
+          type="checkbox"
+          checked={!!value}
+          onChange={function(e) { onChange(e.target.checked ? 1 : 0); }}
+        />
+        <span className="xeplr-admin-checkmark" />
+      </label>
+    );
+  }
+
+  if (field.type === 'group') {
+    return (
+      <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
+        <select
+          className="xeplr-admin-inline-input xeplr-admin-group-input"
+          style={{ flex: 1 }}
+          value={(groupNames || []).indexOf(value) !== -1 ? value : ''}
+          onChange={function(e) { onChange(e.target.value); }}
+        >
+          <option value="">-- select or type new --</option>
+          {(groupNames || []).map(function(name) {
+            return <option key={name} value={name}>{name}</option>;
+          })}
+        </select>
+        <input
+          type="text"
+          value={value || ''}
+          onChange={function(e) { onChange(e.target.value); }}
+          placeholder={field.placeholder || 'or type new group'}
+          className="xeplr-admin-inline-input xeplr-admin-group-input"
+          style={{ flex: 1 }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <input
+      type="text"
+      value={value || ''}
+      onChange={function(e) { onChange(e.target.value); }}
+      placeholder={field.placeholder || ''}
+      className="xeplr-admin-inline-input"
+      autoFocus={field.required}
+    />
+  );
+}
+
+function renderValue(field, value) {
+  if (field.type === 'boolean') {
+    return <span className={value ? 'xeplr-admin-badge-yes' : 'xeplr-admin-badge-no'}>{value ? 'Yes' : 'No'}</span>;
+  }
+
+  var isGroup = field.key.toLowerCase().includes('group');
+  if (isGroup && value) {
+    return <span className="xeplr-admin-group-tag">{value}</span>;
+  }
+
+  return <span className={field.key === 'name' ? 'xeplr-admin-item-name' : ''}>{value || '\u2014'}</span>;
+}

package/src/designs/NotActivatedSample.jsx

@@ -0,0 +1,17 @@
+import { Link } from 'react-router-dom';
+import './auth.css';
+
+export default function NotActivatedSample() {
+  return (
+    <div className="xeplr-auth-container">
+      <div className="xeplr-auth-not-activated">
+        <h1>Account Pending Activation</h1>
+        <p className="xeplr-auth-message">Please wait, someone will activate you.</p>
+        <p>Your account has been created but is not yet activated. An administrator will review and activate your account shortly.</p>
+      </div>
+      <div className="xeplr-auth-links">
+        <p><Link to="/auth/login">Back to Login</Link></p>
+      </div>
+    </div>
+  );
+}

package/src/designs/ProfileSample.jsx

@@ -0,0 +1,36 @@
+import './auth.css';
+
+export default function ProfileSample({
+  form, error, success, loading, fetching, handleChange, handleSubmit
+}) {
+  if (fetching) {
+    return (
+      <div className="xeplr-auth-container">
+        <p>Loading profile...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="xeplr-auth-container">
+      <h1>Profile</h1>
+      {error && <div className="xeplr-auth-alert xeplr-auth-alert-error">{error}</div>}
+      {success && <div className="xeplr-auth-alert xeplr-auth-alert-success">{success}</div>}
+      <form onSubmit={handleSubmit}>
+        <div className="xeplr-auth-form-group">
+          <label htmlFor="xeplr-profile-name">Name</label>
+          <input id="xeplr-profile-name" name="name" type="text" value={form.name} onChange={handleChange} placeholder="Your name" />
+        </div>
+        <div className="xeplr-auth-form-group">
+          <label htmlFor="xeplr-profile-email">Email</label>
+          <input id="xeplr-profile-email" name="email" type="email" value={form.email} onChange={handleChange} placeholder="Your email" disabled />
+        </div>
+        <div className="xeplr-auth-form-group">
+          <label htmlFor="xeplr-profile-phone">Phone Number</label>
+          <input id="xeplr-profile-phone" name="phoneNumber" type="text" value={form.phoneNumber} onChange={handleChange} placeholder="Your phone number" />
+        </div>
+        <button type="submit" disabled={loading}>{loading ? 'Saving...' : 'Save Changes'}</button>
+      </form>
+    </div>
+  );
+}

package/src/designs/RegisterSample.jsx

@@ -0,0 +1,34 @@
+import { Link } from 'react-router-dom';
+import './auth.css';
+
+export default function RegisterSample({ form, error, success, loading, handleChange, handleSubmit }) {
+  return (
+    <div className="xeplr-auth-container">
+      <h1>Register</h1>
+      {error && <div className="xeplr-auth-alert xeplr-auth-alert-error">{error}</div>}
+      {success && <div className="xeplr-auth-alert xeplr-auth-alert-success">{success}</div>}
+      <form onSubmit={handleSubmit}>
+        <div className="xeplr-auth-form-group">
+          <label htmlFor="xeplr-name">Name</label>
+          <input id="xeplr-name" name="name" type="text" value={form.name} onChange={handleChange} placeholder="Enter your name" />
+        </div>
+        <div className="xeplr-auth-form-group">
+          <label htmlFor="xeplr-email">Email</label>
+          <input id="xeplr-email" name="email" type="email" value={form.email} onChange={handleChange} required placeholder="Enter your email" />
+        </div>
+        <div className="xeplr-auth-form-group">
+          <label htmlFor="xeplr-phone">Phone Number</label>
+          <input id="xeplr-phone" name="phoneNumber" type="text" value={form.phoneNumber} onChange={handleChange} placeholder="Enter your phone number" />
+        </div>
+        <div className="xeplr-auth-form-group">
+          <label htmlFor="xeplr-password">Password</label>
+          <input id="xeplr-password" name="password" type="password" value={form.password} onChange={handleChange} required placeholder="Enter your password" />
+        </div>
+        <button type="submit" disabled={loading}>{loading ? 'Registering...' : 'Register'}</button>
+      </form>
+      <div className="xeplr-auth-links">
+        <p>Already have an account? <Link to="/auth/login">Login</Link></p>
+      </div>
+    </div>
+  );
+}

package/src/designs/ResetPasswordSample.jsx

@@ -0,0 +1,42 @@
+import { Link } from 'react-router-dom';
+import './auth.css';
+
+export default function ResetPasswordSample({ token, password, setPassword, error, success, loading, handleSubmit }) {
+  if (!token && !success) {
+    return (
+      <div className="xeplr-auth-container">
+        <div className="xeplr-auth-alert xeplr-auth-alert-error">Invalid reset link</div>
+        <div className="xeplr-auth-links">
+          <p><Link to="/auth/forgot-password">Request a new reset link</Link></p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="xeplr-auth-container">
+      <h1>Reset Password</h1>
+      {error && <div className="xeplr-auth-alert xeplr-auth-alert-error">{error}</div>}
+      {success && (
+        <>
+          <div className="xeplr-auth-alert xeplr-auth-alert-success">{success}</div>
+          <div className="xeplr-auth-links">
+            <p><Link to="/auth/login">Go to Login</Link></p>
+          </div>
+        </>
+      )}
+      {!success && (
+        <form onSubmit={handleSubmit}>
+          <div className="xeplr-auth-form-group">
+            <label htmlFor="xeplr-password">New Password</label>
+            <input id="xeplr-password" type="password" value={password} onChange={e => setPassword(e.target.value)} required placeholder="Enter new password" />
+          </div>
+          <button type="submit" disabled={loading}>{loading ? 'Resetting...' : 'Reset Password'}</button>
+        </form>
+      )}
+      <div className="xeplr-auth-links">
+        <p><Link to="/auth/login">Back to Login</Link></p>
+      </div>
+    </div>
+  );
+}