Skip to content

Instantly share code, notes, and snippets.

@ilyautkin

ilyautkin/login.tpl

Created December 12, 2020 08:40
Show Gist options
  • Save ilyautkin/07849bfaf6bf5cf306c4a29b4239f388 to your computer and use it in GitHub Desktop.
Save ilyautkin/07849bfaf6bf5cf306c4a29b4239f388 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
login.tpl
<!doctype html>
<html {if $_config.manager_direction EQ 'rtl'}dir="rtl"{/if} lang="{$_config.cultureKey}" xml:lang="{$_config.cultureKey}">
<head>
<meta charset="{$_config.modx_charset}">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{$_lang.login_title} | {$_config.site_name|strip_tags|escape}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex, nofollow">
{if $_config.manager_favicon_url}
<link rel="shortcut icon" type="image/x-icon" href="{$_config.manager_favicon_url}" />
<link rel="apple-touch-icon" href="{$_config.manager_favicon_url}">
{/if}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{$_config.manager_url}templates/default/css/login{if $_config.compress_css}-min{/if}.css" />
<style>
body {
font-family: 'Raleway',sans-serif;
}
.c-button {
background-color: #02c39a;
border-color: #02c39a;
font-weight: 900;
text-transform: uppercase;
padding: 1rem 0.6rem;
border-radius: 5px;
}
.c-button:hover, #modx-login-btn:hover, #modx-login-btn:focus, #modx-fl-btn:hover, #modx-fl-btn:focus {
background-color: #50348F;
border-color: #50348F;
opacity: 1;
}
.c-button.c-button--ghost {
background: transparent;
}
.c-button.c-button--red {
background-color: #f44336;
border-color: #f44336;
}
.c-button.c-button--half {
width: 48%;
display: inline-block;
}
@media (min-width: 750px) {
.l-content {
width: 50%;
}
.l-header, .l-main, .l-footer {
max-width: 370px;
margin-left: auto;
margin-right: auto;
}
}
.l-background {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media (min-width: 750px) {
.l-background {
z-index: 0;
width: 50%;
}
}
.l-wrapper {
background: rgba(255,255,255,0.85);
max-width: 63%;
padding: 35px 50px 0;
}
.l-wrapper .c-button {
font-size: 0.85rem;
}
.l-social {
margin-top: 50px;
min-width: 180px;
display: flex;
justify-content: space-between;
}
.l-social-link {
width: 45px;
height: 45px;
display: block;
border-radius: 50%;
background: #fff;
}
.l-social-link img {
display: block;
width: auto;
height: 60%;
margin: 9px auto 0;
}
.l-social-link--li img {
margin-top: 11px;
width: 50%;
height: auto;
}
.l-social-link--ig img {
margin-top: 10px;
width: 58%;
height: auto;
}
.c-logo--heibel {
width: 100px;
margin-right: 25px;
}
@media (max-width: 1490px) {
.l-wrapper {
max-width: 85%;
}
}
@media (max-width: 1105px) {
.c-button.c-button--half {
width: 100%;
display: block;
margin: 0;
}
}
</style>
</head>
<body id="login">
{$onManagerLoginFormPrerender}
<div class="l-content">
<header class="l-header">
<a href="https://www.heibel.nl" target="_blank">
<img alt="Heibel" src="/manager/templates/default/images/heibel.svg" class="c-logo c-logo--heibel" height="100" width="100">
</a>
<a href="https://www.heibel.nl/blog?tag=modx" target="_blank">
<img alt="MODX CMS/CMF" src="/manager/templates/default/images/modx-logo.svg" class="c-logo">
</a>
</header>
<main class="l-main">
{if $show_help}
<div id="modx-login-help-block" class="c-help">
<h2>{$_lang.login_help_title}</h2>
{$_lang.login_help_text}
</div>
{/if}
<h1>{$greeting}</h1>
{if !$_post.modhash}
<form id="modx-login-form" class="c-form can-toggle {if $_post.username_reset|default}is-hidden{/if}" action="" method="post">
<input type="hidden" name="login_context" value="mgr">
<input type="hidden" name="modhash" value="{$modhash|default}">
<input type="hidden" name="returnUrl" value="{$returnUrl}">
<p class="lead">{$_lang.login_note}</p>
{if isset($error_message) && $error_message}
<p class="is-error">{$error_message|default}</p>
{elseif isset($success_message) && $success_message}
<p class="is-success">{$success_message|default}</p>
{/if}
<label>
{$_lang.login_username}
<input type="text" id="modx-login-username" name="username" autocomplete="on" autofocus value="{$_post.username|default}" required>
</label>
<label>
<div class="c-password-label">
<span>{$_lang.login_password}</span>
{if $allow_forgot_password|default}
<a class="" id="modx-fl-link" name="forgotpassword">{$_lang.login_forget_your_login}</a>
{/if}
</div>
<input type="password" id="modx-login-password" name="password" autocomplete="on" required>
</label>
<label id="rememberme-checkbox">
<input type="checkbox" id="modx-login-rememberme" name="rememberme" autocomplete="on" {if $_post.rememberme|default}checked="checked"{/if} value="1">
{$rememberme}
</label>
{$onManagerLoginFormRender}
<button class="c-button" id="modx-login-btn" name="login" type="submit" value="1">{$_lang.login_button}</button>
<!--button class="c-button c-button--red" id="google-login-btn" name="google" type="button">Aanmelden met je Google account</button-->
<a class="c-button c-button--ghost" href="{$_config.site_url}">
<svg class="c-arrow c-arrow--left" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
<path class="arrow-icon--arrow" d="M16.14 9.93L22.21 16l-6.07 6.07M8.23 16h13.98"></path>
</g>
</svg>
{$_lang.login_return_site}
</a>
</form>
{if $allow_forgot_password|default}
<form action="" method="post" id="modx-forgot-login-form" class="c-form can-toggle {if NOT $_post.username_reset|default}is-hidden{/if}">
<p class="lead">{$_lang.login_forget_your_login_note}</p>
{if $error_message}
<p class="is-error">{$error_message|default}</p>
{elseif $success_message}
<p class="is-success">{$success_message|default}</p>
{/if}
<label>
{$_lang.login_username_or_email}
<input type="text" id="modx-login-username-reset" name="username_reset" value="{$_post.username_reset|default}" required>
</label>
<button class="c-button" name="forgotlogin" type="submit" value="1" id="modx-fl-btn">{$_lang.login_send_activation_email}</button>
<button name="modx-fl-back-to-login-link" id="modx-fl-back-to-login-link" class="c-button c-button--ghost">{$_lang.login_back_to_login}</button>
</form>
{/if}
{else}
<form action="" method="post" id="modx-new-password-form" class="c-form">
<input type="hidden" name="modhash" value="{$_post.modhash|default}">
<p class="lead">{$_lang.login_new_password_note}</p>
{if $error_message}
<p class="is-error">{$error_message|default}</p>
{elseif $success_message}
<p class="is-success">{$success_message|default}</p>
{/if}
<label>
{$_lang.login_new_password}
<input type="password" id="modx-login-specified-password" name="specifiedpassword" value="{$_post.specifiedpassword|default}" autofocus>
</label>
<label>
{$_lang.login_confirm_password}
<input type="password" id="modx-login-confirm-password" name="confirmpassword" value="{$_post.confirmpassword|default}">
</label>
{$onManagerLoginFormRender}
<button class="c-button" name="login" type="submit" value="1">{$_lang.login_button}</button>
<a href="{$_config.manager_url}" class="c-button c-button--ghost">{$_lang.login_back_to_login}</a>
</form>
{/if}
</main>
<footer class="l-footer">
<div class="c-languageselect">
<select name="manager_language" id="modx-login-language-select" class="c-languageselect__select" aria-label="{$_config.cultureKey}">
{foreach from=$languages key=language item=native}
<option lang="{$language}" value="{$language}"{if $language == $_config.cultureKey} selected{/if}>{$native|capitalize}</option>
{/foreach}
</select>
<span class="c-languageselect__arrow"></span>
</div>
{if $show_help}
<a href="#help" class="c-helplink" id="modx-login-help-trigger">{$_lang.login_help_button_text}</a>
{/if}
</footer>
</div>
<div class="l-background" style="background-image:url({$background})">
<div class="l-wrapper">
<p><b>Hulp nodig?</b></p>
<p>Heb je vragen over je content of over bepaalde functionaliteiten van het MODX CMS? We hebben de meest gestelde vragen samengevat in onze kennisbank.</p>
<p>Staat je vraag er niet tussen, of heb je liever even persoonlijk contact? Stel dan je vraag aan onze collega’s.</p>
<p>
<a href="https://www.heibel.nl/kennisbank" class="c-button c-button--half" target="_blank">Naar de kennisbank</a>
&nbsp;
<a href="mailto:[email protected]" class="c-button c-button--half">Stel je vraag</a>
</p>
</div>
<div class="l-social">
<a href="https://www.linkedin.com/company/heibel" class="l-social-link l-social-link--li" target="_blank">
<img src="/theme/heibel/modx3-circle/assets/img/footer-li.svg" alt="Facebook">
</a>
<a href="https://nl-nl.facebook.com/heibelschoppen" class="l-social-link l-social-link--fb" target="_blank">
<img src="/theme/heibel/modx3-circle/assets/img/footer-fb.svg" alt="Facebook">
</a>
<a href="https://www.instagram.com/heibel.nl/" class="l-social-link l-social-link--ig" target="_blank">
<img src="/theme/heibel/modx3-circle/assets/img/footer-ig.svg" alt="Facebook">
</a>
</div>
</div>
<script src="{$_config.manager_url}assets/modext/sections/login.js" type="text/javascript"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment