Skip to content

Commit

Permalink
update sign form layout
Browse files Browse the repository at this point in the history
  • Loading branch information
rafh committed Jan 10, 2024
1 parent c65f862 commit 95bdc7b
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 119 deletions.
106 changes: 52 additions & 54 deletions templates/user/auth/signin_inner.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,65 +9,63 @@
{{end}}
</h4>
<div class="ui attached segment">
<form class="ui form" action="{{.SignInLink}}" method="post">
{{.CsrfTokenHtml}}
<div class="required inline 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}}">
<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">
<form class="ui form gt-max-width-48rem gt-w-100 gt-m-auto" action="{{.SignInLink}}" method="post">
{{if .OAuth2Providers}}
<div id="oauth2-login-navigator" class="gt-py-2">
<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 gt-max-width-36rem gt-w-100 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
{{$provider.IconHTML 28}}
{{ctx.Locale.Tr "sign_in_with_provider" $provider.DisplayName}}
</a>
{{end}}
</div>
</div>
</div>
</div>
{{end}}

{{template "user/auth/captcha" .}}

<div class="inline field">
<label></label>
<button class="ui primary button">
{{if .LinkAccountMode}}
{{ctx.Locale.Tr "auth.oauth_signin_submit"}}
{{else}}
{{ctx.Locale.Tr "sign_in"}}
<div class="divider divider-text gt-mb-5 gt-mt-5">
{{ctx.Locale.Tr "sign_in_or"}}
</div>
{{end}}
<div class="gt-max-width-36rem gt-m-auto">
{{.CsrfTokenHtml}}
<div class="required inline 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" class="gt-w-100" 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}}">
<label for="password">{{ctx.Locale.Tr "password"}}</label>
<input id="password" class="gt-w-100" 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}}
</button>
<a href="{{AppSubUrl}}/user/forgot_password">{{ctx.Locale.Tr "auth.forgot_password"}}</a>
</div>

{{if .ShowRegistrationButton}}
<div class="inline field">
<label></label>
<a href="{{AppSubUrl}}/user/sign_up">{{ctx.Locale.Tr "auth.sign_up_now" | Str2html}}</a>
</div>
{{end}}
{{template "user/auth/captcha" .}}

{{if .OAuth2Providers}}
<div class="divider divider-text">
{{ctx.Locale.Tr "sign_in_or"}}
</div>
<div id="oauth2-login-navigator" class="gt-py-2">
<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}}">
{{$provider.IconHTML 28}}
{{ctx.Locale.Tr "sign_in_with_provider" $provider.DisplayName}}
</a>
{{end}}
<div class="inline 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>
</div>

{{if .ShowRegistrationButton}}
<div class="inline field">
<a href="{{AppSubUrl}}/user/sign_up">{{ctx.Locale.Tr "auth.sign_up_now" | Str2html}}</a>
</div>
{{end}}
</div>
</div>
{{end}}
</form>
</div>
58 changes: 29 additions & 29 deletions templates/user/auth/signin_openid.tmpl
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
{{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" 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}}">
<label for="openid">
<div class="ui middle very relaxed page grid">
<div class="ui container column fluid">
{{template "base/alert" .}}
<h4 class="ui top attached header center">
{{svg "fontawesome-openid"}}
OpenID URI
</label>
<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>
OpenID
</h4>
<div class="ui attached segment">
<form class="ui form gt-max-width-36rem gt-w-100 gt-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}}">
<label for="openid">
{{svg "fontawesome-openid"}}
OpenID URI
</label>
<input id="openid" class="gt-w-100" 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">{{ctx.Locale.Tr "sign_in"}}</button>
</div>
</form>
</div>
</form>
</div>
</div>
</div>
Expand Down
60 changes: 30 additions & 30 deletions templates/user/auth/signup_inner.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,26 @@
{{end}}
</h4>
<div class="ui attached segment">
<form class="ui form" action="{{.SignUpLink}}" method="post">
<form class="ui form gt-max-width-48rem gt-w-100 gt-m-auto" action="{{.SignUpLink}}" method="post">
{{if .OAuth2Providers}}
<div id="oauth2-login-navigator" class="gt-py-2">
<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 gt-max-width-36rem gt-w-100 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
{{$provider.IconHTML 28}}
{{ctx.Locale.Tr "sign_in_with_provider" $provider.DisplayName}}
</a>
{{end}}
</div>
</div>
</div>

<div class="divider divider-text gt-mb-5 gt-mt-5">
{{ctx.Locale.Tr "sign_in_or"}}
</div>
{{end}}
<div class="gt-max-width-36rem gt-m-auto">
{{.CsrfTokenHtml}}
{{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister)}}
{{template "base/alert" .}}
Expand All @@ -17,28 +36,27 @@
{{else}}
<div class="required inline 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>
<input id="user_name" class="gt-w-100" type="text" name="user_name" value="{{.user_name}}" autofocus required>
</div>
<div class="required inline field {{if .Err_Email}}error{{end}}">
<label for="email">{{ctx.Locale.Tr "email"}}</label>
<input id="email" name="email" type="email" value="{{.email}}" required>
<input id="email" class="gt-w-100" 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}}">
<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}}">
<label for="retype">{{ctx.Locale.Tr "re_type"}}</label>
<input id="retype" name="retype" type="password" value="{{.retype}}" autocomplete="new-password" required>
</div>
<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
<label for="password">{{ctx.Locale.Tr "password"}}</label>
<input id="password" class="gt-w-100" 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}}">
<label for="retype">{{ctx.Locale.Tr "re_type"}}</label>
<input id="retype" class="gt-w-100" name="retype" type="password" value="{{.retype}}" autocomplete="new-password" required>
</div>
{{end}}

