This commit is contained in:
parent
d1416ef7e3
commit
f5a0d63b1c
@ -1,73 +1,234 @@
|
|||||||
|
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700&family=DM+Sans:opsz@9..40&display=swap");
|
||||||
|
|
||||||
.login-pf body {
|
.login-pf body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: stretch;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
transition: background-image 0.5s ease-in-out;
|
transition: background-image 0.5s ease-in-out;
|
||||||
background-color: #f4f4f4;
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-pf-page {
|
||||||
|
width: 100% !important;
|
||||||
|
margin: 0 auto !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
max-width: 540px !important;
|
||||||
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-pf-page .card-pf {
|
.login-pf-page .card-pf {
|
||||||
max-width: 440px !important;
|
max-width: 360px !important;
|
||||||
margin: auto !important;
|
margin: auto !important;
|
||||||
background-color: #ffffff !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.login-pf-page #kc-page-title {
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
.login-pf-page .login-pf-header h1 {
|
.login-pf-page .login-pf-header h1 {
|
||||||
background: #0559FA !important;
|
background: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pf-c-button.pf-m-primary {
|
.login-pf-page #kc-ontent,
|
||||||
background: #0559FA !important;
|
.login-pf-page #kc-content-wrapper {
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
div#kc-registration span a:hover {
|
.login-pf-page #kc-content {
|
||||||
background: #83b451;
|
max-width: 100% !important;
|
||||||
|
margin: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-pf-page #kc-form-wrapper,
|
||||||
|
.login-pf-page #kc-content-wrapper,
|
||||||
|
.login-pf-page #kc-form-buttons {
|
||||||
|
margin-top: 80px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group.login-pf-settings,
|
||||||
|
.login-pf-page .checkbox,
|
||||||
|
.login-pf-page .checkbox label {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pf-c-button.pf-m-primary, #resendLinkBtn {
|
||||||
|
background: #0559fa !important;
|
||||||
|
border-radius: 32px !important;
|
||||||
|
font-family: "Be Vietnam Pro", sans-serif !important;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 32px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pf-c-button.pf-m-primary:hover, #resendLinkBtn:hover {
|
||||||
|
background: #044bd4 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#kc-header {
|
#kc-header {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-logo {
|
.app-logo {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-pf-page .login-pf-page-header p::before {
|
.login-pf-page .login-pf-page-header p::before {
|
||||||
display: none !important;;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-main-title::before {
|
.login-main-title::before {
|
||||||
content: "Buyersform";
|
content: "Sign In";
|
||||||
}
|
|
||||||
|
|
||||||
.login-sub-heading::before {
|
|
||||||
content: "Sign in for full supplier info";
|
|
||||||
}
|
|
||||||
|
|
||||||
#new-to-app::before {
|
|
||||||
content: "";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.register-main-title::before {
|
.register-main-title::before {
|
||||||
content: "Create your account";
|
content: "Sign Up" !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.login-main-title::before,
|
||||||
|
.register-main-title::before,
|
||||||
|
h1#kc-page-title {
|
||||||
|
font-family: "Be Vietnam Pro", sans-serif;
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 58px;
|
||||||
|
letter-spacing: 0em;
|
||||||
|
text-align: center;
|
||||||
|
color: rgba(5, 89, 250, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-main-title,
|
||||||
|
.register-main-title {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-sub-heading::before {
|
||||||
|
content: "Enter your email and password";
|
||||||
|
}
|
||||||
|
|
||||||
.register-sub-heading::before {
|
.register-sub-heading::before {
|
||||||
content: "";
|
content: "Create your account" !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-sub-heading::before,
|
||||||
|
.register-sub-heading::before {
|
||||||
|
font-family: DM Sans, sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 21px;
|
||||||
|
letter-spacing: 0em;
|
||||||
|
text-align: center;
|
||||||
|
color: rgba(168, 166, 167, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class="form-group"]:first-child {
|
||||||
|
margin-bottom: 22px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.custom-input-label {
|
||||||
|
font-family: "Be Vietnam Pro", sans-serif !important;
|
||||||
|
font-size: 16px !important;
|
||||||
|
font-weight: 700 !important;
|
||||||
|
line-height: 16px !important;
|
||||||
|
color: #000 !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#kc-info {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-pf div#kc-registration {
|
||||||
|
text-align: center !important;
|
||||||
|
font-family: DM Sans, sans-serif !important;
|
||||||
|
font-size: 16px !important;
|
||||||
|
line-height: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-pf div#kc-registration span {
|
||||||
|
display: initial !important;
|
||||||
|
width: initial !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-pf div#kc-registration span a {
|
||||||
|
background: none !important;
|
||||||
|
color: black !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
color: #0559fa !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-pf div#kc-registration span a:hover {
|
||||||
|
background: #83b451;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-pf #new-to-app::before {
|
||||||
|
content: "Don’t have an account?";
|
||||||
}
|
}
|
||||||
|
|
||||||
.pf-c-form-control {
|
.pf-c-form-control {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
border: none !important;
|
background: none !important;
|
||||||
background-color: #F3f3f3 !important;
|
border-bottom: 1px solid #a8a6a7 !important;
|
||||||
height: auto !important;
|
border-radius: 0 !important;
|
||||||
padding: 15px 25px !important;
|
padding: 2px 0 !important;
|
||||||
border-radius: 5px;
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#privacy-policy {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#kc-content-wrapper .form-group-row {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#kc-content-wrapper .form-group {
|
||||||
|
margin-bottom: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#kc-content-wrapper .form-group-row .row {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
align-items: stretch !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#kc-content-wrapper .form-group-row .col-lg-6 {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#kc-info-wrapper {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#kc-registration {
|
||||||
|
margin-bottom: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#svg-wrapper {
|
||||||
|
text-align: center !important;
|
||||||
|
max-width: 120px !important;
|
||||||
|
margin: 0 auto 14px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobiles */
|
||||||
|
@media screen and (max-width: 991px) {
|
||||||
|
.login-pf-page {
|
||||||
|
flex-direction: row !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 400px) {
|
||||||
|
.login-pf-page .card-pf {
|
||||||
|
padding: 0 16px !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,105 @@
|
|||||||
const privacyPolicy = document.getElementById('privacy-policy');
|
const privacyPolicy = document.getElementById('privacy-policy');
|
||||||
|
const loginpage = document.querySelector(".login-main-title");
|
||||||
|
const verifyPage = document.querySelector("#kc-page-title");
|
||||||
|
|
||||||
if (privacyPolicy) {
|
if (privacyPolicy) {
|
||||||
privacyPolicy.innerHTML = '<span>By signing up you agree to the <a href="https://buyersform.com/privacy/" target="_blank">BuyersForm Privacy Policy</a></span>'
|
privacyPolicy.innerHTML = '<span>By signing up you agree to the <a href="https://buyersform.com/privacy/" target="_blank">BuyersForm Privacy Policy</a></span>'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// function createLabel(details) {
|
||||||
|
// const label = document.createElement("label");
|
||||||
|
// label.className = "custom-input-label";
|
||||||
|
|
||||||
|
// if (details.innerHtml) {
|
||||||
|
// label.innerHTML = details.innerHtml;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (details.textContent) {
|
||||||
|
// label.textContent = details.textContent;
|
||||||
|
// }
|
||||||
|
// label.for = details.for;
|
||||||
|
|
||||||
|
// return label;
|
||||||
|
// }
|
||||||
|
|
||||||
|
if (loginpage) {
|
||||||
|
// inject labels on login page;
|
||||||
|
const signUpLink = document.querySelector("#new-to-app + a");
|
||||||
|
|
||||||
|
signUpLink.textContent = "Sign up";
|
||||||
|
|
||||||
|
// const emailWrapper = document.querySelector(
|
||||||
|
// 'div.form-group:has(input[id="username"])'
|
||||||
|
// );
|
||||||
|
// const emailLabel = createLabel({ for: "username", textContent: "Email" });
|
||||||
|
// // emailWrapper.prepend(emailLabel);
|
||||||
|
|
||||||
|
// // <--- Password -->
|
||||||
|
// const passwordWrapper = document.querySelector(
|
||||||
|
// 'div.form-group:has(input[id="password"])'
|
||||||
|
// );
|
||||||
|
// const passwordLabel = createLabel({ for: "password", textContent: "Password" });
|
||||||
|
// // passwordWrapper.prepend(passwordLabel);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (verifyPage.textContent.includes("Email verification")) {
|
||||||
|
const checkmark = `<svg xmlns="http://www.w3.org/2000/svg" width="117" height="117" fill="none"><path stroke="#0559FA" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" d="M107.25 54.015V58.5a48.75 48.75 0 1 1-28.909-44.557"/><path stroke="#0559FA" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" d="M107.25 19.5 58.5 68.299 43.875 53.674"/></svg>`;
|
||||||
|
const style = document.createElement("style");
|
||||||
|
style.innerHTML = `
|
||||||
|
.login-pf-page #kc-content-wrapper {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
.alert-warning.pf-c-alert {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#kc-content-wrapper > .instruction {
|
||||||
|
text-align: center !important;
|
||||||
|
font-family: DM Sans, sans-serif !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
font-weight: 400 !important;
|
||||||
|
line-height: 18px !important;
|
||||||
|
color: #A8A6A7 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#resendLinkBtn {
|
||||||
|
color: #fff !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
width: 100% !important;
|
||||||
|
display: block !important;
|
||||||
|
margin: 20px 0 0 !important;
|
||||||
|
padding: 12px !important;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.head.appendChild(style);
|
||||||
|
|
||||||
|
const headerWrapper = document.getElementsByClassName("login-pf-header")[0];
|
||||||
|
const headerH1 = document.querySelector("#kc-page-title");
|
||||||
|
|
||||||
|
const svgWrapper = document.createElement("div");
|
||||||
|
svgWrapper.id = "svg-wrapper";
|
||||||
|
|
||||||
|
svgWrapper.innerHTML = checkmark;
|
||||||
|
|
||||||
|
headerWrapper.prepend(svgWrapper);
|
||||||
|
headerH1.textContent = "Verify Account";
|
||||||
|
|
||||||
|
const description = document.querySelector(
|
||||||
|
"#kc-content-wrapper > .instruction"
|
||||||
|
);
|
||||||
|
description.textContent = "We’ve emailed you a link to verify your account!";
|
||||||
|
|
||||||
|
const linkNode = document.querySelector("#kc-info-wrapper > .instruction");
|
||||||
|
const childNodesArr = Array.from(linkNode.childNodes);
|
||||||
|
|
||||||
|
childNodesArr.forEach((child) => {
|
||||||
|
if (child.tagName !== "A") {
|
||||||
|
linkNode.removeChild(child);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const linkBtn = document.querySelector("#kc-info-wrapper > .instruction a");
|
||||||
|
linkBtn.id = "resendLinkBtn";
|
||||||
|
linkBtn.textContent = "Resend Link";
|
||||||
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user