Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor login page #31530

Merged
merged 27 commits into from
Jul 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
b196ec4
Add passkeys support
anbraten Jun 26, 2024
03f1e50
add login btn
anbraten Jun 26, 2024
701e51b
finish
anbraten Jun 26, 2024
b4faa4a
simplify changes
anbraten Jun 26, 2024
9b9a140
fix typo
anbraten Jun 26, 2024
eda2056
use res.ok
anbraten Jun 26, 2024
ddc8ef1
rm href
anbraten Jun 26, 2024
a050b80
cleanup
anbraten Jun 26, 2024
1dfccd6
Update web_src/js/features/user-auth-webauthn.js
anbraten Jun 27, 2024
1647594
Merge remote-tracking branch 'upstream/main' into passkeys
anbraten Jun 29, 2024
ac3b9da
Refactor login page
anbraten Jun 30, 2024
028c2c8
Merge remote-tracking branch 'upstream/main' into refactor-login
anbraten Jun 30, 2024
ab764a4
adjust auth
anbraten Jun 30, 2024
5db71fd
adjust ui
anbraten Jun 30, 2024
fcd4bd5
emulate margin on password header div
silverwind Jul 1, 2024
6a7f3d9
full width the signup button, center the captchas
silverwind Jul 1, 2024
ae6c512
add .form-field-content-aside-label
silverwind Jul 1, 2024
f3528e4
use pure css solution
silverwind Jul 1, 2024
e5fab76
format
silverwind Jul 1, 2024
37770af
Update templates/user/auth/oauth_container.tmpl
silverwind Jul 1, 2024
b0149b6
add sspi, split already have account link, rm webauth error from signup
anbraten Jul 2, 2024
747ac19
rm logo
anbraten Jul 2, 2024
f615037
Merge branch 'main' into refactor-login
anbraten Jul 2, 2024
07bfa77
fix lint
anbraten Jul 3, 2024
e07cffe
Merge remote-tracking branch 'upstream/main' into refactor-login
anbraten Jul 3, 2024
d64754e
Merge branch 'refactor-login' of github.com:anbraten/gitea into refac…
anbraten Jul 3, 2024
f088d2a
Merge branch 'main' into refactor-login
GiteaBot Jul 4, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions options/locale/locale_en-US.ini
Original file line number Diff line number Diff line change
Expand Up @@ -387,16 +387,17 @@ relevant_repositories = Only relevant repositories are being shown, <a href="%s"

[auth]
create_new_account = Register Account
register_helper_msg = Already have an account? Sign in now!
social_register_helper_msg = Already have an account? Link it now!
already_have_account = Already have an account?
sign_in_now = Sign in now!
disable_register_prompt = Registration is disabled. Please contact your site administrator.
disable_register_mail = Email confirmation for registration is disabled.
manual_activation_only = Contact your site administrator to complete activation.
remember_me = Remember This Device
remember_me.compromised = The login token is not valid anymore which may indicate a compromised account. Please check your account for unusual activities.
forgot_password_title= Forgot Password
forgot_password = Forgot password?
sign_up_now = Need an account? Register now.
need_account = Need an account?
sign_up_now = Register now.
sign_up_successful = Account was successfully created. Welcome!
confirmation_mail_sent_prompt_ex = A new confirmation email has been sent to <b>%s</b>. Please check your inbox within the next %s to complete the registration process. If your registration email address is incorrect, you can sign in again and change it.
must_change_password = Update your password
Expand Down Expand Up @@ -459,6 +460,7 @@ password_pwned = The password you chose is on a <a target="_blank" rel="noopener
password_pwned_err = Could not complete request to HaveIBeenPwned
last_admin = You cannot remove the last admin. There must be at least one admin.
signin_passkey = Sign in with a passkey
back_to_sign_in = Back to Sign In

