add complete screen

src/app/auth/complete.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export function CompleteScreen() {
+  const navigate = useNavigate();
+  const [count, setCount] = useState(3);
+
+  useEffect(() => {
+    let counter: NodeJS.Timeout;
+
+    if (count > 0) {
+      counter = setTimeout(() => setCount(count - 1), 1000);
+    }
+
+    if (count === 0) {
+      navigate('/', { replace: true });
+    }
+
+    return () => {
+      clearTimeout(counter);
+    };
+  }, [count]);
+
+  return (
+    <div className="relative flex h-full w-full flex-col items-center justify-center">
+      <div className="mx-auto flex max-w-xl flex-col gap-1.5 text-center">
+        <h1 className="text-2xl font-light leading-none text-white">
+          <span className="font-semibold">You&apos;re ready</span>, redirecting in {count}
+          ...
+        </h1>
+        <p className="text-white/70">
+          Thank you for using Lume. Lume doesn&apos;t use telemetry. If you encounter any
+          problems, please submit a report via the &quot;Report Issue&quot; button.
+          <br />
+          You can find it while using the application.
+        </p>
+      </div>
+      <div className="absolute bottom-6 left-1/2 flex -translate-x-1/2 transform items-center justify-center">
+        <img src="/lume.png" alt="lume" className="h-auto w-1/5" />
+      </div>
+    </div>
+  );
+}

src/app/auth/create/step-3.tsx

@@ -112,7 +112,7 @@ export function CreateStep3Screen() {
                 type={'text'}
                 {...register('name', {
                   required: true,
-                  minLength: 4,
+                  minLength: 1,
                 })}
                 spellCheck={false}
                 className="relative h-12 w-full rounded-lg bg-white/20 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/70"

src/app/auth/import/step-1.tsx

@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { useStorage } from '@libs/storage/provider';
 
-import { LoaderIcon } from '@shared/icons';
+import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
 import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 
 import { useOnboarding } from '@stores/onboarding';
@@ -37,6 +37,7 @@ export function ImportStep1Screen() {
   const setStep = useOnboarding((state) => state.setStep);
 
   const [loading, setLoading] = useState(false);
+  const [passwordInput, setPasswordInput] = useState('password');
 
   const { db } = useStorage();
   const {
@@ -78,6 +79,15 @@ export function ImportStep1Screen() {
     }
   };
 
+  // toggle private key
+  const showPassword = () => {
+    if (passwordInput === 'password') {
+      setPasswordInput('text');
+    } else {
+      setPasswordInput('password');
+    }
+  };
+
   useEffect(() => {
     // save current step, if user close app and reopen it
     setStep('/auth/import');
@@ -96,12 +106,25 @@ export function ImportStep1Screen() {
             <label htmlFor="privkey" className="font-medium text-white">
               Insert your nostr private key, in nsec or hex format
             </label>
-            <input
-              {...register('privkey', { required: true, minLength: 32 })}
-              type={'password'}
-              placeholder="nsec1..."
-              className="relative h-12 w-full rounded-lg border-t border-white/10 bg-white/20 px-3 py-1 text-white backdrop-blur-xl placeholder:text-white/70 focus:outline-none"
-            />
+            <div className="relative">
+              <input
+                {...register('privkey', { required: true, minLength: 32 })}
+                type={passwordInput}
+                placeholder="nsec1..."
+                className="relative h-12 w-full rounded-lg border-t border-white/10 bg-white/20 px-3 py-1 text-white backdrop-blur-xl placeholder:text-white/70 focus:outline-none"
+              />
+              <button
+                type="button"
+                onClick={() => showPassword()}
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/20"
+              >
+                {passwordInput === 'password' ? (
+                  <EyeOffIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
+                ) : (
+                  <EyeOnIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
+                )}
+              </button>
+            </div>
             <span className="text-sm text-red-500">
               {errors.privkey && <p>{errors.privkey.message}</p>}
             </span>

src/app/auth/onboarding/step-2.tsx

@@ -60,7 +60,7 @@ export function OnboardStep2Screen() {
     // clear local storage
     clearStep();
 
-    navigate('/', { replace: true });
+    navigate('/auth/complete', { replace: true });
   };
 
   const submit = async () => {
@@ -77,7 +77,7 @@ export function OnboardStep2Screen() {
       // clear local storage
       clearStep();
 
-      navigate('/', { replace: true });
+      navigate('/auth/complete', { replace: true });
     } catch (e) {
       setLoading(false);
       await message(e, { title: 'Lume', type: 'error' });

src/app/auth/welcome.tsx

@@ -2,7 +2,6 @@ import { LogicalSize, getCurrent } from '@tauri-apps/api/window';
 import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
-import { Frame } from '@shared/frame';
 import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 
 export function WelcomeScreen() {
@@ -29,7 +28,7 @@ export function WelcomeScreen() {
   }, []);
 
   return (
-    <Frame className="flex h-screen w-full flex-col justify-between">
+    <div className="flex h-screen w-full flex-col justify-between">
       <div className="flex flex-col gap-10 pt-16">
         <div className="flex flex-col gap-1.5 text-center">
           <h1 className="text-3xl font-semibold text-white">Welcome to Lume</h1>
@@ -58,6 +57,6 @@ export function WelcomeScreen() {
       <div className="flex flex-1 items-end justify-center pb-6">
         <img src="/lume.png" alt="lume" className="h-auto w-1/4" />
       </div>
-    </Frame>
+    </div>
   );
 }