Skip to content

Commit 5705117

Browse files
AchoArnoldCopilot
andcommitted
fix: replace placeholder content with production text and fix Firebase
- Replace privacy policy with full production text (9 sections) - Replace terms and conditions with full production text - Fix all 7 blog articles with correct production content - Fix blog index with correct titles, dates, reading times, authors - Remove nuxt-vuefire module (causes server-side Firebase errors) - Add client-only Firebase plugin that skips init without API key - Migrate all typography classes to Vuetify 4 (MD3) - Add blank layout for login page - Remove test/debug scripts Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent b681014 commit 5705117

45 files changed

Lines changed: 1178 additions & 1823 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

web/app/components/BlogAuthorBio.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { mdiTwitter, mdiGithub } from "@mdi/js";
66
<div class="d-flex mb-6 mt-8">
77
<v-avatar image="/img/arnold.png" />
88
<div class="ml-2">
9-
<p class="text-subtitle-1 mb-n1">Acho Arnold</p>
9+
<p class="text-title-large mb-n1">Acho Arnold</p>
1010
<a
1111
class="mb-n4 text-decoration-none text-on-surface"
1212
href="https://twitter.com/acho_arnold"

web/app/components/BlogInfo.vue

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,14 @@
11
<script setup lang="ts">
2-
import { mdiBookOpenVariant } from "@mdi/js";
3-
4-
const appStore = useAppStore();
2+
const props = defineProps<{
3+
date: string;
4+
readTime: string;
5+
}>();
56
</script>
67

78
<template>
8-
<div>
9-
<NuxtLink to="/" class="text-decoration-none d-flex">
10-
<v-avatar :image="'/img/logo.svg'" :size="33" class="mt-1" />
11-
<h3 class="text-h4 text-on-surface ml-1">httpSMS</h3>
12-
</NuxtLink>
13-
<p>
14-
httpSMS is an
15-
<a
16-
class="text-decoration-none"
17-
href="https://github.com/NdoleStudio/httpsms"
18-
>open source</a
19-
>
20-
application that converts your android phone into an SMS gateway so you
21-
can send and receive SMS messages using a simple HTTP API.
22-
</p>
23-
<v-btn :href="appStore.appData.documentationUrl">
24-
<v-icon start :icon="mdiBookOpenVariant" />
25-
Documentation
26-
</v-btn>
9+
<div class="d-flex flex-wrap ga-3 text-body-medium text-medium-emphasis mb-4">
10+
<span>{{ props.date }}</span>
11+
<span aria-hidden="true">•</span>
12+
<span>{{ props.readTime }}</span>
2713
</div>
2814
</template>

web/app/components/FixedHeader.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const { lgAndUp, mdAndDown } = useDisplay();
1111
<v-col class="w-full d-flex">
1212
<NuxtLink
1313
:to="{ name: 'index' }"
14-
class="text-on-surface text-h4 text-decoration-none"
14+
class="text-on-surface text-headline-large text-decoration-none"
1515
:class="{ 'mt-5': mdAndDown, 'mt-4': !mdAndDown }"
1616
>
1717
<v-avatar v-if="lgAndUp" :image="'/img/logo.svg'" :size="30" />

web/app/components/LoadingDashboard.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const { mdAndDown } = useDisplay();
1414
class="text-center mt-16"
1515
:class="{ 'px-6': mdAndDown, 'px-16': !mdAndDown }"
1616
>
17-
<h2 class="text-h4 text-medium-emphasis mt-16 mb-4">
17+
<h2 class="text-headline-large text-medium-emphasis mt-16 mb-4">
1818
<img
1919
class="mx-auto d-inline-block"
2020
src="/img/logo.svg"

