Updated useraccounts, character settings to Polymer 1
This commit is contained in:
4
rpg-docs/client/views/user/profile/profile.css
Normal file
4
rpg-docs/client/views/user/profile/profile.css
Normal file
@@ -0,0 +1,4 @@
|
||||
.profile #at-nav-button {
|
||||
color: #212121;
|
||||
color: rgba(0,0,0,0.87);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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();
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user