Merge pull request #4958 from overleaf/jpa-login-de-ng

[web] login: de-ng most of the login pages

GitOrigin-RevId: 6e7721d515228b70e4e0b8e31e1a578801dbe1c5
This commit is contained in:
Jakob Ackermann 2021-09-13 10:13:07 +02:00 committed by Copybot
parent 7ef6864204
commit aec8d78254
2 changed files with 19 additions and 13 deletions

View file

@ -1,4 +1,4 @@
extends ../layout
extends ../layout-marketing
block vars
- metadata = { viewport: true }
@ -11,36 +11,29 @@ block content
.card
.page-header
h1 #{translate("log_in")}
form(async-form="login", name="loginForm", action='/login', method="POST", ng-cloak)
form(data-ol-form, name="loginForm", action='/login', method="POST")
input(name='_csrf', type='hidden', value=csrfToken)
form-messages(for="loginForm")
div(data-ol-form-messages)
.form-group
input.form-control(
type='email',
name='email',
required,
placeholder='email@example.com',
ng-model="email",
ng-model-options="{ updateOn: 'blur' }",
focus="true"
)
span.small.text-primary(ng-show="loginForm.email.$invalid && loginForm.email.$dirty")
| #{translate("must_be_email_address")}
.form-group
input.form-control(
type='password',
name='password',
required,
placeholder='********',
ng-model="password"
)
span.small.text-primary(ng-show="loginForm.password.$invalid && loginForm.password.$dirty")
| #{translate("required")}
.actions
button.btn-primary.btn(
type='submit',
ng-disabled="loginForm.inflight"
data-ol-disabled-inflight
)
span(ng-show="!loginForm.inflight") #{translate("login")}
span(ng-show="loginForm.inflight") #{translate("logging_in")}…
span(data-ol-not-inflight-text) #{translate("login")}
span(hidden data-ol-inflight-text) #{translate("logging_in")}…
a.pull-right(href='/user/password/reset') #{translate("forgot_your_password")}?

View file

@ -49,6 +49,7 @@ function formSubmitHelper(formEl) {
}
messageBag.push({
type: 'error',
key: error.data?.message?.key,
text,
})
} finally {
@ -84,9 +85,21 @@ function showMessages(formEl, messageBag) {
// Clear content
messagesEl.textContent = ''
formEl.querySelectorAll('[data-ol-custom-form-message]').forEach(el => {
el.hidden = true
})
// Render messages
messageBag.forEach(message => {
if (message.key) {
formEl
.querySelectorAll(`[data-ol-custom-form-message="${message.key}"]`)
.forEach(el => {
el.hidden = false
})
return
}
const messageEl = document.createElement('div')
messageEl.className = classNames('alert', {
'alert-danger': message.type === 'error',