Login Re-work Pt2

backend/src/appointment/l10n/de/email.ftl

@@ -171,11 +171,12 @@ new-account-mail-plain = Du wurdest zu Thunderbird Appointment eingeladen.
 
 ## Confirm Email for waiting list
 confirm-email-mail-subject = Bestätige deine E-Mail-Adresse um der Warteliste beizutreten!
-confirm-email-mail-confirm-action = Bestätige deine E-Mail-Adresse
-confirm-email-mail-decline-action = Entferne deine E-Mail-Adresse
+confirm-email-mail-confirm-action = Bestätigen
 confirm-email-mail-html-heading = Danke für Dein Interesse an Thunderbird Appointment.
-confirm-email-mail-html-body = Bevor wir Dich auf unsere Warteliste setzen, musst Du Deine E-Mail-Adresse unten bestätigen.
-confirm-email-mail-html-body-2 = Hast Du diese E-Mail irrtümlich erhalten, oder bist nicht mehr interessiert?
+confirm-email-mail-html-body = Um der Warteliste beizutreten, bestätige bitte deine E-Mail-Adresse, indem du den Button unten klickst oder diesen Link in deinen Browser einfügst:
+confirm-email-mail-html-body-2 = Hast Du diese E-Mail irrtümlich erhalten, oder bist nicht mehr interessiert, dann kannst du
+confirm-email-mail-html-body-2-link-text = deine E-Mail-Adresse entfernen.
+
 # Variables:
 # $confirm_email_url (String) - URL to confirm your email
 # $decline_email_url (String) - URL to remove the email from the waiting list

backend/src/appointment/l10n/en/email.ftl

@@ -171,11 +171,12 @@ new-account-mail-plain = You've been invited to Thunderbird Appointment.
 
 ## Confirm Email for waiting list
 confirm-email-mail-subject = Confirm your email to join the waiting list!
-confirm-email-mail-confirm-action = Confirm your email
-confirm-email-mail-decline-action = Remove your email
+confirm-email-mail-confirm-action = Confirm
 confirm-email-mail-html-heading = Thank you for your interest in Thunderbird Appointment.
-confirm-email-mail-html-body = Before we add you to our waiting list we need you to confirm your email address below.
-confirm-email-mail-html-body-2 = Did you receive this email in error, or are you no longer interested?
+confirm-email-mail-html-body = To join our waiting list, please confirm your email by clicking the button below or pasting this link into your browser:
+confirm-email-mail-html-body-2 = If you received this email in error or are no longer interested, you can
+confirm-email-mail-html-body-2-link-text = remove your email.
+
 # Variables:
 # $confirm_email_url (String) - URL to confirm your email
 # $decline_email_url (String) - URL to remove the email from the waiting list

backend/src/appointment/templates/email/confirm_email.jinja2

