Improved Patreon linking

app/client/views/layout/layout.html

@@ -21,6 +21,9 @@
 					<a href="/account" style="text-decoration: underline; cursor: pointer; font-size: 16px;">
 						{{profileLink}}
 					</a>
+					<a href="/account" style="text-decoration: underline; cursor: pointer; font-size: 16px; margin-left: 8px;">
+						{{patreonTier}} tier
+					</a>
 				{{else}}
 					<a href="/sign-in" style="text-decoration: underline; cursor: pointer; font-size: 16px;">
 						Sign in

app/client/views/layout/layout.js

@@ -17,6 +17,20 @@ Template.appDrawer.helpers({
 		let post = PatreonPosts.findOne({}, {sort: {date: -1}});
 		return (post && post.link) || 'https://www.patreon.com/dicecloud';
 	},
+	patreonTier: function(){
+		let user = Meteor.user();
+		if (!user) return;
+		patreon = user.patreon;
+		if (!patreon) return "$0";
+		let entitledCents = patreon.entitledCents || 0;
+		if (patreon.entitledCentsOverride > entitledCents){
+			return "$" + (patreon.entitledCentsOverride / 100).toFixed(0);
+		} else if (patreon.entitledCents === undefined){
+			return "$0";
+		} else {
+			return "$" + (patreon.entitledCents / 100).toFixed(0);
+		}
+	},
 });
 
 let drawerLayout;

app/client/views/user/profile/profile.html

@@ -62,16 +62,32 @@
 								{{/if}}
 							</td>
 						</tr>
+						<tr>
+							<td>
+								Patreon
+							</td>
+							{{#if patreon.accessToken}}
+								<td>
+									{{tier}} tier
+								</td>
+								<td>
+									<paper-icon-button icon="refresh" class="refreshPatreon">
+									</paper-icon-button>
+								</td>
+							{{else}}
+								<td>
+									<a href="{{patreonLoginUrl}}">
+										<paper-button raised class="connectPatreon">
+											Connect Patreon account
+										</paper-button>
+									</a>
+								</td>
+							{{/if}}
+						</tr>
 					</table>
 					<div style="max-width: 250px">
 						{{> atForm state="signIn"}}
 					</div>
-					<div style="max-width: 250px; margin: 8px;">
-						Tier: {{tier}}
-						<a href="{{patreonLoginUrl}}">
-							Connect Patreon Account
-						</a>
-					</div>
 					{{> atNavButton }}
 				</paper-material>
 			</div>

app/client/views/user/profile/profile.js

@@ -1,9 +1,10 @@
 import { format as formatUrl } from 'url';
 
-const CLIENT_ID = "zv38izfGZDf8s_Z9BI5kICjGGnvs45PawHYu6cqsTqftwZ_5DZFqEGKZfdP8Q6I2";
+const CLIENT_ID = Meteor.settings.public.patreon.clientId;
 
 Template.profile.onCreated(function(){
 	this.showApiKey = new ReactiveVar(false);
+	this.loadingPatreon = new ReactiveVar(false);
 });
 
 Template.profile.helpers({
@@ -39,10 +40,17 @@ Template.profile.helpers({
 		if (!user) return;
 		patreon = user.patreon;
 		if (!patreon) return;
-		let tier = patreon.entitledCents || 0;
-		if (patreon.entitledCentsOverride > tier) tier = patreon.entitledCentsOverride;
-		return tier;
-	}
+		let entitledCents = patreon.entitledCents || 0;
+		if (Template.instance().loadingPatreon.get()){
+			return "loading..."
+		} else if (patreon.entitledCentsOverride > entitledCents){
+			return `$ ${(patreon.entitledCentsOverride / 100).toFixed(0)} (Overridden)"`;
+		} else if (patreon.entitledCents === undefined){
+			return "?";
+		} else {
+			return "$" + (patreon.entitledCents / 100).toFixed(0);
+		}
+	},
 });
 
 Template.profile.events({
@@ -70,4 +78,10 @@ Template.profile.events({
 		Meteor.call("generateMyApiKey");
 		instance.showApiKey.set(true);
 	},
+	"click .refreshPatreon": function(event, instance){
+		instance.loadingPatreon.set(true);
+		Meteor.call("updateMyPatreonDetails", (error) => {
+			instance.loadingPatreon.set(false);
+		});
+	},
 });