@rubytech/create-maxy 0.3.8 → 0.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubytech/create-maxy",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "Install Maxy — your personal AI assistant",
   "bin": {
     "create-maxy": "./dist/index.js"

package/payload/maxy/app/globals.css

@@ -1340,11 +1340,42 @@ a:hover {
 
 .admin-pin-form form {
   display: flex;
+  flex-direction: column;
   gap: 8px;
   width: 100%;
   max-width: 300px;
 }
 
+.pin-input-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.pin-input-row .chat-input {
+  flex: 1;
+}
+
+.pin-toggle {
+  background: none;
+  border: 1px solid var(--border-strong);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s;
+}
+
+.pin-toggle:hover {
+  border-color: var(--sage);
+}
+
 .admin-pin-error {
   color: #c44;
   font-size: 14px;

package/payload/maxy/app/page.tsx

@@ -16,6 +16,7 @@ export default function AdminPage() {
   const [pin, setPin] = useState('')
   const [confirmPin, setConfirmPin] = useState('')
   const [pinError, setPinError] = useState('')
+  const [showPin, setShowPin] = useState(false)
   const [sessionKey, setSessionKey] = useState<string | null>(null)
   const [messages, setMessages] = useState<Message[]>([])
   const [input, setInput] = useState('')
@@ -215,25 +216,35 @@ export default function AdminPage() {
         </header>
         <div className="admin-pin-form">
           <form onSubmit={handleSetPin}>
-            <input
-              ref={pinInputRef}
-              type="password"
-              value={pin}
-              onChange={e => setPin(e.target.value)}
-              placeholder="Choose a PIN"
-              className="chat-input"
-              autoFocus
-            />
-            <input
-              type="password"
-              value={confirmPin}
-              onChange={e => setConfirmPin(e.target.value)}
-              placeholder="Confirm PIN"
-              className="chat-input"
-            />
-            <button type="submit" className="chat-send" disabled={!pin || !confirmPin}>
-              Set PIN
-            </button>
+            <div className="pin-input-row">
+              <input
+                ref={pinInputRef}
+                type={showPin ? 'text' : 'password'}
+                value={pin}
+                onChange={e => setPin(e.target.value)}
+                placeholder="Choose a PIN"
+                className="chat-input"
+                autoFocus
+              />
+              <button type="button" className="pin-toggle" onClick={() => setShowPin(!showPin)} aria-label={showPin ? 'Hide' : 'Show'}>
+                {showPin ? '◉' : '○'}
+              </button>
+            </div>
+            <div className="pin-input-row">
+              <input
+                type={showPin ? 'text' : 'password'}
+                value={confirmPin}
+                onChange={e => setConfirmPin(e.target.value)}
+                placeholder="Confirm PIN"
+                className="chat-input"
+              />
+              <button type="submit" className="chat-send" disabled={!pin || !confirmPin} aria-label="Set PIN">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="5" y1="12" x2="19" y2="12" />
+                  <polyline points="12 5 19 12 12 19" />
+                </svg>
+              </button>
+            </div>
           </form>
           {pinError && <p className="admin-pin-error">{pinError}</p>}
         </div>
@@ -252,21 +263,26 @@ export default function AdminPage() {
         </header>
         <div className="admin-pin-form">
           <form onSubmit={handleLogin}>
-            <input
-              ref={pinInputRef}
-              type="password"
-              value={pin}
-              onChange={e => setPin(e.target.value)}
-              placeholder="Enter PIN"
-              className="chat-input"
-              autoFocus
-            />
-            <button type="submit" className="chat-send" disabled={!pin}>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" />
-              </svg>
-            </button>
+            <div className="pin-input-row">
+              <input
+                ref={pinInputRef}
+                type={showPin ? 'text' : 'password'}
+                value={pin}
+                onChange={e => setPin(e.target.value)}
+                placeholder="Enter PIN"
+                className="chat-input"
+                autoFocus
+              />
+              <button type="button" className="pin-toggle" onClick={() => setShowPin(!showPin)} aria-label={showPin ? 'Hide' : 'Show'}>
+                {showPin ? '◉' : '○'}
+              </button>
+              <button type="submit" className="chat-send" disabled={!pin}>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="5" y1="12" x2="19" y2="12" />
+                  <polyline points="12 5 19 12 12 19" />
+                </svg>
+              </button>
+            </div>
           </form>
           {pinError && <p className="admin-pin-error">{pinError}</p>}
         </div>