3 |
6 | 
18 | Continue with Facebook
19 |
20 |
--------------------------------------------------------------------------------
/src/app/Service/otp.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { HttpClient } from '@angular/common/http';
3 | import {Environment} from "../../Environment/env"
4 |
5 | @Injectable({
6 | providedIn: 'root'
7 | })
8 | export class OtpService {
9 | private apiUrl = Environment.apiUrl+'/api'; // Update the base URL
10 |
11 | constructor(private http: HttpClient) {}
12 |
13 | verifyOTP(otp: string) {
14 | return this.http.post<{ resetToken: string }>(`${this.apiUrl}/verifyOTP`, { otp });
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/Components/Payment/payment-fail/payment-fail.component.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/app/Components/layout/layout.component.html:
--------------------------------------------------------------------------------
1 |
3 |
12 |
4 |
10 |
11 | Loading...
2 |
--------------------------------------------------------------------------------
/src/app/Components/forget-password/forget-password.component.html:
--------------------------------------------------------------------------------
1 |
3 |
13 |
4 |
11 |
12 |
2 |
10 |
--------------------------------------------------------------------------------
/src/app/Components/notfound-page/notfound-page.component.css:
--------------------------------------------------------------------------------
1 | #main{
2 | display: table;
3 | width: 100%;
4 | height: 100vh;
5 | background-image: url("/assets/imgs/home/h1.png");
6 | background-size: cover;
7 |
8 | text-align: center;
9 | }
10 |
11 | .fof{
12 | display: table-cell;
13 | vertical-align: middle;
14 | }
15 |
16 | .fof h1{
17 | font-size: 50px;
18 | display: inline-block;
19 | padding-right: 12px;
20 | animation: type .5s alternate infinite;
21 | }
22 |
23 | @keyframes type{
24 | from{box-shadow: inset -3px 0px 0px #888;}
25 | to{box-shadow: inset -3px 0px 0px transparent;}
26 | }
27 |
--------------------------------------------------------------------------------
/src/app/Directives/a-hover.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';
2 |
3 | @Directive({
4 | selector: '[appAHover]'
5 | })
6 | export class AHoverDirective {
7 |
8 | @Input('appAHover') className: any
9 |
10 | @HostListener('mouseover') onMouseOver(){
11 | this.render.addClass(this.el.nativeElement , this.className)
12 | }
13 | @HostListener('mouseover') onMouseOut(){
14 | this.render.removeClass(this.el.nativeElement , this.className)
15 | }
16 |
17 | constructor(private el: ElementRef , private render: Renderer2) {
18 |
19 | }
20 |
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/Components/dashboard/containers/default-layout/_nav.ts:
--------------------------------------------------------------------------------
1 | import { INavData } from '@coreui/angular';
2 |
3 | export const navItems: INavData[] = [
4 | {
5 | name: 'Dashboard',
6 | url: '/dashboard',
7 | iconComponent: { name: 'cil-speedometer' },
8 | },
9 | {
10 | name: 'users',
11 | url: './users',
12 | iconComponent: { name: 'cil-user' },
13 | },
14 | {
15 | name: 'apartments',
16 | url: './apartments',
17 | iconComponent: { name: 'cil-home' },
18 | },
19 | {
20 | name: 'Charts',
21 | url: './charts',
22 | iconComponent: { name: 'cil-chart-pie' }
23 | },
24 | ];
25 |
--------------------------------------------------------------------------------
/src/app/Service/checkout.service.ts:
--------------------------------------------------------------------------------
1 | import { HttpClient } from '@angular/common/http';
2 | import { Injectable } from '@angular/core';
3 | import {Environment} from "../../Environment/env"
4 |
5 | @Injectable({
6 | providedIn: 'root'
7 | })
8 | export class CheckoutService {
9 | private readonly Base_URL = Environment.apiUrl;
10 |
11 | constructor(private myClient:HttpClient) {
12 |
13 | }
14 |
15 | getOrderDetails(id:any){
16 | return this.myClient.get(`${this.Base_URL}/checkout/${id}`)
17 | }
18 | checkout(id:any,data:any){
19 | return this.myClient.post(`${this.Base_URL}/checkout/${id}`,data)
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/Components/Payment/payment-fail/payment-fail.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Router } from '@angular/router';
3 |
4 | @Component({
5 | selector: 'app-payment-fail',
6 | templateUrl: './payment-fail.component.html',
7 | styleUrls: ['./payment-fail.component.css']
8 | })
9 | export class PaymentFailComponent {
10 | timer=5;
11 | constructor(private router:Router){
12 | let interval=setInterval(()=>{
13 | if(this.timer==0){
14 | clearInterval(interval)
15 | this.router.navigateByUrl("/home")
16 |
17 | }
18 | --this.timer;
19 | },1000)
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/Components/otp/otp.component.html:
--------------------------------------------------------------------------------
1 | Forget Password
3 |Please enter your email address below
and we will send you a link to reset your password.
2 | 
3 |
14 |
15 |
--------------------------------------------------------------------------------
/src/app/Components/Payment/payment-success/payment-success.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Router } from '@angular/router';
3 |
4 | @Component({
5 | selector: 'app-payment-success',
6 | templateUrl: './payment-success.component.html',
7 | styleUrls: ['./payment-success.component.css']
8 | })
9 | export class PaymentSuccessComponent {
10 | timer=5;
11 | constructor(private router:Router){
12 | let interval=setInterval(()=>{
13 | if(this.timer==0){
14 | clearInterval(interval)
15 | this.router.navigateByUrl("/home")
16 |
17 | }
18 | --this.timer;
19 | },1000)
20 | }
21 |
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/intercreptors/auth.interceptor.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { HttpHandler, HttpEvent, HttpInterceptor, HttpRequest } from '@angular/common/http';
3 | import { Observable } from 'rxjs';
4 |
5 | @Injectable({providedIn: 'root'})
6 | export class AuthInterceptor implements HttpInterceptor {
7 |
8 | constructor() {}
9 |
10 | intercept(req: HttpRequestOTP Verification
4 | Please enter the code sent to you by email.
5 | 13 |User per year
4 |Bids per year
13 | 14 |Apartments status
18 |
6 |
10 |
7 |
8 |
{{title}}
9 |
2 |
20 |
5 |
19 | 6 | agora 7 |
8 |11 | The Perfect 12 |
13 |16 | Place For You 17 |
18 |
21 |
23 |
--------------------------------------------------------------------------------
/src/scss/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | // If you want to override variables do it here
3 | @import "variables";
4 |
5 | $enable-ltr: true;
6 | $enable-rtl: true;
7 |
8 | // Import styles with default layout.
9 | @import "@coreui/coreui/scss/coreui";
10 |
11 | // Import Chart.js custom tooltips styles
12 | @import "@coreui/chartjs/scss/coreui-chartjs";
13 |
14 | // perfect scrollbar theming for use with [perfectScrollbar] directive
15 | //@import '~perfect-scrollbar/css/perfect-scrollbar.css';
16 |
17 | @import "layout";
18 |
19 | // Some temp fixes
20 | @import "fixes";
21 |
22 | // Prism.js
23 | @import "examples";
24 |
25 | // If you want to add something do it here
26 | @import "custom";
27 |
--------------------------------------------------------------------------------
/src/app/Components/reset-password/reset-password.component.html:
--------------------------------------------------------------------------------
1 |
2 |
12 |
--------------------------------------------------------------------------------
/src/scss/_scrollbar.scss:
--------------------------------------------------------------------------------
1 | // scrollbar tinkering
2 |
3 | @supports (scrollbar-width: thin) {
4 | * {
5 | scrollbar-width: thin;
6 | scrollbar-color: #444 transparent;
7 | }
8 | }
9 |
10 | ::-webkit-scrollbar {
11 | width: .9em;
12 | }
13 |
14 | ::-webkit-scrollbar-track {
15 | background: var(--cui-body-bg, #fff);
16 | border-radius: 100vw;
17 | margin-block: .2em;
18 | }
19 |
20 | ::-webkit-scrollbar-thumb {
21 | background: #999;
22 | border: .2em solid var(--cui-body-bg, #fff);
23 | border-radius: 100vw;
24 | }
25 |
26 | ::-webkit-scrollbar-thumb:hover {
27 | background: #444;
28 | }
29 |
30 | .dark-theme::-webkit-scrollbar-thumb {
31 | background: #444;
32 | }
33 |
34 | .dark-theme::-webkit-scrollbar-thumb:hover {
35 | background: #999;
36 | }
37 |
--------------------------------------------------------------------------------
/src/app/Components/up-to-top/up-to-top.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, HostListener, Input } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-up-to-top',
5 | templateUrl: './up-to-top.component.html',
6 | styleUrls: ['./up-to-top.component.css']
7 | })
8 | export class UpToTopComponent {
9 |
10 | showBtn = false
11 |
12 | @Input('position') style: any
13 |
14 | @HostListener('window:scroll', [])
15 |
16 | onWindowScroll(){
17 |
18 | const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
19 |
20 | if(scrollTop > 400) {
21 | this.showBtn = true
22 | }else {
23 | this.showBtn = false
24 | }
25 | }
26 |
27 | toUp(){
28 | window.scroll({
29 | top:0,
30 | behavior: 'smooth'
31 | })
32 | }
33 |
34 | }
35 |
--------------------------------------------------------------------------------
/src/app/core/guards/admin-auth.guard.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
3 | import { Observable } from 'rxjs';
4 | import { AuthService } from 'src/app/Service/auth.service';
5 |
6 | @Injectable({
7 | providedIn: 'root'
8 | })
9 | export class AdminAuthGuard implements CanActivate {
10 | constructor(private authService:AuthService,private router:Router){}
11 | canActivate(
12 | route: ActivatedRouteSnapshot,
13 | state: RouterStateSnapshot): ObservableReset Password
3 |Please enter a new password below.
4 | 11 |
2 |
3 |
7 |
8 |
9 |
10 |
11 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/src/app/Components/otp/otp.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Router } from '@angular/router';
3 | import { OtpService } from '../../Service/otp.service';
4 |
5 | @Component({
6 | selector: 'app-otp',
7 | templateUrl: './otp.component.html',
8 | styleUrls: ['./otp.component.css']
9 | })
10 | export class OtpComponent {
11 | otp: string= '';
12 | resetToken: string = '';
13 |
14 | constructor(private otpService: OtpService, private router: Router) {}
15 |
16 | onSubmit() {
17 | this.otpService.verifyOTP( this.otp).subscribe(
18 | response => {
19 | console.log(response);
20 | this.resetToken = response.resetToken;
21 | // Handle successful response
22 | },
23 | error => {
24 | console.error(error);
25 | // Handle error
26 | }
27 | );
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/app/Components/layout/layout.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { UserHomeDataService } from 'src/app/Service/user-home-data.service';
3 | @Component({
4 | selector: 'app-layout',
5 | templateUrl: './layout.component.html',
6 | styleUrls: ['./layout.component.css']
7 | })
8 | export class LayoutComponent implements OnInit {
9 |
10 | extractedData: any
11 | notificationData: any
12 | cartData: any
13 | isCart: any
14 | id:any;
15 |
16 | constructor(private service: UserHomeDataService){
17 | }
18 | ngOnInit(): void {
19 |
20 | this.service.getData().subscribe({
21 | next:(data: any)=>{
22 | this.notificationData = data["notifications"]
23 | if(data["carts"].length > 0) this.cartData = data["carts"][0].apartments
24 | else this.cartData = null
25 |
26 | } ,
27 | error:(e:Error)=> console.log(e)
28 | })
29 |
30 | }
31 |
32 | }
33 |
--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
1 | {
2 | "database": {
3 | "rules": "database.rules.json"
4 | },
5 | "emulators": {
6 | "database": {
7 | "port": 9000
8 | },
9 | "hosting": {
10 | "port": 5000
11 | },
12 | "ui": {
13 | "enabled": true
14 | },
15 | "singleProjectMode": true
16 | },
17 | "remoteconfig": {
18 | "template": "remoteconfig.template.json"
19 | },
20 | "headers": [
21 | {
22 | "source": "**/*.@(js|css|html)",
23 | "headers": [
24 | {
25 | "key": "Cache-Control",
26 | "value": "max-age=604800"
27 | }
28 | ],
29 | "size": "3MB"
30 | }
31 | ],
32 | "hosting": {
33 | "public": "dist/agoura",
34 | "ignore": [
35 | "firebase.json",
36 | "**/.*",
37 | "**/node_modules/**"
38 | ],
39 | "rewrites": [
40 | {
41 | "source": "**",
42 | "destination": "/index.html"
43 | }
44 | ]
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
4 |
6 | You Do Not Have Any Orders Till Now
5 || Apartment | 13 |Bid | 14 |Date | 15 |
|---|---|---|
| {{ order.apartment.title }} | 20 |{{ order.amount }} | 21 |{{ order.date }} | 22 |
2 |
33 |
--------------------------------------------------------------------------------
/src/app/Components/Profile/changepass/changepass.component.html:
--------------------------------------------------------------------------------
1 |
3 |
32 |
4 |
5 |
6 |
30 |
31 | | Number | 8 |Name | 9 |Owned appartments | 11 |Number of bids | 12 |Verification | 13 |Delete | 14 | 15 ||
|---|---|---|---|---|---|---|
| {{i+1}} | 20 |{{user.name}} | 21 |{{user.email}} | 22 |{{user.ownedApartments.length}} | 23 |{{user.bids.length}} | 24 |{{user.isVerified}} | 25 |26 | 27 | |
2 |
3 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/src/app/Components/dashboard/views/dashboard-users/dashboard-users.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute, Router } from '@angular/router';
3 | import { DashboardTableService } from 'src/app/Service/dashboard-table.service';
4 |
5 | @Component({
6 | selector: 'app-dashboard-users',
7 | templateUrl: './dashboard-users.component.html',
8 | styleUrls: ['./dashboard-users.component.css'],
9 | })
10 | export class DashboardUsersComponent implements OnInit {
11 | allUsers: any;
12 | constructor(
13 | private myService: DashboardTableService,
14 | private route: ActivatedRoute,
15 | private router: Router
16 | ) {}
17 |
18 | ngOnInit(): void {
19 | this.myService.GetAllUsers().subscribe({
20 | next: (allData: any) => {
21 | console.log(allData.data)
22 | this.allUsers = allData.data;
23 | console.log(this.allUsers);
24 | },
25 | error: (err: any) => {
26 | console.log(err);
27 | },
28 | });
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitOverride": true,
10 | "noPropertyAccessFromIndexSignature": true,
11 | "noImplicitReturns": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "sourceMap": true,
14 | "declaration": false,
15 | "downlevelIteration": true,
16 | "experimentalDecorators": true,
17 | "moduleResolution": "node",
18 | "importHelpers": true,
19 | "target": "ES2022",
20 | "module": "ES2022",
21 | "useDefineForClassFields": false,
22 | "lib": [
23 | "ES2022",
24 | "dom"
25 | ]
26 | },
27 | "angularCompilerOptions": {
28 | "enableI18nLegacyMessageIdFormat": false,
29 | "strictInjectionParameters": true,
30 | "strictInputAccessModifiers": true,
31 | "strictTemplates": true
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/Components/Profile/apartments/apartments.component.html:
--------------------------------------------------------------------------------
1 |
2 | Create One
8 |
9 |
13 |
14 |
15 |
16 |
17 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3 | "version": "2.0.0",
4 | "tasks": [
5 | {
6 | "type": "npm",
7 | "script": "start",
8 | "isBackground": true,
9 | "problemMatcher": {
10 | "owner": "typescript",
11 | "pattern": "$tsc",
12 | "background": {
13 | "activeOnStart": true,
14 | "beginsPattern": {
15 | "regexp": "(.*?)"
16 | },
17 | "endsPattern": {
18 | "regexp": "bundle generation complete"
19 | }
20 | }
21 | }
22 | },
23 | {
24 | "type": "npm",
25 | "script": "test",
26 | "isBackground": true,
27 | "problemMatcher": {
28 | "owner": "typescript",
29 | "pattern": "$tsc",
30 | "background": {
31 | "activeOnStart": true,
32 | "beginsPattern": {
33 | "regexp": "(.*?)"
34 | },
35 | "endsPattern": {
36 | "regexp": "bundle generation complete"
37 | }
38 | }
39 | }
40 | }
41 | ]
42 | }
43 |
--------------------------------------------------------------------------------
/src/app/Components/dashboard/containers/default-layout/default-layout.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | import { navItems } from './_nav';
4 | import { ProfilePageService } from 'src/app/Service/profile-page.service';
5 | import { AuthService } from 'src/app/Service/auth.service';
6 |
7 | @Component({
8 | selector: 'app-dashboard',
9 | templateUrl: './default-layout.component.html',
10 | })
11 | export class DefaultLayoutComponent implements OnInit{
12 | user:any;
13 | constructor(private userService:ProfilePageService,private auth:AuthService){
14 |
15 | }
16 | ngOnInit(): void {
17 |
18 | let user=this.auth.user();
19 | if(user){
20 | this.userService.GetUserByID(user.userId).subscribe({
21 | next:(res:any)=>{
22 | this.user=res|| "/assets/photos/avatar02.png";
23 | },
24 | error:(err:any)=>{
25 | console.log(err)
26 | }
27 | })
28 | }
29 |
30 |
31 |
32 | }
33 |
34 | public navItems = navItems;
35 | public perfectScrollbarConfig = {
36 | suppressScrollX: true,
37 | };
38 |
39 |
40 |
41 |
42 | }
43 |
--------------------------------------------------------------------------------
/src/app/Components/dashboard/views/bids/bids.component.html:
--------------------------------------------------------------------------------
1 |
10 |
12 | You Do Not Have Any Apartments Till Now
11 || Title | 19 |Bids | 20 |Status | 21 |
|---|---|---|
| {{ apartment.title | uppercase }} | 26 |{{ apartment.bids.length }} | 27 |{{ apartment.status | uppercase }} | 28 |
2 | Bid Now
8 |
9 |
13 |
14 |
15 |
16 |
17 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/src/app/Components/Profile/orders/orders.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute, Router } from '@angular/router';
3 | import { ProfilePageService } from 'src/app/Service/profile-page.service';
4 |
5 | @Component({
6 | selector: 'app-orders',
7 | templateUrl: './orders.component.html',
8 | styleUrls: ['./orders.component.css']
9 | })
10 | export class OrdersComponent implements OnInit {
11 |
12 | userId: any;
13 | orderData: any;
14 | result: any;
15 | constructor(
16 | private ProfileService: ProfilePageService,
17 | private router: ActivatedRoute,
18 | private route: Router
19 | ){
20 | this.router.parent?.params.subscribe(data=>{
21 | this.userId = data['id']
22 | })
23 | }
24 |
25 | ngOnInit(): void {
26 |
27 | this.ProfileService.getUserOrders(this.userId).subscribe({
28 | next:(data: any)=>{
29 | this.result = data
30 | if(!this.result.success){
31 | this.route.navigateByUrl('/notfound')
32 | }else{
33 | this.orderData = this.result.data
34 | console.log(this.orderData)
35 | }
36 | },
37 | })
38 | }
39 |
40 | }
41 |
--------------------------------------------------------------------------------
/src/app/Components/Payment/checkout/checkout.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute, Router } from '@angular/router';
3 | import { CheckoutService } from 'src/app/Service/checkout.service';
4 |
5 | @Component({
6 | selector: 'app-checkout',
7 | templateUrl: './checkout.component.html',
8 | styles: [
9 | ]
10 | })
11 | export class CheckoutComponent implements OnInit {
12 |
13 | data:any;
14 | id:any;
15 |
16 | constructor(private http:CheckoutService,private checkoutService:CheckoutService,private route:ActivatedRoute,private router:Router){
17 | this.id=this.route.snapshot.params['id'];
18 | }
19 |
20 | ngOnInit(): void {
21 | // for the aside info subtotal, taxes and total values
22 | console.log(this.id)
23 | this.http.getOrderDetails(this.id).subscribe({
24 | next:(res:any)=>{
25 | console.log(res.data)
26 | this.data=res.data
27 | console.log(res)
28 | }
29 |
30 | })
31 | }
32 | submit(){
33 | this.checkoutService.checkout(this.id,this.data).subscribe({
34 | next:(res:any)=>{
35 | console.log(res)
36 | window.location=res.url
37 | },
38 | error:()=>{
39 | }
40 | })
41 | }
42 |
43 | }
44 |
--------------------------------------------------------------------------------
/src/app/Components/reset-password/reset-password.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Router } from '@angular/router';
3 | import { ResetPasswordService } from '../../Service/reset-password.service';
4 |
5 | @Component({
6 | selector: 'app-reset-password',
7 | templateUrl: './reset-password.component.html',
8 | styleUrls: ['./reset-password.component.css']
9 | })
10 | export class ResetPasswordComponent {
11 | newPassword: string = '';
12 | confirmPassword: string = '';
13 | resetToken: string = '';
14 |
15 | constructor(
16 | private resetPasswordService: ResetPasswordService,
17 | private router: Router
18 | ) {}
19 |
20 | resetPassword() {
21 | this.resetPasswordService.resetPassword(this.resetToken, this.newPassword).subscribe(
22 | response => {
23 | console.log(response);
24 | // Handle successful response
25 | this.router.navigate(['/login']);
26 | },
27 | error => {
28 | console.error(error);
29 | // Handle error
30 | }
31 | );
32 | }
33 |
34 | onSubmit() {
35 | if (this.newPassword !== this.confirmPassword) {
36 | console.error('Passwords do not match');
37 | return;
38 | }
39 |
40 | this.resetPassword();
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/app/Service/bids.service.ts:
--------------------------------------------------------------------------------
1 | import { HttpClient } from '@angular/common/http';
2 | import { Injectable } from '@angular/core';
3 | import {Environment} from "../../Environment/env"
4 |
5 | @Injectable({
6 | providedIn: 'root',
7 | })
8 | export class BidsService {
9 | private readonly Base_URL = Environment.apiUrl;
10 | constructor(private myClient: HttpClient) {}
11 | GetBidById(id: any) {
12 | return this.myClient.get(this.Base_URL + `/place/${id}`);
13 | }
14 | GetPendingBidById(id: any) {
15 | return this.myClient.get(this.Base_URL + `/place/${id}/edit`);
16 | }
17 |
18 | GetBidHistoryById(itemId: any) {
19 | return this.myClient.get(this.Base_URL + `/place/${itemId}/history`);
20 | }
21 | addNewBid(data: any) {
22 | return this.myClient.post(this.Base_URL + `/bid`,data);
23 | }
24 | updateBidById(id:number,data: any) {
25 | return this.myClient.put(this.Base_URL + `/bid/${id}/update`,data);
26 | }
27 | bidNeedsMoreInfo(id:number,data: any) {
28 | return this.myClient.post(this.Base_URL + `/bid/${id}/notes`,data);
29 | }
30 | approveBidById(id:number,data: any) {
31 | return this.myClient.post(this.Base_URL + `/bid/${id}/approve`,data);
32 | }
33 |
34 | cancelBidById(id:number,data: any) {
35 | return this.myClient.post(this.Base_URL + `/bid/${id}/cancel`,data);
36 | }
37 |
38 |
39 |
40 | }
41 |
--------------------------------------------------------------------------------
/src/app/Components/offcanvas/offcanvas.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { UserHomeDataService } from 'src/app/Service/user-home-data.service';
3 |
4 | @Component({
5 | selector: 'app-offcanvas',
6 | templateUrl: './offcanvas.component.html',
7 | styleUrls: ['./offcanvas.component.css']
8 | })
9 | export class OffcanvasComponent {
10 | notificationData: any;
11 | cartData: any;
12 | cartError = false
13 |
14 | constructor(private home: UserHomeDataService){}
15 |
16 | @Input('isCart') toggle: any
17 |
18 | ngOnInit() {
19 | this.home.cartUpdated.subscribe((res) => {
20 | this.cartData = res.apartments;
21 | });
22 |
23 | this.home.cartError.subscribe((res) => {
24 | this.cartError = res
25 | });
26 |
27 | this.home.notificationUpdated.subscribe((res) => {
28 | this.notificationData = res;
29 | });
30 |
31 | this.home.getData().subscribe({
32 | next:(data: any)=>{
33 | this.notificationData = data["notifications"]
34 | if(data["carts"].length > 0) this.cartData = data["carts"][0].apartments
35 | else this.cartData = null
36 | } ,
37 | error:(e:Error)=> console.log(e)
38 | })
39 | }
40 |
41 | deleteItem(id: any){
42 | this.toggle ? this.home.deleteProductFromCart(id) : this.home.deleteNotification(id)
43 | }
44 |
45 |
46 | }
47 |
--------------------------------------------------------------------------------
/src/assets/imgs/agora.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/app/Components/about/about.component.css:
--------------------------------------------------------------------------------
1 | section {
2 | padding: 4rem 0;
3 | }
4 |
5 | header {
6 | background-image: url('/assets/photos/Agoura.png');
7 | background-repeat: no-repeat;
8 | background-position: center center;
9 | background-size: cover;
10 | height: 400px;
11 | }
12 |
13 | /*image {
14 | display: block;
15 | margin: 0 auto;
16 | max-width: 100%;
17 | max-height: 100%;
18 | width: 100%;
19 | height: 100%;
20 | }*/
21 |
22 | img {
23 |
24 |
25 | border-radius: 10px;
26 | }
27 |
28 |
29 | .card {
30 | border: none;
31 | margin: 1rem;
32 | padding: 1.5rem;
33 | }
34 |
35 | .card:hover {
36 | transform: translateY(-5px);
37 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
38 | }
39 |
40 | /*.card-body {
41 | justify-content: center;
42 | align-items: center;
43 | height: 100%;
44 | }*/
45 |
46 | .card-title {
47 | margin-bottom: 0.5rem;
48 | text-align: center;
49 | }
50 |
51 | .card-text {
52 | font-size: 1rem;
53 | font-weight: 400;
54 | color: #888;
55 | text-align: center;
56 |
57 | }
58 |
59 | .card-title, .card-text {
60 | font-family: 'Montserrat', sans-serif;
61 | font-style: italic;
62 | }
63 |
64 | .card-img-top {
65 | max-width: 250px;
66 | margin-bottom: 1rem;
67 | padding: 0;
68 | margin: 0 auto;
69 | display: block;
70 | border: 2px solid #fff;
71 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
72 | }
73 |
--------------------------------------------------------------------------------
/src/app/Components/Profile/changepass/changepass.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormControl, FormGroup, Validators } from '@angular/forms';
3 | import { ActivatedRoute } from '@angular/router';
4 | import { ProfilePageService } from 'src/app/Service/profile-page.service';
5 |
6 | @Component({
7 | selector: 'changepass-user',
8 | templateUrl: './changepass.component.html',
9 | styleUrls: ['./changepass.component.css'],
10 | })
11 | export class ChangePassComponent implements OnInit {
12 | userId: any;
13 | validationForm: any;
14 |
15 | constructor(
16 | private route: ActivatedRoute,
17 | private myService: ProfilePageService
18 | ) {
19 | this.route.parent?.params.subscribe((data) => {
20 | this.userId = data['id'];
21 | });
22 | }
23 | ngOnInit(): void {
24 | this.validationForm = new FormGroup({
25 | password: new FormControl(null, [
26 | Validators.required,
27 | Validators.minLength(3),
28 | ]),
29 | });
30 | }
31 |
32 | get password() {
33 | return this.validationForm.controls['password'].valid;
34 | }
35 |
36 | isPasswordDirty() {
37 | return this.validationForm.controls['password'].dirty;
38 | }
39 |
40 | changePassword(id: any) {
41 | if (this.validationForm.valid) {
42 | const password = this.validationForm.controls['password'].value;
43 | this.myService.changeUserPassword(id, { password }).subscribe();
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/app/Components/reset-password/reset-password.component.css:
--------------------------------------------------------------------------------
1 | .reset-password-container {
2 | margin: 50px auto;
3 | max-width: 450px;
4 | text-align: center;
5 | background-color: #f2f2f2;
6 | padding: 30px;
7 | border-radius: 10px;
8 | box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
9 | }
10 |
11 | .reset-password-title {
12 | font-size: 36px;
13 | font-weight: bold;
14 | margin-bottom: 20px;
15 | color: #333;
16 | text-transform: uppercase;
17 | letter-spacing: 3px;
18 | }
19 |
20 | .reset-password-desc {
21 | font-size: 18px;
22 | margin-bottom: 30px;
23 | color: #555;
24 | }
25 |
26 | .reset-password-form {
27 | display: flex;
28 | flex-direction: column;
29 | align-items: center;
30 | }
31 |
32 | .reset-password-label {
33 | font-size: 18px;
34 | margin-bottom: 10px;
35 | color: #444;
36 | text-align: left;
37 | }
38 |
39 | .reset-password-input {
40 | padding: 10px;
41 | margin-bottom: 20px;
42 | border: none;
43 | border-radius: 5px;
44 | width: 100%;
45 | max-width: 350px;
46 | font-size: 18px;
47 | background-color: #f8f8f8;
48 | box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
49 | }
50 |
51 | .reset-password-input:focus {
52 | outline: none;
53 | box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
54 | }
55 |
56 | .reset-password-button {
57 | padding: 15px 30px;
58 | background-color: #4CAF50;
59 | color: white;
60 | border: none;
61 | border-radius: 5px;
62 | font-size: 20px;
63 | cursor: pointer;
64 | transition: background-color 0.2s ease-in-out;
65 | }
66 |
67 | .reset-password-button:hover {
68 | background-color: #3e8e41;
69 | }
70 |
--------------------------------------------------------------------------------
/src/app/Components/bid-history/bid-history.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ActivatedRoute } from '@angular/router';
3 | import { NgxSpinnerService } from 'ngx-spinner';
4 | import { BidsService } from 'src/app/Service/bids.service';
5 |
6 | @Component({
7 | selector: 'app-bid-history',
8 | templateUrl: './bid-history.component.html',
9 | styleUrls: ['./bid-history.component.css'],
10 | })
11 | export class BidHistoryComponent {
12 | public constructor(
13 | private myService: BidsService,
14 | private route: ActivatedRoute,
15 | private spinner: NgxSpinnerService
16 | ) {
17 | this.id = route.snapshot.params['id'];
18 | }
19 | bids: any = {};
20 | id: any;
21 | status: any
22 |
23 | placeBid() {
24 | console.log('place bid');
25 | }
26 |
27 | ngOnInit(): void {
28 | let itemId = this.route.snapshot.params['id'];
29 | this.spinner.show('homeSpinner')
30 | this.myService.GetBidHistoryById(itemId).subscribe((data: any) => {
31 | data = data.data;
32 | console.log(data)
33 | this.bids.title = data.title;
34 | this.bids.image = data.image;
35 | this.bids.currentBid = data.currentBid;
36 | this.bids.itemNumber = data.itemNumber;
37 | this.bids.numberOfBids = data.numberOfBids;
38 | this.bids.numberOfBidders = data.numberOfBidders;
39 | this.bids.timeLeft = data.timeLeft;
40 | this.bids.duration = data.duration;
41 | this.bids.historyOfBids = data.historyOfBids;
42 | this.status = data.status
43 | this.spinner.hide('homeSpinner')
44 | });
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/assets/images/icons8-apple-logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/Service/auth.service.ts:
--------------------------------------------------------------------------------
1 | import { HttpClient, HttpHeaderResponse, HttpHeaders } from '@angular/common/http';
2 | import {Environment} from "../../Environment/env"
3 | import { Injectable } from '@angular/core';
4 | import jwtDecode from 'jwt-decode';
5 | @Injectable({
6 | providedIn: 'root'
7 | })
8 | export class AuthService {
9 |
10 | private readonly Base_URL = Environment.apiUrl;
11 | private headers=new HttpHeaders({'content-type': 'json/text'});
12 | constructor(private myHttpClient:HttpClient) {
13 |
14 | }
15 |
16 | public signUp(user:any){
17 | return this.myHttpClient.post(`${this.Base_URL}/register`,user)
18 | }
19 | public LoginWithGoogle(userCredential:any){
20 | return this.myHttpClient.post(`${this.Base_URL}/auth/google`,userCredential,{'headers' : new HttpHeaders ({'Content-Type' : 'application/json'}), observe:'response'})
21 | }
22 |
23 | public LoginWithSystem(userCredential:any){
24 | return this.myHttpClient.post(`${this.Base_URL}/auth/login`,userCredential,{'headers' : new HttpHeaders ({'Content-Type' : 'application/json'}), observe:'response'})
25 | }
26 | public verify(): boolean {
27 | const token = localStorage.getItem('X-Auth-Token');
28 |
29 | if (token) {
30 | const decodedToken: any = jwtDecode(token);
31 | return decodedToken.isAdmin === true;
32 | }
33 | return false;
34 | }
35 | public user() {
36 | const token = localStorage.getItem('X-Auth-Token');
37 |
38 | if (token) {
39 | const decodedToken: any = jwtDecode(token);
40 | return decodedToken
41 | }
42 | return false;
43 | }
44 |
45 | }
46 |
--------------------------------------------------------------------------------
/src/app/intercreptors/response.interceptor.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import {
3 | HttpRequest,
4 | HttpHandler,
5 | HttpEvent,
6 | HttpInterceptor,
7 | HttpResponse,
8 | HttpErrorResponse,
9 | } from '@angular/common/http';
10 | import { Observable } from 'rxjs';
11 | import { tap } from 'rxjs/operators';
12 | import { Router } from '@angular/router';
13 | import { ToastService } from '../Service/toast-service.service';
14 |
15 | @Injectable()
16 | export class ResponseInterceptor implements HttpInterceptor {
17 | constructor(private route: Router, private toastService: ToastService) {}
18 |
19 | intercept(
20 | req: HttpRequest
10 |
12 | You Do Not Have Any Bids Till Now
11 || Apartment | 19 |Bid | 20 |Date | 21 |
|---|---|---|
| 27 | {{ 28 | bid.apartment.title 29 | }} 30 | | 31 |{{ bid.amountMoney }} | 32 |{{ bid.date | date : "dd/MM/yyyy" }} | 33 |
2 |
3 |
45 |
46 |
47 |
48 | Updating...
63 |
64 |
74 |
--------------------------------------------------------------------------------
/src/app/Components/otp/otp.component.css:
--------------------------------------------------------------------------------
1 | .otp-container {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | margin-top: 50px;
6 | }
7 |
8 | .otp-logo {
9 | margin-bottom: 30px;
10 | }
11 |
12 | .otp-logo img {
13 | width: 150px;
14 | height: auto;
15 | }
16 |
17 | .otp-title {
18 | font-size: 36px;
19 | font-weight: bold;
20 | margin-bottom: 20px;
21 | text-align: center;
22 | color: #4CAF50;
23 | text-shadow: 2px 2px #fff;
24 | }
25 |
26 | .otp-form {
27 | display: flex;
28 | flex-direction: column;
29 | align-items: center;
30 | background-color: #fff;
31 | border-radius: 10px;
32 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
33 | padding: 40px;
34 | width: 400px;
35 | }
36 |
37 | .otp-inputs {
38 | display: flex;
39 | justify-content: center;
40 | margin-bottom: 30px;
41 | font-size: 28px;
42 | }
43 |
44 | .otp-inputs input[type="text"] {
45 | width: 150px;
46 | height: 80px;
47 | font-size: 36px;
48 | text-align: center;
49 | margin: 0 10px;
50 | border: none;
51 | background-color: #f2f2f2;
52 | border-radius: 10px;
53 | outline: none;
54 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
55 | }
56 |
57 | .otp-inputs input[type="text"]:focus {
58 | background-color: #e6e6e6;
59 | }
60 |
61 | .otp-actions {
62 | display: flex;
63 | justify-content: center;
64 | align-items: center;
65 | width: 100%;
66 | }
67 |
68 | .otp-resend-btn {
69 | font-size: 20px;
70 | color: #4CAF50;
71 | border: none;
72 | background-color: transparent;
73 | cursor: pointer;
74 | transition: color 0.2s ease-in-out;
75 | }
76 |
77 | .otp-resend-btn:hover {
78 | color: #3e8e41;
79 | }
80 |
81 | .otp-verify-btn {
82 | font-size: 24px;
83 | font-weight: bold;
84 | border: none;
85 | border-radius: 10px;
86 | padding: 10px 20px;
87 | cursor: pointer;
88 | background-color: #4CAF50;
89 | color: white;
90 | transition: background-color 0.2s ease-in-out;
91 | text-shadow: 1px 1px #fff;
92 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
93 | }
94 |
95 | .otp-verify-btn:hover {
96 | background-color: #3e8e41;
97 | }
98 |
99 | .forget-password-desc {
100 | font-size: 16px;
101 | margin-bottom: 50px;
102 | text-align: center;
103 | color: #666;
104 | font-family:Georgia, 'Times New Roman', Times, serif;
105 | font-style: normal;
106 | font-weight: 400;
107 | }
108 |
--------------------------------------------------------------------------------
/src/app/Components/main-page-items-section/main-page-items-section.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { NgxSpinnerService } from 'ngx-spinner';
3 | import { UserHomeDataService } from 'src/app/Service/user-home-data.service';
4 |
5 |
6 | @Component({
7 |
8 | selector: 'app-main-page-items-section',
9 | templateUrl: './main-page-items-section.component.html',
10 | styleUrls: ['./main-page-items-section.component.css']
11 |
12 | })
13 | export class MainPageItemsSectionComponent {
14 |
15 |
16 | items:any;
17 | addedCart = false
18 |
19 | constructor(public myService: UserHomeDataService, private spinner: NgxSpinnerService) { }
20 |
21 | ngOnInit(): void {
22 | this.spinner.show('homeSpinner')
23 | this.myService.getData().subscribe(
24 | {
25 | next: (data: any) => {
26 | this.items = data['apartments'];
27 | this.spinner.hide('homeSpinner')
28 | },
29 | error: (err: any) => { console.log(err) }
30 | }
31 | )
32 | }
33 |
34 |
35 | allcategories() {
36 | this.myService.getData().subscribe(
37 | {
38 | next: (data: any) => {
39 | this.items = data['apartments'];
40 | },
41 | error: (err: any) => { console.log(err) }
42 | }
43 | )
44 | }
45 |
46 |
47 | filterData(category: any) {
48 |
49 | this.myService.getFilteredData(category).subscribe({
50 | next: (response: any) => {
51 | this.items = response.data
52 | },
53 | error: (error: any) => {
54 | return error
55 | }
56 | })
57 | }
58 |
59 | toggle(id: any , event: any){
60 | const button = event.target
61 |
62 | if(!this.addedCart){
63 | this.addToCart(id)
64 | button.innerText = 'Remove'
65 | button.classList.remove('cart-btn-add')
66 | button.classList.add('cart-btn-remove')
67 | button.removeEventListener('click', this.addToCart)
68 | button.addEventListener('click', this.removeFromCart)
69 | this.addedCart = true
70 | }else{
71 | this.removeFromCart(id)
72 | button.innerHTML = 'Add To '
73 | button.classList.remove('cart-btn-remove')
74 | button.classList.add('cart-btn-add')
75 | button.removeEventListener('click', this.removeFromCart)
76 | button.addEventListener('click', this.addToCart)
77 | this.addedCart = false
78 | }
79 | }
80 | addToCart(id: any){
81 | this.myService.addItemToCart(id)
82 | }
83 | removeFromCart(id: any){
84 | this.myService.deleteProductFromCart(id)
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/src/scss/_examples.scss:
--------------------------------------------------------------------------------
1 | .callout-info {
2 | background-color: $light-50 !important;
3 |
4 | @at-root .dark-theme & {
5 | background-color: rgba(255, 255, 255, .1) !important;
6 | }
7 | }
8 |
9 | .example {
10 | &:not(:first-child) {
11 | margin-top: 1.5rem;
12 | }
13 |
14 | .tab-content {
15 | background-color: $light-50 !important;
16 |
17 | @at-root .dark-theme & {
18 | background-color: rgba(255, 255, 255, .1) !important;
19 | }
20 | }
21 |
22 | code[class*="language-"],
23 | pre[class*="language-"] {
24 | font-size: .875rem !important;
25 | }
26 |
27 | :not(pre) > code[class*="language-"],
28 | pre[class*="language-"] {
29 | background: transparent;
30 | }
31 |
32 | & + p,
33 | & + h2,
34 | & + h3,
35 | & + h4,
36 | & + h5,
37 | & + h6 {
38 | margin-top: 1.5rem;
39 | }
40 |
41 | // Components examples
42 | .preview,
43 | .preview .col {
44 | + p {
45 | margin-top: 2rem;
46 | }
47 |
48 | > .form-control {
49 | + .form-control {
50 | margin-top: .5rem;
51 | }
52 | }
53 |
54 | > .nav + .nav,
55 | > .alert + .alert,
56 | > .navbar + .navbar,
57 | > .progress + .progress {
58 | margin-top: 1rem;
59 | }
60 |
61 | > .dropdown-menu {
62 | position: static;
63 | display: block;
64 | }
65 |
66 | > :last-child {
67 | margin-bottom: 0;
68 | }
69 |
70 | // Images
71 | > svg + svg,
72 | > img + img {
73 | margin-left: .5rem;
74 | }
75 |
76 | // Buttons
77 | > .btn,
78 | > .btn-group {
79 | margin: .25rem .125rem;
80 | }
81 | > .btn-toolbar + .btn-toolbar {
82 | margin-top: .5rem;
83 | }
84 |
85 | // List groups
86 | > .list-group {
87 | max-width: 400px;
88 | }
89 |
90 | > [class*="list-group-horizontal"] {
91 | max-width: 100%;
92 | }
93 |
94 | // Navbars
95 | .fixed-top,
96 | .sticky-top {
97 | position: static;
98 | margin: -1rem -1rem 1rem;
99 | }
100 |
101 | .fixed-bottom {
102 | position: static;
103 | margin: 1rem -1rem -1rem;
104 | }
105 |
106 | @include media-breakpoint-up(sm) {
107 | .fixed-top,
108 | .sticky-top {
109 | margin: -1.5rem -1.5rem 1rem;
110 | }
111 | .fixed-bottom {
112 | margin: 1rem -1.5rem -1.5rem;
113 | }
114 | }
115 |
116 | // Pagination
117 | .pagination {
118 | margin-top: .5rem;
119 | margin-bottom: .5rem;
120 | }
121 | }
122 | }
123 |
--------------------------------------------------------------------------------
/src/app/Components/nav-bar/nav-bar.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
2 | import { UserHomeDataService } from 'src/app/Service/user-home-data.service';
3 | import { BsDropdownConfig } from 'ngx-bootstrap/dropdown';
4 | import { AuthService } from 'src/app/Service/auth.service';
5 |
6 | @Component({
7 | selector: 'app-nav-bar',
8 | templateUrl: './nav-bar.component.html',
9 | styleUrls: ['./nav-bar.component.css'],
10 | providers: [{ provide: BsDropdownConfig, useValue: { isAnimated: true, autoClose: true } }]
11 |
12 | })
13 | export class NavBarComponent implements OnInit {
14 | cartLen: any;
15 | notLen: any;
16 | userId: any;
17 | profileImage:any;
18 | isAdmin=false;
19 | navElement: any
20 | constructor(public myService: UserHomeDataService ,private authService:AuthService) {
21 |
22 | }
23 | @HostListener("window:scroll", [])
24 | onWindowScroll() {
25 | if (window.scrollY > 0) {
26 | this.navElement.classList.add("nav-scrolled");
27 | } else {
28 | this.navElement.classList.remove("nav-scrolled");
29 | }
30 | }
31 |
32 | ngOnInit() {
33 |
34 | this.navElement = document.querySelector("#nav-con")
35 | this.myService.cartUpdated.subscribe((res) => {
36 | this.cartLen = res.apartments.length;
37 | });
38 | this.myService.notificationUpdated.subscribe((res) => {
39 | this.notLen = res.length;
40 | });
41 | this.myService.getData().subscribe({
42 | next:(data: any)=>{
43 | const {userData , notifications , carts} = data
44 | this.userId = userData ? userData._id : "notfound"
45 | this.userName = userData ? userData.name.split(" ")[0] : 'Guest'
46 | this.notLen = notifications ? notifications.length : 0
47 | this.cartLen = carts.length > 0 ? data['carts'][0]['apartments'].length : this.cartLen
48 | this.profileImage = userData ? userData.image : "/assets/photos/avatar02.png"
49 | this.isLoggedIn = localStorage.getItem('X-Auth-Token')
50 | }
51 | })
52 | this.isAdmin=this.authService.verify();
53 |
54 | }
55 |
56 | @Input("text-color") inputTextColor!:string;
57 | textColor!:string;
58 | element: any;
59 | @Output() toggle = new EventEmitter()
60 | userName: string = ' '
61 | isLoggedIn: any
62 |
63 | check(data: any){
64 | this.element = data.target.parentElement
65 | if(this.element.id === 'cart'){
66 | this.toggle.emit(true)
67 | }else{
68 | this.toggle.emit(false)
69 | }
70 | }
71 |
72 | logout(){
73 | localStorage.removeItem('X-Auth-Token')
74 | }
75 | }
76 |
77 |
78 |
79 |
--------------------------------------------------------------------------------
/src/app/Components/main-page-items-section/main-page-items-section.component.css:
--------------------------------------------------------------------------------
1 | .custom-image{
2 | width:100%;
3 | aspect-ratio: 1;
4 | object-fit: cover;
5 | border-radius: 15px;
6 |
7 | }
8 |
9 | .filter-btn {
10 | display: inline-block;
11 | width: 150px;
12 | height: 50px;
13 | position: relative;
14 | overflow: hidden;
15 | transition: all 0.5s ease-in;
16 | z-index: 1;
17 | border-style: none;
18 | }
19 |
20 | .filter-btn::before,
21 | .filter-btn::after {
22 | content: '';
23 | position: absolute;
24 | top: 0;
25 | width: 0;
26 | height: 100%;
27 | transform: skew(15deg);
28 | transition: all 0.5s;
29 | overflow: hidden;
30 | z-index: -1;
31 | }
32 |
33 | .filter-btn::before {
34 | left: -10px;
35 | background: #099DFD;
36 | }
37 |
38 | .filter-btn::after {
39 | right: -10px;
40 | background: #099DFD;
41 | }
42 |
43 | .filter-btn:hover::before,
44 | .filter-btn:hover::after {
45 | width: 58%;
46 | }
47 |
48 | .filter-btn:hover span {
49 | color: #eeee;
50 | transition: 0.3s;
51 | }
52 |
53 | .filter-btn span {
54 | color: #eeee;
55 | font-size: 18px;
56 | transition: all 0.3s ease-in;
57 | }
58 |
59 | .cart-btn-add , .cart-btn-remove {
60 | position: relative;
61 | font-size: 17px;
62 | text-transform: uppercase;
63 | text-decoration: none;
64 | padding: .8em 2em;
65 | display: inline-block;
66 | border-radius: 6em;
67 | transition: all .2s;
68 | border: none;
69 | font-family: inherit;
70 | font-weight: 500;
71 | color: white;
72 | width: 100%;
73 | }
74 |
75 | .cart-btn-add{
76 | background-color: black;
77 | }
78 |
79 | .cart-btn-remove{
80 | background-color: rgb(122, 122, 122);
81 | }
82 |
83 | .cart-btn-add:hover , .cart-btn-remove:hover {
84 | transform: translateY(-3px);
85 | box-shadow: 0 10px 20px rgba(255, 255, 255, 0.8);
86 | }
87 |
88 | .cart-btn-add:active , .cart-btn-remove:active {
89 | transform: translateY(-1px);
90 | box-shadow: 0 5px 10px rgba(255, 255, 255, 0.8);
91 | }
92 |
93 | .cart-btn-add::after , .cart-btn-remove::after {
94 | content: "";
95 | display: inline-block;
96 | height: 100%;
97 | width: 100%;
98 | border-radius: 100px;
99 | position: absolute;
100 | top: 0;
101 | left: 0;
102 | z-index: -1;
103 | transition: all .4s;
104 | }
105 |
106 | .cart-btn-add::after {
107 | background-color: black;
108 | }
109 |
110 | .cart-btn-remove::after {
111 | background-color: rgb(88, 88, 88);
112 | }
113 |
114 | .cart-btn-add:hover::after , .cart-btn-remove:hover::after{
115 | transform: scaleX(1.2) scaleY(1.6);
116 | opacity: 0;
117 | }
118 |
119 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Agora - Frontend
2 |
3 | This is the frontend application for Agora, a property auction platform built with Angular. Agora allows users to browse property auctions, place bids, and participate in the auction process.
4 |
5 | ## Table of Contents
6 |
7 | - [Project Overview](#project-overview)
8 | - [Installation](#installation)
9 | - [Usage](#usage)
10 | - [Dependencies](#dependencies)
11 | - [Contributors](#contributors)
12 |
13 | ## Project Overview
14 |
15 | The Agora frontend is a single-page application built with Angular. It provides a user-friendly interface for interacting with the Agora auction platform. The frontend integrates with the Agora backend API to fetch data and perform actions such as bidding on properties and managing user accounts.
16 | - [server github link](https://github.com/AhmedMohamedZein/Agoura-Node)
17 | - [live website](https://agora-4.web.app)
18 |
19 | ## Installation
20 |
21 | To install and set up the Agora frontend locally, follow these steps:
22 |
23 | 1. Clone the repository: `git clone https://github.com/Mohamedyousef44/Agoura-Angular.git`
24 | 2. Navigate to the project directory: `cd agora-frontend`
25 | 3. Install the dependencies: `npm install`
26 | 4. Set up the required configuration:
27 | 5. Run the application: `npm start`
28 |
29 | ## Usage
30 |
31 | To use the Agora frontend, follow these steps:
32 |
33 | 1. Access the application through the provided URL or local development server.
34 | 2. Register an account or log in with existing credentials.
35 | 3. Browse available property auctions.
36 | 4. View auction details, including property information, starting price, and current bids.
37 | 5. Place bids on desired properties.
38 | 6. Monitor auction status and outbid other users.
39 | 7. If you win an auction, follow the instructions to complete the payment process.
40 |
41 | ## Dependencies
42 |
43 | The Agora frontend relies on the following dependencies:
44 |
45 | - [Angular](https://angular.io/) - A powerful framework for building web applications.
46 | - [Ngx Spinner](https://www.npmjs.com/package/ngx-spinner) - A library for displaying loading spinners in Angular.
47 | - [Ngx Angular](https://github.com/ngx-rocket/starter-kit) - A starter kit for Angular projects.
48 | - [CoreUI](https://coreui.io/) - A UI library for building responsive web applications.
49 |
50 |
51 |
52 | ## Contributors
53 |
54 | The contributors to the Agora frontend include:
55 | - [Ahmed Hamada](https://github.com/AhmedHamada011)
56 | - [Ahmed Zain](https://avatars.githubusercontent.com/u/74258945?s=64&v=4)
57 | - [Mahmoud Elbasiony](https://github.com/mahmoud-elbasiony)
58 | - [Mohamed Yossef](https://github.com/Mohamedyousef44)
59 | - [Omar Alaa](https://github.com/omar1896)
60 | - [Mostafa Ashraf](https://github.com/Mostafaa133)
61 |
62 |
63 |
--------------------------------------------------------------------------------
/src/app/Components/Payment/payment-method/payment-method.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { FormControl, FormGroup, Validators } from '@angular/forms';
3 | import { ActivatedRoute, Router } from '@angular/router';
4 | import { CheckoutService } from 'src/app/Service/checkout.service';
5 |
6 | @Component({
7 | selector: 'app-payment-method',
8 | templateUrl: './payment-method.component.html',
9 | styles: [
10 | ]
11 | })
12 | export class PaymentMethodComponent {
13 | id:any;
14 | public customerPaymentInfo : any = {} ;
15 | public validationForm = new FormGroup({
16 | name: new FormControl(null,[Validators.required, Validators.pattern('^[a-zA-Z ]*$'), Validators.maxLength(32) , Validators.minLength(15)]),
17 | cardNumber : new FormControl(null,[Validators.required , Validators.minLength(16)]),
18 | expiryDate: new FormControl(null, [Validators.required, Validators.pattern('^(0[1-9]|1[0-2])\/([0-9]{4}|[0-9]{2})$') , Validators.minLength(5) ] ),
19 | cvv : new FormControl(null , [Validators.required, Validators.minLength(3)])
20 | });
21 | constructor(private checkoutService:CheckoutService,private route:ActivatedRoute,private router:Router){
22 | this.id=this.route.snapshot.params['id'];
23 |
24 | }
25 |
26 | validate(){
27 | if (this.validationForm.valid){
28 | this.customerPaymentInfo["name"] = this.validationForm.controls["name"].value;
29 | this.customerPaymentInfo["cardNumber"] = this.validationForm.controls["cardNumber"].value;
30 | this.customerPaymentInfo["expiryDate"] = this.validationForm.controls["expiryDate"].value;
31 | this.customerPaymentInfo["cvv"] = this.validationForm.controls["cvv"].value;
32 |
33 | // HTTP 1.1 Post to the server-side
34 | this.checkoutService.checkout(this.id,this.validationForm.value).subscribe({
35 | next:(res:any)=>{
36 | console.log(res)
37 | window.location=res.url
38 | },
39 | error:()=>{
40 | }
41 | })
42 |
43 | }
44 | }
45 | get name () {
46 | return this.validationForm.controls["name"].valid;
47 | }
48 | get cardNumber () {
49 | return this.validationForm.controls["cardNumber"].valid;
50 | }
51 | get expiryDate () {
52 | return this.validationForm.controls["expiryDate"].valid;
53 | }
54 | get cvv () {
55 | return this.validationForm.controls["cvv"].valid
56 | }
57 | isNameDirty(){
58 | return this.validationForm.controls["name"].dirty;
59 | }
60 | isCardNumberDirty(){
61 | return this.validationForm.controls["cardNumber"].dirty;
62 | }
63 | isCVVDirty() {
64 | return this.validationForm.controls["cvv"].dirty;
65 | }
66 |
67 | isExpiryDateDirty(){
68 | return this.validationForm.controls["expiryDate"].dirty;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/app/Components/main-page-items-section/main-page-items-section.component.html:
--------------------------------------------------------------------------------
1 |
67 |
68 |
70 |
71 |
72 |
2 |
88 |
--------------------------------------------------------------------------------
/src/app/Components/product-details/product-details.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormControl,FormGroup, Validators } from '@angular/forms';
3 | import { ActivatedRoute, Router } from '@angular/router';
4 | import { NgxSpinnerService } from 'ngx-spinner';
5 | import { BidsService } from 'src/app/Service/bids.service';
6 | import { ToastService } from 'src/app/Service/toast-service.service';
7 |
8 | @Component({
9 | selector: 'app-product-details',
10 | templateUrl: './product-details.component.html',
11 | styleUrls: ['./product-details.component.css']
12 | })
13 | export class ProductDetailsComponent implements OnInit{
14 |
15 | form!:FormGroup;
16 | placeObj!:any;
17 | maxBid!:number;
18 | thumbnail!:any;
19 | public constructor(private myService:BidsService,private route:ActivatedRoute,private router:Router,private toastService: ToastService , private spinner: NgxSpinnerService){
20 |
21 | }
22 | ngOnInit(): void {
23 | let bidId=this.route.snapshot.params["id"]
24 | this.spinner.show('homeSpinner')
25 | this.myService.GetBidById(bidId).subscribe({
26 | next:(res:any)=>{
27 | if(res.success){
28 | this.populate(res)
29 | }
30 | this.spinner.hide('homeSpinner')
31 | },
32 | error:(err)=>{
33 | this.router.navigateByUrl(`404-NotFound`)
34 | console.log(err)
35 | }
36 | })
37 |
38 | }
39 |
40 | public populate(res:any){
41 | this.placeObj=res.data.appartment
42 | if(this.placeObj.bids.length>0){
43 | this.maxBid=res.data.appartment.bids[0].amountMoney
44 | }else{
45 | this.maxBid=res.data.appartment.startBid
46 | }
47 | this.thumbnail=res.data.appartment.images[0]
48 | this.form=new FormGroup({
49 | bid: new FormControl(this.maxBid,Validators.min(this.maxBid+1)),
50 | })
51 | }
52 |
53 | public changeImage(event:any){
54 | this.thumbnail=event.target.src
55 | }
56 | get bid(){
57 | return this.form.get("bid");
58 | }
59 |
60 | onSubmit(){
61 | this.bid?.markAsDirty()
62 | if(!localStorage.getItem("X-Auth-Token")){
63 | this.toastService.activateToast(
64 | "you need to login first.",
65 | false
66 | );
67 | }
68 | if(!this.form.valid){
69 | return
70 | }
71 | // toDo add form submit logic here
72 | let data={
73 | amountMoney:this.bid!.value,
74 | apartmentID:this.placeObj._id,
75 | userToken:localStorage.getItem("X-Auth-Token")
76 | }
77 |
78 | this.myService.addNewBid(data).subscribe(
79 | {
80 | next:(res:any)=>{
81 | if(res.success){
82 | this.populate(res)
83 |
84 | }
85 | },
86 | error:(err)=>{
87 | console.log(err)
88 | }
89 | }
90 | );
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/src/app/Components/dashboard/views/dashboard-bid-details/dashboard-bid-details.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute, Router } from '@angular/router';
3 | import { BidsService } from 'src/app/Service/bids.service';
4 | import { FormControl,FormGroup, Validators } from '@angular/forms';
5 | import { DashboardTableService } from 'src/app/Service/dashboard-table.service';
6 |
7 | @Component({
8 | selector: 'app-dashboard-bid-details',
9 | templateUrl: './dashboard-bid-details.component.html',
10 | styleUrls: ['./dashboard-bid-details.component.css']
11 | })
12 | export class DashboardBidDetailsComponent implements OnInit{
13 |
14 | placeObj:any;
15 | form!:FormGroup;
16 | constructor(private dasboardService:DashboardTableService,private myService:BidsService,private route:ActivatedRoute,private router:Router){
17 |
18 | }
19 | sendNotes(){
20 | if(this.form.valid){
21 | this.myService.bidNeedsMoreInfo(this.placeObj._id,this.form.value).subscribe({
22 | next:(res:any)=>{
23 | console.log(res)
24 | if(res.success){
25 | this.placeObj=res.data.appartment
26 | }
27 | // this.router.navigateByUrl("/dashboard/bids/"+this.route.snapshot.params["id"])
28 | },
29 | error:(err)=>{
30 | console.log(err)
31 | }
32 | })
33 | }
34 | }
35 | approve(){
36 | this.myService.approveBidById(this.placeObj._id,{_id:this.placeObj._id}).subscribe({
37 | next:(res:any)=>{
38 | console.log(res)
39 | if(res.success){
40 | this.placeObj=res.data.appartment
41 | }
42 |
43 | // this.router.navigateByUrl("/dashboard/bids/"+this.route.snapshot.params["id"])
44 | },
45 | error:(err)=>{
46 | console.log(err)
47 | }
48 | })
49 | }
50 | cancel(){
51 | this.myService.cancelBidById(this.placeObj._id,{_id:this.placeObj._id}).subscribe({
52 | next:(res:any)=>{
53 | console.log(res)
54 | if(res.success){
55 | this.placeObj=res.data.appartment
56 | }
57 |
58 | // this.router.navigateByUrl("/dashboard/bids/"+this.route.snapshot.params["id"])
59 | },
60 | error:(err)=>{
61 | console.log(err)
62 | }
63 | })
64 | }
65 | ngOnInit(): void {
66 | this.form=new FormGroup({
67 | notes: new FormControl("",Validators.minLength(10)),
68 | })
69 | let placeId=this.route.snapshot.params["id"]
70 | this.dasboardService.GetPlaceById(placeId).subscribe({
71 | next:(res:any)=>{
72 | console.log(res)
73 | if(res.success){
74 | this.placeObj=res.data.appartment
75 | console.log(res.data.appartment.images)
76 | }
77 | },
78 | error:(err)=>{
79 | this.router.navigateByUrl(`404-NotFound`)
80 | console.log(err)
81 | }
82 | })
83 |
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/src/app/Components/Auth/sign-up/sign-up.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { FormControl, FormGroup, Validators } from '@angular/forms';
3 | import { Router } from '@angular/router';
4 | import { AuthService } from 'src/app/Service/auth.service';
5 |
6 | @Component({
7 | selector: 'app-sign-up',
8 | templateUrl: './sign-up.component.html',
9 | styles: [
10 | ]
11 | })
12 | export class SignUpComponent {
13 | public userData : any = {}
14 | public error!:string|null;
15 | public validationForm:FormGroup ;
16 |
17 | public constructor(private myService:AuthService,private route:Router){
18 |
19 | this.validationForm = new FormGroup({
20 | email: new FormControl(null,[Validators.required, Validators.email]),
21 | username : new FormControl (null,[Validators.required , Validators.minLength(3)]),
22 | password: new FormControl(null,[ Validators.required, Validators.minLength(10), Validators.maxLength(60) ]),
23 | confirmPassword : new FormControl(null , [Validators.required , Validators.minLength(10), Validators.maxLength(60) ])
24 | });
25 | }
26 |
27 | validate(){
28 | if (this.validationForm.valid){
29 | this.userData['email'] = this.validationForm.controls["email"].value ;
30 | this.userData['name'] = this.validationForm.controls["username"].value ;
31 | this.userData['password'] = this.validationForm.controls["password"].value ;
32 | this.userData['confirmPassword'] = this.validationForm.controls["confirmPassword"].value ;
33 | this.error=null;
34 | this.signUp()
35 | }
36 | }
37 | get email () {
38 | return this.validationForm.controls["email"].valid;
39 | }
40 |
41 | get username () {
42 | return this.validationForm.controls["username"].valid;
43 | }
44 |
45 | get password () {
46 | return this.validationForm.controls["password"].valid;
47 | }
48 |
49 | get confirmPassword () {
50 | return this.validationForm.controls["confirmPassword"].valid;
51 | }
52 |
53 | isEmailDirty(){
54 | return this.validationForm.controls["email"].dirty;
55 | }
56 | isUsernameDirty(){
57 | return this.validationForm.controls["username"].dirty;
58 | }
59 | isPasswordDirty(){
60 | return this.validationForm.controls["password"].dirty;
61 | }
62 |
63 | isConfirmPasswordDirty(){
64 | return this.validationForm.controls["confirmPassword"].dirty;
65 | }
66 |
67 | arePasswordsEqual() {
68 | if ( this.validationForm.controls["password"].value == this.validationForm.controls["confirmPassword"].value) {
69 | return false;
70 | }
71 | else {
72 | return true;
73 | }
74 | }
75 | signUp(){
76 | this.myService.signUp(this.userData).subscribe(
77 | {
78 | next:(data:any)=>{
79 | if(data.success){
80 | this.route.navigateByUrl("/login")
81 | }
82 | this.error=data.message;
83 | },
84 | error:(err)=>err
85 | }
86 | )
87 | }
88 | }
89 |
--------------------------------------------------------------------------------
/src/app/Components/Auth/login/login.component.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
87 |
5 |
45 |
46 |
6 |
12 |
18 |
24 |
30 |
31 |
37 |
43 |
44 |
47 |
86 |
48 |
85 |
52 |
53 |
54 |
55 | 
61 |
62 |
63 |
84 |
64 |
83 | 65 | {{ item.title | uppercase }} 66 |
67 |68 | {{ item.address.city | uppercase }},{{ 69 | item.address.country | uppercase 70 | }} 71 |
72 |73 | Starts From: {{ item.startBid | currency }} 74 |
75 | 82 |
2 |
10 |
14 |
85 |
86 |
--------------------------------------------------------------------------------
/src/app/Components/offcanvas/offcanvas.component.html:
--------------------------------------------------------------------------------
1 | 19 | Log in to Agoura 20 |
21 |
24 |
26 | 76 |
84 | 26 | 76 |
77 | Forget Password ?
78 |
79 |
80 | Don't have an account?
81 | Sign up
82 |
83 |
9 |
89 |
--------------------------------------------------------------------------------
/src/app/Components/Profile/profile/profile.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormControl, FormGroup } from '@angular/forms';
3 | import { ActivatedRoute } from '@angular/router';
4 | import { NgxSpinnerService } from 'ngx-spinner';
5 | import { ProfilePageService } from 'src/app/Service/profile-page.service';
6 | import jwt_decode from 'jwt-decode';
7 |
8 | @Component({
9 | selector: 'app-profile',
10 | templateUrl: './profile.component.html',
11 | styleUrls: ['./profile.component.css'],
12 | })
13 | export class ProfileComponent implements OnInit {
14 | userID: any;
15 | UserDetails: any;
16 | userImage = " ";
17 | validationForm: any;
18 | profileValid = false;
19 | userToken: any;
20 |
21 | constructor(
22 | public myService: ProfilePageService,
23 | public route: ActivatedRoute,
24 | private spinner: NgxSpinnerService
25 | ) {
26 | this.route.params.subscribe((params) => {
27 | this.userID = params['id'];
28 | });
29 | this.userToken = localStorage.getItem('X-Auth-Token')
30 | }
31 |
32 | goDown() {
33 | window.scroll(0, 630);
34 | }
35 |
36 | ngOnInit(): void {
37 |
38 | this.myService.Image.subscribe((info) => {
39 | this.userImage = info.data.image;
40 | });
41 |
42 | this.spinner.show('homeSpinner');
43 | this.myService.GetUserByID(this.userID).subscribe({
44 | next: (data: any) => {
45 | this.UserDetails = data;
46 | const image = data.image;
47 | if (image) this.userImage = image
48 | else this.userImage = '/assets/imgs/default.jpg';
49 | this.spinner.hide('homeSpinner');
50 |
51 | this.validationForm = new FormGroup({
52 | profileImage: new FormControl(null),
53 | });
54 | },
55 | error: (err: any) => {
56 | console.log(err);
57 | },
58 | });
59 | }
60 |
61 | onFileSelected(event: any) {
62 | if (this.validateFile(event.target.files[0].name)) {
63 | this.profileValid = true;
64 | this.userImage = event.target.files[0];
65 | return;
66 | }
67 | }
68 |
69 | validateFile(name: string) {
70 | let ext = name.substring(name.lastIndexOf('.') + 1);
71 | if (ext.toLowerCase() == 'png' || ext.toLowerCase() == 'jpg') {
72 | return true;
73 | } else {
74 | return false;
75 | }
76 | }
77 |
78 | changeImage() {
79 | const fd = new FormData();
80 | fd.append('profileImage', this.userImage);
81 | this.myService.changeUserPicture(this.userID, fd).subscribe({
82 | next: (response: any) => {
83 | this.userImage = response.data['image'];
84 | },
85 | });
86 | }
87 |
88 | decode(token: any){
89 | if(token){
90 | var decoded = jwt_decode(token)
91 | return decoded
92 | }
93 | return false
94 | }
95 |
96 | isAuthorized(){
97 | const user : any = this.decode(this.userToken)
98 | if(user) return this.userID == user.userId
99 | return false
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/src/app/Components/Payment/checkout/checkout.component.html:
--------------------------------------------------------------------------------
1 |
10 |
20 | 11 | {{ toggle == true ? "Cart" : "Notifications" }} 12 |
13 | 19 |
21 |
88 |
22 |
23 |
53 |
54 |
55 |
85 |
86 |
87 | 
75 |
2 |
5 |
63 |
--------------------------------------------------------------------------------
/src/app/Components/Payment/payment-method/payment-method.component.html:
--------------------------------------------------------------------------------
1 |
6 |
62 |
7 |
61 |
8 |
11 | ![]()
13 |
14 | {{data.title | uppercase}}
12 |
15 |
59 |
60 | Payment Method
3 | 50 |
2 |
91 |
--------------------------------------------------------------------------------
/src/app/Components/Profile/EditProfile/edit-profile/edit-profile.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute, Router } from '@angular/router';
3 | import { ProfilePageService } from 'src/app/Service/profile-page.service';
4 | import { AbstractControl, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
5 | import { NgxSpinnerService } from 'ngx-spinner';
6 |
7 | @Component({
8 | selector: 'app-edit-profile',
9 | templateUrl: './edit-profile.component.html',
10 | styleUrls: ['./edit-profile.component.css'],
11 | })
12 | export class EditProfileComponent implements OnInit {
13 | User: any;
14 | validationForm:any;
15 | myForm: any;
16 | ProfileImage:any;
17 | userId: any;
18 | showPass = false;
19 |
20 | constructor(
21 | public myService: ProfilePageService,
22 | public router: Router,
23 | private route: ActivatedRoute,
24 | private spinner: NgxSpinnerService
25 | ) {
26 | this.route.parent?.paramMap.subscribe(params => {
27 | this.userId = params.get('id');
28 | });
29 | }
30 |
31 | // imageExtensionValidator(allowedExtensions: string[]): ValidatorFn {
32 | // return (control: AbstractControl): {[key: string]: any} | null => {
33 | // const file = control.value;
34 | // if (file) {
35 | // const fileExtension = file.name.split('.').pop().toLowerCase();
36 | // if (allowedExtensions.indexOf(fileExtension) === -1) {
37 | // return {'invalidExtension': true};
38 | // }
39 | // }
40 | // return null;
41 | // };
42 | // }
43 |
44 | ngOnInit(): void {
45 |
46 | this.myService.GetUserByID(this.userId).subscribe({
47 | next: (data) => {
48 | console.log(data);
49 | this.User = data;
50 | this.validationForm = new FormGroup({
51 | userName: new FormControl(this.User.name, [Validators.required,Validators.minLength(3) ]),
52 | // age: new FormControl(this.User.age, [Validators.required,Validators.pattern(/^[0-9]*$/),Validators.min(18)]),
53 | // address: new FormControl(this.User.address, [Validators.required]),
54 | // phone: new FormControl(this.User.phone, [Validators.required,Validators.minLength(10),Validators.pattern(/^[0-9]*$/)]),
55 | email: new FormControl(this.User.email, [Validators.email, Validators.required]),
56 | profileImage: new FormControl( this.User.imag ),
57 | password: new FormControl(this.User.password)
58 | });
59 | // this.validationForm.patchValue(this.User)
60 |
61 | },
62 | error: (err) => {console.log(err)},
63 | });
64 |
65 | }
66 |
67 |
68 | get userName() {
69 | return this.validationForm.controls['userName'];
70 | }
71 | get age() {
72 | return this.validationForm.controls['age'];
73 | }
74 | get email() {
75 | return this.validationForm.controls['email'];
76 | }
77 | get phone() {
78 | return this.validationForm.controls['phone'];
79 | }
80 | get address() {
81 | return this.validationForm.controls['address'];
82 | }
83 |
84 | get profileImage() {
85 | return this.validationForm.controls['profileImage'];
86 | }
87 |
88 |
89 | onFileSelected(event: any){
90 | this.ProfileImage=event.target.files[0]
91 | }
92 |
93 | updateUser(){
94 | this.spinner.show('updateSpinner')
95 | if (this.validationForm.valid) {
96 | const fd = new FormData();
97 | fd.append('data', JSON.stringify(this.validationForm.value));
98 |
99 | if (this.ProfileImage instanceof File) {
100 | fd.append('profileImage', this.ProfileImage);
101 | }
102 |
103 | this.myService.UpdateUser(fd,this.userId)
104 | }
105 | }
106 |
107 | }
108 |
--------------------------------------------------------------------------------
/src/app/Components/nav-bar/nav-bar.component.html:
--------------------------------------------------------------------------------
1 |
109 |
--------------------------------------------------------------------------------
/src/app/Components/Profile/profile/profile.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
90 | Bid History
4 |
5 |
65 |
66 |
6 |
64 |
7 |
13 |
8 |
12 |
9 | 
10 |
11 |
14 |
63 |
15 |
62 |
16 |
21 |
17 |
20 | Current Bid:
18 | {{ bids.currentBid }} EUR
19 |
22 |
27 |
23 |
26 | Item id:
24 | {{ bids.itemNumber }}
25 |
28 |
39 |
29 |
38 |
30 | Bids:
31 | {{ bids.numberOfBids }}
32 |
33 |
34 | Bidders:
35 | {{ bids.numberOfBidders }}
36 |
37 |
40 |
53 |
41 |
52 |
42 | Time left:
43 | {{
44 | bids.timeLeft | date : "medium"
45 | }}
46 |
47 |
48 | Duration:
49 | {{ bids.duration }}
50 |
51 |
54 | Place Bid
60 |
61 | 65 |
67 |
68 |
69 |
85 | Back
88 |
89 | | Bidder | 71 |Bid Amount | 72 |Bid Time | 73 |
|---|---|---|
| 78 | {{ item.user }} (1) 79 | | 80 |{{ item["amountMoney"] }} EUR | 81 |{{ item["date"] | date : "medium" }} | 82 |
3 |
72 |
114 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "Agoura": {
7 | "projectType": "application",
8 | "schematics": {},
9 | "root": "",
10 | "sourceRoot": "src",
11 | "prefix": "app",
12 | "architect": {
13 | "build": {
14 | "builder": "@angular-devkit/build-angular:browser",
15 | "options": {
16 | "outputPath": "dist/agoura",
17 | "index": "src/index.html",
18 | "main": "src/main.ts",
19 | "polyfills": [
20 | "zone.js"
21 | ],
22 | "tsConfig": "tsconfig.app.json",
23 | "assets": [
24 | "src/favicon.ico",
25 | "src/assets"
26 | ],
27 | "styles": [
28 | "src/styles.css",
29 | "src/scss/styles.scss",
30 | "node_modules/ngx-spinner/animations/square-jelly-box.css",
31 | "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
32 | "node_modules/@fortawesome/fontawesome-free/css/solid.min.css",
33 | "node_modules/@fortawesome/fontawesome-free/css/regular.min.css",
34 | "node_modules/@fortawesome/fontawesome-free/css/brands.min.css",
35 | "node_modules/@coreui/icons/css/all.css",
36 | "node_modules/@coreui/coreui/dist/css/coreui.min.css",
37 | "node_modules/bootstrap/dist/css/bootstrap.min.css",
38 | "node_modules/animate.css/animate.min.css"
39 | ],
40 | "scripts": [
41 | "node_modules/bootstrap/dist/js/bootstrap.js",
42 | "node_modules/@coreui/coreui/dist/js/coreui.min.js"
43 | ]
44 | },
45 | "configurations": {
46 | "production": {
47 | "budgets": [
48 | {
49 | "type": "initial",
50 | "maximumWarning": "10000kb",
51 | "maximumError": "5mb"
52 | },
53 | {
54 | "type": "anyComponentStyle",
55 | "maximumWarning": "2kb",
56 | "maximumError": "4kb"
57 | }
58 | ],
59 | "outputHashing": "all"
60 | },
61 | "development": {
62 | "buildOptimizer": false,
63 | "optimization": false,
64 | "vendorChunk": true,
65 | "extractLicenses": false,
66 | "sourceMap": true,
67 | "namedChunks": true
68 | }
69 | },
70 | "defaultConfiguration": "production"
71 | },
72 | "serve": {
73 | "builder": "@angular-devkit/build-angular:dev-server",
74 | "configurations": {
75 | "production": {
76 | "browserTarget": "Agoura:build:production"
77 | },
78 | "development": {
79 | "browserTarget": "Agoura:build:development"
80 | }
81 | },
82 | "defaultConfiguration": "development"
83 | },
84 | "extract-i18n": {
85 | "builder": "@angular-devkit/build-angular:extract-i18n",
86 | "options": {
87 | "browserTarget": "Agoura:build"
88 | }
89 | },
90 | "test": {
91 | "builder": "@angular-devkit/build-angular:karma",
92 | "options": {
93 | "polyfills": [
94 | "zone.js",
95 | "zone.js/testing"
96 | ],
97 | "tsConfig": "tsconfig.spec.json",
98 | "assets": [
99 | "src/favicon.ico",
100 | "src/assets"
101 | ],
102 | "styles": [
103 | "@angular/material/prebuilt-themes/indigo-pink.css",
104 | "src/styles.css"
105 | ],
106 | "scripts": []
107 | }
108 | }
109 | }
110 | }
111 | },
112 | "cli": {
113 | "analytics": false
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/src/app/Components/Auth/sign-up/sign-up.component.html:
--------------------------------------------------------------------------------
1 |
4 |
68 |
5 | 
9 |
30 |
37 |
41 |
67 |
9 |
10 |
29 |
11 | 
12 |
18 |
28 | Updating...
69 |
71 |
2 |
10 |
14 |
124 |
125 |
--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 | import { ProductDetailsComponent } from './Components/product-details/product-details.component';
4 | import { HomeComponent } from './Components/home/home.component';
5 | import { LayoutComponent } from './Components/layout/layout.component';
6 | import { LoginComponent } from './Components/Auth/login/login.component';
7 | import { SignUpComponent } from './Components/Auth/sign-up/sign-up.component';
8 | import { CheckoutComponent } from './Components/Payment/checkout/checkout.component';
9 | import { ProfileComponent } from './Components/Profile/profile/profile.component';
10 | import { EditProfileComponent } from './Components/Profile/EditProfile/edit-profile/edit-profile.component';
11 | import { AboutComponent } from './Components/about/about.component';
12 | import { CreateProductFormComponent } from './Components/create-product-form/create-product-form.component';
13 | import { BidHistoryComponent } from './Components/bid-history/bid-history.component';
14 | import { ForgetPasswordComponent } from './Components/forget-password/forget-password.component';
15 | import { OtpComponent } from './Components/otp/otp.component';
16 | import { NotfoundPageComponent } from './Components/notfound-page/notfound-page.component';
17 | import { DefaultLayoutComponent } from './Components/dashboard/containers';
18 | import { BidsComponent } from './Components/dashboard/views/bids/bids.component';
19 | import { ChartsComponent } from './Components/dashboard/views/charts/charts.component';
20 | import { DashboardBidDetailsComponent } from './Components/dashboard/views/dashboard-bid-details/dashboard-bid-details.component';
21 | import { EditProductFormComponent } from './Components/edit-product-form/edit-product-form.component';
22 | import { UserBidsComponent } from './Components/Profile/bids/bids.component';
23 | import { OrdersComponent } from './Components/Profile/orders/orders.component';
24 | import { ApartmentsComponent } from './Components/Profile/apartments/apartments.component';
25 | import { ResetPasswordComponent } from './Components/reset-password/reset-password.component';
26 | import { AuthGuard } from './core/guards/auth.guard';
27 | import { ChangePassComponent } from './Components/Profile/changepass/changepass.component';
28 | import { DashboardUsersComponent } from './Components/dashboard/views/dashboard-users/dashboard-users.component';
29 | import { PaymentSuccessComponent } from './Components/Payment/payment-success/payment-success.component';
30 | import { PaymentFailComponent } from './Components/Payment/payment-fail/payment-fail.component';
31 | import { AdminAuthGuard } from './core/guards/admin-auth.guard';
32 | import { GuestAuthGuard } from './core/guards/guest-auth.guard';
33 |
34 |
35 |
36 | const routes: Routes = [
37 | { path: '', redirectTo: '/home', pathMatch: 'full' },
38 | {
39 | path: '',
40 | component: LayoutComponent,
41 | children: [
42 | { path: 'home', component: HomeComponent },
43 | { path: 'place/create', component: CreateProductFormComponent , canActivate:[AuthGuard] },
44 | { path: 'place/:id', component: ProductDetailsComponent },
45 | { path: 'place/:id/edit', component: EditProductFormComponent , canActivate:[AuthGuard] },
46 | { path: 'place/:id/history', component: BidHistoryComponent , canActivate:[AuthGuard] },
47 | { path: 'about', component: AboutComponent },
48 | { path: "checkout/:id" , component : CheckoutComponent , canActivate:[AuthGuard]},
49 | { path: "users/:id",component:ProfileComponent , canActivate:[AuthGuard] ,children:[
50 | { path:"edit",component:EditProfileComponent , pathMatch:'full'},
51 | { path:"bids",component:UserBidsComponent},
52 | { path:"orders",component:OrdersComponent},
53 | { path:"apartments",component:ApartmentsComponent},
54 | { path:"password",component:ChangePassComponent},
55 | ]},
56 | ],
57 | },
58 | { path: "dashboard" ,component:DefaultLayoutComponent,canActivate:[AdminAuthGuard] ,children:[
59 | { path: '', redirectTo: 'charts', pathMatch: 'full' },
60 | { path: "apartments",component:BidsComponent },
61 | { path: "apartments/:id",component:DashboardBidDetailsComponent },
62 | { path: "charts",component:ChartsComponent },
63 | {path:"users",component:DashboardUsersComponent}
64 | ]},
65 | {path : '404-NotFound', component: NotfoundPageComponent},
66 | {path : 'login' , component : LoginComponent,canActivate:[GuestAuthGuard]},
67 | {path : 'signup' , component: SignUpComponent,canActivate:[GuestAuthGuard]},
68 | {path : 'forgetpassword' , component: ForgetPasswordComponent},
69 | {path: 'otp', component: OtpComponent},
70 | {path: 'resetpassword', component: ResetPasswordComponent},
71 | { path: "PaymentFail" , component : PaymentFailComponent , canActivate:[AuthGuard]},
72 | { path: "PaymentSuccess" , component : PaymentSuccessComponent , canActivate:[AuthGuard]},
73 | {path : '**', component: NotfoundPageComponent},
74 |
75 | ];
76 |
77 |
78 | @NgModule({
79 | imports: [RouterModule.forRoot(routes)],
80 | exports: [RouterModule],
81 | })
82 | export class AppRoutingModule {}
83 |
--------------------------------------------------------------------------------
/src/app/Components/dashboard/containers/default-layout/default-header/default-header.component.html:
--------------------------------------------------------------------------------
1 |
2 |