Add skeleton loading state for file load

This commit is contained in:
2024-09-23 21:40:01 +07:00
parent 59d4154ef0
commit 757dde58c0
17 changed files with 309 additions and 259 deletions

View File

@ -81,7 +81,7 @@ func MainContent(title string, qrcode string, code string, user types.User, msg
templ_7745c5c3_Var3 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<title>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -94,7 +94,7 @@ func MainContent(title string, qrcode string, code string, user types.User, msg
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 2)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</title>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -102,13 +102,13 @@ func MainContent(title string, qrcode string, code string, user types.User, msg
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 3)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<main class=\"container mx-auto px-4 py-12 md:px-6 md:py-16 lg:py-10\"><a class=\"inline-flex items-center space-x-2 rounded-md bg-muted px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\" href=\"/user\" hx-get=\"/user\" hx-swap=\"innerHTML\" hx-push-url=\"true\" hx-target=\"#content\" rel=\"ugc\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"h-4 w-4\"><path d=\"m12 19-7-7 7-7\"></path> <path d=\"M19 12H5\"></path></svg> <span>Back</span></a><div class=\"mx-auto max-w-md px-4 py-12 sm:px-6 lg:px-8\"><div class=\"space-y-6 text-center\"><div class=\"flex items-center\"><h1 class=\"text-3xl font-bold\">Set up Two-Factor Authentication</h1></div><p class=\"text-muted-foreground\">Secure your account with time-based one-time passwords (TOTP).</p><div class=\"mt-4 text-left text-muted-foreground\"><p>Here's how to set up the Google Authenticator app:</p><ol class=\"list-decimal pl-6\"><li>Download the Google Authenticator app on your mobile device.</li><li>Open the app and tap \"Begin Setup\".</li><li>Select \"Scan a barcode\" and point your camera at the QR code below.</li><li>The app will automatically add your account and display a 6-digit code.</li><li>Enter this code on the website to complete the setup.</li></ol></div></div><div class=\"rounded-lg border rounded-lg bg-muted p-6bg-card text-card-foreground shadow-sm mt-5\" data-v0-t=\"card\"><div class=\"p-6 space-y-6\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
switch msg.Code {
case 0:
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 4)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50\" role=\"alert\"><svg class=\"flex-shrink-0 inline w-4 h-4 me-3\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z\"></path></svg> <span class=\"sr-only\">Info</span><div><span class=\"font-medium\">Error!</span> ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -121,12 +121,12 @@ func MainContent(title string, qrcode string, code string, user types.User, msg
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 5)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
case 1:
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 6)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex items-center p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-50\" role=\"alert\"><svg class=\"flex-shrink-0 inline w-4 h-4 me-3\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z\"></path></svg> <span class=\"sr-only\">Info</span><div><span class=\"font-medium\">Success!</span> ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -139,12 +139,12 @@ func MainContent(title string, qrcode string, code string, user types.User, msg
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 7)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 8)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex items-center justify-center\"><img src=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -157,7 +157,7 @@ func MainContent(title string, qrcode string, code string, user types.User, msg
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 9)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" width=\"200\" height=\"200\" alt=\"QR Code\" class=\"rounded-lg\" style=\"aspect-ratio: 200 / 200; object-fit: cover;\"></div><div class=\"mt-6 space-y-2\"><p class=\"font-medium\">Backup Code:</p><div class=\"rounded-md bg-background px-4 py-2 text-sm font-mono text-muted-foreground\">----|----</div><p class=\"font-medium\">TOTP Secret:</p><div class=\"rounded-md bg-background px-4 py-2 text-sm font-mono text-muted-foreground\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -170,7 +170,7 @@ func MainContent(title string, qrcode string, code string, user types.User, msg
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 10)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><form method=\"post\" action=\"/user/totp/setup\"><div class=\"grid gap-2\"><label class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"totp\">Totp Code</label> <input id=\"secret\" name=\"secret\" value=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -183,7 +183,7 @@ func MainContent(title string, qrcode string, code string, user types.User, msg
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 11)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" type=\"hidden\"> <input class=\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\" id=\"totp\" name=\"totp\" placeholder=\"Code from authenticator app\"><div class=\"flex items-center p-6\"><button class=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full\" type=\"submit\">Enable TOTP</button></div></div></form></div></div></div></main>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}