src/ApplicationBundle/Modules/Authentication/Resources/views/pages/views/central_login.html.twig line 247

Open in your IDE?
  1. {% include '@Application/inc/central_header.html.twig' %}
  3. <style>
  4. :root {
  5.     --n-cream: #F7F5F0;
  6.     --n-dark:  #1A1D2E;
  7.     --n-amber: #C07D2A;
  8.     --n-muted: #6B7280;
  9.     --n-border: rgba(26,29,46,.09);
  10.     --n-error: #dc2626;
  11. }
  13. .n-auth-page {
  14.     min-height: calc(100vh - 140px);
  15.     background: var(--n-cream);
  16.     display: flex;
  17.     align-items: center;
  18.     justify-content: center;
  19.     padding: 72px 24px 96px;
  20. }
  21. .n-auth-card {
  22.     width: 100%;
  23.     max-width: 440px;
  24.     background: #fff;
  25.     border: 1.5px solid var(--n-border);
  26.     border-radius: 20px;
  27.     padding: 44px 40px 40px;
  28.     box-shadow: 0 8px 40px rgba(26,29,46,.08);
  29. }
  30. @media(max-width:480px) {
  31.     .n-auth-card { padding: 32px 24px 28px; }
  32. }
  33. .n-auth-logo {
  34.     text-align: center;
  35.     margin-bottom: 28px;
  36. }
  37. .n-auth-logo .n-brand-mark {
  38.     display: inline-flex;
  39.     align-items: center;
  40.     justify-content: center;
  41.     width: 52px;
  42.     height: 52px;
  43.     background: var(--n-dark);
  44.     border-radius: 14px;
  45.     margin-bottom: 12px;
  46. }
  47. .n-auth-logo .n-brand-mark img { width: 30px; height: 30px; filter: brightness(0) invert(1); }
  48. .n-auth-logo h1 {
  49.     font-family: 'Montserrat', sans-serif;
  50.     font-size: 1.45rem;
  51.     font-weight: 700;
  52.     color: var(--n-dark);
  53.     margin: 0 0 4px;
  54. }
  55. .n-auth-logo p {
  56.     font-size: .85rem;
  57.     color: var(--n-muted);
  58.     margin: 0;
  59. }
  61. .n-error-msg {
  62.     background: #fef2f2;
  63.     border: 1.5px solid #fca5a5;
  64.     border-radius: 8px;
  65.     padding: 10px 14px;
  66.     font-size: .85rem;
  67.     color: var(--n-error);
  68.     margin-bottom: 20px;
  69.     text-align: center;
  70. }
  72. .n-field {
  73.     margin-bottom: 16px;
  74. }
  75. .n-field label {
  76.     display: block;
  77.     font-size: .8rem;
  78.     font-weight: 600;
  79.     color: var(--n-dark);
  80.     margin-bottom: 6px;
  81.     letter-spacing: .02em;
  82. }
  83. .n-field input {
  84.     width: 100%;
  85.     padding: 11px 14px;
  86.     border: 1.5px solid var(--n-border);
  87.     border-radius: 8px;
  88.     font-size: .95rem;
  89.     color: var(--n-dark);
  90.     background: var(--n-cream);
  91.     font-family: 'DM Sans', sans-serif;
  92.     outline: none;
  93.     transition: border-color .2s, background .2s;
  94.     box-sizing: border-box;
  95. }
  96. .n-field input:focus { border-color: var(--n-amber); background: #fff; }
  97. .n-field input.error_class { border-color: var(--n-error); }
  99. .n-password-wrap {
  100.     position: relative;
  101. }
  102. .n-password-wrap input { padding-right: 42px; }
  103. .n-toggle-pw {
  104.     position: absolute;
  105.     right: 12px;
  106.     top: 50%;
  107.     transform: translateY(-50%);
  108.     background: none;
  109.     border: none;
  110.     cursor: pointer;
  111.     padding: 0;
  112.     opacity: .5;
  113.     transition: opacity .2s;
  114. }
  115. .n-toggle-pw:hover { opacity: 1; }
  116. .n-toggle-pw img { width: 18px; }
  118. .n-remember-row {
  119.     display: flex;
  120.     justify-content: space-between;
  121.     align-items: center;
  122.     flex-wrap: wrap;
  123.     gap: 8px;
  124.     margin-bottom: 22px;
  125.     font-size: .83rem;
  126. }
  127. @media(max-width:360px) {
  128.     .n-remember-row { flex-direction: column; align-items: flex-start; }
  129. }
  130. .n-remember-row label {
  131.     display: flex;
  132.     align-items: center;
  133.     gap: 7px;
  134.     color: var(--n-muted);
  135.     cursor: pointer;
  136. }
  137. .n-remember-row a {
  138.     color: var(--n-amber);
  139.     font-weight: 600;
  140.     text-decoration: none;
  141. }
  142. .n-remember-row a:hover { text-decoration: underline; }
  144. .n-submit-btn {
  145.     width: 100%;
  146.     padding: 13px;
  147.     background: var(--n-dark);
  148.     color: #fff;
  149.     border: none;
  150.     border-radius: 10px;
  151.     font-family: 'DM Sans', sans-serif;
  152.     font-size: .97rem;
  153.     font-weight: 700;
  154.     cursor: pointer;
  155.     transition: background .2s, transform .15s;
  156.     margin-bottom: 16px;
  157. }
  158. .n-submit-btn:hover { background: var(--n-amber); transform: translateY(-1px); }
  159. .n-submit-btn.ready { background: var(--n-amber); }
  161. .n-auth-link {
  162.     text-align: center;
  163.     font-size: .85rem;
  164.     color: var(--n-muted);
  165.     margin-bottom: 24px;
  166. }
  167. .n-auth-link a { color: var(--n-amber); font-weight: 600; text-decoration: none; }
  168. .n-auth-link a:hover { text-decoration: underline; }
  170. .n-divider {
  171.     display: flex;
  172.     align-items: center;
  173.     gap: 12px;
  174.     margin-bottom: 16px;
  175.     color: var(--n-muted);
  176.     font-size: .8rem;
  177. }
  178. .n-divider::before,
  179. .n-divider::after {
  180.     content: '';
  181.     flex: 1;
  182.     border-top: 1px solid var(--n-border);
  183. }
  185. .n-social-btn {
  186.     width: 100%;
  187.     padding: 11px 16px;
  188.     border: 1.5px solid var(--n-border);
  189.     border-radius: 10px;
  190.     background: #fff;
  191.     display: flex;
  192.     align-items: center;
  193.     justify-content: center;
  194.     gap: 10px;
  195.     font-family: 'DM Sans', sans-serif;
  196.     font-size: .9rem;
  197.     font-weight: 600;
  198.     color: var(--n-dark);
  199.     text-decoration: none;
  200.     cursor: pointer;
  201.     transition: background .2s, border-color .2s;
  202. }
  203. .n-social-btn:hover { background: var(--n-cream); border-color: rgba(26,29,46,.2); color: var(--n-dark); text-decoration: none; }
  204. .n-social-btn img { width: 18px; }
  205. </style>
  207. <section class="n-auth-page login-account">
  208.     <div class="n-auth-card">
  210.         <div class="n-auth-logo">
  211.             <div class="n-brand-mark">
  212.                 <img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/icons/honeybeeicon.svg?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}" alt="HoneyBee">
  213.             </div>
  214.             <h1>Welcome Back</h1>
  215.             <p>Sign in to your HoneyBee ERP account</p>
  216.         </div>
  218.         <form action="{{ url('core_login') }}" class="login-form" method="post" id="relevantForm">
  220.             {% if message != '' %}
  221.             <div class="n-error-msg">{{ message }}</div>
  222.             {% endif %}
  224.             <div class="n-field">
  225.                 <label for="username">User ID / Email Address</label>
  226.                 <div class="login-inputs">
  227.                     <input type="text" id="username" name="username" placeholder="your@company.com" required>
  228.                 </div>
  229.             </div>
  231.             <div class="n-field">
  232.                 <label for="password">Password</label>
  233.                 <div class="n-password-wrap login-inputs">
  234.                     <input type="password" id="password" name="password" placeholder="Your password" required>
  235.                     <button type="button" class="n-toggle-pw toggle-password">
  236.                         <img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/icons/eye-close.svg?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}" class="eyeicon" alt="Toggle password">
  237.                     </button>
  238.                 </div>
  239.             </div>
  241.             <div class="n-remember-row">
  242.                 <label>
  243.                     <input type="hidden" id="applicantDirectLogin" name="applicantDirectLogin" value="1">
  244.                     <input type="checkbox" id="check">
  245.                     Remember me
  246.                 </label>
  247.                 <a href="{{ url('find_account_forgot_password', { 'encData': (encData|json_encode)|nzo_encrypt }) }}">Forgot Password?</a>
  248.             </div>
  250.             <button type="submit" class="n-submit-btn rel_form_submit">Sign In</button>
  252.             <p class="n-auth-link">Don't have an account? <a href="{{ url('sign_up') }}">Create Account</a></p>
  254.             <div class="n-divider">Or continue with</div>
  256.             <a href="{{ oAuthLink }}" class="n-social-btn social-button google">
  257.                 <img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/images/login/google.svg?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}" alt="Google">
  258.                 Sign in with Google
  259.             </a>
  261.         </form>
  262.     </div>
  263. </section>
  265. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}
  267. <script>
  268.     var fbt = '';
  269.     function check_doc_and_submit(submitFlag) {
  270.         var checkFailed = 0;
  271.         submitFlag = submitFlag || 0;
  273.         $('.login-inputs input').each(function(ind, elem) {
  274.             if ($(this).prop('required')) {
  275.                 if ($(this).val() == '' || $(this).val() == 0) checkFailed = 1;
  276.             }
  277.         });
  279.         $('.small_error_text').each(function(ind, elem) {
  280.             if ($(elem).text() != '') checkFailed = 1;
  281.         });
  283.         if (checkFailed == 0) $('.rel_form_submit').addClass('ready');
  284.         else $('.rel_form_submit').removeClass('ready');
  286.         if (checkFailed == 0 && submitFlag == 1) {
  287.             $('.rel_form_submit').removeClass('ready');
  288.             $('.rel_form_submit').hide();
  289.             $('#relevantForm').submit();
  290.         }
  291.     }
  293.     $(document).ready(function() {
  294.         $('.login-inputs input').focus(function() { $(this).removeClass('error_class'); });
  295.         $('.login-inputs input').change(function() { check_doc_and_submit(0); });
  297.         $('input[type="submit"], button[type="submit"], .rel_form_submit').click(function(event) {
  298.             event.preventDefault();
  299.             check_doc_and_submit(1);
  300.         });
  302.         check_doc_and_submit(0);
  303.     });
  304. </script>