web/app/components/MessageThread.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ function getInitials(contact: string): string {
2323
/>
2424
<div
2525
v-if="!threadsStore.loadingThreads && threadsStore.archivedThreads"
26-
class="bg-warning py-1 text-center text-uppercase text-subtitle-1"
26+
class="bg-warning py-1 text-center text-uppercase text-title-large"
2727
>
2828
Archived Messages
2929
</div>
@@ -67,7 +67,7 @@ function getInitials(contact: string): string {
6767
>
6868
<template #prepend>
6969
<v-avatar :color="thread.color" size="40">
70-
<span class="text-white text-body-2">{{
70+
<span class="text-white text-body-medium">{{
7171
getInitials(thread.contact)
7272
}}</span>
7373
</v-avatar>

web/app/layouts/blank.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<VApp>
3+
<VMain>
4+
<slot />
5+
</VMain>
6+
</VApp>
7+
</template>

web/app/layouts/error.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ const props = defineProps<{
1111
<v-app>
1212
<v-main>
1313
<v-container class="text-center mt-16">
14-
<h1 class="text-h1">{{ error.statusCode }}</h1>
15-
<p class="text-h5 mt-4">{{ error.message }}</p>
14+
<h1 class="text-display-large">{{ error.statusCode }}</h1>
15+
<p class="text-headline-medium mt-4">{{ error.message }}</p>
1616
<v-btn color="primary" class="mt-8" to="/">Go Home</v-btn>
1717
</v-container>
1818
</v-main>

web/app/layouts/website.vue

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,10 @@ function goToPricing() {
4343
:class="{ 'mt-5': mdAndUp }"
4444
>
4545
<v-avatar :image="'/img/logo.svg'" :size="33" class="mt-1" />
46-
<h3 v-if="lgAndUp" class="text-h4 ml-1 text-on-surface">
46+
<h3
47+
v-if="lgAndUp"
48+
class="text-headline-large ml-1 text-on-surface"
49+
>
4750
httpSMS
4851
</h3>
4952
</NuxtLink>
@@ -111,9 +114,9 @@ function goToPricing() {
111114
<v-col cols="12" md="3">
112115
<NuxtLink to="/" class="text-decoration-none d-flex">
113116
<v-avatar :image="'/img/logo.svg'" :size="33" class="mt-1" />
114-
<h3 class="text-h4 ml-1 text-on-surface">httpSMS</h3>
117+
<h3 class="text-headline-large ml-1 text-on-surface">httpSMS</h3>
115118
</NuxtLink>
116-
<div class="text-subtitle-2 mb-4 text-medium-emphasis">
119+
<div class="text-title-medium mb-4 text-medium-emphasis">
117120
Made With
118121
<v-icon color="#cf1112" :icon="mdiHeart" /> in Tallinn
119122
<v-img
@@ -152,7 +155,7 @@ function goToPricing() {
152155
</p>
153156
</v-col>
154157
<v-col cols="12" md="3">
155-
<h2 class="text-h6 mb-2">Resources</h2>
158+
<h2 class="text-headline-small mb-2">Resources</h2>
156159
<ul style="list-style: none" class="pa-0">
157160
<li class="mb-2">
158161
<a
@@ -192,7 +195,7 @@ function goToPricing() {
192195
</ul>
193196
</v-col>
194197
<v-col cols="12" md="3">
195-
<h2 class="text-h6 mb-2">Developers</h2>
198+
<h2 class="text-headline-small mb-2">Developers</h2>
196199
<ul style="list-style: none" class="pa-0">
197200
<li class="mb-2">
198201
<a
@@ -236,7 +239,7 @@ function goToPricing() {
236239
</ul>
237240
</v-col>
238241
<v-col cols="12" md="3">
239-
<h2 class="text-h6 mb-2">Legal</h2>
242+
<h2 class="text-headline-small mb-2">Legal</h2>
240243
<ul style="list-style: none" class="pa-0">
241244
<li class="mb-2">
242245
<NuxtLink

web/app/pages/billing/index.vue

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ onMounted(async () => {
5858
<VContainer class="mt-16">
5959
<VRow>
6060
<VCol cols="12" md="8" offset-md="2">
61-
<h4 class="text-h4 mb-3">Usage</h4>
61+
<h4 class="text-headline-large mb-3">Usage</h4>
6262
<p class="text-medium-emphasis">
6363
Your current billing period usage and limits.
6464
</p>
@@ -71,36 +71,40 @@ onMounted(async () => {
7171
<VRow>
7272
<VCol cols="6" md="3">
7373
<div class="text-center">
74-
<p class="text-h4 text-primary">
74+
<p class="text-headline-large text-primary">
7575
{{ usage.sent_messages ?? 0 }}
7676
</p>
77-
<p class="text-medium-emphasis text-subtitle-2">
77+
<p class="text-medium-emphasis text-title-medium">
7878
Messages Sent
7979
</p>
8080
</div>
8181
</VCol>
8282
<VCol cols="6" md="3">
8383
<div class="text-center">
84-
<p class="text-h4 text-primary">
84+
<p class="text-headline-large text-primary">
8585
{{ usage.received_messages ?? 0 }}
8686
</p>
87-
<p class="text-medium-emphasis text-subtitle-2">
87+
<p class="text-medium-emphasis text-title-medium">
8888
Messages Received
8989
</p>
9090
</div>
9191
</VCol>
9292
<VCol cols="6" md="3">
9393
<div class="text-center">
94-
<p class="text-h4">{{ usage.total_messages ?? 0 }}</p>
95-
<p class="text-medium-emphasis text-subtitle-2">
94+
<p class="text-headline-large">
95+
{{ usage.total_messages ?? 0 }}
96+
</p>
97+
<p class="text-medium-emphasis text-title-medium">
9698
Total Messages
9799
</p>
98100
</div>
99101
</VCol>
100102
<VCol cols="6" md="3">
101103
<div class="text-center">
102-
<p class="text-h4">{{ usage.message_limit ?? 200 }}</p>
103-
<p class="text-medium-emphasis text-subtitle-2">
104+
<p class="text-headline-large">
105+
{{ usage.message_limit ?? 200 }}
106+
</p>
107+
<p class="text-medium-emphasis text-title-medium">
104108
Monthly Limit
105109
</p>
106110
</div>
@@ -120,7 +124,7 @@ onMounted(async () => {
120124
</VCardText>
121125
</VCard>
122126

123-
<h4 class="text-h4 mb-3 mt-8">Upgrade Plan</h4>
127+
<h4 class="text-headline-large mb-3 mt-8">Upgrade Plan</h4>
124128
<p class="text-medium-emphasis mb-4">
125129
Upgrade your plan to send and receive more SMS messages per
126130
month.
@@ -132,8 +136,8 @@ onMounted(async () => {
132136
<VCardTitle>Pro Plan</VCardTitle>
133137
<VCardSubtitle>Up to 5,000 messages/month</VCardSubtitle>
134138
<VCardText>
135-
<p class="text-h4 text-primary mb-2">
136-
$10<span class="text-body-1">/month</span>
139+
<p class="text-headline-large text-primary mb-2">
140+
$10<span class="text-body-large">/month</span>
137141
</p>
138142
<ul class="ml-4">
139143
<li>5,000 SMS messages per month</li>
@@ -154,7 +158,7 @@ onMounted(async () => {
154158
<VCardTitle>Enterprise Plan</VCardTitle>
155159
<VCardSubtitle>Custom message limits</VCardSubtitle>
156160
<VCardText>
157-
<p class="text-h4 mb-2">Custom</p>
161+
<p class="text-headline-large mb-2">Custom</p>
158162
<ul class="ml-4">
159163
<li>Up to 200,000+ SMS messages per month</li>
160164
<li>Dedicated support</li>

web/app/pages/blog/end-to-end-encryption-to-sms-messages.vue

Lines changed: 104 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,122 @@
11
<script setup lang="ts">
22
definePageMeta({ layout: "website" });
3+
34
useHead({
4-
title: "How to Add End-to-End Encryption to SMS Messages - httpSMS",
5+
title: "End-to-End Encryption to SMS Messages - httpSMS",
56
});
67
</script>
78

89
<template>
910
<VContainer>
1011
<VRow>
1112
<VCol cols="12" md="8" offset-md="2">
12-
<h1 class="text-h3 mb-2">
13-
How to Add End-to-End Encryption to SMS Messages
13+
<h1 class="text-display-small mb-2">
14+
End-to-End Encryption to SMS Messages
1415
</h1>
15-
<BlogInfo date="September 15, 2023" read-time="5 min read" />
16+
<BlogInfo date="January 21, 2024" read-time="10 min read" />
1617
<VDivider class="my-6" />
17-
<p class="text-body-1 mb-4">
18-
Privacy is fundamental. With httpSMS, you can add end-to-end
19-
encryption to your SMS messages using military-grade AES-256
20-
encryption. This ensures that only you and the intended recipient can
21-
read the message content.
18+
19+
<p class="text-body-large mb-6">
20+
We have added support for end-to-end encryption for SMS messages so
21+
that no one can see the content of the messages you send using httpSMS
22+
except you. You setup an encryption key which you use to encrypt your
23+
messages before making an API request to httpSMS and you also use the
24+
same key to decrypt the messages you receive from httpSMS via our
25+
webhook events. We are using the AES 256 encryption algorithm to
26+
encrypt and decrypt the messages.
2227
</p>
23-
<h2 class="text-h5 mt-6 mb-3">How It Works</h2>
24-
<p class="text-body-1 mb-4">
25-
When you enable encryption in the httpSMS Android app, all messages
26-
are encrypted before being sent. The encryption key is derived from a
27-
passphrase that you set in the app settings. Both sender and receiver
28-
must use the same passphrase.
28+
29+
<h2 class="text-headline-medium mb-4">Setup your encryption key</h2>
30+
<p class="text-body-large mb-6">
31+
Download and install the httpSMS Android app on your phone and set
32+
your encryption key under the App Settings page of the app.
33+
<a
34+
href="https://github.com/NdoleStudio/httpsms/releases/latest/download/HttpSms.apk"
35+
target="_blank"
36+
rel="noopener"
37+
>Download the Android app</a
38+
>.
39+
</p>
40+
41+
<h2 class="text-headline-medium mb-4">Encrypt your SMS message</h2>
42+
<p class="text-body-large mb-4">
43+
We are using AES-256 to encrypt your SMS messages. The encryption key
44+
is hashed with SHA-256 before use and the initialization vector (IV)
45+
is generated for each message. The IV is appended to the encrypted
46+
payload before the final value is base64 encoded.
2947
</p>
30-
<h2 class="text-h5 mt-6 mb-3">Setup Steps</h2>
31-
<ol class="ml-6 mb-4">
32-
<li class="mb-2">Open the httpSMS app on your Android phone</li>
33-
<li class="mb-2">Go to Settings → Encryption</li>
34-
<li class="mb-2">Enable encryption and set your passphrase</li>
35-
<li class="mb-2">Share the passphrase securely with the recipient</li>
36-
<li class="mb-2">
37-
The recipient enables encryption with the same passphrase
38-
</li>
39-
</ol>
40-
<p class="text-body-1 mb-4">
41-
Messages are encrypted using AES-256 in CFB mode with a SHA-256
42-
derived key. The encryption happens on-device before the message is
43-
sent to the httpSMS API.
48+
<pre
49+
class="pa-4 mb-6 rounded bg-surface-variant overflow-x-auto"
50+
><code class="language-javascript text-body-medium">import HttpSms from "httpsms"
51+
52+
const client = new HttpSms("" /* API Key from https://httpsms.com/settings */)
53+
54+
const key = "Password123"
55+
56+
const encryptedMessage = client.cipher.encrypt(key, "This is a sample text message")
57+
58+
// The encrypted message looks like this
59+
// Qk3XGN5+Ax38Ig01m4AqaP6Y0b0wYpCXtx59sU23uVLWUU/c7axF7LozDg==</code></pre>
60+
61+
<h2 class="text-headline-medium mb-4">Send an encrypted message</h2>
62+
<p class="text-body-large mb-4">
63+
Once you have encrypted the content, send it to the API with
64+
<code>encrypted: true</code>. This flag tells the Android app to
65+
decrypt the message before sending it to the recipient.
4466
</p>
67+
<pre
68+
class="pa-4 mb-6 rounded bg-surface-variant overflow-x-auto"
69+
><code class="language-javascript text-body-medium">import HttpSms from "httpsms"
70+
71+
client.messages.postSend({
72+
content: encryptedMessage,
73+
from: '+18005550199',
74+
encrypted: true,
75+
to: '+18005550100',
76+
})
77+
.then((message) =&gt; {
78+
console.log(message.id) // log the ID of the sent message
79+
})</code></pre>
80+
81+
<h2 class="text-headline-medium mb-4">
82+
Receiving an encrypted message
83+
</h2>
84+
<p class="text-body-large mb-4">
85+
When your Android phone receives an SMS message, the app encrypts the
86+
message with the encryption key configured on the phone before
87+
delivering it to your webhook endpoint.
88+
</p>
89+
<pre
90+
class="pa-4 mb-6 rounded bg-surface-variant overflow-x-auto"
91+
><code class="language-json text-body-medium">{
92+
"event": "message.phone.received",
93+
"data": {
94+
"content": "bdmZ7n6JVf/ST+SoNlSaOGUL1DcL5705ETw8GAB4llYBgE9HOOL+Pu/h+w==",
95+
"encrypted": true,
96+
"from": "+18005550100",
97+
"id": "msg_123",
98+
"to": "+18005550199"
99+
}
100+
}</code></pre>
101+
<pre
102+
class="pa-4 mb-6 rounded bg-surface-variant overflow-x-auto"
103+
><code class="language-javascript text-body-medium">import HttpSms from "httpsms"
104+
105+
const client = new HttpSms("" /* API Key from https://httpsms.com/settings */)
106+
107+
const encryptedMessage = "bdmZ7n6JVf/ST+SoNlSaOGUL1DcL5705ETw8GAB4llYBgE9HOOL+Pu/h+w=="
108+
const encryptionkey = "Password123"
109+
const decryptedMessage = client.cipher.decrypt(encryptionkey, encryptedMessage)
110+
111+
// This is a test text message</code></pre>
112+
113+
<p class="text-body-large mb-6">
114+
Congratulations, you have successfully configured your Android phone
115+
to send and receive SMS messages with end-to-end encryption. Don't
116+
hesitate to contact us if you face any problems while following this
117+
guide.
118+
</p>
119+
45120
<BlogAuthorBio />
46121
</VCol>
47122
</VRow>

0 commit comments

Comments
 (0)