diff --git a/templates/user/auth/activate.tmpl b/templates/user/auth/activate.tmpl
index c9ee8cac33..9ae811bf60 100644
--- a/templates/user/auth/activate.tmpl
+++ b/templates/user/auth/activate.tmpl
@@ -2,7 +2,7 @@
<div role="main" aria-label="{{.Title}}" class="page-content user activate">
<div class="ui middle very relaxed page grid">
<div class="column">
- <form class="ui form ignore-dirty" action="{{AppSubUrl}}/user/activate" method="post">
+ <form class="ui form ignore-dirty tw-max-w-2xl tw-m-auto" action="{{AppSubUrl}}/user/activate" method="post">
{{.CsrfTokenHtml}}
<h2 class="ui top attached header">
{{ctx.Locale.Tr "auth.active_your_account"}}
@@ -19,12 +19,11 @@
{{end}}
{{else}}
{{if .NeedsPassword}}
- <div class="required inline field">
+ <div class="required field">
<label for="password">{{ctx.Locale.Tr "password"}}</label>
<input id="password" name="password" type="password" autocomplete="off" required>
</div>
<div class="inline field">
- <label></label>
<button class="ui primary button">{{ctx.Locale.Tr "install.confirm_password"}}</button>
</div>
<input id="code" name="code" type="hidden" value="{{.Code}}">
@@ -49,7 +48,7 @@
</div>
</details>
- <div class="text right">
+ <div class="text">
<button class="ui primary button">{{ctx.Locale.Tr "auth.resend_mail"}}</button>
</div>
{{end}}
diff --git a/templates/user/auth/captcha.tmpl b/templates/user/auth/captcha.tmpl
index d4d1a82418..0e9c2b9d22 100644
--- a/templates/user/auth/captcha.tmpl
+++ b/templates/user/auth/captcha.tmpl
@@ -1,9 +1,8 @@
{{if .EnableCaptcha}}{{if eq .CaptchaType "image"}}
<div class="inline field">
- <label>{{/* This is CAPTCHA field */}}</label>
{{.Captcha.CreateHTML}}
</div>
- <div class="required inline field {{if .Err_Captcha}}error{{end}}">
+ <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>
diff --git a/templates/user/auth/change_passwd_inner.tmpl b/templates/user/auth/change_passwd_inner.tmpl
index 74c2b1a561..601f0365f3 100644
--- a/templates/user/auth/change_passwd_inner.tmpl
+++ b/templates/user/auth/change_passwd_inner.tmpl
@@ -5,18 +5,17 @@
{{ctx.Locale.Tr "settings.update_password"}}
</h4>
<div class="ui attached segment">
- <form class="ui form" action="{{.ChangePasscodeLink}}" method="post">
+ <form class="ui form tw-max-w-2xl tw-m-auto" action="{{.ChangePasscodeLink}}" method="post">
{{.CsrfTokenHtml}}
- <div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
+ <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="new-password" required>
</div>
- <div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
+ <div class="required field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
<label for="retype">{{ctx.Locale.Tr "re_type"}}</label>
<input id="retype" name="retype" type="password" autocomplete="new-password" required>
</div>
<div class="inline field">
- <label></label>
<button class="ui primary button">{{ctx.Locale.Tr "settings.update_password"}}</button>
</div>
</form>
diff --git a/templates/user/auth/forgot_passwd.tmpl b/templates/user/auth/forgot_passwd.tmpl
index 21a630ec5e..55bcf63018 100644
--- a/templates/user/auth/forgot_passwd.tmpl
+++ b/templates/user/auth/forgot_passwd.tmpl
@@ -12,13 +12,12 @@
{{if .IsResetSent}}
<p>{{ctx.Locale.Tr "auth.reset_password_mail_sent_prompt" .Email .ResetPwdCodeLives}}</p>
{{else if .IsResetRequest}}
- <div class="required inline field {{if .Err_Email}}error{{end}}">
+ <div class="required field {{if .Err_Email}}error{{end}}">
<label for="email">{{ctx.Locale.Tr "email"}}</label>
<input id="email" name="email" type="email" value="{{.Email}}" autofocus required>
</div>
<div class="divider"></div>
<div class="inline field">
- <label></label>
<button class="ui primary button">{{ctx.Locale.Tr "auth.send_reset_mail"}}</button>
</div>
{{else if .IsResetDisable}}
diff --git a/templates/user/auth/prohibit_login.tmpl b/templates/user/auth/prohibit_login.tmpl
index 668aa20e71..962ddfa98c 100644
--- a/templates/user/auth/prohibit_login.tmpl
+++ b/templates/user/auth/prohibit_login.tmpl
@@ -2,7 +2,7 @@
<div role="main" aria-label="{{.Title}}" class="page-content user activate">
<div class="ui middle very relaxed page grid">
<div class="column">
- <form class="ui form">
+ <form class="ui form tw-max-w-2xl tw-m-auto">
<h2 class="ui top attached header">
{{ctx.Locale.Tr "auth.prohibit_login"}}
</h2>
diff --git a/templates/user/auth/reset_passwd.tmpl b/templates/user/auth/reset_passwd.tmpl
index 9fee30f554..4d569e206c 100644
--- a/templates/user/auth/reset_passwd.tmpl
+++ b/templates/user/auth/reset_passwd.tmpl
@@ -17,13 +17,12 @@
</div>
{{end}}
{{if .IsResetForm}}
- <div class="required inline field {{if .Err_Password}}error{{end}}">
+ <div class="required field {{if .Err_Password}}error{{end}}">
<label for="password">{{ctx.Locale.Tr "settings.new_password"}}</label>
<input id="password" name="password" type="password" value="{{.password}}" autocomplete="new-password" autofocus required>
</div>
{{if not .user_signed_in}}
<div class="inline field">
- <label></label>
<div class="ui checkbox">
<label>{{ctx.Locale.Tr "auth.remember_me"}}</label>
<input name="remember" type="checkbox">
@@ -42,7 +41,7 @@
</div>
<input type="hidden" name="scratch_code" value="true">
{{else}}
- <div class="required inline field {{if .Err_Passcode}}error{{end}}">
+ <div class="required field {{if .Err_Passcode}}error{{end}}">
<label for="passcode">{{ctx.Locale.Tr "passcode"}}</label>
<input id="passcode" name="passcode" type="number" autocomplete="off" autofocus required>
</div>
@@ -50,7 +49,6 @@
{{end}}
<div class="divider"></div>
<div class="inline field">
- <label></label>
<button class="ui primary button">{{ctx.Locale.Tr "auth.reset_password_helper"}}</button>
{{if and .has_two_factor (not .scratch_code)}}
<a href="{{.Link}}?code={{.Code}}&scratch_code=true">{{ctx.Locale.Tr "auth.use_scratch_code"}}</a>
diff --git a/templates/user/auth/signin_inner.tmpl b/templates/user/auth/signin_inner.tmpl
index 0d0064b02a..d7d3649a4d 100644
--- a/templates/user/auth/signin_inner.tmpl
+++ b/templates/user/auth/signin_inner.tmpl
@@ -9,21 +9,20 @@
{{end}}
</h4>
<div class="ui attached segment">
- <form class="ui form" action="{{.SignInLink}}" method="post">
+ <form class="ui form tw-max-w-2xl tw-m-auto" action="{{.SignInLink}}" method="post">
{{.CsrfTokenHtml}}
- <div class="required inline field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
+ <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 inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
+ <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">
- <label></label>
<div class="ui checkbox">
<label>{{ctx.Locale.Tr "auth.remember_me"}}</label>
<input name="remember" type="checkbox">
@@ -33,8 +32,7 @@
{{template "user/auth/captcha" .}}
- <div class="inline field">
- <label></label>
+ <div class="field">
<button class="ui primary button">
{{if .LinkAccountMode}}
{{ctx.Locale.Tr "auth.oauth_signin_submit"}}
@@ -46,8 +44,7 @@
</div>
{{if .ShowRegistrationButton}}
- <div class="inline field">
- <label></label>
+ <div class="field">
<a href="{{AppSubUrl}}/user/sign_up">{{ctx.Locale.Tr "auth.sign_up_now"}}</a>
</div>
{{end}}
@@ -60,7 +57,7 @@
<div class="gt-df gt-fc gt-jc">
<div id="oauth2-login-navigator-inner" class="gt-df gt-fc gt-fw gt-ac gt-gap-3">
{{range $provider := .OAuth2Providers}}
- <a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
+ <a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 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>
diff --git a/templates/user/auth/signin_openid.tmpl b/templates/user/auth/signin_openid.tmpl
index 0428026aa8..c1f392dc13 100644
--- a/templates/user/auth/signin_openid.tmpl
+++ b/templates/user/auth/signin_openid.tmpl
@@ -8,12 +8,12 @@
OpenID
</h4>
<div class="ui attached segment">
- <form class="ui form" action="{{.Link}}" method="post">
+ <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 inline field {{if .Err_OpenID}}error{{end}}">
+ <div class="required field {{if .Err_OpenID}}error{{end}}">
<label for="openid">
{{svg "fontawesome-openid"}}
OpenID URI
@@ -21,14 +21,12 @@
<input id="openid" name="openid" value="{{.openid}}" autofocus required>
</div>
<div class="inline field">
- <label></label>
<div class="ui checkbox">
<label>{{ctx.Locale.Tr "auth.remember_me"}}</label>
<input name="remember" type="checkbox">
</div>
</div>
<div class="inline field">
- <label></label>
<button class="ui primary button">{{ctx.Locale.Tr "sign_in"}}</button>
</div>
</form>
diff --git a/templates/user/auth/signup_inner.tmpl b/templates/user/auth/signup_inner.tmpl
index e930bd3d15..cfd826a0ce 100644
--- a/templates/user/auth/signup_inner.tmpl
+++ b/templates/user/auth/signup_inner.tmpl
@@ -7,7 +7,7 @@
{{end}}
</h4>
<div class="ui attached segment">
- <form class="ui form" action="{{.SignUpLink}}" method="post">
+ <form class="ui form tw-max-w-2xl tw-m-auto" action="{{.SignUpLink}}" method="post">
{{.CsrfTokenHtml}}
{{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister)}}
{{template "base/alert" .}}
@@ -15,21 +15,21 @@
{{if .DisableRegistration}}
<p>{{ctx.Locale.Tr "auth.disable_register_prompt"}}</p>
{{else}}
- <div class="required inline field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
+ <div class="required field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
<label for="user_name">{{ctx.Locale.Tr "username"}}</label>
<input id="user_name" type="text" name="user_name" value="{{.user_name}}" autofocus required>
</div>
- <div class="required inline field {{if .Err_Email}}error{{end}}">
+ <div class="required field {{if .Err_Email}}error{{end}}">
<label for="email">{{ctx.Locale.Tr "email"}}</label>
<input id="email" name="email" type="email" value="{{.email}}" required>
</div>
{{if not .DisablePassword}}
- <div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
+ <div class="required field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
<label for="password">{{ctx.Locale.Tr "password"}}</label>
<input id="password" name="password" type="password" value="{{.password}}" autocomplete="new-password" required>
</div>
- <div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
+ <div class="required field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
<label for="retype">{{ctx.Locale.Tr "re_type"}}</label>
<input id="retype" name="retype" type="password" value="{{.retype}}" autocomplete="new-password" required>
</div>
@@ -38,7 +38,6 @@
{{template "user/auth/captcha" .}}
<div class="inline field">
- <label></label>
<button class="ui primary button">
{{if .LinkAccountMode}}
{{ctx.Locale.Tr "auth.oauth_signup_submit"}}
@@ -50,7 +49,6 @@
{{if not .LinkAccountMode}}
<div class="inline field">
- <label></label>
<a href="{{AppSubUrl}}/user/login">{{ctx.Locale.Tr "auth.register_helper_msg"}}</a>
</div>
{{end}}
@@ -64,7 +62,7 @@
<div class="gt-df gt-fc gt-jc">
<div id="oauth2-login-navigator-inner" class="gt-df gt-fc gt-fw gt-ac gt-gap-3">
{{range $provider := .OAuth2Providers}}
- <a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
+ <a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 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>
diff --git a/templates/user/auth/signup_openid_register.tmpl b/templates/user/auth/signup_openid_register.tmpl
index 81c36957d1..c017a0e65b 100644
--- a/templates/user/auth/signup_openid_register.tmpl
+++ b/templates/user/auth/signup_openid_register.tmpl
@@ -7,28 +7,27 @@
{{ctx.Locale.Tr "auth.openid_register_title"}}
</h4>
<div class="ui attached segment">
- <p>
+ <p class="tw-max-w-2xl tw-mx-auto">
{{ctx.Locale.Tr "auth.openid_register_desc"}}
</p>
<form class="ui form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}}
- <div class="required inline field {{if .Err_UserName}}error{{end}}">
+ <div class="required field {{if .Err_UserName}}error{{end}}">
<label for="user_name">{{ctx.Locale.Tr "username"}}</label>
<input id="user_name" type="text" name="user_name" value="{{.user_name}}" autofocus required>
</div>
- <div class="required inline field {{if .Err_Email}}error{{end}}">
+ <div class="required field {{if .Err_Email}}error{{end}}">
<label for="email">{{ctx.Locale.Tr "email"}}</label>
<input id="email" name="email" type="email" value="{{.email}}" required>
</div>
{{template "user/auth/captcha" .}}
- <div class="inline field">
+ <div class="field">
<label for="openid">OpenID URI</label>
<input id="openid" value="{{.OpenID}}" readonly>
</div>
<div class="inline field">
- <label></label>
<button class="ui primary button">{{ctx.Locale.Tr "auth.create_new_account"}}</button>
</div>
</form>
diff --git a/templates/user/auth/twofa.tmpl b/templates/user/auth/twofa.tmpl
index 5260178d13..d245239171 100644
--- a/templates/user/auth/twofa.tmpl
+++ b/templates/user/auth/twofa.tmpl
@@ -2,20 +2,19 @@
<div role="main" aria-label="{{.Title}}" class="page-content user signin">
<div class="ui middle very relaxed page grid">
<div class="column">
- <form class="ui form" action="{{.Link}}" method="post">
+ <form class="ui form tw-max-w-2xl tw-m-auto" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}}
<h3 class="ui top attached header">
{{ctx.Locale.Tr "twofa"}}
</h3>
<div class="ui attached segment">
{{template "base/alert" .}}
- <div class="required inline field">
+ <div class="required field">
<label for="passcode">{{ctx.Locale.Tr "passcode"}}</label>
<input id="passcode" name="passcode" type="text" autocomplete="one-time-code" inputmode="numeric" pattern="[0-9]*" autofocus required>
</div>
<div class="inline field">
- <label></label>
<button class="ui primary button">{{ctx.Locale.Tr "auth.verify"}}</button>
<a href="{{AppSubUrl}}/user/two_factor/scratch">{{ctx.Locale.Tr "auth.use_scratch_code"}}</a>
</div>
diff --git a/templates/user/auth/twofa_scratch.tmpl b/templates/user/auth/twofa_scratch.tmpl
index 1aa044b4a5..23ad77f2a9 100644
--- a/templates/user/auth/twofa_scratch.tmpl
+++ b/templates/user/auth/twofa_scratch.tmpl
@@ -2,20 +2,19 @@
<div role="main" aria-label="{{.Title}}" class="page-content user signin">
<div class="ui middle very relaxed page grid">
<div class="column">
- <form class="ui form" action="{{.Link}}" method="post">
+ <form class="ui form tw-max-w-2xl tw-m-auto" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}}
<h3 class="ui top attached header">
{{ctx.Locale.Tr "twofa_scratch"}}
</h3>
<div class="ui attached segment">
{{template "base/alert" .}}
- <div class="required inline field">
+ <div class="required field">
<label for="token">{{ctx.Locale.Tr "auth.scratch_code"}}</label>
<input id="token" name="token" type="text" autocomplete="off" autofocus required>
</div>
<div class="inline field">
- <label></label>
<button class="ui primary button">{{ctx.Locale.Tr "auth.verify"}}</button>
</div>
</div>
diff --git a/web_src/css/form.css b/web_src/css/form.css
index e4efa34948..1580a0b4cc 100644
--- a/web_src/css/form.css
+++ b/web_src/css/form.css
@@ -239,11 +239,8 @@ textarea:focus,
}
}
-.user.activate form,
.user.forgot.password form,
.user.reset.password form,
-.user.link-account form,
-.user.signin form,
.user.signup form {
margin: auto;
width: 700px !important;
@@ -275,12 +272,7 @@ textarea:focus,
.user.signup form .header {
padding-left: 280px !important;
}
- .user.activate form .inline.field > label,
- .user.forgot.password form .inline.field > label,
- .user.reset.password form .inline.field > label,
- .user.link-account form .inline.field > label,
- .user.signin form .inline.field > label,
- .user.signup form .inline.field > label {
+ .user.activate form .inline.field > label {
text-align: right;
width: 250px !important;
word-wrap: break-word;