src/oidc_templates/login.ejs

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

    <title>{{ login.loginTo }} <%= name %></title>

    <link id="favicon" type="image/png" rel="icon" href="/api/v1/cloudron/avatar">
    <link rel="apple-touch-icon" href="/api/v1/cloudron/avatar">
    <link rel="icon" href="/api/v1/cloudron/avatar">

    <!-- Theme CSS -->
    <link type="text/css" rel="stylesheet" href="/theme.css">

    <link type="text/css" rel="stylesheet" href="/3rdparty/fontawesome/css/all.css"/>
    <script type="text/javascript" src="/3rdparty/js/password-reveal.js"></script>

    <style>

      .card {
        padding: 20px;
        margin-bottom: 0;
        max-width: 620px;
        min-height: 100%;
      }

      .avatar {
        margin-top: 20px;
      }

      @media(min-width:620px) {
        .card {
          margin-bottom: 15px;
          margin-top: 100px;
          min-height: auto;
        }

        .avatar {
          margin-top: -84px
        }
      }

      .hide {
        display: none;
      }

    </style>

</head>
<body>

<div class="layout-root">
  <div class="layout-content">
    <div class="card">
      <div class="row">
        <div class="col-md-12" style="text-align: center;">
          <img width="128" height="128" class="avatar" src="<%= iconUrl %>"/>
          <br/>
          <h1><small>{{ login.loginTo }}</small> <%= name %></h1>
        </div>
      </div>
      <br/>
      <div class="row">
        <div class="col-md-12">
          <%- note %>
          <form id="loginForm">
            <div class="form-group">
              <label class="control-label" for="inputUsername">{{ login.username }}</label>
              <input type="text" class="form-control" id="inputUsername" name="username" autofocus required>
            </div>
            <div class="form-group">
              <label class="control-label" for="inputPassword">{{ login.password }}</label>
              <input type="password" class="form-control" name="password" id="inputPassword" required password-reveal>
              <p class="has-error hide" id="passwordError">{{ login.errorIncorrectCredentials }}</p>
              <p class="has-error hide" id="internalError">{{ login.errorInternal }}</p>
            </div>
            <div class="form-group">
              <label class="control-label" for="inputTotpToken">{{ login.2faToken }}</label>
              <input type="text" class="form-control" name="totpToken" id="inputTotpToken" value="">
              <p class="has-error hide" id="totpError">{{ login.errorIncorrect2FAToken }}</p>
            </div>
            <div class="card-form-bottom-bar">
              <a href="/passwordreset.html">{{ login.resetPasswordAction }}</a>
              <button class="btn btn-primary btn-outline" type="submit" id="loginSubmitButton"><i id="busyIndicator" class="hide fa fa-circle-notch fa-spin"></i> {{ login.signInAction }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <footer class="text-center">
    <span class="text-muted"><%- footer %></span>
  </footer>
</div>

<script>

document.getElementById('loginForm').addEventListener('submit', function (event) {
    event.preventDefault();

    document.getElementById('passwordError').classList.add('hide');
    document.getElementById('totpError').classList.add('hide');
    document.getElementById('internalError').classList.add('hide');
    document.getElementById('busyIndicator').classList.remove('hide');

    const apiUrl = '<%= submitUrl %>';

    const body = {
        username: document.getElementById('inputUsername').value,
        password: document.getElementById('inputPassword').value,
        totpToken: document.getElementById('inputTotpToken').value
    };

    let res;
    fetch(apiUrl, {
        method: 'POST',
        body: JSON.stringify(body),
        headers: { 'Content-type': 'application/json; charset=UTF-8' }
    }).then(function (response) {
        res = response;
        return res.json(); // we always return objects
    }).then(function (data) {
        if (res.status === 401) {
            if (data.message.indexOf('totpToken') !== -1) {
                document.getElementById('inputTotpToken').value = '';
                document.getElementById('inputTotpToken').focus();
                document.getElementById('totpError').classList.remove('hide');
            } else {
                document.getElementById('inputPassword').value = '';
                document.getElementById('inputPassword').focus();
                document.getElementById('passwordError').classList.remove('hide');
            }

            document.getElementById('busyIndicator').classList.add('hide');
            return;
        } else if (res.status !== 200) {
            document.getElementById('busyIndicator').classList.add('hide');
            throw new Error('Something went wrong');
        }

        if (data.redirectTo) window.location.href = data.redirectTo;
        else console.log('login success but missing redirectTo in data:', data);
    }).catch(function (error) {
        document.getElementById('internalError').classList.remove('hide');
        document.getElementById('busyIndicator').classList.add('hide');
        console.warn(error, res);
    });
});

const token = location.search.slice(1);
if (token) {
    console.log('got token do auto login', token);

    const apiUrl = '<%= submitUrl %>';

    let res;
    fetch(apiUrl, {
        method: 'POST',
        body: JSON.stringify({ token: token }),
        headers: { 'Content-type': 'application/json; charset=UTF-8' }
    }).then(function (response) {
        res = response;
        return res.json(); // we always return objects
    }).then(function (data) {
        if (data.redirectTo) window.location.href = data.redirectTo;
        else console.log('login success but missing redirectTo in data:', data);
    }).catch(function (error) {
        document.getElementById('internalError').classList.remove('hide');
        document.getElementById('busyIndicator').classList.add('hide');
        console.warn(error, res);
    });
}

</script>

</body>
</html>
oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00			`<!DOCTYPE html>`
Add initial oidc interaction pages 2023-03-11 17:22:27 +01:00			`<html>`
			`<head>`
oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00			`<meta charset="utf-8" />`
			`<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />`

Translate the oidc login view 2023-06-19 11:50:53 +02:00			`<title>{{ login.loginTo }} <%= name %></title>`
oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00
Set favicon for OpenId views 2023-05-11 12:15:10 +02:00			`<link id="favicon" type="image/png" rel="icon" href="/api/v1/cloudron/avatar">`
			`<link rel="apple-touch-icon" href="/api/v1/cloudron/avatar">`
			`<link rel="icon" href="/api/v1/cloudron/avatar">`

oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00			`<!-- Theme CSS -->`
			`<link type="text/css" rel="stylesheet" href="/theme.css">`

			`<link type="text/css" rel="stylesheet" href="/3rdparty/fontawesome/css/all.css"/>`
Add password-reveal feature to oidc login 2023-05-12 18:47:48 +02:00			`<script type="text/javascript" src="/3rdparty/js/password-reveal.js"></script>`

Improve oidc login popup style layout 2023-04-27 16:20:32 +02:00			`<style>`

			`.card {`
			`padding: 20px;`
			`margin-bottom: 0;`
			`max-width: 620px;`
			`min-height: 100%;`
			`}`

			`.avatar {`
			`margin-top: 20px;`
			`}`

			`@media(min-width:620px) {`
			`.card {`
			`margin-bottom: 15px;`
			`margin-top: 100px;`
			`min-height: auto;`
			`}`

			`.avatar {`
			`margin-top: -84px`
			`}`
			`}`

Do not use translation templates in JS due to escaping issues 2023-07-06 18:33:26 +02:00			`.hide {`
			`display: none;`
			`}`

Improve oidc login popup style layout 2023-04-27 16:20:32 +02:00			`</style>`

Add initial oidc interaction pages 2023-03-11 17:22:27 +01:00			`</head>`
			`<body>`

oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00			`<div class="layout-root">`
			`<div class="layout-content">`
Improve oidc login popup style layout 2023-04-27 16:20:32 +02:00			`<div class="card">`
oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00			`<div class="row">`
			`<div class="col-md-12" style="text-align: center;">`
Show app name during oidc login 2023-05-12 13:32:43 +02:00			`<img width="128" height="128" class="avatar" src="<%= iconUrl %>"/>`
oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00			`<br/>`
Translate the oidc login view 2023-06-19 11:50:53 +02:00			`<h1><small>{{ login.loginTo }}</small> <%= name %></h1>`
Add initial oidc interaction pages 2023-03-11 17:22:27 +01:00			`</div>`
oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00			`</div>`
			`<br/>`
			`<div class="row">`
			`<div class="col-md-12">`
Add login note for demo Cloudron 2023-08-17 13:33:31 +02:00			`<%- note %>`
oidc: Remove rpInitiatedLogout again 2023-03-13 19:08:41 +01:00			`<form id="loginForm">`
oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00			`<div class="form-group">`
Translate the oidc login view 2023-06-19 11:50:53 +02:00			`<label class="control-label" for="inputUsername">{{ login.username }}</label>`
oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00			`<input type="text" class="form-control" id="inputUsername" name="username" autofocus required>`
			`</div>`
			`<div class="form-group">`
Translate the oidc login view 2023-06-19 11:50:53 +02:00			`<label class="control-label" for="inputPassword">{{ login.password }}</label>`
oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00			`<input type="password" class="form-control" name="password" id="inputPassword" required password-reveal>`
Do not use translation templates in JS due to escaping issues 2023-07-06 18:33:26 +02:00			`<p class="has-error hide" id="passwordError">{{ login.errorIncorrectCredentials }}</p>`
			`<p class="has-error hide" id="internalError">{{ login.errorInternal }}</p>`
oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00			`</div>`
			`<div class="form-group">`
Translate the oidc login view 2023-06-19 11:50:53 +02:00			`<label class="control-label" for="inputTotpToken">{{ login.2faToken }}</label>`
oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00			`<input type="text" class="form-control" name="totpToken" id="inputTotpToken" value="">`
Do not use translation templates in JS due to escaping issues 2023-07-06 18:33:26 +02:00			`<p class="has-error hide" id="totpError">{{ login.errorIncorrect2FAToken }}</p>`
oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00			`</div>`
Also fix bottom bar for password reset 2023-06-19 14:08:10 +02:00			`<div class="card-form-bottom-bar">`
Better login action bar styling 2023-06-19 13:55:58 +02:00			`<a href="/passwordreset.html">{{ login.resetPasswordAction }}</a>`
Add login busy indicator 2024-01-03 14:27:01 +01:00			`<button class="btn btn-primary btn-outline" type="submit" id="loginSubmitButton"><i id="busyIndicator" class="hide fa fa-circle-notch fa-spin"></i> {{ login.signInAction }}</button>`
Better login action bar styling 2023-06-19 13:55:58 +02:00			`</div>`
oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00			`</form>`
Add initial oidc interaction pages 2023-03-11 17:22:27 +01:00			`</div>`
oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00			`</div>`
			`</div>`
			`</div>`
Add oidc views footer 2023-08-11 13:36:46 +02:00
			`<footer class="text-center">`
			`<span class="text-muted"><%- footer %></span>`
			`</footer>`
oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00			`</div>`

			`<script>`

oidc: Remove rpInitiatedLogout again 2023-03-13 19:08:41 +01:00			`document.getElementById('loginForm').addEventListener('submit', function (event) {`
			`event.preventDefault();`

Do not use translation templates in JS due to escaping issues 2023-07-06 18:33:26 +02:00			`document.getElementById('passwordError').classList.add('hide');`
			`document.getElementById('totpError').classList.add('hide');`
			`document.getElementById('internalError').classList.add('hide');`
Add login busy indicator 2024-01-03 14:27:01 +01:00			`document.getElementById('busyIndicator').classList.remove('hide');`
oidc: Give proper login error feedback 2023-05-12 14:31:26 +02:00
oidc: enable auto login when a token is provided 2024-04-03 18:11:21 +02:00			`const apiUrl = '<%= submitUrl %>';`
oidc: Remove rpInitiatedLogout again 2023-03-13 19:08:41 +01:00
oidc: enable auto login when a token is provided 2024-04-03 18:11:21 +02:00			`const body = {`
oidc: Remove rpInitiatedLogout again 2023-03-13 19:08:41 +01:00			`username: document.getElementById('inputUsername').value,`
			`password: document.getElementById('inputPassword').value,`
			`totpToken: document.getElementById('inputTotpToken').value`
			`};`

oidc: Give proper login error feedback 2023-05-12 14:31:26 +02:00			`let res;`
oidc: Remove rpInitiatedLogout again 2023-03-13 19:08:41 +01:00			`fetch(apiUrl, {`
oidc: Handle login without redirect from backend and set some default 2023-03-14 10:47:01 +01:00			`method: 'POST',`
oidc: Remove rpInitiatedLogout again 2023-03-13 19:08:41 +01:00			`body: JSON.stringify(body),`
			`headers: { 'Content-type': 'application/json; charset=UTF-8' }`
			`}).then(function (response) {`
oidc: Give proper login error feedback 2023-05-12 14:31:26 +02:00			`res = response;`
			`return res.json(); // we always return objects`
oidc: Remove rpInitiatedLogout again 2023-03-13 19:08:41 +01:00			`}).then(function (data) {`
oidc: Give proper login error feedback 2023-05-12 14:31:26 +02:00			`if (res.status === 401) {`
oidc: fix error message with correct username but bad password 2023-12-29 18:15:33 +01:00			`if (data.message.indexOf('totpToken') !== -1) {`
Do not use translation templates in JS due to escaping issues 2023-07-06 18:33:26 +02:00			`document.getElementById('inputTotpToken').value = '';`
			`document.getElementById('inputTotpToken').focus();`
			`document.getElementById('totpError').classList.remove('hide');`
oidc: Give proper login error feedback 2023-05-12 14:31:26 +02:00			`} else {`
oidc: fix error message with correct username but bad password 2023-12-29 18:15:33 +01:00			`document.getElementById('inputPassword').value = '';`
			`document.getElementById('inputPassword').focus();`
			`document.getElementById('passwordError').classList.remove('hide');`
oidc: Give proper login error feedback 2023-05-12 14:31:26 +02:00			`}`
Add login busy indicator 2024-01-03 14:27:01 +01:00
			`document.getElementById('busyIndicator').classList.add('hide');`
			`return;`
oidc: Give proper login error feedback 2023-05-12 14:31:26 +02:00			`} else if (res.status !== 200) {`
Add login busy indicator 2024-01-03 14:27:01 +01:00			`document.getElementById('busyIndicator').classList.add('hide');`
oidc: Give proper login error feedback 2023-05-12 14:31:26 +02:00			`throw new Error('Something went wrong');`
			`}`

oidc: Handle login without redirect from backend and set some default 2023-03-14 10:47:01 +01:00			`if (data.redirectTo) window.location.href = data.redirectTo;`
			`else console.log('login success but missing redirectTo in data:', data);`
oidc: Remove rpInitiatedLogout again 2023-03-13 19:08:41 +01:00			`}).catch(function (error) {`
Do not use translation templates in JS due to escaping issues 2023-07-06 18:33:26 +02:00			`document.getElementById('internalError').classList.remove('hide');`
Add login busy indicator 2024-01-03 14:27:01 +01:00			`document.getElementById('busyIndicator').classList.add('hide');`
oidc: Give proper login error feedback 2023-05-12 14:31:26 +02:00			`console.warn(error, res);`
oidc: Remove rpInitiatedLogout again 2023-03-13 19:08:41 +01:00			`});`
			`});`
oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00
oidc: enable auto login when a token is provided 2024-04-03 18:11:21 +02:00			`const token = location.search.slice(1);`
			`if (token) {`
			`console.log('got token do auto login', token);`

			`const apiUrl = '<%= submitUrl %>';`

			`let res;`
			`fetch(apiUrl, {`
			`method: 'POST',`
			`body: JSON.stringify({ token: token }),`
			`headers: { 'Content-type': 'application/json; charset=UTF-8' }`
			`}).then(function (response) {`
			`res = response;`
			`return res.json(); // we always return objects`
			`}).then(function (data) {`
			`if (data.redirectTo) window.location.href = data.redirectTo;`
			`else console.log('login success but missing redirectTo in data:', data);`
			`}).catch(function (error) {`
			`document.getElementById('internalError').classList.remove('hide');`
			`document.getElementById('busyIndicator').classList.add('hide');`
			`console.warn(error, res);`
			`});`
			`}`

oidc: apply basic style to login view 2023-03-13 16:46:18 +01:00			`</script>`

Add initial oidc interaction pages 2023-03-11 17:22:27 +01:00			`</body>`
			`</html>`