derek/MistoxCom-Angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Use www-form instead of json for DTO

Browse Source
This commit is contained in:
Derek Holloway
2025-06-19 21:34:33 -07:00
parent 2b264a75e9
commit d1ff89fb19
8 changed files with 101 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/MistoxWebsite.Client/src/app/pages/account/forgotpassword/forgotpassword.component.html
+1 -1
View File
@@ -1,7 +1,7 @@
<form class="center big-frame background-border" #accountForm="ngForm" (ngSubmit)="onSubmit()">
<div class="frame-item">
<input type="text" [(ngModel)]="user.email" name="email" placeholder=" " />
<input type="text" [(ngModel)]="email" name="email" placeholder=" " />
<label>Email</label>
</div>
src/MistoxWebsite.Client/src/app/pages/account/forgotpassword/forgotpassword.component.ts
+19 -5
View File
@@ -1,5 +1,5 @@
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { Account } from '../../../models/Account';
@@ -12,7 +12,7 @@ import { CommonModule } from '@angular/common';
imports: [ FormsModule, CommonModule ]
})
export class ForgotPasswordComponent {
user!: Account;
email: string = "";
errorMsgs: string[] = [];
returnURL: string = '/';
@@ -23,12 +23,26 @@ export class ForgotPasswordComponent {
});
}
sleep(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
onSubmit() {
// Clear errors
this.errorMsgs = [];
// Send to server and wait for response
this.errorMsgs.push("Waiting for login response from server");
this.http.post<Account>( "api/account/sendresetpassword", this.user, { responseType: 'json' } ).subscribe({
next: data => {
const body = new HttpParams()
.set("Email", this.email)
const headers = new HttpHeaders({
'Content-Type': 'application/x-www-form-urlencoded'
});
this.http.post<Account>( "https://mistox.com/api/account/sendresetpassword", body, { headers } ).subscribe({
next: async (data) => {
if (data.error.length === 0){
this.errorMsgs = ["Reset password send"];
await this.sleep(3000);
this.router.navigate([this.returnURL]);
}else{
this.errorMsgs = [];
@@ -36,7 +50,7 @@ export class ForgotPasswordComponent {
}
},
error: err => {
this.errorMsgs.push("HTTP Error: ", err);
console.log("HTTP Error Signing In: ", err);
}
});
}
src/MistoxWebsite.Client/src/app/pages/account/login/login.component.html
+3 -3
View File
@@ -2,12 +2,12 @@
<h3>Login</h3>
<div class="frame-item">
<input type="text" [(ngModel)]="user.userName" name="userName" placeholder=" " autocomplete="username" />
<input type="text" [(ngModel)]="UserName" name="userName" placeholder=" " autocomplete="username" />
<label>UserName</label>
</div>
<div class="frame-item">
<input type="password" [(ngModel)]="user.passwordHash" name="password" placeholder=" " autocomplete="current-password" />
<input type="password" [(ngModel)]="Password" name="password" placeholder=" " autocomplete="current-password" />
<label>Password</label>
</div>
@@ -19,7 +19,7 @@
<div class="frame-forgot">
<div class="sub-frame">
Stay Logged In
<input type="checkbox" [(ngModel)]="user.emailVerified" name="stayLoggedIn" />
<input type="checkbox" [(ngModel)]="StayLoggedIn" name="stayLoggedIn" />
</div>
<div class="sub-frame">
<a routerLink="/account/forgotpassword">Forgot Password</a>
src/MistoxWebsite.Client/src/app/pages/account/login/login.component.ts
+8 -11
View File
@@ -14,7 +14,9 @@ import { Authentication, SessionType } from '../../../services/Authentication';
standalone: true
})
export class LoginComponent {
user: Account = { id: -1, userName: "", email: "", passwordHash: "", emailVerified: false, error: "", siteData: { accountID: -1, failedPasswordLock: false, passwordAttempts: 0, role: "", currentPasswordAttempts: 0, emailToken: "" } };
UserName: string = "";
Password: string = "";
StayLoggedIn: boolean = false;
errorMsgs: string[] = [];
returnURL: string = '/';
@@ -28,26 +30,21 @@ export class LoginComponent {
onSubmit() {
this.errorMsgs = [];
if (!this.user.userName) {
if (!this.UserName) {
this.errorMsgs.push("The 'username' field is required");
}
if (!this.user.passwordHash) {
if (!this.Password) {
this.errorMsgs.push("The 'password' field is required");
}
if (this.user.passwordHash.length < 6) {
if (this.Password.length < 6) {
this.errorMsgs.push("Password must be at least 6 Characters long");
}
if (this.errorMsgs.length > 0) {
return;
}
let sType: SessionType = SessionType.Session;
if( this.user.emailVerified ){
sType = SessionType.Forever;
}
this.errorMsgs.push("Waiting for login response from server");
this.auth.Login(this.user, sType).subscribe(
this.errorMsgs.push("Waiting for response from server");
this.auth.Login(this.UserName, this.Password, this.StayLoggedIn).subscribe(
data => {
if (data.error.length === 0){
this.router.navigate([this.returnURL]);
src/MistoxWebsite.Client/src/app/pages/account/logout/logout.component.ts
-1
View File
@@ -14,7 +14,6 @@ import { Authentication } from '../../../services/Authentication';
standalone: true
})
export class LogoutComponent {
user: Account = { id: -1, userName: "", email: "", passwordHash: "", emailVerified: false, error: "", siteData: { accountID: -1, failedPasswordLock: false, passwordAttempts: 0, role: "", currentPasswordAttempts: 0, emailToken: "" } };
errorMsgs: string[] = [];
returnURL: string = '/';
src/MistoxWebsite.Client/src/app/pages/account/register/register.component.html
+6 -6
View File
@@ -2,28 +2,28 @@
<h3>Register</h3>
<div class="frame-item">
<input type="text" [(ngModel)]="user.userName" name="userName" placeholder=" " autocomplete="username" />
<input type="text" [(ngModel)]="userName" name="userName" placeholder=" " autocomplete="username" />
<label>UserName</label>
</div>
<div class="frame-item">
<input type="email" [(ngModel)]="user.email" name="password" placeholder=" " autocomplete="current-password" />
<input type="email" [(ngModel)]="email" name="email" placeholder=" " autocomplete="current-password" />
<label>Email</label>
</div>
<div class="frame-item">
<input type="password" [(ngModel)]="user.passwordHash" name="password" placeholder=" " autocomplete="current-password" />
<input type="password" [(ngModel)]="passwordHash" name="password" placeholder=" " autocomplete="current-password" />
<label>Password</label>
</div>
<div class="frame-item">
<input type="password" [(ngModel)]="user.error" name="password" placeholder=" " autocomplete="current-password" />
<label>Password</label>
<input type="password" [(ngModel)]="passwordHash2" name="repeat password" placeholder=" " autocomplete="current-password" />
<label>Repeat Password</label>
</div>
<div class="flex-row">
<div class="frame-button">
<input class="submit" type="button" value="LOGIN" />
<input class="submit" type="submit" value="REGISTER" />
</div>
</div>
src/MistoxWebsite.Client/src/app/pages/account/register/register.component.ts
+35 -11
View File
@@ -1,5 +1,5 @@
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { Account } from '../../../models/Account';
@@ -12,7 +12,12 @@ import { CommonModule } from '@angular/common';
imports: [ FormsModule, CommonModule ]
})
export class RegisterComponent {
user!: Account;
userName: string = ""
email: string = "";
passwordHash: string = "";
passwordHash2: string = "";
error: string = "";
errorMsgs: string[] = [];
returnURL: string = '/';
@@ -23,30 +28,49 @@ export class RegisterComponent {
});
}
sleep(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
onSubmit() {
// Clear errors
this.errorMsgs = [];
if (!this.user.userName) {
// Validate data
const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!regex.test(this.email)){
this.errorMsgs.push("A valid email is required");
}
if (!this.userName) {
this.errorMsgs.push("The 'username' field is required");
}
if (!this.user.passwordHash) {
if (!this.passwordHash) {
this.errorMsgs.push("The 'password' field is required");
}
if (this.user.passwordHash.length < 6) {
if (this.passwordHash.length < 6) {
this.errorMsgs.push("Password must be at least 6 Characters long");
}
if (this.user.passwordHash !== this.user.error){
if (this.passwordHash !== this.passwordHash2){
this.errorMsgs.push("Passwords don't match");
}
if (this.errorMsgs.length > 0) {
return;
}
this.user.error = "";
this.errorMsgs.push("Waiting for login response from server");
this.http.post<Account>( "api/account/register", this.user, { responseType: 'json' } ).subscribe({
next: data => {
// Send to server and wait for response
this.errorMsgs.push("Waiting for response from server");
const body = new HttpParams()
.set("Email", this.email)
.set("UserName", this.userName)
.set("PasswordHash", this.passwordHash);
const headers = new HttpHeaders({
'Content-Type': 'application/x-www-form-urlencoded'
});
this.http.post<Account>( "https://mistox.com/api/account/register", body, { headers } ).subscribe({
next: async (data) => {
if (data.error.length === 0){
this.errorMsgs = ["Account Created"];
await this.sleep(3000);
this.router.navigate([this.returnURL]);
}else{
this.errorMsgs = [];
@@ -54,7 +78,7 @@ export class RegisterComponent {
}
},
error: err => {
this.errorMsgs.push("HTTP Error: ", err);
console.log("HTTP Error Signing In: ", err);
}
});
}
src/MistoxWebsite.Client/src/app/services/Authentication.ts
+13 -4
View File
@@ -1,7 +1,7 @@
import { Injectable } from "@angular/core";
import { Account } from "../models/Account";
import { BehaviorSubject, Observable } from "rxjs";
import { HttpClient } from "@angular/common/http";
import { HttpClient, HttpHandler, HttpHeaders, HttpParams } from "@angular/common/http";
@Injectable({ providedIn: 'root' })
export class Authentication{
@@ -11,13 +11,22 @@ export class Authentication{
constructor( private http: HttpClient){ }
Login(LoginCredentials: Account, StayLoggedIn :SessionType): Observable<Account> {
let sub = this.http.post<Account>( "https://mistox.com/api/account/login", LoginCredentials, { responseType: 'json' } );
Login(UserName: string, Password: string, StayLoggedIn: boolean): Observable<Account> {
const body = new HttpParams()
.set("UserName", UserName)
.set("PasswordHash", Password)
.set("StayLoggedIn", StayLoggedIn );
const headers = new HttpHeaders({
'Content-Type': 'application/x-www-form-urlencoded'
});
let sub = this.http.post<Account>( "https://mistox.com/api/account/login", body, { headers } );
sub.subscribe({
next: data => {
if (data.error.length === 0){
this._user.next(data);
this.setUserToStorage(data, StayLoggedIn);
this.setUserToStorage(data, StayLoggedIn == true ? SessionType.Forever : SessionType.Session);
}
},
error: err => {