(BIDS-3256) done

frontend/components/bc/PageWrapper.vue

@@ -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" />

frontend/components/bc/header/MainHeader.vue

@@ -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()
@@ -62,7 +65,16 @@ const userMenu = computed(() => {
 </script>
 
 <template>
-  <div class="anchor" :class="hideInDevelopmentClass">
+  <div v-if="minimalist" class="minimalistic" :class="hideInDevelopmentClass">
+    <div class="row">
+      <BcLink to="/" class="logo">
+        <IconBeaconchainLogo alt="Beaconcha.in logo" />
+        <span class="name">beaconcha.in</span>
+      </BcLink>
+    </div>
+  </div>
+
+  <div v-else class="anchor" :class="hideInDevelopmentClass">
     <div class="top-background" />
     <div class="rows">
       <div class="grid-cell blockchain-info">
@@ -88,7 +100,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"
@@ -145,8 +157,58 @@ const userMenu = computed(() => {
 $mobileHeaderThreshold: 600px;
 $smallHeaderThreshold: 1024px;
 
+.minimalistic {
+  position: relative;
+  display: flex;
+  width: 100%;
+  background-color: var(--dark-blue);
+  color: var(--header-top-font-color);
+  justify-content: center;
+  @media (min-width: $mobileHeaderThreshold) {
+    background-color: var(--container-background);
+    border-bottom: 1px solid var(--container-border-color);
+    color: var(--container-color);
+  }
+  .row {
+    width: var(--content-width);
+    .logo {
+      display: flex;
+      position: relative;
+      gap: var(--padding);
+      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);
+      svg {
+        margin-top: auto;
+        margin-bottom: 13px;
+        height: 30px;
+      }
+      .name {
+        display: inline-flex;
+        position: relative;
+        margin-top: 14px;
+        margin-bottom: 14px;
+        line-height: 22px;
+      }
+      @media (max-width: $mobileHeaderThreshold) {
+        font-size: var(--logo_small_font_size);
+        gap: 6px;
+        .name {
+          margin-top: 11px;
+          margin-bottom: 11px;
+        }
+        svg {
+          height: 18px;
+          margin-bottom: 15px;
+        }
+      }
+    }
+  }
+}
+
 .anchor {
-  top: -1px;
+  top: -1px; // needed for some reason to perfectly match Figma
   position: relative;
   display: flex;
   width: 100%;
@@ -282,14 +344,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;
@@ -307,16 +368,16 @@ $smallHeaderThreshold: 1024px;
           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;
+            @media (max-width: $mobileHeaderThreshold) {
+              display: none;
+            }
           }
           svg {
             height: 18px;
@@ -326,7 +387,6 @@ $smallHeaderThreshold: 1024px;
           }
         }
       }
-
       .variant {
         position: relative;
         margin-top: auto;

frontend/i18n/en.json

@@ -728,26 +728,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",
@@ -1001,17 +1000,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."
+    }
   }
 }

frontend/middleware/redirect.global.ts

@@ -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 })
   }
 }