In the next phase of my chat room application I want to work with user accounts.
I want to do the following.
Require user to create an account or login to post a message (when logged out the message area will be replaced with a bootstrap alert box)
Once logged in, the name field will use the username
It would also be nice to allow users to set their username rather than it be their email address.
I have been looking through questions and the parties tutorial but I have not yet been able to reverse engineer the functionality in my instance. Would anyone be willing to assist me?
Project files - https://github.com/SmashBrando/chatroom
Project - http://smashchat.meteor.com/
Answered:
To display content if the user is logged in I added:
{{#if currentUser}}
{{> entry}}
{{else}}
<div class="alert alert-error">
You Must Login To Post a Message!
</div>
{{/if}}
To set the username as the message name (the profile name a user wants to be known as) I added the following code to the input area.
<input type="text" class="span6" id="name" value="{{currentUser.username}}">
I will be working on a future iteration that does not use the input box and uses a variable (once I figure out how to do that).
you can use the handlebars helper and if/else to show certain items
{{#if currentUser}}
<logged in content>
{{else}}
<not logged in content>
{{/if}}
for the user's name, you'll have to use another field for their real name, usually within the profile eg. user.profile.name
assuming the user's name has been set, you should then be able to do something like
{{#if currentUser}}
{{loginButtons}}
{{else}}
{{currentUser.profile.name}}
{{/if}}
Related
In Bigcommerce's Stencil object model docs : here is the link
I am not seeing any reference to a basic page's id. Though I can see the "pageID" shown when hovering over the page name in the admin interface.
Is this pageID value accessible through Handlebars at all?
Currently it seems it's only possible to get the pageid for the page you are viewing. This probably isn't what you need. You probably want the pageid for every page in the pages list. Hopefully they can add that soon. However, just in case it helps you, this is how I'm getting the pageid for the page that is currently being viewed:
{{#each breadcrumbs}}
{{#if #last}}
{{this.pageid}}
{{/if}}
{{/each}}
I'm using this method to load a specific stylesheet based on the page. I have a mapping of stylesheets for each page in config.json:
"settings": {
"page_stylesheets": {
"151": {"file_name": "my-custom-stylesheet.css"}
}
I added a block in the of templates/layouts/base.html:
{{#block "pageStyles"}} {{/block}}
Then, at the top of my templates/pages/page.html file, I have the following:
{{#partial "pageStyles"}}
{{#each breadcrumbs}}
{{#if #last}}
{{#with (lookup ../../theme_settings.page_stylesheets this.pageid)}}
{{{stylesheet (concat 'assets/css/' this.file_name)}}}
{{/with}}
{{/if}}
{{/each}}
{{/partial}}
I am very new to Meteor, I have a simple problem that can't find a right answer too.
I want to show a component only if they are logged In.
I tried to do it this way
Template.newPost.rendered= function(){
if(Meteor.user()){
$('#submit-btn').show();
$('#submit-text').hide();
}
else{
$('#submit-btn').hide();
$('#submit-text').show();
}
}
but problem is it get rendered before the Meteor.user() get loaded.
I think I am doing this the hard way is there any reactive way to do this simpler? if not, how can I make this approach work?
Thanks
If you are using blaze, you can skip all that and just use the currentuser helper in your template like this:
{{#if currentUser}}
<button id="submit-btn">Click me</button>
{{else}}
<p id="submit-text">Please log in to submit</p>
{{/if}}
I am new to Meteor. What I want is when I go to the page if the user is logged in, show "Logged In" and if not show "Not Logged In", here the is snippet I tried that,
{{#if currentUser}} Logged In {{else}} Not Logged In {{/if}}
So when a "signed up" user comes I expect, directly showing "Logged In". But what happen is it shows "Not Logged In" first and then after about a second shows "Logged In". How to avoid this?
Thanks in advance
That's because the user is still logging in. I recommend you define a helper as such:
Template.myTemplateName.helpers({
authenticated: function() {
return Meteor.user() || Meteor.loggingIn();
}
})
and then use it like you want:
{{#if authenticated}} Logged In {{else}} Not Logged In {{/if}}
Let's say we have a classic form - a few input fields that must meet some pattern. When user enters incorrect data and submits this form all the fields that are filled wrong are marked as invalid and appropriate error message is provided for every incorrect field.
I need to make this form WAI ARIA compliant, so that after form submission the accessibility tools will see these errors first.
I've found solution that implements it by dynamic html modification using JS (http://jsfiddle.net/nS3TU/1/):
HTML:
<form id="signup" method="post" action="">
<p id="errors" role="alert" aria-live="assertive"></p>
<p>
<label for="first">First Name (required)</label>
<input type="text" id="first">
</p>
<p>
<input type="submit" id="button" value="Submit">
</p>
</form>
JS:
$('#signup').submit(function () {
$('#errors').html('');
if ($('#first').val() === '') {
$('#errors').append('Please enter your first name.');
}
return false;
});
Here validation does not reload page, and the "alert" area is dynamically modified.
In my case the page is reloaded on validation phase, and I don't know how to make aria alert work. After hours of investigation I didn't find any solution at all. Any ideas?
I think there's a simple solution, but you'll have to say if it covers your cases.
I would be careful about making something "WAI-ARIA compliant", that should not be a goal in itself. WAI-ARIA is intended to map web pages to application roles, but only applications are actually suitable for this treatment.
For a classic web-form, you do not need WAI-ARIA at all. The alert aspect would not work if the page reloads, as it would only alert if the content changed dynamically.
If the page does not reload (as per the example), you would want to ensure that submitting the form doesn't just leave the user sitting on the button. You can manage the focus to achieve this:
$('#errors').append('Please enter your first name.');
// Make the error message focusable, but not in the default tab-order:
$('#errors').attr('tabindex', '-1').css('outline', '0');
// Set the focus on the (first) error message:
$('#errors').focus();
JSFiddle updated here.
A couple of articles on error-message best-practices your question reminded me of, which would help extend this answer to other use-cases:
Displaying error messages
Accessible form validation.
I'm pretty new to ARIA and the roles, states, and properties it provides. I understand that there are different types of roles (e.g. landmarks, regions, etc) but none of them represent areas like "login region" or something similar. I wonder if there are ways to specify the grouping of this information so that the screen reader can read out this information for the users? E.g. "Login region. User name ... Password ..."
If this is not possible with ARIA, what is the general way of doing it in HTML?
Thanks in advance
WAI-ARIA is generally for dynamic content, like a news headline ticker, and not for static content, like a login form. Static content is best achieved using plain HTML.
Assuming you have a page where the login form is always displayed, the following should help.
For a login form, from an accessibility point of view, you should primarily ensure that the form fields are correctly labelled. A fieldset\legend is really optional for such as small form.
Coding labels up correctly means using matching for\id attributes e.g.
<label for="loginName">Login name</label>
<input type="text" id="loginName" name="loginName" size="30" />
<label for="loginPassword">Login password</label>
<input type="password" id="loginPassword" name="loginPassword" size="10" />
This ensures that screenreader (blind) users can properly hear the form fields corresponding label read out. For other form elements, such as checkboxes and radio buttons, using correct labelling like this allows users with dexterity issues to click on the text label to toggle the form input (checkbox\radio button), meaning they have larger target area to click on the page.
To let the user know they were about to access a login form, you could use either a heading, or the fieldset\legendf combo e.g.
<h2>Login form</h2>
<FORM HERE>
Or
<fieldset>
<legend>Login form</legend>
<FORM HERE>
</fieldset>
Either of these would be fine, although the heading approach would create slightly less audio clutter for screenreader users (WIth a fieldset\legend, the legend is read out before each form field)
Yes and no. The form should be given a landmark role of "form". This allows the assistive technology to see the landmark for navigation purposes.
Refer to the spec.
While using the landmark will aid in navigating the page, the landmark itself won't produce the reading of the items in the form itself. Following the already known HTML practices mentioned will take care of the rest.