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 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transition: background-image 0.5s ease-in-out;
|
||||
background-color: #f4f4f4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transition: background-image 0.5s ease-in-out;
|
||||
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 {
|
||||
max-width: 440px !important;
|
||||
margin: auto !important;
|
||||
background-color: #ffffff !important;
|
||||
max-width: 360px !important;
|
||||
margin: auto !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.login-pf-page #kc-page-title {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.login-pf-page .login-pf-header h1 {
|
||||
background: #0559FA !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.pf-c-button.pf-m-primary {
|
||||
background: #0559FA !important;
|
||||
.login-pf-page #kc-ontent,
|
||||
.login-pf-page #kc-content-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div#kc-registration span a:hover {
|
||||
background: #83b451;
|
||||
.login-pf-page #kc-content {
|
||||
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 {
|
||||
background: #ffffff;
|
||||
display: none !important;
|
||||
background: #ffffff;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.login-pf-page .login-pf-page-header p::before {
|
||||
display: none !important;;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.login-main-title::before {
|
||||
content: "Buyersform";
|
||||
}
|
||||
|
||||
.login-sub-heading::before {
|
||||
content: "Sign in for full supplier info";
|
||||
}
|
||||
|
||||
#new-to-app::before {
|
||||
content: "";
|
||||
content: "Sign In";
|
||||
}
|
||||
|
||||
.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 {
|
||||
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 {
|
||||
font-size: 14px;
|
||||
border: none !important;
|
||||
background-color: #F3f3f3 !important;
|
||||
height: auto !important;
|
||||
padding: 15px 25px !important;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
background: none !important;
|
||||
border-bottom: 1px solid #a8a6a7 !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 2px 0 !important;
|
||||
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 loginpage = document.querySelector(".login-main-title");
|
||||
const verifyPage = document.querySelector("#kc-page-title");
|
||||
|
||||
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>'
|
||||
}
|
||||
|
||||
// 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