forked from tangled.org/core
this repo has no description

appview: user/login: improve login form

anirudh.fi ed80e5a5 492f7060

verified
Changed files
+28 -120
appview
oauth
handler
pages
state
+5 -6
appview/oauth/handler/handler.go
···
func (o *OAuthHandler) Router() http.Handler {
r := chi.NewRouter()
-
// gets mounted on /oauth
-
r.Get("/client-metadata.json", o.clientMetadata)
-
r.Get("/jwks.json", o.jwks)
r.Get("/login", o.login)
r.Post("/login", o.login)
-
r.Get("/callback", o.callback)
+
+
r.Get("/oauth/client-metadata.json", o.clientMetadata)
+
r.Get("/oauth/jwks.json", o.jwks)
+
r.Get("/oauth/callback", o.callback)
return r
}
···
json.NewEncoder(w).Encode(response)
}
-
// temporary until we swap out the main login page
func (o *OAuthHandler) login(w http.ResponseWriter, r *http.Request) {
switch r.Method {
case http.MethodGet:
-
o.Pages.OAuthLogin(w, pages.LoginParams{})
+
o.Pages.Login(w, pages.LoginParams{})
case http.MethodPost:
handle := strings.TrimPrefix(r.FormValue("handle"), "@")
-4
appview/pages/pages.go
···
return p.executePlain("user/login", w, params)
}
-
func (p *Pages) OAuthLogin(w io.Writer, params LoginParams) error {
-
return p.executePlain("user/oauthlogin", w, params)
-
}
-
type TimelineParams struct {
LoggedInUser *oauth.User
Timeline []db.TimelineEvent
+22 -33
appview/pages/templates/user/login.html
···
content="width=device-width, initial-scale=1.0"
/>
<script src="/static/htmx.min.js"></script>
-
<link rel="stylesheet" href="/static/tw.css?{{ cssContentHash }}" type="text/css" />
+
<link
+
rel="stylesheet"
+
href="/static/tw.css?{{ cssContentHash }}"
+
type="text/css"
+
/>
<title>login</title>
</head>
<body class="flex items-center justify-center min-h-screen">
-
<main class="max-w-7xl px-6 -mt-4">
-
<h1 class="text-center text-2xl font-semibold italic dark:text-white">
+
<main class="max-w-md px-6 -mt-4">
+
<h1
+
class="text-center text-2xl font-semibold italic dark:text-white"
+
>
tangled
</h1>
<h2 class="text-center text-xl italic dark:text-white">
tightly-knit social coding.
</h2>
<form
-
class="w-full mt-4"
-
hx-post="/login"
+
class="mt-4 max-w-sm mx-auto"
+
hx-post="/oauth/login"
hx-swap="none"
hx-disabled-elt="this"
>
<div class="flex flex-col">
<label for="handle">handle</label>
-
<input
-
type="text"
-
id="handle"
-
name="handle"
-
tabindex="1"
-
required
-
/>
-
<span class="text-xs text-gray-500 mt-1">
-
You need to use your
-
<a href="https://bsky.app">Bluesky</a> handle to log
-
in.
-
</span>
-
</div>
-
-
<div class="flex flex-col mt-2">
-
<label for="app_password">app password</label>
<input
-
type="password"
-
id="app_password"
-
name="app_password"
-
tabindex="2"
+
type="text"
+
id="handle"
+
name="handle"
+
tabindex="1"
required
/>
-
<span class="text-xs text-gray-500 mt-1">
-
Generate an app password
-
<a
-
href="https://bsky.app/settings/app-passwords"
-
target="_blank"
-
>here</a
-
>.
+
<span class="text-sm text-gray-500 mt-1">
+
Use your
+
<a href="https://bsky.app">Bluesky</a> handle to log
+
in. You will then be redirected to your PDS to
+
complete authentication.
</span>
</div>
···
</button>
</form>
<p class="text-sm text-gray-500">
-
Join our <a href="https://chat.tangled.sh">Discord</a> or IRC channel:
+
Join our <a href="https://chat.tangled.sh">Discord</a> or
+
IRC channel:
<a href="https://web.libera.chat/#tangled"
><code>#tangled</code> on Libera Chat</a
>.
-71
appview/pages/templates/user/oauthlogin.html
···
-
{{ define "user/oauthlogin" }}
-
<!doctype html>
-
<html lang="en" class="dark:bg-gray-900">
-
<head>
-
<meta charset="UTF-8" />
-
<meta
-
name="viewport"
-
content="width=device-width, initial-scale=1.0"
-
/>
-
<script src="/static/htmx.min.js"></script>
-
<link
-
rel="stylesheet"
-
href="/static/tw.css?{{ cssContentHash }}"
-
type="text/css"
-
/>
-
<title>login</title>
-
</head>
-
<body class="flex items-center justify-center min-h-screen">
-
<main class="max-w-7xl px-6 -mt-4">
-
<h1
-
class="text-center text-2xl font-semibold italic dark:text-white"
-
>
-
tangled
-
</h1>
-
<h2 class="text-center text-xl italic dark:text-white">
-
tightly-knit social coding.
-
</h2>
-
<form
-
class="w-full mt-4"
-
hx-post="/oauth/login"
-
hx-swap="none"
-
hx-disabled-elt="this"
-
>
-
<div class="flex flex-col">
-
<label for="handle">handle</label>
-
<input
-
type="text"
-
id="handle"
-
name="handle"
-
tabindex="1"
-
required
-
/>
-
<span class="text-xs text-gray-500 mt-1">
-
Use your
-
<a href="https://bsky.app">Bluesky</a> handle to log
-
in. You will then be redirected to your PDS to
-
complete authentication.
-
</span>
-
</div>
-
-
<button
-
class="btn w-full my-2 mt-6"
-
type="submit"
-
id="login-button"
-
tabindex="3"
-
>
-
<span>login</span>
-
</button>
-
</form>
-
<p class="text-sm text-gray-500">
-
Join our <a href="https://chat.tangled.sh">Discord</a> or
-
IRC channel:
-
<a href="https://web.libera.chat/#tangled"
-
><code>#tangled</code> on Libera Chat</a
-
>.
-
</p>
-
<p id="login-msg" class="error w-full"></p>
-
</main>
-
</body>
-
</html>
-
{{ end }}
+1 -6
appview/state/router.go
···
r.With(middleware.AuthMiddleware(s.oauth)).Post("/logout", s.Logout)
-
// r.Route("/login", func(r chi.Router) {
-
// r.Get("/", s.Login)
-
// r.Post("/", s.Login)
-
// })
-
r.Route("/knots", func(r chi.Router) {
r.Use(middleware.AuthMiddleware(s.oauth))
r.Get("/", s.Knots)
···
})
r.Mount("/settings", s.SettingsRouter())
-
r.Mount("/oauth", s.OAuthRouter())
+
r.Mount("/", s.OAuthRouter())
r.Get("/keys/{user}", s.Keys)
r.NotFound(func(w http.ResponseWriter, r *http.Request) {