[feat] add support for did:web, add login process indicator

src/components/auth/Login.tsx

···
   }>;
 }
 
+type LoginStep = 'idle' | 'resolving-handle' | 'resolving-did' | 'connecting-pds' | 'authenticating' | 'success';
+
 export default function Login({ onLogin }: LoginProps) {
   const [handle, setHandle] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [appPasswordAttempts, setAppPasswordAttempts] = useState(0);
+  const [loginStep, setLoginStep] = useState<LoginStep>('idle');
   const navigate = useNavigate();
 
   const isAppPassword = (password: string) => {
···
     return /^[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}$/.test(password);
   };
 
+  const getStepMessage = (step: LoginStep) => {
+    switch (step) {
+      case 'resolving-handle':
+        return 'Resolving your handle...';
+      case 'resolving-did':
+        return 'Resolving your DID...';
+      case 'connecting-pds':
+        return 'Connecting to your Personal Data Server...';
+      case 'authenticating':
+        return 'Authenticating your credentials...';
+      case 'success':
+        return 'Login successful! Redirecting...';
+      default:
+        return '';
+    }
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
+    setLoginStep('resolving-handle');
 
+    // app password check and debug method
     if (isAppPassword(password)) {
       if (appPasswordAttempts < 3) {
         setAppPasswordAttempts(appPasswordAttempts + 1);
-        setError(`Warning: You have entered an app password, which does not allow you to migrate your account.`);
+        setError(`You have entered an app password, which does not allow for you to migrate your account. Please enter your main account password instead.`);
+        setLoginStep('idle');
         return;
       }
     }
 
     setHandle(handle.trim());
-    setPassword(password.trim());
 
     try {
       // Create temporary agent to resolve DID
-      const tempAgent = new AtpAgent({ service: 'https://bsky.social' });
+      const tempAgent = new AtpAgent({ service: 'https://public.api.bsky.app' });
 
       // Get DID document from handle
+      setLoginStep('resolving-handle');
       const didResponse = await tempAgent.com.atproto.identity.resolveHandle({
         handle: handle
       });
 
+      if (!didResponse.success) {
+        // Try did:web resolution first
+        const domain = handle.split('.').join(':');
+        const webDid = `did:web:${domain}`;
+        try {
+          const webResponse = await fetch(`https://${handle}/.well-known/did.json`);
+          if (webResponse.ok) {
+            // If successful, continue with the did:web
+            didResponse.data.did = webDid;
+          } else {
+            throw new Error('Invalid handle');
+          }
+        } catch {
+          throw new Error('Invalid handle');
+        }
+      }
+
       // Get PDS endpoint from DID document
+      setLoginStep('resolving-did');
       let didDocResponse;
       const did = didResponse.data.did;
 
···
         });
       }
 
+      setLoginStep('connecting-pds');
       const pds = ((didDocResponse.data as unknown) as DidDocument).service.find((s) => s.id === '#atproto_pds')?.serviceEndpoint || 'https://bsky.social';
 
       const agent = new AtpAgent({ service: pds });
+      
+      setLoginStep('authenticating');
       await agent.login({ identifier: handle, password });
+      
+      setLoginStep('success');
       onLogin(agent);
       navigate('/actions');
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Login failed');
+      setLoginStep('idle');
     }
   };
 
···
                 placeholder="Handle (e.g., example.bsky.social)"
                 value={handle}
                 onChange={(e) => setHandle(e.target.value)}
+                disabled={loginStep !== 'idle'}
               />
             </div>
             <div className="form-group">
···
                 placeholder="Password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
+                disabled={loginStep !== 'idle'}
               />
             </div>
 
             {error && <div className="error-message">{error}</div>}
+            {loginStep !== 'idle' && (
+              <div className="loading-message">
+                {getStepMessage(loginStep)}
+              </div>
+            )}
 
-            <button type="submit" className="submit-button">
-              Sign in
+            <button 
+              type="submit" 
+              className="submit-button"
+              disabled={loginStep !== 'idle'}
+            >
+              {loginStep === 'idle' ? 'Sign in' : 'Signing in...'}
             </button>
           </form>
         </div>

src/styles/App.css

···
 
 .footer-link strong {
   font-weight: 600;
+}
+
+.loading-message {
+  margin: 10px 0;
+  padding: 10px;
+  background-color: var(--bg-color);
+  border-radius: 4px;
+  color: var(--text-color);
+  font-size: 0.9em;
+  text-align: center;
+}
+
+.form-input:disabled {
+  background-color: var(--bg-color);
+  border-color: var(--border-color);
+  color: var(--text-light);
+  cursor: not-allowed;
+  opacity: 0.8;
+}
+
+.submit-button:disabled {
+  background-color: var(--text-light);
+  cursor: not-allowed;
+  opacity: 0.8;
 }