@@ -1,17 +1,30 @@
 {% extends "includes/base.jinja2" %}
 {# Code begins! #}
 {% block introduction %}
- <div style="color: {{ colour_text_base }}; text-align: center; line-height: 16px;">
+ <div style="color: {{ colour_text_base }}; text-align: center; line-height: 16px;margin-bottom: 32px;">
  <p style="font-weight: 700; margin: 0;">
  {{ l10n('confirm-email-mail-html-heading') }}
  </p>
  </div>
 {% endblock %}
 {% block call_to_action %}
- <p>
- {{ l10n('confirm-email-mail-html-body') }}
+ <center>
+ <p style="max-width: 380px; text-align: center;">
+ {{ l10n('confirm-email-mail-html-body') }}
+ </p>
+ </center>
+ <p style="
+ color: {{ colour_tbpro_apmt_primary }};
+ font-size: 13px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ text-decoration-line: underline;
+ margin-bottom: 32px;
+ ">
+ {{ confirm_email_url }}
  </p>
- <div style="margin-bottom: 12px">
+ <div style="margin-bottom: 32px">
  <a
  href="{{ confirm_email_url }}"
  style="
@@ -28,20 +41,23 @@
  "
  >{{ l10n('confirm-email-mail-confirm-action') }}</a>
  </div>
- <p>
+ <center>
+ <p style="
+ color: {{ colour_text_muted }};
+ text-align: center;
+ font-size: 9px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ margin-bottom: 32px;
+ max-width: 315px;
+ ">
  {{ l10n('confirm-email-mail-html-body-2') }}
- </p>
- <div>
- <a
- href="{{ decline_email_url }}"
- style="
- display: inline-block;
- font-size: 13px;
- padding: 12px 24px;
+ <a style="
  color: {{ colour_tbpro_apmt_primary }};
- text-decoration-line: underline;
-  font-weight: 400;
-  "
-  >{{ l10n('confirm-email-mail-decline-action') }}</a>
- </div>
+ text-decoration-line: underline;"
+ href="{{ decline_email_url }}">{{ l10n('confirm-email-mail-html-body-2-link-text') }}</a>
+ </p>
+ </center>
+
 {% endblock %}

frontend/src/components/GenericModal.vue

@@ -84,7 +84,6 @@ onUnmounted(() => {
  width: 100%;
  flex-direction: column;
  align-items: center;
- margin-top: 1rem;
 }
 
 .modal-actions {

frontend/src/locales/de.json

@@ -1,6 +1,7 @@
 {
  "app": {
  "summary": "Lass Freunde und Kollegen Zeiten in deinem Kalender wählen. Terminabsprachen so simpel wie möglich.",
+ "tagline": "Weniger planen, mehr schaffen",
  "title": "Thunderbird Appointment"
  },
  "error": {
@@ -317,6 +318,38 @@
  "de": "Deutsch",
  "en": "Englisch"
  },
+ "login": {
+ "confirm": {
+ "intro": [
+ "Bitte bestätige die Registrierung um der Warteliste beizutreten.",
+ "Check dein Postfach, du erhälst in Kürze weitere Informationen."
+ ],
+ "title": "Vervollständige die Registrierung"
+ },
+ "form": {
+ "no-invite-code": "Wenn du keinen Einladungscode hast, setze deine E-Mail-Adresse auf unsere Warteliste.",
+ "privacy": "Datenschutz ist uns wichtig."
+ },
+ "login": {
+ "intro": {
+ "new": [
+ "Neu hier?",
+ "{strong} Wir helfen bei der schnellen Einrichtung."
+ ],
+ "returning": [
+ "Du bist zurück?",
+ "{strong} Wir leiten dich zu deinem Benutzerkonto weiter."
+ ]
+ },
+ "title": "Mach deinen Tag leichter – gibt deine E-Mail-Adresse ein:"
+ },
+ "signUp": {
+ "title": "Du hast einen Einladungscode? Gib ihn hier ein"
+ }
+ },
+ "navBar": {
+ "report-bug": "Fehler melden"
+ },
  "placeholder": {
  "biWeeklyCafeDates": "Zweiwöchentliche Café-Treffen …",
  "emailAddress": "max.muster{'@'}beispiel.de",
@@ -414,15 +447,22 @@
  },
  "waitingList": {
  "adminInviteNotice": "Hinweis: Der Senden-Button wird bereits akzeptierte Personen nicht erneut einladen, sie können aber dennoch ausgewählt werden. Verwende die Filter für eine bessere Übersicht!",
- "confirmHeading": "Deine E-Mail-Adresse wurde bestätigt!",
- "confirmInfo": "Deine E-Mail-Adresse ist nun bestätigt. Sobald Du ausgewählt wurdest, wirst Du einen Einladungscode bekommen.",
+ "confirmHeading": "Du bist auf der Warteliste",
+ "confirmInfo": "Du bekommst eine Einladung sobald die Registrierung startet.",
  "errorHeading": "Es gab ein Problem mit diesem Link",
  "errorInfo": "Leider ist dieser Link abgelaufen oder ungültig.",
- "leaveHeading": "Du hast die Warteliste erfolgreich verlassen",
- "leaveInfo": "Schade, dass Du gehst. Du kannst Dich jederzeit wieder auf die Warteliste setzen lassen!",
+ "leaveHeading": "Du wurdest von von der Warteliste entfernt",
+ "leaveInfo": "Deine E-Mail-Adresse wurde erfolgreich von unserer Warteliste entfernt. Falls du deine Meinung änderst, kannst du dich jederzeit wieder auf die Warteliste setzen lassen.",
+ "marketing": [
+ "Behalte deinen Kalender, teile deine Zeit.",
+ "Thunderbird Appointment vereinfacht die Art und Weise gemeinsamer Terminfindung, um durch weniger Planen mehr Zeit für die wichtigen Dinge zu haben."
+ ],
  "signUpAlreadyExists": "Du bist bereits auf der Warteliste.",
  "signUpCheckYourEmail": "Weitere Informationen findest Du in Deiner E-Mail.",
- "signUpHeading": "Nur noch ein Schritt!",
- "signUpInfo": "Bevor Du in die Warteliste aufgenommen werden kannst, musst Du Deine E-Mail-Adresse bestätigen."
+ "signUpHeading": "Registrierung abschließen",
+ "signUpInfo": [
+ "Bitte bestätige deine E-Mail-Adresse, um auf die Warteliste zu kommen.",
+ "In Kürze erhätst du weitere Informationen in deinen Posteingang."
+ ]
  }
 }

frontend/src/locales/en.json

@@ -1,6 +1,7 @@
 {
  "app": {
  "summary": "Invite others to grab times on your calendar. Choose a date. Make appointments as easy as it gets.",
+ "tagline": "Plan less, do more",
  "title": "Thunderbird Appointment"
  },
  "error": {
@@ -91,9 +92,6 @@
  },
  "zoom": "Zoom"
  },
- "navBar": {
- "report-bug": "Report Bug"
- },
  "icons": {
  "calendar": "Calendar",
  "critical": "Critical",
@@ -320,6 +318,38 @@
  "de": "German",
  "en": "English"
  },
+ "login": {
+ "confirm": {
+ "intro": [
+ "Please confirm your email to join our waiting list.",
+ "Check your inbox for more information shortly."
+ ],
+ "title": "Complete your sign up"
+ },
+ "form": {
+ "no-invite-code": "If you don't have an invite code, add your email to our waiting list.",
+ "privacy": "Your privacy is important to us."
+ },
+ "login": {
+ "intro": {
+ "new": [
+ "New?",
+ "{strong} We'll help you set up quickly."
+ ],
+ "returning": [
+ "Returning?",
+ "{strong} We'll recognize you and direct you to your account."
+ ]
+ },
+ "title": "Simplify your day – just enter your email:"
+ },
+ "signUp": {
+ "title": "Have an invite code? Enter it here"
+ }
+ },
+ "navBar": {
+ "report-bug": "Report Bug"
+ },
  "placeholder": {
  "biWeeklyCafeDates": "Bi-weekly Café Dates…",
  "emailAddress": "john.doe{'@'}example.com",
@@ -417,15 +447,22 @@
  },
  "waitingList": {
  "adminInviteNotice": "Notice: The Send button will not re-invite people already accepted, but you can still select them. Use the filters for clarity!",
- "confirmHeading": "Your email is confirmed!",
- "confirmInfo": "Your email is now confirmed and if selected you will be contacted about an invite code in the future.",
+ "confirmHeading": "You’re on the waitlist",
+ "confirmInfo": "You'll receive an invitation as soon as registration opens.",
  "errorHeading": "There was a problem with that link",
  "errorInfo": "Unfortunately this link is expired or is invalid.",
- "leaveHeading": "You successfully left the waiting list",
- "leaveInfo": "Sorry to see you go. You're welcome to re-join the waiting list at any time!",
+ "leaveHeading": "You’ve been removed from the waitlist",
+ "leaveInfo": "Your email has been successfully removed from our waitlist.\nIf you change your mind, you can always rejoin.",
+ "marketing": [
+ "Own your calendar, share your time.",
+ "Thunderbird Appointment simplifies the way you find time to connect so you can soar past the planning, and get to the living."
+ ],
  "signUpAlreadyExists": "You are already on the waiting list.",
  "signUpCheckYourEmail": "Check your email for more information.",
- "signUpHeading": "Just one more step!",
- "signUpInfo": "Before you can be added to the waiting list, you need to confirm your email address."
+ "signUpHeading": "Complete your sign up",
+ "signUpInfo": [
+ "Please confirm your email to join our waiting list.",
+ "Check your inbox for more information shortly."
+ ]
  }
 }

frontend/src/views/LoginView.vue

@@ -9,11 +9,8 @@ import {
 import {
  BooleanResponse,
  AuthUrlResponse,
- Exception,
  AuthUrl,
  Error,
- PydanticExceptionDetail,
- ExceptionDetail,
  PydanticException,
 } from '@/models';
 import { posthog, usePosthog } from '@/composables/posthog';
@@ -214,34 +211,43 @@ const onEnter = () => {
  <template v-slot:header>
  <word-mark/>
  <h2 id="title" v-if="loginStep === LoginSteps.Login">
- Simplify your day – just enter your email:
+ {{ t('login.login.title') }}
  </h2>
  <h2 id="title" v-else-if="loginStep === LoginSteps.SignUp">
- Have an invite code? Enter it here
+ {{ t('login.signUp.title') }}
  </h2>
  <h2 id="title" v-else>
- Complete your sign up
+ {{ t('login.confirm.title') }}
  </h2>
  </template>
  <div class="intro-text" v-if="loginStep === LoginSteps.Login">
- <p><strong>Returning?</strong> We'll recognize you and direct you to your account.</p>
- <p><strong>New?</strong> We'll help you set up quickly.</p>
+ <i18n-t keypath="login.login.intro.returning.1" tag="p">
+ <template v-slot:strong>
+ <strong>{{ t('login.login.intro.returning.0') }}</strong>
+ </template>
+ </i18n-t>
+ <i18n-t keypath="login.login.intro.new.1" tag="p">
+ <template v-slot:strong>
+ <strong>{{ t('login.login.intro.new.0') }}</strong>
+ </template>
+ </i18n-t>
  </div>
  <div class="intro-text" v-if="loginStep === LoginSteps.SignUpConfirm">
- <p><strong>Please confirm your email to join our waiting list.</strong></p>
- <p>Check your inbox for more information shortly.</p>
+ <p><strong>{{ t('login.confirm.intro.0') }}</strong></p>
+ <p>{{ t('login.confirm.intro.1') }}</p>
  </div>
  <div class="form-body">
  <form v-if="loginStep !== LoginSteps.SignUpConfirm" class="form" ref="formRef" autocomplete="off" @submit.prevent @keyup.enter="() => onEnter()">
- <text-input name="email" v-model="email" :required="true" :help="loginStep === LoginSteps.Login || hideInviteField ? 'Your privacy is important to us.' : null">{{ t('label.email') }}</text-input>
+ <text-input name="email" v-model="email" :required="true" :help="loginStep === LoginSteps.Login || hideInviteField ? t('login.form.privacy') : null">{{ t('label.email') }}</text-input>
  <text-input v-if="isPasswordAuth" name="password" v-model="password" :required="true">{{ t('label.password') }}</text-input>
- <text-input v-if="loginStep === LoginSteps.SignUp && !hideInviteField" name="inviteCode" v-model="inviteCode" help="If you don't have an invite code, add your email to our waiting list">{{ t('label.inviteCode') }}</text-input>
+ <text-input v-if="loginStep === LoginSteps.SignUp && !hideInviteField" name="inviteCode" v-model="inviteCode" :help="t('login.form.no-invite-code')">{{ t('label.inviteCode') }}</text-input>
  </form>
  </div>
  <template v-slot:actions>
  <primary-button
  class="btn-continue"
  :title="t('label.continue')"
+ :disabled="isLoading"
  @click="onEnter()"
  v-if="loginStep !== LoginSteps.SignUpConfirm"
  >
@@ -250,14 +256,15 @@ const onEnter = () => {
  <primary-button
  class="btn-close"
  :title="t('label.close')"
+ :disabled="isLoading"
  @click="router.push({name: 'home'})"
  v-else
  >
  {{ t('label.close') }}
  </primary-button>
  </template>
  <template v-slot:footer>
- <router-link :to="{name: 'home'}">Plan less, do more</router-link>
+ <router-link :to="{name: 'home'}">{{ t('app.tagline') }}</router-link>
  </template>
  </generic-modal>
  </div>
@@ -270,6 +277,10 @@ const onEnter = () => {
  gap: 0.983125rem;
  margin-bottom: 1.5625rem;
 }
+/* Tweak the generic-modal's modal-body style */
+:deep(.modal-body) {
+ margin-top: 1rem;
+}
 .form-body {
  display: flex;
  flex-direction: column;