Dashboard & Preferences UI Updates
This commit is contained in:
lesleyjanenorton
lesley
Родитель
7371416aa7
Коммит
15d952a4a0
|
|
@ -106,6 +106,11 @@ p,
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
.overflow-break {
|
||||
max-width: 100%;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.desc {
|
||||
max-width: 320px;
|
||||
}
|
||||
|
|
@ -153,17 +158,12 @@ h3,
|
|||
max-width: 550px;
|
||||
}
|
||||
|
||||
.mw-750 {
|
||||
width: 100%;
|
||||
padding: var(--padding);
|
||||
max-width: 750px;
|
||||
}
|
||||
|
||||
.mw-860 {
|
||||
width: 100%;
|
||||
max-width: 860px;
|
||||
padding-left: var(--padding);
|
||||
padding-right: var(--padding);
|
||||
padding-left: 36px;
|
||||
padding-right: 36px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.headline {
|
||||
|
|
@ -669,6 +669,10 @@ div.sprite {
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
.mw-860 {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -692,6 +696,11 @@ div.sprite {
|
|||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.mw-860 {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.arrow-head-right {
|
||||
margin-left: 0.15rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
--logoMargin: 20px;
|
||||
--breachInfoPadding: calc(var(--logoMargin) * 2 + var(--logoDmns));
|
||||
|
||||
padding: 1.5rem 3.25rem 1.5rem 1.5rem;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -37,10 +37,6 @@ a.breach-card:hover {
|
|||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* .more-about-this-breach {
|
||||
font-size: 14px;
|
||||
} */
|
||||
|
||||
.breach-card:hover {
|
||||
transform: scale(1.01);
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
|
@ -112,12 +108,6 @@ a.breach-card:hover {
|
|||
flex: 1 1 48%;
|
||||
}
|
||||
|
||||
.breach-card.ec.two-up {
|
||||
flex: 1 1 100%;
|
||||
display: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.email-card.active .breach-card.ec.two-up {
|
||||
display: flex;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
.monitoredEmails {
|
||||
background-color: var(--violet3);
|
||||
}
|
||||
|
|
@ -19,19 +18,13 @@
|
|||
}
|
||||
|
||||
.breach-stat-number {
|
||||
font-size: 50px;
|
||||
font-size: 56px;
|
||||
line-height: 1.14;
|
||||
min-width: 2rem;
|
||||
}
|
||||
|
||||
.breach-stats {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.breach-stat-row {
|
||||
padding: 32px var(--padding);
|
||||
flex-direction: column;
|
||||
max-width: 31.25%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
@ -46,7 +39,7 @@
|
|||
.stat-headline {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
line-height: 1.33;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -54,17 +47,18 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-bottom: calc(var(--padding) * 4);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
@media screen and (max-width: 800px) {
|
||||
.dash-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.breach-stat-row {
|
||||
max-width: 100%;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stat-row-title-wrap {
|
||||
|
|
@ -93,6 +87,6 @@
|
|||
}
|
||||
|
||||
.breach-stat-number {
|
||||
min-width: 5rem;
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
.welcome-back {
|
||||
font-size: 1.1rem;
|
||||
font-family: "Metropolis", sans-serif;
|
||||
display: inline-block;
|
||||
line-height: 130%;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
color: var(--grey8);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.dashboard.clear-header {
|
||||
padding-top: 116px;
|
||||
}
|
||||
|
||||
h2.pref-headline {
|
||||
|
|
@ -19,28 +23,30 @@ h3.pref-section-headline.remove {
|
|||
}
|
||||
|
||||
h2.pref-headline.breach-summary {
|
||||
margin-bottom: var(--padding);
|
||||
margin-top: calc(var(--padding) * 5);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.pref {
|
||||
width: 100%;
|
||||
max-width: 620px;
|
||||
max-width: 600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pref.remove {
|
||||
.pref .email-add {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.pref-remove {
|
||||
margin-bottom: 60px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container.preferences {
|
||||
.preferences {
|
||||
background-size: auto;
|
||||
padding-top: 16rem;
|
||||
padding-bottom: 60px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.email-pref {
|
||||
|
|
@ -50,10 +56,6 @@ h2.pref-headline.breach-summary {
|
|||
color: #686869;
|
||||
}
|
||||
|
||||
.email-pref.add-new {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.email-pref.fxa-primary-email {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -75,10 +77,6 @@ h2.pref-headline.breach-summary {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.radio-label span.bold {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.trash-can {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -90,11 +88,12 @@ h2.pref-headline.breach-summary {
|
|||
}
|
||||
|
||||
.link-header-wrapper {
|
||||
margin: var(--padding) 0;
|
||||
margin: 80px 0 60px 0;
|
||||
}
|
||||
|
||||
.email-cards {
|
||||
width: 100%;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
span.dashboard-email-sent {
|
||||
|
|
@ -130,23 +129,32 @@ span.email-confirmed {
|
|||
padding: 60px 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
.email-cards .e-info {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.pref {
|
||||
padding: 0 var(--padding);
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.email-cards,
|
||||
.mw-750.no-vertical-padding {
|
||||
padding: 1rem;
|
||||
.email-cards {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.link-header-wrapper {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.email-cards .e-info {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.dashboard.clear-header {
|
||||
padding-top: 156px;
|
||||
}
|
||||
|
||||
.pref .email-add {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -155,34 +163,16 @@ span.email-confirmed {
|
|||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2.pref-headline.breach-summary {
|
||||
margin-bottom: var(--padding);
|
||||
}
|
||||
|
||||
.link-header-wrapper {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.welcome-back,
|
||||
.section-headline.dash {
|
||||
font-size: 1.1rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.welcome-back {
|
||||
padding-top: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pref {
|
||||
padding: 0 0.5rem;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
h3.pref-section-headline {
|
||||
/* h3.pref-section-headline {
|
||||
margin: 3rem 0 2rem 0;
|
||||
}
|
||||
|
||||
.email-cards,
|
||||
.mw-750.no-vertical-padding {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
} */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,36 +6,69 @@
|
|||
width: auto;
|
||||
}
|
||||
|
||||
.email-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.email-card.breaches-dash {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.email-card.breaches-dash:last-of-type,
|
||||
.breaches-dash.zero-breaches {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.email-card.preferences {
|
||||
padding: 20px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid #e8e8e8;
|
||||
margin: 0 0 8px;
|
||||
margin: 0 0 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.email-card.primary-email-card.preferences {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.e-info { /* email address info */
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
border-bottom: 2px solid #e8e8e8;
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: 12px;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.preferences .e-info {
|
||||
align-items: flex-start;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.preferences .e-num-breaches {
|
||||
margin-top: 4px;
|
||||
font-size: 14px;
|
||||
color: var(--grey8);
|
||||
}
|
||||
|
||||
.preferences .e-address {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.preferences .e-address::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.e-address {
|
||||
font-size: 16px;
|
||||
margin-right: 0.5rem;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--purple6);
|
||||
max-width: 100%;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.e-address span.light {
|
||||
|
|
@ -45,28 +78,15 @@
|
|||
}
|
||||
|
||||
.e-num-breaches {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
font-size: 20px;
|
||||
display: block;
|
||||
color: var(--grey6);
|
||||
color: var(--purple6);
|
||||
}
|
||||
|
||||
.e-num-breaches .bold {
|
||||
color: var(--violet4);
|
||||
}
|
||||
|
||||
.email-card-breach-wrapper {
|
||||
padding: 0 var(--padding);
|
||||
display: flex;
|
||||
flex: 1 1 50%;
|
||||
min-width: 250px;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.email-card.active .email-card-breach-wrapper {
|
||||
padding: var(--padding);
|
||||
.e-address::after {
|
||||
content: "-";
|
||||
margin: auto 6px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.breach-title-wrapper.ec {
|
||||
|
|
@ -81,6 +101,8 @@
|
|||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
visibility: hidden;
|
||||
margin: auto;
|
||||
max-width: 780px;
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
transition: all 0.2s ease;
|
||||
|
|
@ -97,7 +119,7 @@
|
|||
}
|
||||
|
||||
.show-remaining-breaches.btn-violet-secondary {
|
||||
margin: 1rem auto;
|
||||
margin: 16px auto auto auto;
|
||||
}
|
||||
|
||||
.show-remaining-breaches.hide {
|
||||
|
|
@ -108,7 +130,7 @@
|
|||
visibility: visible;
|
||||
opacity: 1;
|
||||
max-height: 20000px;
|
||||
padding-top: 1rem;
|
||||
padding-top: 16px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
|
@ -119,30 +141,23 @@
|
|||
|
||||
/* new breaches */
|
||||
.new-breach-message-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin: auto auto 8px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.preferences .new-breach-message-wrapper {
|
||||
.pref .new-breach-message-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.new-breach-message-wrapper.hide-mobile {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.new-breach-icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.new-breach-message {
|
||||
color: var(--alertRed);
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.breach-card.ec.new-breach {
|
||||
|
|
@ -262,7 +277,7 @@ form.remove-email:hover svg path {
|
|||
svg.toggle-down {
|
||||
border-radius: 50%;
|
||||
margin: auto;
|
||||
right: var(--padding);
|
||||
right: 4px;
|
||||
transition: all 0.2s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -308,18 +323,36 @@ input.remove-email-submit {
|
|||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
.e-address {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.e-num-breaches {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.email-card {
|
||||
margin: 0.5rem 0;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
padding: 20px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.new-breach-message-wrapper {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.email-card.breaches-dash:last-of-type,
|
||||
.email-card.breaches-dash {
|
||||
margin: 8px 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dash-attribution {
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.e-info {
|
||||
|
|
@ -327,11 +360,25 @@ input.remove-email-submit {
|
|||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.breaches-dash:not(.zero-breaches) .e-address {
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
.e-num-breaches {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
margin-top: 4px;
|
||||
color: var(--grey8);
|
||||
}
|
||||
|
||||
.ec.breach-card, /* Hide breach cards until the email-card is toggled down */
|
||||
.active .show-additional-breaches.hide .ec.breach-card, /* Hides any breaches gated behind "Show Remaining Breaches" button when there are more than 4 to an email. */
|
||||
.active .show-remaining-breaches.hide, /* Hide "Show Remaining Breaches"" button after it has been clicked */
|
||||
.e-address::after,
|
||||
.show-remaining-breaches {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.active .show-remaining-breaches {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.toggle.show-email-breaches {
|
||||
|
|
@ -339,39 +386,9 @@ input.remove-email-submit {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.email-card-breach-wrapper {
|
||||
padding: var(--padding) 0;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.ec.breach-card {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.email-card.active .email-card-breach-wrapper {
|
||||
padding: var(--padding) 0;
|
||||
}
|
||||
|
||||
.new-breach-message-wrapper.show-mobile {
|
||||
display: flex;
|
||||
margin: 1rem 1rem 0 auto;
|
||||
}
|
||||
|
||||
.pref .new-breach-message-wrapper.show-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.e-breach-list {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.email-card.active .e-breach-list {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.manage-emails.show-mobile {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
|
|
@ -380,12 +397,8 @@ input.remove-email-submit {
|
|||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.email-card {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.email-pref {
|
||||
margin-top: 2rem;
|
||||
.email-card.new-breaches {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.e-num-breaches,
|
||||
|
|
@ -399,10 +412,6 @@ input.remove-email-submit {
|
|||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.e-toggle-info-wrapper {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.change-primary-email {
|
||||
width: 100%;
|
||||
margin: var(--padding) 0 0 0;
|
||||
|
|
|
|||
|
|
@ -262,15 +262,16 @@ input[type="radio"]:focus ~ .checkmark {
|
|||
.radio-container {
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-height: 32px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.radio-container:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
padding-left: 32px;
|
||||
font-weight: 400;
|
||||
color: var(--textLight);
|
||||
color: var(--grey8);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
padding-top: 2px;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
background-position: center top;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.subpage .content-box {
|
||||
|
|
|
|||
|
|
@ -176,7 +176,7 @@ function toggleMobileFeatures(topNavBar) {
|
|||
const win = window;
|
||||
const windowWidth = win.innerWidth;
|
||||
if (windowWidth > 800) {
|
||||
const emailCards = document.querySelectorAll(".mw-750.email-card:not(.zero-breaches)");
|
||||
const emailCards = document.querySelectorAll(".breaches-dash.email-card:not(.zero-breaches)");
|
||||
emailCards.forEach(card => {
|
||||
card.classList.add("active");
|
||||
});
|
||||
|
|
@ -184,7 +184,7 @@ function toggleMobileFeatures(topNavBar) {
|
|||
}
|
||||
|
||||
const bentoButton = document.querySelector(".fx-bento-content");
|
||||
const closeActiveEmailCards = document.querySelectorAll(".mw-750.email-card.active");
|
||||
const closeActiveEmailCards = document.querySelectorAll(".breaches-dash.email-card.active");
|
||||
closeActiveEmailCards.forEach(card => {
|
||||
card.classList.remove("active");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,10 +4,20 @@ const { LocaleUtils } = require("./../locale-utils");
|
|||
const { makeBreachCards } = require("./breaches");
|
||||
|
||||
function getBreachesForEachEmail(args) {
|
||||
const verifiedEmails = args.data.root.verifiedEmails;
|
||||
let verifiedEmails = args.data.root.verifiedEmails;
|
||||
const locales = args.data.root.req.supportedLocales;
|
||||
let breachesFound = false;
|
||||
|
||||
// move emails with 0 breaches to the bottom of the page
|
||||
verifiedEmails = verifiedEmails.sort((a, b) => {
|
||||
if (
|
||||
a.breaches.length === 0 && b.breaches.length > 0 ||
|
||||
b.breaches.length === 0 && a.breaches.length > 0
|
||||
) {
|
||||
return b.breaches.length - a.breaches.length;
|
||||
}
|
||||
});
|
||||
|
||||
verifiedEmails.forEach(email => {
|
||||
const breachCards = makeBreachCards(email.breaches, locales);
|
||||
email.foundBreaches = {};
|
||||
|
|
@ -31,7 +41,7 @@ function getBreachesForEachEmail(args) {
|
|||
|
||||
function welcomeMessage(args) {
|
||||
const locales = args.data.root.req.supportedLocales;
|
||||
const userEmail = `<span class="bold">${args.data.root.req.session.user.fxa_profile_json.email}</span>`;
|
||||
const userEmail = args.data.root.req.session.user.fxa_profile_json.email;
|
||||
if (args.data.root.req.session.newUser) {
|
||||
return LocaleUtils.fluentFormat(locales, "welcome-user", { userName: userEmail });
|
||||
}
|
||||
|
|
@ -49,7 +59,7 @@ function makeEmailAddedToSubscriptionString(email, args) {
|
|||
function makeEmailVerifiedString(args) {
|
||||
const locales = args.data.root.req.supportedLocales;
|
||||
let nestedSignInLink = LocaleUtils.fluentFormat(locales, "sign-in-nested", {});
|
||||
nestedSignInLink = `<a class="text-link bold" href="/oauth/init">${nestedSignInLink}</a>`;
|
||||
nestedSignInLink = `<a class="text-link bold blue-link" href="/oauth/init">${nestedSignInLink}</a>`;
|
||||
|
||||
return LocaleUtils.fluentFormat(locales, "email-verified-view-dashboard", { nestedSignInLink: nestedSignInLink});
|
||||
}
|
||||
|
|
@ -88,7 +98,7 @@ function getUserPreferences(args) {
|
|||
const communicationOptions = [
|
||||
{
|
||||
optionDescription: "Send breach alerts to the affected email address.",
|
||||
labelString: LocaleUtils.fluentFormat(locales, "to-affected-email", {primaryEmail: `<span class="bold">${primaryEmail.email}</span>`}),
|
||||
labelString: LocaleUtils.fluentFormat(locales, "to-affected-email"),
|
||||
optionId: "0",
|
||||
optionChecked: (communicationOption === 0) ? "checked" : "",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,48 +1,34 @@
|
|||
<div class="ab-br sr">
|
||||
<main id="dashboard" class="dashboard clear-header" data-page-label="User Dashboard">
|
||||
<div class="row jst-cntr">
|
||||
<div class="mw-750 txt-cntr padding-top-zero">
|
||||
<span class="welcome-back">{{{ welcomeMessage }}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row jst-cntr flx-col">
|
||||
<div class="mw-750 no-vertical-padding">
|
||||
<h2 class="pref-headline breach-summary">{{ getString "breach-summary" }}</h2>
|
||||
</div>
|
||||
<div class="mw-750 card dash-stats no-vertical-padding">
|
||||
{{> breach-stats addClasses="user-stats"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<section class="bg-light container">
|
||||
<div class="row jst-cntr flx-col dash-row">
|
||||
<div class="mw-750 no-vertical-padding">
|
||||
<div class="flx space-between cntr link-header-wrapper">
|
||||
<h2 class="pref-headline">{{ getString "email-addresses-title" }}</h2>
|
||||
{{> dashboards/manage-email-link variableClass="hide-mobile"}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-cards flx flx-col jst-cntr">
|
||||
{{#getBreachesForEachEmail}}
|
||||
{{#each this.verifiedEmails}}
|
||||
{{> email-card }}
|
||||
{{/each}}
|
||||
{{#if breachesFound }}
|
||||
{{> hibp-attribution variableClasses="dash-attribution txt-cntr"}}
|
||||
{{/if}}
|
||||
{{/getBreachesForEachEmail}}
|
||||
|
||||
<main id="dashboard" class=" ab-br sr dashboard clear-header jst-cntr flx" data-page-label="User Dashboard">
|
||||
<div class="mw-860 flx flx-col">
|
||||
<span class="welcome-back">{{ welcomeMessage }}</span>
|
||||
<h2 class="pref-headline breach-summary">{{ getString "breach-summary" }}</h2>
|
||||
<div class="dash-stats">
|
||||
{{> breach-stats addClasses="user-stats"}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<div class="mw-860 jst-cntr flx-col">
|
||||
<div class="flx space-between cntr link-header-wrapper">
|
||||
<h2 class="pref-headline">{{ getString "email-addresses-title" }}</h2>
|
||||
{{> dashboards/manage-email-link variableClass="hide-mobile"}}
|
||||
</div>
|
||||
<div class="email-cards flx flx-col jst-cntr">
|
||||
{{#getBreachesForEachEmail}}
|
||||
{{#each this.verifiedEmails}}
|
||||
{{> email-card }}
|
||||
{{/each}}
|
||||
{{#if breachesFound }}
|
||||
{{> hibp-attribution variableClasses="dash-attribution txt-cntr"}}
|
||||
{{/if}}
|
||||
{{/getBreachesForEachEmail}}
|
||||
</div>
|
||||
</div>
|
||||
{{!-- TODO: remove this when https://github.com/mozilla/blurts-server/issues/1148 is fixed --}}
|
||||
{{#ifCompare verifiedEmails.length "<" 15}}
|
||||
<section class="">
|
||||
<div class="row jst-cntr">
|
||||
<div id="dashboard-add-email" class="dashboard-add-email flx flx-col">
|
||||
<h2 class="scan-another-email-headline txt-purple7 section-headline">{{getString "want-to-add" }}</h2>
|
||||
<h2 class="txt-purple7 section-headline txt-cntr">{{getString "want-to-add" }}</h2>
|
||||
{{> forms/add-another-email-form }}
|
||||
{{#if lastAddedEmail}}
|
||||
<span class="dashboard-email-sent bold"> {{ getString "email-sent" }}</span>
|
||||
|
|
@ -52,6 +38,5 @@
|
|||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/ifCompare}}
|
||||
{{> take-back-control/take-back-control-banner additionalClasses="dash-take-back-wrapper"}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{#if hasNewBreaches }}
|
||||
<div class="new-breach-message-wrapper {{ variableClass }}">
|
||||
<div class="flx new-breach-message-wrapper {{ variableClass }}">
|
||||
{{> svg/new-breach-icon }}
|
||||
<span class="new-breach-message">{{ newBreachMessage }}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,63 @@
|
|||
{{#getUserPreferences}}
|
||||
<section class="container clear-header preferences sr" data-page-label="Preferences">
|
||||
<div class="row jst-cntr no-vertical-padding">
|
||||
<div class="pref">
|
||||
<h2 class="pref-headline">{{ getString "monitor-preferences" }}</span></h2>
|
||||
</div>
|
||||
<section class="clear-header preferences sr jst-cntr flx" data-page-label="Preferences">
|
||||
<div class="pref">
|
||||
<h2 class="pref-headline">{{ getString "monitor-preferences" }}</span></h2>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="row flx-col">
|
||||
<div class="pref">
|
||||
<h3 class="pref-section-headline section-headline txt-purple7">{{ getString "breach-alert-notifications" }}</h3>
|
||||
<section>
|
||||
{{#each communicationOptions}}
|
||||
<label class="radio-container">
|
||||
<input class="radio-comm-option" data-comm-option="{{ optionId }}" data-form-action="update-comm-option" data-csrf-token="{{ ./../../csrfToken }}" type="radio" {{ optionChecked }} name="1">
|
||||
<span class="radio-label">{{{ labelString }}}</span>
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
{{/each}}
|
||||
</section>
|
||||
</div>
|
||||
<div class="pref">
|
||||
<h3 class="pref-section-headline section-headline txt-purple7">{{ getString "email-addresses-title" }}</h3>
|
||||
{{#each emails}}
|
||||
{{#ifCompare email_addresses.length ">" 0}}
|
||||
<h4 class="email-pref {{ this.className }}">{{ this.subhead }}</h4>
|
||||
{{#each this.email_addresses}}
|
||||
{{> email-card prefs=./../../../preferences csrfToken=./../../csrfToken}}
|
||||
{{/each}}
|
||||
{{/ifCompare}}
|
||||
<section class="flx flx-col">
|
||||
|
||||
<!-- Communication Preferences -->
|
||||
<div class="pref">
|
||||
<h3 class="pref-section-headline section-headline txt-purple7">{{ getString "breach-alert-notifications" }}</h3>
|
||||
<div>
|
||||
{{#each communicationOptions}}
|
||||
<label class="radio-container">
|
||||
<input class="radio-comm-option" data-comm-option="{{ optionId }}" data-form-action="update-comm-option" data-csrf-token="{{ ./../../csrfToken }}" type="radio" {{ optionChecked }} name="1">
|
||||
<span class="radio-label overflow-break">{{{ labelString }}}</span>
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="pref">
|
||||
{{!-- TODO: remove this when https://github.com/mozilla/blurts-server/issues/1148 is fixed --}}
|
||||
{{#ifCompare emails.total ">=" 15}}
|
||||
<h4 class="email-pref">{{ getString "user-add-too-many-emails" }}</h4>
|
||||
{{/ifCompare}}
|
||||
{{#ifCompare emails.total "<" 15}}
|
||||
<h4 class="email-pref add-new">{{ getString "add-new-email" }}</h4>
|
||||
{{> forms/add-another-email-form csrfToken=../csrfToken}}
|
||||
{{/ifCompare}}
|
||||
</div>
|
||||
<div class="pref remove">
|
||||
</div>
|
||||
|
||||
<!-- Primary / Verified / Unverified Emails -->
|
||||
<div class="pref">
|
||||
<h3 class="pref-section-headline section-headline txt-purple7">{{ getString "email-addresses-title" }}</h3>
|
||||
|
||||
<!-- Primary Email -->
|
||||
<h4 class="email-pref {{ emails.primary.className }}">{{ emails.primary.subhead }}</h4>
|
||||
{{#each emails.primary.email_addresses}}
|
||||
{{> email-card prefs=./../../preferences}}
|
||||
{{/each}}
|
||||
|
||||
<!-- Secondary Emails -->
|
||||
{{#ifCompare emails.secondary.email_addresses.length ">" 0}}
|
||||
<h4 class="email-pref {{ emails.secondary.className }}">{{ emails.secondary.subhead }}</h4>
|
||||
{{#each emails.secondary.email_addresses}}
|
||||
{{> email-card prefs=./../../preferences csrfToken=./../csrfToken}}
|
||||
{{/each}}
|
||||
{{/ifCompare}}
|
||||
|
||||
<!-- Add New Email Form -->
|
||||
{{!-- TODO: remove this when https://github.com/mozilla/blurts-server/issues/1148 is fixed --}}
|
||||
{{#ifCompare emails.total ">=" 15}}
|
||||
<h4 class="email-pref">{{ getString "user-add-too-many-emails" }}</h4>
|
||||
{{/ifCompare}}
|
||||
{{#ifCompare emails.total "<" 15}}
|
||||
<h4 class="email-pref add-new">{{ getString "add-new-email" }}</h4>
|
||||
{{> forms/add-another-email-form csrfToken=../csrfToken}}
|
||||
{{/ifCompare}}
|
||||
|
||||
<!-- Unverified Emails -->
|
||||
{{#ifCompare emails.unverified.email_addresses.length ">" 0}}
|
||||
<h4 class="email-pref {{ emails.unverified.className }}">{{ emails.unverified.subhead }}</h4>
|
||||
{{#each emails.unverified.email_addresses}}
|
||||
{{> email-card prefs=./../../preferences csrfToken=./../csrfToken}}
|
||||
{{/each}}
|
||||
{{/ifCompare}}
|
||||
|
||||
<!-- Remove Firefox Monitor -->
|
||||
<div class="pref-remove">
|
||||
{{> dashboards/remove-fxm-headline-subhead }}
|
||||
<a class="remove-fxm btn-transparent btn-red btn-small" href="/user/remove-fxm" {{> analytics/internal-link eventLabel="Remove FXM - Dashboard" }}>{{ getString "remove-fxm" }}</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,31 @@
|
|||
{{> dashboards/new-breach-message variableClass="show-mobile"}}
|
||||
{{> dashboards/new-breach-message}}
|
||||
<div class="
|
||||
email-card
|
||||
toggle-parent
|
||||
inactive
|
||||
card
|
||||
mw-750
|
||||
{{#ifCompare breaches.length "===" 0}} zero-breaches {{/ifCompare}}
|
||||
{{#unless primary}}{{#if verified}} verified {{/if}}{{/unless}}
|
||||
{{#if primary}}
|
||||
primary-email-card
|
||||
{{else}}
|
||||
{{#if verified}}
|
||||
verified
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{#if prefs}}
|
||||
preferences
|
||||
{{else}}
|
||||
breaches-dash
|
||||
{{/if}}
|
||||
{{#if hasNewBreaches}}
|
||||
new-breaches
|
||||
{{/if}}
|
||||
{{#if hasNewBreaches}}
|
||||
new-breaches
|
||||
{{/if}}
|
||||
">
|
||||
<div class="e-toggle-info-wrapper">
|
||||
<div class="e-info">
|
||||
<span class="e-address">{{ email }}</span>
|
||||
<span class="e-address overflow-break">{{ email }}</span>
|
||||
{{#if verified}}
|
||||
<!-- show breach count for verified emails -->
|
||||
<span class="e-num-breaches">{{{ fluentNestedBold "appears-in-x-breaches" breachCount=breaches.length }}}</span>
|
||||
<span class="e-num-breaches">{{{ getString "appears-in-x-breaches" breachCount=breaches.length }}}</span>
|
||||
{{else}}
|
||||
<!-- show resend-email link for unverified emails -->
|
||||
<div class="button-resend-wrapper flx">
|
||||
|
|
@ -30,23 +35,22 @@
|
|||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if prefs}} <!--user preferences dashboard / show trashcan to delete email-->
|
||||
{{#if prefs}} <!--preferences dashboard / show trashcan to delete email-->
|
||||
{{#if primary}}
|
||||
<a href="https://support.mozilla.org/kb/change-primary-email-address-firefox-accounts" target="_blank" rel="noopener noreferrer" class="change-primary-email blue-link hide-mobile" {{> analytics/internal-link eventLabel="Change Primary Email Address" }}>{{ getString "link-change-primary" }}</a>
|
||||
{{else}}
|
||||
{{> forms/remove-email-form }}
|
||||
{{/if}}
|
||||
{{else}} <!-- user breaches dashboard / show toggle -->
|
||||
{{else}} <!-- breaches dashboard / show toggle -->
|
||||
{{#ifCompare breaches.length ">" 0}}
|
||||
<button class="toggle svg-wrap show-email-breaches" aria-label="{{ getString "show-breaches-for-this-email" }}">
|
||||
{{> svg/toggle-down }}
|
||||
</button>
|
||||
{{> dashboards/new-breach-message variableClass="hide-mobile"}}
|
||||
{{/ifCompare}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#unless prefs}} <!-- user breaches dashboard, show breaches for each email on toggle click-->
|
||||
{{#unless prefs}} <!-- breaches dashboard, show breaches for each email on toggle click-->
|
||||
<div class="e-breach-list">
|
||||
{{#if this.foundBreaches}}
|
||||
{{> breach-groups foundBreaches variableClasses="two-up ec" }}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<span class="dashboard-email-sent bold txt-purple7 email-confirmed txt-cntr mw-550"> {{ getString "email-verified" }}</span>
|
||||
<span class="txt-purple7 email-confirmed txt-cntr mw-550">{{{ makeEmailAddedToSubscriptionString email }}}</span>
|
||||
<span class="txt-purple7 email-confirmed txt-cntr mw-550 overflow-break">{{{ makeEmailAddedToSubscriptionString email }}}</span>
|
||||
<span class="txt-purple7 email-confirmed txt-cntr mw-550">{{{ makeEmailVerifiedString }}}</span>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<main class="container bg-light clear-header" {{> analytics/results_page_label }}>
|
||||
<div class="row jst-cntr scan-results">
|
||||
|
||||
<div class="mw-860 headline-col">
|
||||
<div class="mw-860 headline-col overflow-break">
|
||||
{{#if scannedEmailId }} <!-- show the email address that was scanned -->
|
||||
<p id="scanned-email-address" class="scanned-email-address">{{ getString "results-for" userEmail="" }} <span id="scannedEmail" data-scanned-email-id={{ scannedEmailId }} class="bold"></span></p>
|
||||
{{/if}}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче