spawntree
/
timetracking


			
				
					
						
						
							
							{# templates/registration/find_account.html.twig #}
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ 'app.find_account.page_title'|trans }}</title>
    {{ encore_entry_link_tags('app') }}
</head>
<body class="register-body">

{% embed '_components/register-card.html.twig' %}
  {% block content %}

    <div class="register-card__brand">
        <a href="{{ path('app_home') }}">spawntree Timetracker</a>
    </div>
    <h1 class="register-card__title">{{ 'app.find_account.title'|trans }}</h1>
    <p class="register-card__sub">{{ 'app.find_account.subtitle'|trans }}</p>

    <div id="find-account-error" class="register-errors" role="alert"></div>

    <form id="find-account-form" novalidate>
        <div class="register-field">
            <label class="register-field__label" for="account-slug">{{ 'app.find_account.label_slug'|trans }}</label>
            <div class="find-account-input">
                <input class="input find-account-input__field"
                       type="text"
                       id="account-slug"
                       name="slug"
                       placeholder="{{ 'app.find_account.placeholder_slug'|trans }}"
                       autocomplete="off"
                       autocapitalize="none"
                       spellcheck="false"
                       autofocus
                       required />
                <span class="find-account-input__suffix">.{{ appDomain }}</span>
            </div>
        </div>

        <div class="register-actions">
            <button type="submit" class="btn btn-primary register-actions__submit">
                {{ 'app.find_account.btn_submit'|trans }}
            </button>
            <p class="register-actions__login">
                {{ 'app.find_account.no_account'|trans }} <a href="{{ path('app_register') }}">{{ 'app.find_account.link_register'|trans }}</a>
            </p>
        </div>
    </form>

  {% endblock %}
{% endembed %}

<script>
document.getElementById('find-account-form').addEventListener('submit', function(e) {
    e.preventDefault();
    var slug = document.getElementById('account-slug').value.trim().toLowerCase();
    var errorEl = document.getElementById('find-account-error');
    var btn = document.querySelector('.register-actions__submit');
    errorEl.textContent = '';

    if (!slug) {
        errorEl.innerHTML = '<p>{{ 'app.find_account.error_empty'|trans }}</p>';
        return;
    }

    if (!/^[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/.test(slug)) {
        errorEl.innerHTML = '<p>{{ 'app.find_account.error_invalid'|trans }}</p>';
        return;
    }

    btn.disabled = true;
    fetch('/api/check-slug', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ slug: slug }),
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.exists) {
            window.location.href = 'https://' + slug + '.{{ appDomain }}/login';
        } else {
            errorEl.innerHTML = '<p>{{ 'app.find_account.error_not_found'|trans }}</p>';
            btn.disabled = false;
        }
    })
    .catch(function() {
        errorEl.innerHTML = '<p>{{ 'app.find_account.error_not_found'|trans }}</p>';
        btn.disabled = false;
    });
});
</script>

</body>
</html>