[mail]
view_it_on = View it on %s
Expand Down
9 changes: 4 additions & 5 deletions templates/user/auth/captcha.tmpl
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@
{{if .EnableCaptcha}}{{if eq .CaptchaType "image"}}
<div class="inline field">
<div class="inline field tw-text-center">
{{.Captcha.CreateHTML}}
</div>
<div class="required field {{if .Err_Captcha}}error{{end}}">
<label for="captcha">{{ctx.Locale.Tr "captcha"}}</label>
<input id="captcha" name="captcha" value="{{.captcha}}" autocomplete="off">
</div>
{{else if eq .CaptchaType "recaptcha"}}
<div class="inline field required">
<div class="inline field tw-text-center required">
<div id="captcha" data-captcha-type="g-recaptcha" class="g-recaptcha-style" data-sitekey="{{.RecaptchaSitekey}}"></div>
</div>
<script src='{{URLJoin .RecaptchaURL "api.js"}}'></script>
{{else if eq .CaptchaType "hcaptcha"}}
<div class="inline field required">
<div class="inline field tw-text-center required">
<div id="captcha" data-captcha-type="h-captcha" class="h-captcha-style" data-sitekey="{{.HcaptchaSitekey}}"></div>
</div>
<script src='https://hcaptcha.com/1/api.js'></script>
{{else if eq .CaptchaType "mcaptcha"}}
<div class="inline field">
<label></label>
<div class="inline field tw-text-center">
<div class="m-captcha-style" id="mcaptcha__widget-container"></div>
<div id="captcha" data-captcha-type="m-captcha" data-sitekey="{{.McaptchaSitekey}}" data-instance-url="{{.McaptchaURL}}"></div>
</div>
Expand Down
29 changes: 29 additions & 0 deletions templates/user/auth/oauth_container.tmpl
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{{if or .OAuth2Providers .EnableOpenIDSignIn}}
<div class="divider divider-text">
{{ctx.Locale.Tr "sign_in_or"}}
</div>
<div id="oauth2-login-navigator" class="tw-py-1">
<div class="tw-flex tw-flex-col tw-justify-center">
<div id="oauth2-login-navigator-inner" class="tw-flex tw-flex-col tw-flex-wrap tw-items-center tw-gap-2">
{{range $provider := .OAuth2Providers}}
<a class="{{$provider.Name}} ui button tw-flex tw-items-center tw-justify-center tw-py-2 tw-w-full oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
{{$provider.IconHTML 28}}
{{ctx.Locale.Tr "sign_in_with_provider" $provider.DisplayName}}
</a>
{{end}}
{{if .EnableOpenIDSignIn}}
<a class="openid ui button tw-flex tw-items-center tw-justify-center tw-py-2 tw-w-full" href="{{AppSubUrl}}/user/login/openid">
{{svg "fontawesome-openid" 28 "tw-mr-2"}}
{{ctx.Locale.Tr "sign_in_with_provider" "OpenID"}}
</a>
{{end}}
{{if .EnableSSPI}}
<a class="ui button tw-flex tw-items-center tw-justify-center tw-py-2 tw-w-full" rel="nofollow" href="{{AppSubUrl}}/user/login?auth_with_sspi=1">
{{svg "fontawesome-windows"}}
&nbsp;SSPI
</a>
{{end}}
</div>
</div>
</div>
{{end}}
3 changes: 1 addition & 2 deletions templates/user/auth/signin.tmpl
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user signin{{if .LinkAccountMode}} icon{{end}}">
{{template "user/auth/signin_navbar" .}}
<div class="ui middle very relaxed page grid">
<div class="ui container column fluid">
<div class="column tw-flex tw-flex-col tw-gap-4 tw-max-w-2xl tw-m-auto">
{{template "user/auth/signin_inner" .}}
</div>
</div>
Expand Down
117 changes: 53 additions & 64 deletions templates/user/auth/signin_inner.tmpl
Original file line number Diff line number Diff line change
@@ -1,76 +1,65 @@
{{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn)}}
{{template "base/alert" .}}
{{end}}
<h4 class="ui top attached header center">
{{if .LinkAccountMode}}
{{ctx.Locale.Tr "auth.oauth_signin_title"}}
{{else}}
{{ctx.Locale.Tr "auth.login_userpass"}}
<div class="ui container fluid">
{{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn)}}
{{template "base/alert" .}}
{{end}}
</h4>
<div class="ui attached segment">
{{template "user/auth/webauthn_error" .}}
<h4 class="ui top attached header center">
{{if .LinkAccountMode}}
{{ctx.Locale.Tr "auth.oauth_signin_title"}}
{{else}}
{{ctx.Locale.Tr "auth.login_userpass"}}
{{end}}
</h4>
<div class="ui attached segment">
<form class="ui form" action="{{.SignInLink}}" method="post">
{{.CsrfTokenHtml}}
<div class="required field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
<label for="user_name">{{ctx.Locale.Tr "home.uname_holder"}}</label>
<input id="user_name" type="text" name="user_name" value="{{.user_name}}" autofocus required>
</div>
{{if or (not .DisablePassword) .LinkAccountMode}}
<div class="required field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}} form-field-content-aside-label">
<label for="password">{{ctx.Locale.Tr "password"}}</label>
<a href="{{AppSubUrl}}/user/forgot_password">{{ctx.Locale.Tr "auth.forgot_password"}}</a>
<input id="password" name="password" type="password" value="{{.password}}" autocomplete="current-password" required>
</div>
{{end}}
{{if not .LinkAccountMode}}
<div class="inline field">
<div class="ui checkbox">
<label>{{ctx.Locale.Tr "auth.remember_me"}}</label>
<input name="remember" type="checkbox">
</div>
</div>
{{end}}

