Skip to content

Commit

Permalink
Add Singlelink watermark (opt-out option too)
Browse files Browse the repository at this point in the history
  • Loading branch information
@NavidK0
NavidK0 committed Jan 13, 2021
1 parent e469e6a commit b084df7
Show file tree
Hide file tree
Showing 13 changed files with 169 additions and 190 deletions.
3 changes: 2 additions & 1 deletion client/@types/singlelink.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ interface Profile {
headline: string,
handle: string,
subtitle: string,
visibility: string
visibility: string,
showWatermark: boolean
}

interface LinkVisit {
Expand Down
44 changes: 36 additions & 8 deletions client/components/profile/UserProfileView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div
id="user-profile-view"
class="relative flex min-h-screen w-screen bg-gray-100 justify-center w-full sl-bg"
id="user-profile-view"
class="relative flex min-h-screen w-screen bg-gray-100 justify-center w-full sl-bg"
>
<section class="flex flex-col p-6 pt-8 pb-8 items-center text-center max-w-sm w-full">
<component :is="'style'" v-if="theme">
Expand Down Expand Up @@ -41,10 +41,10 @@
</component>

<img
v-if="profile.imageUrl || user.avatarUrl || user.emailHash"
class="nc-avatar mb-2"
:src="profile.imageUrl || user.avatarUrl || 'https://www.gravatar.com/avatar/' + user.emailHash"
alt="profile image"
v-if="profile.imageUrl || user.avatarUrl || user.emailHash"
class="nc-avatar mb-2"
:src="profile.imageUrl || user.avatarUrl || 'https://www.gravatar.com/avatar/' + user.emailHash"
alt="profile image"
>
<h1 class="text-black font-semibold text-2xl sl-headline">
{{ profile.headline || user.name }}
Expand All @@ -55,8 +55,8 @@

<a v-for="link in links" :key="link.id" :href="link.url" class="w-full">
<div
class="rounded shadow bg-white p-4 w-full font-medium mb-3 nc-link sl-item flex items-center justify-center flex-col"
:style="link.customCss"
class="rounded shadow bg-white p-4 w-full font-medium mb-3 nc-link sl-item flex items-center justify-center flex-col"
:style="link.customCss"
>
<span class="font-medium text-gray-900 sl-label">{{ link.label }}</span>
<span v-if="link.subtitle" class="text-sm text-gray-700 sl-link-subtitle mt-1">{{
Expand All @@ -65,6 +65,28 @@
</div>
</a>

<div v-if="loaded && !user.emailHash">
<h1 class="text-black font-semibold text-2xl sl-headline">
Error 404
</h1>
<h3 class="text-gray-600 mb-4 sl-subtitle">
Oops! This profile doesn't exist or isn't public!
<br>
</h3>
</div>

<div v-if="loaded && profile.showWatermark">
<p v-if="theme" :style="`color:${theme.colors.text.primary}`" class="mt-4 text-sm">
Proudly built with Singlelink 🔗
</p>
<p v-else style="color:rgba(0,0,0,1);" class="mt-4 text-sm">
Proudly built with Singlelink 🔗
</p>
<a class="text-indigo-600 hover:underline text-sm" href="https://app.singlelink.co/create-account">Create your
free profile in seconds</a>
<base target="_blank">
</div>

<div v-html="profile.customHtml"/>
<div v-if="theme" v-html="theme.customHtml"/>
</section>
Expand All @@ -89,12 +111,14 @@ export default Vue.extend({
data() {
return {
loaded: false,
profile: {
customHtml: null,
customCss: null,
imageUrl: null,
headline: null,
subtitle: null,
showWatermark: true
},
user: {
name: null,
Expand Down Expand Up @@ -139,6 +163,8 @@ export default Vue.extend({
console.log('Error getting profile');
console.log(err);
}
this.loaded = true;
},
async getAuthenticatedProfile() {
Expand All @@ -157,6 +183,8 @@ export default Vue.extend({
console.log('Error getting profile');
console.log(err);
}
this.loaded = true;
}
}
});
Expand Down
3 changes: 2 additions & 1 deletion client/layouts/dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -411,7 +411,8 @@ export default Vue.extend({
imageUrl: "",
subtitle: "",
themeId: "",
visibility: ""
visibility: "",
showWatermark: true
});
}
},
Expand Down
44 changes: 22 additions & 22 deletions client/pages/dashboard/admin.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -345,6 +345,27 @@ export default Vue.extend({
},
methods: {
async getUserData() {
try {
const token = this.$store.getters['auth/getToken'];
const userResponse = await this.$axios.$post('/user', {
token
});
const profileResponse = await this.$axios.$post('/profile/active-profile', {
token
});
this.user = userResponse;
this.user.activeProfile = profileResponse;
this.originalHandle = this.user.activeProfile.handle;
} catch (err) {
console.log('Error getting user data');
console.log(err);
}
},
async selectTheme(id: string | null) {
try {
await this.$axios.$post<Profile>('/profile/activate-theme', {
Expand Down Expand Up @@ -522,28 +543,7 @@ export default Vue.extend({
customCss: undefined,
customHtml: undefined,
};
},
async getUserData() {
try {
const token = this.$store.getters['auth/getToken'];
const userResponse = await this.$axios.$post('/user', {
token
});
const profileResponse = await this.$axios.$post('/profile/active-profile', {
token
});
this.user = userResponse;
this.user.activeProfile = profileResponse;
this.originalHandle = this.user.activeProfile.handle;
} catch (err) {
console.log('Error getting user data');
console.log(err);
}
},
}
}
});
</script>
Expand Down
99 changes: 74 additions & 25 deletions client/pages/dashboard/settings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@
placeholder="e.g. https://uifaces.co/our-content/donated/rSuiu_Hr.jpg"
>
</div>

<div class="flex flex-col w-full mb-6">
<label class="font-medium text-sm text-gray-800" for="custom_domain">Custom Domain (hostname only) (🐳 Whales
only!)</label>
Expand All @@ -99,6 +100,28 @@
placeholder="e.g. neutroncreative.com (no http/https)"
>
</div>

<!-- Watermark Toggle -->
<div class="flex flex-row w-full mb-6">
<input
id="themeGlobal"
v-model="user.activeProfile.showWatermark"
type="checkbox"
class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"
>

<label for="themeGlobal" class="ml-2 block text-md leading-5 text-gray-700">
Display Watermark ("Proudly built with Singlelink!")
<br>
<span
v-show="showWatermarkNotice"
style="color: rgba(0, 0, 0, .65); font-size: 13px"
>
This is completely optional, but it really helps us out! Otherwise, mind spreading the word about Singlelink?
</span>
</label>
</div>

<button
type="button"
class="inline-flex p-3 text-sm text-white text-center bg-indigo-600 hover:bg-indigo-700 rounded font-semibold w-auto max-w-xs justify-center align-center"
Expand All @@ -125,6 +148,7 @@
class="p-2 mt-2 text-sm border-solid border-gray-300 rounded border"
type="email"
placeholder="e.g. youremail@singlelink.co"
aria-label="password reset email"
>
</div>
<button
Expand Down Expand Up @@ -226,6 +250,7 @@ export default Vue.extend({
data() {
return {
loaded: false,
resetPasswordModalActive: false,
deleteProfileModalActive: false,
originalHandle: '',
Expand All @@ -238,20 +263,64 @@ export default Vue.extend({
subtitle: '',
handle: '',
customDomain: '',
visibility: ''
visibility: '',
showWatermark: false,
}
},
error: '',
passwordError: '',
passwordEmail: ''
passwordEmail: '',
showWatermarkNotice: false
};
},
watch: {
'user.activeProfile.showWatermark': {
handler(val) {
this.showWatermarkNotice = (!val && this.loaded);
}
}
},
async mounted() {
await this.getUserData();
this.loaded = true;
},
methods: {
async getUserData() {
try {
const token = this.$store.getters['auth/getToken'];
const userResponse = await this.$axios.$post('/user', {
token
});
const profileResponse = await this.$axios.$post('/profile/active-profile', {
token
});
this.user.name = userResponse.name;
this.user.emailHash = userResponse.emailHash;
this.user.activeProfile.imageUrl = profileResponse.imageUrl;
this.user.activeProfile.headline = profileResponse.headline;
this.user.activeProfile.subtitle = profileResponse.subtitle;
this.user.activeProfile.handle = profileResponse.handle;
this.user.activeProfile.customDomain = profileResponse.customDomain;
this.user.activeProfile.visibility = profileResponse.visibility;
this.user.activeProfile.showWatermark = profileResponse.showWatermark;
this.$set(this.user.activeProfile, 'user.activeProfile', profileResponse);
this.originalHandle = this.user.activeProfile.handle;
} catch (err) {
console.log('Error getting user data');
console.log(err);
}
},
async saveChanges() {
try {
await this.$axios.$post('/profile/update', {
Expand All @@ -261,7 +330,8 @@ export default Vue.extend({
subtitle: this.user.activeProfile.subtitle ?? null,
handle: this.user.activeProfile.handle ?? null,
visibility: this.user.activeProfile.visibility ?? null,
customDomain: this.user.activeProfile.customDomain ?? null
customDomain: this.user.activeProfile.customDomain ?? null,
showWatermark: this.user.activeProfile.showWatermark ?? true,
});
if (process.client) {
Expand Down Expand Up @@ -326,27 +396,6 @@ export default Vue.extend({
location.reload();
},
async getUserData() {
try {
const token = this.$store.getters['auth/getToken'];
const userResponse = await this.$axios.$post('/user', {
token
});
const profileResponse = await this.$axios.$post('/profile/active-profile', {
token
});
this.user = userResponse;
this.user.activeProfile = profileResponse;
this.originalHandle = this.user.activeProfile.handle;
} catch (err) {
console.log('Error getting user data');
console.log(err);
}
},
async requestPasswordReset() {
try {
const request = await this.$axios.post('/user/request-reset-password', {
Expand Down Expand Up @@ -374,7 +423,7 @@ export default Vue.extend({
throw err;
}
},
}
}
});
</script>
Expand Down
Loading

0 comments on commit b084df7

Please sign in to comment.