{{template "user/auth/captcha" .}}

<div class="inline field">
<label></label>
<button class="ui primary button">
{{if .LinkAccountMode}}
{{ctx.Locale.Tr "auth.oauth_signup_submit"}}
Expand All @@ -50,29 +68,11 @@

{{if not .LinkAccountMode}}
<div class="inline field">
<label></label>
<a href="{{AppSubUrl}}/user/login">{{ctx.Locale.Tr "auth.register_helper_msg"}}</a>
</div>
{{end}}
{{end}}

{{if .OAuth2Providers}}
<div class="divider divider-text">
{{ctx.Locale.Tr "sign_in_or"}}
</div>
<div id="oauth2-login-navigator" class="gt-py-2">
<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}}">
{{$provider.IconHTML 28}}
{{ctx.Locale.Tr "sign_in_with_provider" $provider.DisplayName}}
</a>
{{end}}
</div>
</div>
</div>
{{end}}
</form>
</div>
</div>
7 changes: 1 addition & 6 deletions web_src/css/form.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,6 @@ textarea:focus,
.user.forgot.password form,
.user.reset.password form,
.user.link-account form,
.user.signin form,
.user.signup form {
margin: auto;
width: 700px !important;
Expand All @@ -263,7 +262,6 @@ textarea:focus,
.user.forgot.password form,
.user.reset.password form,
.user.link-account form,
.user.signin form,
.user.signup form {
width: 800px !important;
}
Expand All @@ -279,7 +277,6 @@ textarea:focus,
.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 {
text-align: right;
width: 250px !important;
Expand All @@ -305,15 +302,13 @@ textarea:focus,
.user.forgot.password form .inline.field > input,
.user.reset.password form .inline.field > input,
.user.link-account form .inline.field > input,
.user.signin form .inline.field > input,
.user.signup form .inline.field > input,
.user.activate form .inline.field > textarea,
.user.forgot.password form .inline.field > textarea,
.user.reset.password form .inline.field > textarea,
.user.link-account form .inline.field > textarea,
.user.signin form .inline.field > textarea,
.user.signup form .inline.field > textarea,
.oauth-login-link {
.user.signup form .inline.field > textarea {
width: 50%;
}
}
Expand Down
2 changes: 2 additions & 0 deletions web_src/css/helpers.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ Gitea's private styles use `g-` prefix.

.gt-max-width-12rem { max-width: 12rem !important; }
.gt-max-width-24rem { max-width: 24rem !important; }
.gt-max-width-36rem { max-width: 36rem !important; }
.gt-max-width-48rem { max-width: 48rem !important; }

/* below class names match Tailwind CSS */
.gt-break-all { word-break: break-all !important; }
Expand Down

0 comments on commit 95bdc7b

Please sign in to comment.