Skip to content

Commit

Permalink
(BIDS-3256) Login and Signup pages - redesign (#656)
Browse files Browse the repository at this point in the history
  • Loading branch information
@thib-wien
thib-wien authored Aug 1, 2024
1 parent f0f9022 commit ca52a7b
Show file tree
Hide file tree
Showing 8 changed files with 312 additions and 216 deletions.
7 changes: 5 additions & 2 deletions frontend/components/bc/PageWrapper.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
<script setup lang="ts">
const props = defineProps({ isHomePage: { type: Boolean } })
defineProps<{
isHomePage?: boolean,
minimalistHeader?: boolean
}>()
</script>

<template>
<BcCookieModal />
<div class="page">
<BcHeaderMainHeader :is-home-page="props.isHomePage" />
<BcHeaderMainHeader :is-home-page="!!isHomePage" :minimalist="!!minimalistHeader" />
<BcMaintenanceBanner />
<div class="content">
<slot name="top" />
Expand Down
88 changes: 88 additions & 0 deletions frontend/components/bc/header/HeaderLogo.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<script setup lang="ts">
defineProps<{
layoutAdaptability: 'low' | 'high'
}>()
</script>

<template>
<BcLink to="/" :class="`${layoutAdaptability}-adaptability`">
<IconBeaconchainLogo alt="Beaconcha.in logo" />
<span class="name">beaconcha.in</span>
</BcLink>
</template>

<style lang="scss" scoped>
@use "~/assets/css/fonts.scss";
// do not change these three values without changing the values in MainHeader.vue and in types/header.ts accordingly
$mobileHeaderThreshold: 600px;
$smallHeaderThreshold: 1024px;
$largeHeaderThreshold: 1360px;
@mixin common() {
display: flex;
position: relative;
gap: var(--padding);
svg {
margin-top: auto;
height: 30px;
}
.name {
display: inline-flex;
position: relative;
margin-top: auto;
line-height: 22px;
font-family: var(--logo_font_family);
font-weight: var(--logo_font_weight);
letter-spacing: var(--logo_small_letter_spacing);
font-size: var(--logo_font_size);
}
}
@mixin smaller() {
gap: 6px;
svg {
height: 18px;
}
.name {
line-height: 14px;
font-size: var(--logo_small_font_size);
}
}
.low-adaptability {
@include common();
svg {
margin-bottom: 13px;
}
.name {
margin-top: 14px;
margin-bottom: 14px;
}
@media (max-width: $mobileHeaderThreshold) {
@include smaller();
svg {
margin-bottom: 11px;
}
.name {
margin-top: 11px;
margin-bottom: 11px;
}
}
}
.high-adaptability {
@include common();
@media (max-width: $largeHeaderThreshold) {
@include smaller();
@media (max-width: $mobileHeaderThreshold) {
svg {
height: 30px;
}
.name {
display: none;
}
}
}
}
</style>
100 changes: 42 additions & 58 deletions frontend/components/bc/header/MainHeader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@ import { useNetworkStore } from '~/stores/useNetworkStore'
import { SearchbarShape, SearchbarColors } from '~/types/searchbar'
import { mobileHeaderThreshold, smallHeaderThreshold } from '~/types/header'
const props = defineProps({ isHomePage: { type: Boolean } })
defineProps<{
isHomePage: boolean,
minimalist: boolean
}>()
const { latestState } = useLatestStateStore()
const { slotToEpoch, currentNetwork, networkInfo } = useNetworkStore()
const { doLogout, isLoggedIn } = useUserStore()
Expand Down Expand Up @@ -62,7 +65,14 @@ const userMenu = computed(() => {
</script>

<template>
<div class="anchor" :class="hideInDevelopmentClass">
<div v-if="minimalist" class="minimalist">
<div class="top-background" />
<div class="rows">
<BcHeaderLogo layout-adaptability="low" />
</div>
</div>

<div v-else class="complete" :class="hideInDevelopmentClass">
<div class="top-background" />
<div class="rows">
<div class="grid-cell blockchain-info">
Expand All @@ -88,7 +98,7 @@ const userMenu = computed(() => {

<div class="grid-cell search-bar">
<BcSearchbarGeneral
v-if="showInDevelopment && !props.isHomePage"
v-if="showInDevelopment && !isHomePage"
class="bar"
:bar-shape="SearchbarShape.Medium"
:color-theme="isSmallScreen && colorMode.value != 'dark' ? SearchbarColors.LightBlue : SearchbarColors.DarkBlue"
Expand Down Expand Up @@ -119,10 +129,7 @@ const userMenu = computed(() => {
</div>

<div class="grid-cell explorer-info">
<BcLink to="/" class="logo">
<IconBeaconchainLogo alt="Beaconcha.in logo" />
<span class="name">beaconcha.in</span>
</BcLink>
<BcHeaderLogo layout-adaptability="high" />
<span class="variant">
v2 beta |
<span class="mobile">{{ networkInfo.shortName }}</span>
Expand All @@ -141,29 +148,46 @@ const userMenu = computed(() => {
<style lang="scss" scoped>
@use "~/assets/css/fonts.scss";
// do not change these two values without changing the values in types/header.ts accordingly
// do not change these two values without changing the values in HeaderLogo.vue and in types/header.ts accordingly
$mobileHeaderThreshold: 600px;
$smallHeaderThreshold: 1024px;
.anchor {
top: -1px;
@mixin common {
position: relative;
display: flex;
width: 100%;
justify-content: center;
.top-background {
position: absolute;
width: 100%;
height: var(--navbar-height);
background-color: var(--dark-blue);
}
.rows {
width: var(--content-width);
}
}
.minimalist {
@include common();
color: var(--header-top-font-color);
@media (max-width: $mobileHeaderThreshold) {
.top-background {
height: 36px;
}
}
}
.complete {
@include common();
top: -1px; // needed for some reason to perfectly match Figma
border-bottom: 1px solid var(--container-border-color);
&.hide-because-it-is-unfinished { // TODO: once the searchbar is enabled in production, delete this block (because border-bottom is always needed, due to the fact that the lower header is always visible (it contains the search bar when the screeen is narrow, otherwise the logo and mega menu))
@media (max-width: $smallHeaderThreshold) {
border-bottom: none;
}
}
background-color: var(--container-background);
.top-background {
position: absolute;
width: 100%;
height: var(--navbar-height);
background-color: var(--dark-blue);
}
.rows {
position: relative;
Expand All @@ -174,7 +198,6 @@ $smallHeaderThreshold: 1024px;
grid-template-columns: 0px min-content auto min-content 0px; // same remark about the 0px
grid-template-rows: var(--navbar-height) min-content;
}
width: var(--content-width);
color: var(--header-top-font-color);
@mixin bottom-cell($row) {
color: var(--container-color);
Expand Down Expand Up @@ -282,51 +305,13 @@ $smallHeaderThreshold: 1024px;
.explorer-info {
grid-column: 2;
height: unset;
@media (min-width: $smallHeaderThreshold) {
@include bottom-cell(2);
}
@media (max-width: $smallHeaderThreshold) {
grid-row: 1;
}
height: unset;
.logo {
display: flex;
position: relative;
margin-top: auto;
gap: var(--padding);
font-family: var(--logo_font_family);
font-size: var(--logo_font_size);
font-weight: var(--logo_font_weight);
letter-spacing: var(--logo_letter_spacing);
svg {
margin-top: auto;
}
.name {
display: inline-flex;
position: relative;
margin-top: auto;
line-height: 22px;
@media (max-width: $mobileHeaderThreshold) {
display: none;
}
}
@media (max-width: 1360px) {
font-size: var(--logo_small_font_size);
letter-spacing: var(--logo_small_letter_spacing);
gap: 6px;
.name {
line-height: 14px;
}
svg {
height: 18px;
@media (max-width: $mobileHeaderThreshold) {
height: 30px;
}
}
}
}
.variant {
position: relative;
margin-top: auto;
Expand All @@ -335,8 +320,7 @@ $smallHeaderThreshold: 1024px;
line-height: 10px;
.large-screen { display: inline }
.mobile { display: none }
@media (max-width: $smallHeaderThreshold) { // when it is in the upper header...
// ... the background is always dark blue (no matter the theme (dark/light)), so we need a light grey:
@media (max-width: $smallHeaderThreshold) {
color: var(--grey);
}
@media (max-width: $mobileHeaderThreshold) {
Expand Down
30 changes: 14 additions & 16 deletions frontend/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -759,26 +759,25 @@
}
},
"login_and_register": {
"title_login": "Log in",
"title_login": "Sign in",
"title_register": "Sign up",
"text1_register": "Sign up to beaconcha.in",
"text2_register": "to manage and monitor your validators.",
"submit_login": "Log in",
"submit_register": "Sign up",
"email": "Email address",
"password": "Password",
"forgotten": "Forgot password?",
"choose_password": "Choose a password",
"confirm_password": "Confirm your password",
"please_agree": ["I agree to the", "Terms and Conditions", "and", "Privacy Policy"],
"please_agree": ["I agree to the", "T&C", "and", "Privacy Policy"],
"error_title": "Error",
"error_login_group": "Cannot log in",
"error_login_message": "your email or your password is unknown.",
"error_register_group": "Cannot sign up",
"error_register_message": "An error of communication with the served happened.",
"dont_have_account": "You do not have an account?",
"signup_here": "Click here to sign up.",
"already_have_account": "You already have an account?",
"login_here": "Click here to log in."
"dont_have_account": "Don't have an account?",
"signup_here": "Register",
"already_have_account": "Already have an account?",
"login_here": "Log in"
},
"header": {
"current_slot": "Current Slot",
Expand Down Expand Up @@ -1032,17 +1031,16 @@
},
"validation": {
"email" : {
"empty": "Please enter your email address.",
"invalid": "Please enter a valid email address.",
"no_match": "The email addresses don't match."
"empty": "Please provide your email address",
"invalid": "Please provide a valid email address",
"no_match": "The email addresses do not match"
},
"password": {
"empty": "Please enter your password.",
"min": "Your password must contain at least {amount} characters.",
"max": "Your password must contain at most {amount} characters.",
"no_match": "The passwords don't match.",
"min": "Please provide at least {amount} characters.",
"max": "Please provide at most {amount} characters.",
"no_match": "The passwords do not match yet.",
"not_new": "The new password must differ from the old one."
},
"tos_not_agreed": "Please accept the ToS & Privacy Policy."
}
}
}
3 changes: 3 additions & 0 deletions frontend/middleware/redirect.global.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,5 +61,8 @@ export default function ({ name, params, query }: RouteLocationNormalizedLoaded)
if (!showInDevelopment) {
return navigateTo(`${v1Domain}/user/settings`, { external: true })
}
break
case 'requestReset':
return navigateTo(`${v1Domain}/requestReset`, { external: true })
}
}
Loading

0 comments on commit ca52a7b

Please sign in to comment.