Sign In/Sign up Dialogs

[Niustein]

Creates the frontend for the login/registration form.

When not logged in: 2 buttons appear at the top right of the header to sign up and to login. Clicking on these opens a dialog box for the relevant page.

Login requires username and password to not be empty. RememberMe checkbox can be in either state Registration requires username and password to not be empty, although email is optional.

Unsuccessful attempts to login/register shows a notification that username/password/email are incorrect as well as a snackbar informing the user that login/registration failed

Successfully logging in or registering opens a snackbar informing the user "Welcome to MemePlace!"

Also upon successful login, top signup/login buttons are replaced by a User: label as well as a logout button

Clicking on the logout button restores the signup/login buttons and logs the user out.

Cookies implemented, will remember you for 1 year (refreshes upon re-entry)

Minor fix for the future: "Flash Of Unstyled Content". Upon re-entering with a stored cookie, the header template will begin loading elements before updating to show the User and Logout button. ~0.2s then a flash.

[bandgeekdante]

What happened to utils.ts? I'm trying to compile this PR but utils.ts seems to be just gone

[Niustein]

I created this branch quite a few behind the current master branch before utils was added. Although mine in particular shouldn't require utils to run.

[bandgeekdante]

Okay, looks like Angular just doesn't like it when I switch between branches while keeping the app running... Anyway regarding the dialogs I'm not a fan of the vague error messages, e.g. "Invalid username/email" for registering and "Username or Password is invalid". Looking at the code structure it would require some frontend and backend tweaking to get the messages to be more informative (e.g. "Username is taken"/"Username cannot contain special characters"/"Username does not exist"/"Incorrect password") but that can probably be a lower priority task

[Niustein]

Yeah Stepan mentioned it above in the register case that I should be able to just call the error.toString() but unfortunately at the moment that doesn't seem to work as expected and currently will just say error: [object Object]. I also didn't consider the special character case... hmm

From an error message standpoint I believe it would come down to tweaking the backend and figuring out why it's saying Error: [object Object] and breaking it down more.

[Step7750]

Yeah, the API service should have an informative error message returned.

For the object error, that means that it is printing an object rather than the text in it. Could you commit your latest code for it?

[Niustein]

Latest version is committed.

[Step7750]

I was just refering to users, you're good :)

On Apr 6, 2018, at 11:55 PM, Niustein notifications@github.com wrote:

@Niustein commented on this pull request.

In src/app/login-form/login-form-register.component.ts:

+@Component({

• selector: app-login-form-register.component,
• templateUrl: 'login-form-register.component.html',
• styleUrls: ['./login-form.component.scss'], +}) +export class LoginFormRegisterComponent {
• constructor(public dialogRef: MatDialogRef,
• private userService: UserService,
• public snackBar: MatSnackBar,
• @Inject(MAT_DIALOG_DATA) public data: any) {
• }
• usernameRegisterText: string;
• passwordRegisterText: string;
• emailText: string;
• users: User = { I can remove users because we've made it public (and I wasn't using the returned user data to do anything)

Don't I still need to keep the decleration for usernametext/passwordtext/emailtext? Otherwise when i call it in the if(!this.emailText) then it won't exist in the file.

I could very well be missing an easier way to deal with that though.

— You are receiving this because your review was requested. Reply to this email directly, view it on GitHub, or mute the thread.

[Step7750]

Could you please update from master and resolve conflicts?