Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Login Re-work Pt2 #646

Merged
merged 3 commits into from
Sep 11, 2024
Merged

Login Re-work Pt2 #646

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4705584
Re-work waiting list action, and string extract.
MelissaAutumn Sep 10, 2024
805b9a7
Update confirm your email...email
MelissaAutumn Sep 10, 2024
53d6e64
🌐 Update German translation, sort lang keys
devmount Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions backend/src/appointment/l10n/en/email.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
52 changes: 34 additions & 18 deletions backend/src/appointment/templates/email/confirm_email.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Terrifying.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haha yes, writing markup for mail clients is sometimes like a history lesson on the origins of HTML 😂 Or writing a website for the Netscape Navigator.

<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="
Expand All @@ -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 %}
1 change: 0 additions & 1 deletion frontend/src/components/GenericModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,6 @@ onUnmounted(() => {
width: 100%;
flex-direction: column;
align-items: center;
margin-top: 1rem;
}

.modal-actions {
Expand Down
51 changes: 44 additions & 7 deletions frontend/src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{
"app": {
"summary": "Invite others to grab times on your calendar. Choose a date. Make appointments as easy as it gets.",
"title": "Thunderbird Appointment"
"title": "Thunderbird Appointment",
"tagline": "Plan less, do more"
},
"error": {
"actionNeeded": "Action needed",
Expand Down Expand Up @@ -320,6 +321,35 @@
"de": "German",
"en": "English"
},
"login": {
"login": {
"title": "Simplify your day – just enter your email:",
"intro": {
"returning": [
"Returning?",
"{strong} We'll recognize you and direct you to your account."
],
"new": [
"New?",
"{strong} We'll help you set up quickly."
]
}
},
"signUp": {
"title": "Have an invite code? Enter it here"
},
"confirm": {
"title": "Complete your sign up",
"intro": [
"Please confirm your email to join our waiting list.",
"Check your inbox for more information shortly."
]
},
"form": {
"privacy": "Your privacy is important to us.",
"no-invite-code": "If you don't have an invite code, add your email to our waiting list."
}
},
"placeholder": {
"biWeeklyCafeDates": "Bi-weekly Café Dates…",
"emailAddress": "john.doe{'@'}example.com",
Expand Down Expand Up @@ -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.",
"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."
],
"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."
]
}
}
37 changes: 24 additions & 13 deletions frontend/src/views/LoginView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,8 @@ import {
import {
BooleanResponse,
AuthUrlResponse,
Exception,
AuthUrl,
Error,
PydanticExceptionDetail,
ExceptionDetail,
PydanticException,
} from '@/models';
import { posthog, usePosthog } from '@/composables/posthog';
Expand Down Expand Up @@ -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"
>
Expand All @@ -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>
Expand All @@ -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;
Expand Down
Loading