<form class="ui form tw-max-w-2xl tw-m-auto" action="{{.SignInLink}}" method="post">
{{.CsrfTokenHtml}}
<div class="required field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
<label for="user_name">{{ctx.Locale.Tr "home.uname_holder"}}</label>
<input id="user_name" type="text" name="user_name" value="{{.user_name}}" autofocus required>
</div>
{{if or (not .DisablePassword) .LinkAccountMode}}
<div class="required field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
<label for="password">{{ctx.Locale.Tr "password"}}</label>
<input id="password" name="password" type="password" value="{{.password}}" autocomplete="current-password" required>
</div>
{{end}}
{{if not .LinkAccountMode}}
<div class="inline field">
<div class="ui checkbox">
<label>{{ctx.Locale.Tr "auth.remember_me"}}</label>
<input name="remember" type="checkbox">
</div>
</div>
{{end}}
{{template "user/auth/captcha" .}}

{{template "user/auth/captcha" .}}
<div class="field">
<button class="ui primary button tw-w-full">
{{if .LinkAccountMode}}
{{ctx.Locale.Tr "auth.oauth_signin_submit"}}
{{else}}
{{ctx.Locale.Tr "sign_in"}}
{{end}}
</button>
</div>
</form>

<div class="field">
<button class="ui primary button">
{{if .LinkAccountMode}}
{{ctx.Locale.Tr "auth.oauth_signin_submit"}}
{{else}}
{{ctx.Locale.Tr "sign_in"}}
{{end}}
</button>
<a href="{{AppSubUrl}}/user/forgot_password">{{ctx.Locale.Tr "auth.forgot_password"}}</a>
{{template "user/auth/oauth_container" .}}
</div>
</div>

{{if .ShowRegistrationButton}}
<div class="field">
<a href="{{AppSubUrl}}/user/sign_up">{{ctx.Locale.Tr "auth.sign_up_now"}}</a>
</div>
{{end}}
<div class="ui container fluid">
{{template "user/auth/webauthn_error" .}}

<div class="field">
<div class="ui attached segment header top tw-max-w-2xl tw-m-auto tw-flex tw-flex-col tw-items-center">
<a class="signin-passkey">{{ctx.Locale.Tr "auth.signin_passkey"}}</a>
</div>

