{% extends "::base.html.twig" %}
{% set pageSpecialClass = 'login-page violet-theme colorful-theme' %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="/bundles/app/css/nouislider.css">
{% endblock %}
{% block body %}
{% set locale = app.request.query.get('locale') ? app.request.query.get('locale') : app.request.locale %}
<div class="content-holder stars-box">
<div class="login-page-wrapper">
<div class="row-wrap">
{# title #}
<div class="home-title">
<h3 class="text-center text_organization">
{{- 'app.welcometext'|trans({}, 'app', locale) -}}
</h3>
</div>
{# form #}
<div class="login-box-body">
{% block sonata_user_login_form %}
{% block sonata_user_login_error %}
{% if error %}
<div class="alert alert-error">
{{ 'app.login.invalid_credentials'|trans({}, 'app', locale) }}
</div>
{% endif %}
{% endblock %}
{% if qrCodeUrl is defined %}
<div class="row">
<div class="col-xs-12">
<p align="middle"><img src="{{ qrCodeUrl }}" alt="QR-code"></p>
<p align="middle">{{ 'qr_code_secret'|trans({}, 'SonataUserBundle') }}
: {{ qrSecret }}</p>
<p align="middle">
<a href="{{ path('sonata_admin_dashboard') }}">{{ 'qr_go_next'|trans({}, 'SonataUserBundle') }}</a>
</p>
</div>
</div>
{% elseif two_step_submit|default(false) %}
<form method="POST" role="form">
{% if state == 'error' %}
<div class="alert alert-error">{{ 'label_two_step_code_error'|trans({}, 'SonataUserBundle') }}</div>
{% endif %}
<label for="_code">{{ 'label_two_step_code'|trans({}, 'SonataUserBundle') }}</label>
<div class="input-group input-group-lg">
<input type="text" class="form-control" id="_code" name="_code"
autocomplete='off'/>
<span class="input-group-btn">
<input class="btn btn-primary"
id="_submit"
name="_submit"
type="submit"
value="{{ 'security.login.submit'|trans({}, 'FOSUserBundle', locale) }}"/>
</span>
</div>
<span class="help-block sonata-ba-field-help">{{ 'message_two_step_code_help'|trans({}, 'SonataUserBundle') }}</span>
</form>
{% else %}
<form action="{{ path("sonata_user_admin_security_check") }}" method="post" role="form">
<input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>
<div class="form-group has-feedback">
<span class="input-style white">
<input class="form-control"
id="username"
name="_username"
placeholder="{{ 'security.login.username'|trans({}, 'SonataUserBundle', locale) }}"
required="required"
type="text"
value="{{ last_username }}"/>
</span>
</div>
<div class="form-group has-feedback">
<span class="input-style white">
<input class="form-control"
id="password"
name="_password"
placeholder="{{ 'security.login.password'|trans({}, 'SonataUserBundle', locale) }}"
required="required"
type="password"/>
</span>
</div>
<div class="input-group">
<div class="checkbox">
<label>
<input type="checkbox" id="user_agreement" name="_user_agreement" value="on"
required="required"/>
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="22px">
<path
d="M19.555,4.851c-2.854,3.489-5.464,7.175-8.546,10.471c-0.265,0.285-0.709,0.25-0.981,0c-3.239-2.981-4.049-4.698-4.048-4.698c-0.509-0.74,0.367-1.439,0.985-0.799c4.751,4.924,2.416,5.876,11.333-5.583C18.848,3.534,20.117,4.165,19.555,4.851z"/>
</svg>
<a onclick="showModalUserAgreement()"
style="cursor: pointer"> {{- 'app.login.user_agreement'|trans({}, 'app', locale) -}}</a>
</label>
</div>
</div>
<div class="buttons">
<button type="submit" id="btn_login_portal"
class="button white">{{ 'security.login.submit'|trans({}, 'FOSUserBundle', locale) }}</button>
<div class="checkbox">
<span>
<label>
<input type="checkbox" id="remember_me" name="_remember_me"
value="on"/>
{{ 'security.login.remember_me'|trans({}, 'FOSUserBundle', locale) }}
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="22px"><path
d="M19.555,4.851c-2.854,3.489-5.464,7.175-8.546,10.471c-0.265,0.285-0.709,0.25-0.981,0c-3.239-2.981-4.049-4.698-4.048-4.698c-0.509-0.74,0.367-1.439,0.985-0.799c4.751,4.924,2.416,5.876,11.333-5.583C18.848,3.534,20.117,4.165,19.555,4.851z"/></svg>
</label>
</span>
</div>
</div>
<input type="hidden" name="_locale" value="{{ locale }}">
</form>
{% endif %}
{% endblock %}
</div>
{# forgot password #}
<div class="forgot-password">
<a href="{{ path('ms_user_reset_password',{'_locale': locale}) }}"
class=""> {{- 'app.forgot_password.title'|trans({}, 'app', locale) -}}</a>
</div>
<div class="propose-wrap">
<a onclick="addMessage(null, true, 'support')"
style="cursor: pointer"> {{- 'app.login.cowork_propose'|trans({}, 'app', locale) -}}</a>
</div>
<div class="propose-wrap">
<a href="https://abacusarithmetic.com/"
style="cursor: pointer; font-size: 22px"> {{- 'app.login.about_the_project'|trans({}, 'app', locale) -}}</a>
</div>
</div>
{# langs #}
<div class="langs">
<span class="title">{{- 'app.login.choose_language'|trans({}, 'app', locale) -}}<span></span></span>
<div class="list">
{% for app_locale in app_locales|split('|') %}
<a href="{{ path("sonata_user_admin_security_login", {"locale" : app_locale }) }}"
class="{{ app_locale }}{% if (locale == app_locale) %} active{% endif %}">{{ app_locale }}</a>
{% endfor %}
</div>
</div>
{# color theme #}
<div class="color-wrap">
<span class="close"></span>
<div class="color-box">
{% if app.request.cookies.get('colorTheme') %}
<div class="item violet">
<div id="violet-color" style="width:50px;"
data-active="{{ app.request.cookies.get('colorTheme') == 'violet-theme' ? '1' : '0' }}"></div>
</div>
<div class="item blue">
<div id="blue-color" style="width:50px;"
data-active="{{ app.request.cookies.get('colorTheme') == 'blue-theme' ? '1' : '0' }}"></div>
</div>
<div class="item green">
<div id="green-color" style="width:50px;"
data-active="{{ app.request.cookies.get('colorTheme') == 'green-theme' ? '1' : '0' }}"></div>
</div>
<div class="item pink">
<div id="pink-color" style="width:50px;"
data-active="{{ app.request.cookies.get('colorTheme') == 'pink-theme' ? '1' : '0' }}"></div>
</div>
<div class="item orange">
<div id="orange-color" style="width:50px;"
data-active="{{ app.request.cookies.get('colorTheme') == 'orange-theme' ? '1' : '0' }}"></div>
</div>
{% else %}
<div class="item violet">
<div id="violet-color" style="width:50px;" data-active="1"></div>
</div>
<div class="item blue">
<div id="blue-color" style="width:50px;" data-active="0"></div>
</div>
<div class="item green">
<div id="green-color" style="width:50px;" data-active="0"></div>
</div>
<div class="item pink">
<div id="pink-color" style="width:50px;" data-active="0"></div>
</div>
<div class="item orange">
<div id="orange-color" style="width:50px;" data-active="0"></div>
</div>
{% endif %}
</div>
</div>
<span class="theme-chooser"></span>
</div>
<div class="elements elements-login">
<img class="elem elem-1"
src="/bundles/app/image/login/elem1{{ app.request.cookies.get('colorTheme') == 'pink-theme' ? '-pink' : '' }}.png"
alt="">
<img class="elem elem-2" src="/bundles/app/image/login/elem2.png" alt="">
<img class="elem elem-3" src="/bundles/app/image/elems/elem3.svg" alt="">
<img class="elem elem-4" src="/bundles/app/image/elems/elem4.svg" alt="">
<img class="elem elem-5" src="/bundles/app/image/elems/elem5.svg" alt="">
<img class="elem elem-6" src="/bundles/app/image/elems/elem6.svg" alt="">
<img class="elem elem-7" src="/bundles/app/image/elems/elem7.svg" alt="">
<img class="elem elem-8" src="/bundles/app/image/elems/elem13.svg" alt="">
</div>
<div class="modal app-modal-send-message mt-3"
data-url={{ path('ms_app_cowork_propose', {'_locale' : locale}) }}></div>
<div class="modal app-modal-user_agreement mt-3"> {%- embed 'AppBundle:Security:modal-user-agreement.html.twig' -%}{%- endembed -%}</div>
<script type="text/javascript" src="{{ asset('bundles/app/js/jquery.min.js') }}"></script>
<script>
if (sessionStorage.getItem('debtNoticeDismissed')) {
sessionStorage.removeItem('debtNoticeDismissed');
}
window.addEventListener && window.addEventListener('load', function () {
$('body').addClass('loaded');
});
function showModalUserAgreement() {
var self = this;
var section = $('.app-modal-user_agreement');
$('.app-modal-send-message').hide();
var popupWindow = $('.app-modal-user_agreement');
section.modal('show');
popupWindow.removeClass('loading');
};
function acceptUserAgreement() {
$("#user_agreement").prop("checked", true);
$("#user_agreement").attr('checked', 'checked');
var section = $('.app-modal-user_agreement');
section.modal('hide');
}
function declineUserAgreement() {
$("#user_agreement").prop("checked", false);
$("#user_agreement").removeAttr('checked');
var section = $('.app-modal-user_agreement');
section.modal('hide');
}
(function () {
/*$("#user_agreement").change(function() {
if($(this).prop('checked')) {
$('#btn_login_portal').prop('disabled', false);
} else {
$('#btn_login_portal').prop('disabled', true);
}
});*/
$(document).ready(function () {
openListLang();
openThemeChooser();
});
function openListLang() {
var button = $('.langs .title'),
list = $('.langs .list');
button.on('click', function () {
$(this).parents('.langs').toggleClass('active');
})
}
function openThemeChooser() {
var button = $('.theme-chooser'),
close = $('.color-wrap .close'),
wrapper = $('.color-wrap');
button.on('click', function () {
wrapper.addClass('active');
});
close.on('click', function () {
wrapper.removeClass('active');
});
}
})();
</script>
<script type="text/javascript" src="{{ asset('bundles/app/js/vendor/wNumb.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/app/js/vendor/nouislider.min.js') }}"></script>
<script src="/bundles/sonatacore/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bundles/sonatacore/vendor/select2/select2.min.js"></script>
<script type="text/javascript" src="{{ asset('/bundles/app/js/notification.js') }}"></script>
<script type="text/javascript" src="{{ asset('/bundles/app/js/animation.js?34522223233') }}"></script>
<script>
$(document).ready(function () {
var wrapper = $('body');
// violet
var themeViolet = document.getElementById('violet-color'),
inputThemeViolet = $('input[value="violet"]');
noUiSlider.create(themeViolet, {
start: themeViolet.getAttribute('data-active'),
connect: [true, false],
range: {'min': [0, 1], 'max': 1},
format: wNumb({decimals: 0})
});
// blue
var themeBlue = document.getElementById('blue-color'),
inputThemeBlue = $('input[value="blue"]');
noUiSlider.create(themeBlue, {
start: themeBlue.getAttribute('data-active'),
connect: [true, false],
range: {'min': [0, 1], 'max': 1},
format: wNumb({decimals: 0})
});
// green
var themeGreen = document.getElementById('green-color'),
inputThemeGreen = $('input[value="green"]');
noUiSlider.create(themeGreen, {
start: themeGreen.getAttribute('data-active'),
connect: [true, false],
range: {'min': [0, 1], 'max': 1},
format: wNumb({decimals: 0})
});
// pink
var themePink = document.getElementById('pink-color'),
inputThemePink = $('input[value="pink"]');
noUiSlider.create(themePink, {
start: themePink.getAttribute('data-active'),
connect: [true, false],
range: {'min': [0, 1], 'max': 1},
format: wNumb({decimals: 0})
});
// orange
var themeOrange = document.getElementById('orange-color'),
inputThemeOrange = $('input[value="orange"]');
noUiSlider.create(themeOrange, {
start: themeOrange.getAttribute('data-active'),
connect: [true, false],
range: {'min': [0, 1], 'max': 1},
format: wNumb({decimals: 0})
});
// violet
themeViolet.noUiSlider.on('update', function (values, handle) {
if (values[handle] === '1') {
inputThemeViolet.trigger('click');
wrapper.removeClass('blue-theme green-theme pink-theme orange-theme');
wrapper.addClass('violet-theme');
document.cookie = "colorTheme=violet-theme; path=/";
themeBlue.noUiSlider.set([0, null]);
themeGreen.noUiSlider.set([0, null]);
themeOrange.noUiSlider.set([0, null]);
themePink.noUiSlider.set([0, null]);
}
});
// blue
themeBlue.noUiSlider.on('update', function (values, handle) {
if (values[handle] === '1') {
inputThemeBlue.trigger('click');
wrapper.removeClass('violet-theme green-theme pink-theme orange-theme');
wrapper.addClass('blue-theme');
document.cookie = "colorTheme=blue-theme; path=/";
themeGreen.noUiSlider.set([0, null]);
themeOrange.noUiSlider.set([0, null]);
themePink.noUiSlider.set([0, null]);
themeViolet.noUiSlider.set([0, null]);
}
});
// green
themeGreen.noUiSlider.on('update', function (values, handle) {
if (values[handle] === '1') {
inputThemeGreen.trigger('click');
wrapper.removeClass('blue-theme violet-theme pink-theme orange-theme');
wrapper.addClass('green-theme');
document.cookie = "colorTheme=green-theme; path=/";
themeBlue.noUiSlider.set([0, null]);
themeOrange.noUiSlider.set([0, null]);
themePink.noUiSlider.set([0, null]);
themeViolet.noUiSlider.set([0, null]);
}
});
// pink
themePink.noUiSlider.on('update', function (values, handle) {
if (values[handle] === '1') {
inputThemePink.trigger('click');
wrapper.removeClass('blue-theme green-theme violet-theme orange-theme');
wrapper.addClass('pink-theme');
document.cookie = "colorTheme=pink-theme; path=/";
themeBlue.noUiSlider.set([0, null]);
themeGreen.noUiSlider.set([0, null]);
themeOrange.noUiSlider.set([0, null]);
themeViolet.noUiSlider.set([0, null]);
}
});
// orange
themeOrange.noUiSlider.on('update', function (values, handle) {
if (values[handle] === '1') {
inputThemeOrange.trigger('click');
wrapper.removeClass('blue-theme green-theme pink-theme violet-theme');
wrapper.addClass('orange-theme');
document.cookie = "colorTheme=orange-theme; path=/";
themeBlue.noUiSlider.set([0, null]);
themeGreen.noUiSlider.set([0, null]);
themePink.noUiSlider.set([0, null]);
themeViolet.noUiSlider.set([0, null]);
}
});
});
</script>
<div class="copyright" align="center"> {{- 'app.copyright'|trans({}, 'app', locale) -}} </div>
</div>
{% endblock %}