Updated useraccounts, character settings to Polymer 1

This commit is contained in:
Stefan Zermatten
2017-01-19 15:43:48 +02:00
parent 137a94f251
commit c4a488a176
81 changed files with 570 additions and 2019 deletions

View File

@@ -0,0 +1,4 @@
.profile #at-nav-button {
color: #212121;
color: rgba(0,0,0,0.87);
}

View File

@@ -1,22 +1,47 @@
<template name="profile">
{{#with currentUser}}
<app-toolbar class="blue-grey white-text">
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div id="username" class="clickable" flex>
{{profileName}}
</div>
</app-toolbar>
<div id="userProfile" class="padded">
<div>
<h2>Email</h2>
{{#each emails}}
<div layout horizontal>
<p>{{address}}</p>
<app-header-layout has-scrolling-region fullbleed class="profile">
<app-header class="app-grey white-text" fixed effects="waterfall">
<app-toolbar class="app-grey white-text">
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div flex>Account</div>
</app-toolbar>
</app-header>
<div class="layout vertical center">
<paper-material style="margin-top: 8px; padding: 16px; background: #fff;">
<table>
<tr>
<td>Username</td>
<td>{{profileName}}</td>
<td>
<paper-icon-button icon="create" class="username-edit" style="background: #fff;">
</paper-icon-button>
</td>
</tr>
<tr>
<td>Email</td>
<td class="layout vertical">
{{#each emails}}
<div>
{{address}}
{{#if verified}}
<span>
<iron-icon icon="check"></iron-icon>
<paper-tooltip>Verified</paper-tooltip>
</span>
{{/if}}
</div>
{{/each}}
</td>
<td></td>
</tr>
</table>
<div style="max-width: 250px">
{{> atForm}}
</div>
{{/each}}
{{> atNavButton }}
</paper-material>
</div>
</div>
{{> atForm}}
{{> atNavButton }}
</app-header-layout>
{{/with}}
</template>

View File

@@ -8,15 +8,15 @@ Template.profile.helpers({
});
Template.profile.events({
"tap #username": function(){
"click .username-edit": function(event, instance){
if (this._id === Meteor.userId()){
GlobalUI.showDialog({
heading: "Change Username",
pushDialogStack({
template: "usernameDialog",
element: event.currentTarget,
});
}
},
"tap #verifyEmail": function(event, instance){
"click #at-resend-verification-email": function(event, instance){
if (!Meteor.user()) return;
Accounts.sendVerificationEmail(Meteor.userId(), this.address);
GlobalUI.toast({

View File

@@ -1,8 +1,24 @@
<template name="usernameDialog">
<div>
<paper-input id="usernameInput" label="Username" value={{profileName}}></paper-input>
<div class="fit layout vertical">
<app-header-layout has-scrolling-region class="feedback flex">
<app-header fixed effects="waterfall">
<app-toolbar>
<div main-title>Feedback</div>
</app-toolbar>
</app-header>
<div class="form flex">
<div>
<paper-input id="usernameInput" label="Username" value={{profileName}} invalid={{errorMessage}} error-message={{errorMessage}}></paper-input>
</div>
</div>
</app-header-layout>
<div class="buttons layout horizontal end-justified">
<paper-button id="cancelButton">
Cancel
</paper-button>
<paper-button id="changeButton" disabled={{invalid}}>
Change Username
</paper-button>
</div>
</div>
<div style="color: red;" class="vertMargin">{{errorMessage}}</div>
<paper-button id="cancelButton" affirmative> Cancel </paper-button>
<paper-button id="changeButton" disabled={{invalid}} affirmative> Change Username </paper-button>
</template>

View File

@@ -4,7 +4,7 @@ var getUsername = function() {
};
Template.usernameDialog.onCreated(function() {
this.errorMessage = new ReactiveVar("");
this.errorMessage = new ReactiveVar();
this.username = new ReactiveVar(getUsername());
});
@@ -32,12 +32,13 @@ Template.usernameDialog.events({
if (userId && userId !== Meteor.userId())
instance.errorMessage.set("This username is taken");
else
instance.errorMessage.set("");
instance.errorMessage.set();
});
}
},
"tap #changeButton": function(event, instance){
"click #changeButton": function(event, instance){
var username = instance.find("#usernameInput").value;
popDialogStack();
username = username.trim().replace(/\s+/gm, " ");
var profileName = username;
username = username.toLowerCase().replace(/\s+/gm, "");
@@ -46,4 +47,7 @@ Template.usernameDialog.events({
{$set: {username: username, "profile.username": profileName}}
);
},
"click #cancelButton": function(event, instance){
popDialogStack();
},
});

View File

@@ -1,13 +1,16 @@
<template name="titledAtForm">
<app-toolbar class="app-grey white-text">
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div flex>
<app-header-layout has-scrolling-region fullbleed>
<app-header class="app-grey white-text" fixed effects="waterfall">
<app-toolbar class="app-grey white-text">
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
</app-toolbar>
</app-header>
<div>
<div class="layout vertical center" style="padding: 16px">
<paper-material class="white" style="max-width: 400px;">
{{> atForm}}
</paper-material>
</div>
</div>
</app-toolbar>
<div class="scroll-y padded" fit layout vertical center center-justified>
<paper-material class="white" style="max-width: 400px;">
{{> atForm}}
</paper-material>
</div>
</app-header-layout>
</template>