MEAN Stack http PUT request issue - node.js

Question

i'm pretty new in MEAN STACK.
I make my API REST under Nodejs Express and mongoodb.
I use Angular 14 as client.
I made a little project where user can register / login / display user informations.
Now i'd like to add an update functionality. A simple form where user can update his name or his role. I'm stuck at this point and i'd like to know why my code don't work and how can i fix this. It's been 2 days i'm on it, that's why i'm there to have some informations.
This is my config.json
{
"development": {
"PORT": 3000,
"MONGODB_URI": "mongodb://localhost:27017/PangolinDB",
"JWT_SECRET": "SECRET#123",
"JWT_EXP": "10m"
},
"production": {
"PORT": 80,
"MONGODB_URI": "mongodb://xxxxx/DB_Name",
"JWT_SECRET": "SECRET#123",
"JWT_EXP": "2m"
}
}
user.controller.js
const mongoose = require('mongoose');
const passport = require('passport');
const _ = require('lodash');
const { rest } = require('lodash');
const User = mongoose.model('User');
// updated crud code
ObjectId = require('mongoose').Types.ObjectId; //catch collection Id
// end updated crud code
module.exports.register = (req, res, next) => {
//console.log('inside register function');
var user = new User();
user.fullName = req.body.fullName;
user.email = req.body.email;
user.password = req.body.password;
user.role = req.body.role;
user.followers = req.body.followers;
user.following = req.body.following;
user.save((err, doc) => {
if (!err)
res.send(doc);
else {
if (err.code = 1100)
res.status(422).send(['L\'adresse email existe déja.']);
else
return next(err);
}
});
}
module.exports.authenticate = (req, res, next) => {
//call for passport authentication
passport.authenticate('local', (err, user, info) => {
//error from passport middleware
if (err) return res.status(404).json(err);
//registered user
else if(user) return res.status(200).json({ "token" : user.generateJwt() });
//unknow user or wrong password
else return res.status(401).json(info);
})(req,res);
}
module.exports.userProfile = (req, res, next) => {
User.findOne({ _id: req._id },
(err, user) => {
if (!user)
return res.status(404).json({ status: false, message: 'User record not found'});
else
return res.status(200).json({ status: true, user: _.pick(user,['fullName',
'email', 'role', 'friends','followers','following']) });
})
}
module.exports.getAllUser = async (req, res) => {
const users = await User.find().select('-password');
res.status(200).json(users);
};
module.exports.userInfo = (req, res) => {
if (!ObjectId.isValid(req.params.id))
return res.status(400).send('ID unknown :' + req.params.id)
User.findById(req.params.id, (err,docs) => {
if(!err) res.send(docs);
else console.log('ID unknown ; ' . err);
}) .select('-password');
};
module.exports.updateUser = async (req, res) => {
if (!ObjectId.isValid(req.params.id))
return res.status(400).send('ID unknown :' + req.params.id)
try {
await User.findOneAndUpdate(
{_id: req.params.id},
{
$set: {
role : req.body.role
},
},
{ new: true, upsert: true, setDefaultsOnInsert: true},
)
.then((docs) => res.send(docs))
.catch((err) => res.status(500).send({ message: err }));
} catch (err){
return res.status(500).json({ message: err});
}
}
module.exports.deleteUser = async (req, res) => {
if (!ObjectId.isValid(req.params.id))
return res.status(400).send('ID unknown :' + req.params.id)
try {
await User.remove({_id: req.params.id}).exec();
res.status(200).json({ message: "Successfully deleted. "});
} catch (err) {
return res.status(500).json({ message: err });
}
}
module.exports.follow = async (req, res) => {
/* if (!ObjectId.isValid(req.params.id) || !ObjectId.isValid(req.params.idToFollow))
return res.status(400).send('ID unknown :' + req.params.id) */
try {
// add to the follower list
await User.findByIdAndUpdate(
req.params.id, // id wanted to being followed
{ $addToSet: { following: req.body.idToFollow } }, // id being followed
{ new : true, upsert: true },
);
// add to following list
await User.findByIdAndUpdate(
req.body.idToFollow,
{ $addToSet: { followers: req.params.id}},
{ new: true, upsert: true },
)
return res.status(201).json(docs);
}catch (err) {
return res.status(500).json({ message: err });
}
};
module.exports.unfollow = async (req, res) => {
/* if (!ObjectId.isValid(req.params.id) || !ObjectId.isValid(req.params.idToFollow))
return res.status(400).send('ID unknown :' + req.params.id) */
try {
// add to the follower list
await User.findByIdAndUpdate(
req.params.id, // id wanted to being followed
{ $pull: { following: req.body.idToUnFollow } }, // id being followed
{ new : true, upsert: true },
);
// add to following list
await User.findByIdAndUpdate(
req.body.idToUnFollow,
{ $pull: { followers: req.params.id}},
{ new: true, upsert: true },
)
return res.status(201).json(docs);
}catch (err) {
return res.status(500).json({ message: err });
}
};
user.model.js
const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
var userSchema = new mongoose.Schema({
fullName: {
type: String,
required: 'Full name can\'t be empty'
},
email: {
type: String,
required: 'Email can\'t be empty',
unique: true
},
password: {
type: String,
required: 'Password can\'t be empty',
minlength: [4, 'Password must be atleast 4 character long']
},
role: {
type: String,
required: 'Role can\'t be empty',
},
followers: {
type: String,
},
following: {
type: String,
},
saltSecret: String
});
// Custom validation for email
userSchema.path('email').validate((val) => {
emailRegex = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.
[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return emailRegex.test(val);
}, 'Invalid e-mail.');
// Events encrypt password
userSchema.pre('save', function (next) {
bcrypt.genSalt(10, (err, salt) => {
bcrypt.hash(this.password, salt, (err, hash) => {
this.password = hash;
this.saltSecret = salt;
next();
});
});
});
// Methods verify password
userSchema.methods.verifyPassword = function (password) {
return bcrypt.compareSync(password, this.password);
};
userSchema.methods.generateJwt = function () {
return jwt.sign({ _id: this._id},
process.env.JWT_SECRET,
{
expiresIn: process.env.JWT_EXP
});
}
mongoose.model('User', userSchema);
routes.js
const express = require('express');
const router = express.Router();
const ctrlUser = require('../controllers/user.controller');
const jwtHelper = require('../config/jwtHelper');
//auth
router.post('/register', ctrlUser.register,);
router.post('/authenticate',ctrlUser.authenticate);
// user display
router.get('/userProfile',jwtHelper.verifyJwtToken, ctrlUser.userProfile);
router.get('/list', ctrlUser.getAllUser);
router.get('/user/:id', ctrlUser.userInfo);
router.put("/user/:id",ctrlUser.updateUser);
router.delete("/user/:id",ctrlUser.deleteUser);
//follow
router.patch('/user/follow/:id', ctrlUser.follow);
router.patch('/user/unfollow/:id', ctrlUser.unfollow);
module.exports = router;
index.js
require('./config/config');
require('./models/db');
require('./config/passportConfig');
require('./routes/index.router')
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const passport = require('passport');
//updated code
// end updtated code
const rtsIndex = require('./routes/index.router');
var app = express();
// middleware
app.use(bodyParser.json());
app.use(cors());
app.use(passport.initialize());
app.use('/api', rtsIndex);
//
/* app.use('api',routeList); */
//
// error handler
app.use((err, req, res, next) => {
if (err.name === 'ValidationError') {
var valErrors = [];
Object.keys(err.errors).forEach(key => valErrors.push(err.errors[key].message));
res.status(422).send(valErrors)
}
else{
console.log(err);
}
});
// start server
app.listen(process.env.PORT, () => console.log(`Server started at port :
${process.env.PORT}`));
user.service.ts (angular 14)
import { Injectable } from '#angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse, } from '#angular/common/http';
import { User } from './user.model';
import { Observable, ObservableInput, throwError} from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
#Injectable({
providedIn: 'root'
})
export class UserService {
selectedUser: User = {
id:'',
fullName: '',
email: '',
password: '',
role:'',
friends:'',
followers:'',
following:'',
};
noAuthHeader = { headers: new HttpHeaders({ 'NoAuth': 'True'}) };
errorMgmt: (err: any, caught: Observable<any>) => ObservableInput<any>;
HttpHeaders: HttpHeaders | { [header: string]: string | string[]; };
constructor(private http: HttpClient) { }
//httpMethods
//user form
//register ()
postUser(user: User){
return this.http.post( environment.apiBaseUrl+'/register',user,this.noAuthHeader);
}
//login ()
login(authCredentials: any){
return this.http.post(environment.apiBaseUrl + '/authenticate', authCredentials,
this.noAuthHeader);
}
//user profile
//user infos
getUserProfile(){
return this.http.get(environment.apiBaseUrl + '/userProfile');
} // need jwt in header
getOne(){
const token = this.getToken();
const headers = new HttpHeaders({'Authorization ':'bearer'+ token});
return this.http.get(environment.apiBaseUrl+'/userProfile',{headers});
}
updateUser(_id: any, value: any){
return this.http.put(environment.apiBaseUrl + `/user/${_id}`, value);
}
edit(_id: any, data: any){
return this.http.put(environment.apiBaseUrl + `/user/${_id}`, data);
}
//get all users
getAllUsers(){
return this.http.get(environment.apiBaseUrl + '/list');
}
//Helper Methods
setToken(token: string) {
localStorage.setItem('token', token);
}
getToken() {
return localStorage.getItem('token');
}
deleteToken() {
localStorage.removeItem('token');
}
getUserPayload(){
var token = this.getToken();
if (token) {
var getUserPayload = atob(token.split('.')[1]);
return JSON.parse(getUserPayload);
}
else
return null;
}
isLoggedIn() {
var userPayload = this.getUserPayload();
if (userPayload)
return userPayload.exp > Date.now() / 1000;
else
return false;
}
// Error
handleError(error: HttpErrorResponse) {
let errorMessage = '';
if (error.error instanceof ErrorEvent) {
// Handle client error
errorMessage = error.error.message;
} else {
// Handle server error
errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
}
console.log(errorMessage);
return throwError(() => {
errorMessage;
});
}
}
edit.component.ts
import { UserService } from './../shared/user.service';
import { Component, OnInit, NgZone } from '#angular/core';
import { Router, ActivatedRoute } from '#angular/router';
import { FormGroup, FormControl, Validator, Validators, SelectControlValueAccessor,
FormBuilder } from "#angular/forms";
#Component({
selector: 'app-edit',
templateUrl: './edit.component.html',
styleUrls: ['./edit.component.css']
})
/* export class EditComponent implements OnInit{
editUsr = new FormGroup({
fullName: new FormControl(null, [Validators.required]),
email: new FormControl(null, [Validators.required]),
role: new FormControl(null, [Validators.required])
});
loading: boolean =true;
id: any;
constructor (
private userService : UserService,
private activateRoute : ActivatedRoute,
private route: Router
){}
ngOnInit(): void {
this.activateRoute.params.subscribe((data: any) =>{
this.id = data['id'];
this.userService.getOne(this.id).subscribe((res: any)=>{
if (res.user != undefined){
this.editUsr.get('fullName')?.setValue(res.user.fullName);
this.editUsr.get('email')?.setValue(res.user.email);
this.editUsr.get('role')?.setValue(res.user.role);
}
});
this.loading = false;
});
}
addUser(){
const data: any = {
fullName : this.editUsr.get('fullName')?.value,
email : this.editUsr.get('email')?.value,
role: this.editUsr.get('role')?.value
}
this.userService.edit(this.id, data).subscribe(()=>this.route.navigateByUrl('edit'));
}
}
*/
export class EditComponent implements OnInit {
getId:any;
updateForm: FormGroup;
constructor(
public formBuilder: FormBuilder,
private router: Router,
private ngZone: NgZone,
private activatedRoute: ActivatedRoute,
private UserService: UserService
) {
this.getId = this.activatedRoute.snapshot.paramMap.get('id');
this.UserService.getOne().subscribe(res=>{
this.updateForm.patchValue({
fullName: res['fullName'],
email: res['email'],
role: res['role']
});
});
this.updateForm = this.formBuilder.group({
fullName:[''],
email:[''],
role:[''],
})
}
ngOnInit(): void {}
onUpdate(): any{
this.UserService.updateUser(this.getId, this.updateForm.value).subscribe(()=>{
console.log('mise à jouer effectuée avec succès')
this.ngZone.run(()=> this.router.navigateByUrl('/userprofile'))
},(err)=> {
console.log(err);
});
}
}
edit.component.html
<div class="row justify-content-center mt-5">
<div class="col-md-4">
<form [formGroup]="updateForm" (ngSubmit)="onUpdate()">
<h2>Edit User</h2>
<div class="form-group">
<label for="fullName">FullName</label>
<input class="form-control" type="text" formControlName="fullName" id="fullName" >
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" formControlName="email" id="email">
</div>
<div class="form-group">
<label for="role">Role</label>
<input class="form-control" type="text" formControlName="role" id="role">
</div>
<div class="form-group">
<button class="btn btn-primary btn-block" type="submit" >Enregistrer</button>
<button class="btn btn-info btn-block" [routerLink]="['/userprofile']"
type="submit">Retour</button>
</div>
</form>
</div>
</div>
<p>edit works!</p>
environment.ts
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false,
apiBaseUrl: 'http://localhost:3000/api'
};
/*
* For easier debugging in development mode, you can import the following file
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
*
* This import should be commented out in production mode because it will have a negative
impact
* on performance if an error is thrown.
*/
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
routes.ts
import { EditComponent } from './edit/edit.component';
import { HomeComponent } from './home/home.component';
import { Routes } from "#angular/router";
import { UserComponent } from "./user/user.component";
import { SignUpComponent } from "./sign-up/sign-up.component";
import { SignInComponent } from "./user/sign-in/sign-in.component";
import { UserProfileComponent } from "./user-profile/user-profile.component";
import { AuthGuard } from "./auth/auth.guard";
export const appRoutes: Routes = [
{path:'home', component: HomeComponent},
{path:'edit', component:EditComponent},
{
path: 'signup', component: UserComponent,
children: [{ path:'', component: SignUpComponent}]
},
{
path: 'login', component: UserComponent,
children: [{ path:'', component: SignInComponent}]
},
{
path: 'userprofile', component: UserProfileComponent,canActivate:[AuthGuard]
},
{
path: '', redirectTo: '/login', pathMatch: 'full'
}
];
thanks in advance for the help :)