{{if .OAuth2Providers}}
<div class="divider divider-text">
{{ctx.Locale.Tr "sign_in_or"}}
</div>
<div id="oauth2-login-navigator" class="tw-py-1">
<div class="tw-flex tw-flex-col tw-justify-center">
<div id="oauth2-login-navigator-inner" class="tw-flex tw-flex-col tw-flex-wrap tw-items-center tw-gap-2">
{{range $provider := .OAuth2Providers}}
<a class="{{$provider.Name}} ui button tw-flex tw-items-center tw-justify-center tw-py-2 tw-w-full oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
{{$provider.IconHTML 28}}
{{ctx.Locale.Tr "sign_in_with_provider" $provider.DisplayName}}
</a>
{{end}}
{{if .ShowRegistrationButton}}
<div class="field">
<span>{{ctx.Locale.Tr "auth.need_account"}}</span>
<a href="{{AppSubUrl}}/user/sign_up">{{ctx.Locale.Tr "auth.sign_up_now"}}</a>
</div>
</div>
{{end}}
</div>
{{end}}
</form>
</div>
24 changes: 0 additions & 24 deletions templates/user/auth/signin_navbar.tmpl

This file was deleted.

69 changes: 42 additions & 27 deletions templates/user/auth/signin_openid.tmpl
Original file line number Diff line number Diff line change
@@ -1,35 +1,50 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user signin openid">
{{template "user/auth/signin_navbar" .}}
<div class="ui container">
{{template "base/alert" .}}
<h4 class="ui top attached header center">
{{svg "fontawesome-openid"}}
OpenID
</h4>
<div class="ui attached segment">
<form class="ui form tw-m-auto" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}}
<div class="inline field">
{{ctx.Locale.Tr "auth.openid_signin_desc"}}
</div>
<div class="required field {{if .Err_OpenID}}error{{end}}">
<label for="openid">
{{svg "fontawesome-openid"}}
OpenID URI
</label>
<input id="openid" name="openid" value="{{.openid}}" autofocus required>
</div>
<div class="inline field">
<div class="ui checkbox">
<label>{{ctx.Locale.Tr "auth.remember_me"}}</label>
<input name="remember" type="checkbox">
<div class="ui middle very relaxed page grid">
<div class="column tw-flex tw-flex-col tw-gap-4 tw-max-w-2xl tw-m-auto">
<a href="{{AppSubUrl}}/user/login" class="tw-mx-auto">
<img width="100" height="100" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}">
</a>

<div class="ui container fluid">
{{template "base/alert" .}}
<h4 class="ui top attached header center">
{{svg "fontawesome-openid"}}
OpenID
</h4>
<div class="ui attached segment">
<form class="ui form tw-m-auto" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}}
<div class="inline field">
{{ctx.Locale.Tr "auth.openid_signin_desc"}}
</div>
<div class="required field {{if .Err_OpenID}}error{{end}}">
<label for="openid">
{{svg "fontawesome-openid"}}
OpenID URI
</label>
<input id="openid" name="openid" value="{{.openid}}" autofocus required>
</div>
<div class="inline field">
<div class="ui checkbox">
<label>{{ctx.Locale.Tr "auth.remember_me"}}</label>
<input name="remember" type="checkbox">
</div>
</div>
<div class="inline field">
<button class="ui primary button tw-w-full">{{ctx.Locale.Tr "sign_in"}}</button>
</div>
</form>
</div>
</div>
<div class="inline field">
<button class="ui primary button">{{ctx.Locale.Tr "sign_in"}}</button>

<div class="ui container fluid">
{{template "user/auth/webauthn_error" .}}

<div class="ui attached segment header top tw-flex tw-flex-col tw-items-center">
<a href="{{AppSubUrl}}/user/login">{{ctx.Locale.Tr "auth.back_to_sign_in"}}</a>
</div>
</div>
</form>
</div>
</div>
</div>
Expand Down
5 changes: 3 additions & 2 deletions templates/user/auth/signup.tmpl
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user signin{{if .LinkAccountMode}} icon{{end}}">
{{template "user/auth/signin_navbar" .}}
<div class="ui middle very relaxed page grid">
{{template "user/auth/signup_inner" .}}
<div class="column tw-flex tw-flex-col tw-gap-4 tw-max-w-2xl tw-m-auto">
{{template "user/auth/signup_inner" .}}
</div>
</div>
</div>
{{template "base/footer" .}}
Loading