diff options
Diffstat (limited to 'src')
29 files changed, 650 insertions, 294 deletions
diff --git a/src/DevHive.Angular/src/app/app-constants.module.ts b/src/DevHive.Angular/src/app/app-constants.module.ts new file mode 100644 index 0000000..df676da --- /dev/null +++ b/src/DevHive.Angular/src/app/app-constants.module.ts @@ -0,0 +1,8 @@ +export class AppConstants { + public static BASE_API_URL = 'http://localhost:5000/api'; + public static API_USER_URL = AppConstants.BASE_API_URL + '/User'; + public static API_USER_LOGIN_URL = AppConstants.API_USER_URL + '/login'; + public static API_USER_REGISTER_URL = AppConstants.API_USER_URL + '/register'; + + public static FETCH_TIMEOUT = 500; +} diff --git a/src/DevHive.Angular/src/app/app-routing.module.ts b/src/DevHive.Angular/src/app/app-routing.module.ts index b733655..7817dcb 100644 --- a/src/DevHive.Angular/src/app/app-routing.module.ts +++ b/src/DevHive.Angular/src/app/app-routing.module.ts @@ -3,11 +3,15 @@ import { Routes, RouterModule } from '@angular/router'; import { FeedComponent } from './components/feed/feed.component'; import { LoginComponent } from './components/login/login.component'; import { RegisterComponent } from './components/register/register.component'; +import { ProfileComponent } from './components/profile/profile.component'; +import {ProfileSettingsComponent} from './components/profile-settings/profile-settings.component'; const routes: Routes = [ { path: '', component: FeedComponent }, { path: 'login', component: LoginComponent }, - { path: 'register', component: RegisterComponent } + { path: 'register', component: RegisterComponent }, + { path: 'profile/:username', component: ProfileComponent }, + { path: 'profile/:username/settings', component: ProfileSettingsComponent } ]; @NgModule({ diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts index 6270561..7158941 100644 --- a/src/DevHive.Angular/src/app/app.module.ts +++ b/src/DevHive.Angular/src/app/app.module.ts @@ -12,6 +12,8 @@ import { LoginComponent } from './components/login/login.component'; import { RegisterComponent } from './components/register/register.component'; import { FeedComponent } from './components/feed/feed.component'; import { PostComponent } from './components/post/post.component'; +import { ProfileComponent } from './components/profile/profile.component'; +import { ProfileSettingsComponent } from './components/profile-settings/profile-settings.component'; @NgModule({ declarations: [ @@ -19,7 +21,9 @@ import { PostComponent } from './components/post/post.component'; LoginComponent, RegisterComponent, FeedComponent, - PostComponent + PostComponent, + ProfileComponent, + ProfileSettingsComponent ], imports: [ BrowserModule, diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.css b/src/DevHive.Angular/src/app/components/feed/feed.component.css index 07667c2..aa3c392 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.css +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css @@ -1,7 +1,7 @@ #feed-page { max-width: 40em; margin: 0 auto; - border: .5em solid white; + border: .5em solid var(--bg-color); border-bottom: 0; box-sizing: border-box; display: flex; @@ -31,10 +31,21 @@ } #posts { - max-height: calc(100vh - 3em); + max-height: calc(100vh - 3.5em); overflow-y: auto; } + /* Hide scrollbar for Chrome, Safari and Opera */ +#posts::-webkit-scrollbar { + display: none; +} + + /* Hide scrollbar for IE, Edge and Firefox */ +#posts { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + /* Profile bar */ #profile-bar { @@ -43,9 +54,14 @@ display: flex; flex-direction: column; align-items: center; + box-sizing: border-box; + background-color: var(--bg-color); + margin-right: .5em; padding-bottom: 1em; + padding: .5em; + border-radius: .6em; } #profile-bar-profile-pic { @@ -63,12 +79,11 @@ #top-bar { display: flex; + width: 95%; + margin: 0 auto; + margin-bottom: .5em; } -#top-bar img { - height: 1.6em; - width: 1.6em; -} #top-bar-profile-pic { height: 2.5em; @@ -84,9 +99,38 @@ #top-bar-create-post { flex: 1; font-size: inherit; + width: 100%; + margin: 0 auto; + box-sizing: border-box; + border: 2px solid var(--bg-color); + padding: .5em; + border-radius: .6em; + box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; } #top-bar-open-chat { /* Until implemented */ display: none; } + +#profile-bar, +#top-bar > * { + box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; +} + +/* Elements, that act as buttons */ + +#profile-bar:hover, +#top-bar-profile-pic:hover { + cursor: pointer; +} + +/* Can't copy text from */ + +#profile-bar, +.vote { + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.html b/src/DevHive.Angular/src/app/components/feed/feed.component.html index ffbad14..5d7c86a 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.html +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html @@ -1,5 +1,10 @@ -<div id="feed-page"> - <nav id="profile-bar" class="rounded-border"> +<!-- TODO: replace with loading component --> +<div id="content" *ngIf="!dataArrived"> + Loading... +</div> + +<div id="feed-page" *ngIf="dataArrived"> + <nav id="profile-bar" (click)="goToProfile()"> <img id="profile-bar-profile-pic" class="round-image" src="assets/images/feed/profile-pic.png" alt=""/> <div id="profile-bar-name"> {{ user.firstName }} {{ user.lastName }} @@ -10,10 +15,8 @@ </nav> <div id="feed-content"> <nav id="top-bar"> - <a id="top-bar-profile-pic" class="round-image" href=""> - <img class="round-image" src="assets/images/feed/profile-pic.png" alt=""/> - </a> - <input id="top-bar-create-post" class="rounded-border" type="text" placeholder="What's on your mind?"/> + <img id="top-bar-profile-pic" class="round-image" src="assets/images/feed/profile-pic.png" alt="" (click)="goToProfile()"> + <input id="top-bar-create-post" type="text" placeholder="What's on your mind?"/> <a id="top-bar-open-chat" href=""> <img src="assets/images/feed/chat-pic.png" alt=""/> </a> diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.ts b/src/DevHive.Angular/src/app/components/feed/feed.component.ts index 2889e7f..7d37c9a 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.ts +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts @@ -1,13 +1,10 @@ import { Component, OnInit } from '@angular/core'; import { Title } from '@angular/platform-browser'; import { Router } from '@angular/router'; -import { Guid } from 'guid-typescript'; -import jwt_decode from 'jwt-decode'; -import { FeedService } from 'src/app/services/feed.service'; import { User } from 'src/models/identity/user'; -import { IJWTPayload } from 'src/interfaces/jwt-payload'; -import { IUserCredentials } from 'src/interfaces/user-credentials'; import { PostComponent } from '../post/post.component'; +import { UserService } from '../../services/user.service'; +import { AppConstants } from 'src/app/app-constants.module'; @Component({ selector: 'app-feed', @@ -16,17 +13,15 @@ import { PostComponent } from '../post/post.component'; }) export class FeedComponent implements OnInit { private _title = 'Feed'; + public dataArrived = false; public user: User; public posts: PostComponent[]; - constructor(private titleService: Title, private service: FeedService, private router: Router) { - this.titleService.setTitle(this._title); + constructor(private _titleService: Title, private _router: Router, private _userService: UserService) { + this._titleService.setTitle(this._title); } ngOnInit(): void { - // Default values, so it doesn't give an error while initializing - this.user = new User(Guid.createEmpty(), '', '', '', ''); - this.posts = [ new PostComponent(), new PostComponent(), @@ -35,21 +30,16 @@ export class FeedComponent implements OnInit { ]; if (sessionStorage.getItem('UserCred')) { - const jwt: IJWTPayload = JSON.parse(sessionStorage.getItem('UserCred') ?? ''); - const userCred = jwt_decode<IUserCredentials>(jwt.token); - this.saveUserData(userCred.ID, jwt.token); + // Workaround for waiting the fetch response + // TODO: properly wait for it, before loading the page contents + setTimeout(() => { this.user = this._userService.fetchUserFromSessionStorage(); }, AppConstants.FETCH_TIMEOUT); + setTimeout(() => { this.dataArrived = true; }, AppConstants.FETCH_TIMEOUT + 100); } else { - this.router.navigate(['/login']); + this._router.navigate(['/login']); } } - saveUserData(userId: Guid, authToken: string): void { - fetch(`http://localhost:5000/api/User?Id=${userId}`, { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - Authorization: 'Bearer ' + authToken - } - }).then(response => response.json()).then(data => Object.assign(this.user, data)); + goToProfile(): void { + this._router.navigate(['/profile/' + this.user.userName]); } } diff --git a/src/DevHive.Angular/src/app/components/login/login.component.ts b/src/DevHive.Angular/src/app/components/login/login.component.ts index b3698e2..a9206f2 100644 --- a/src/DevHive.Angular/src/app/components/login/login.component.ts +++ b/src/DevHive.Angular/src/app/components/login/login.component.ts @@ -1,7 +1,8 @@ import { Component, OnInit } from '@angular/core'; -import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'; +import { FormGroup, FormBuilder, Validators, FormControl, AbstractControl } from '@angular/forms'; import { Router } from '@angular/router'; import { Title } from '@angular/platform-browser'; +import { UserService } from 'src/app/services/user.service'; @Component({ selector: 'app-login', @@ -9,16 +10,15 @@ import { Title } from '@angular/platform-browser'; styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { - loginUserFormGroup: FormGroup; - private _title = 'Login'; + loginUserFormGroup: FormGroup; - constructor(private titleService: Title, private fb: FormBuilder, private router: Router) { - titleService.setTitle(this._title); + constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService) { + this._titleService.setTitle(this._title); } ngOnInit(): void { - this.loginUserFormGroup = this.fb.group({ + this.loginUserFormGroup = this._fb.group({ username: new FormControl('', [ Validators.required ]), @@ -29,31 +29,19 @@ export class LoginComponent implements OnInit { } async onSubmit(): Promise<void> { - const response = await fetch('http://localhost:5000/api/User/login', { - method: 'POST', - body: JSON.stringify({ - UserName: this.loginUserFormGroup.get('username')?.value, - Password: this.loginUserFormGroup.get('password')?.value - }), - headers: { - 'Content-Type': 'application/json' - } - }); - const userCred: string = await response.json(); - - sessionStorage.setItem('UserCred', JSON.stringify(userCred)); - this.router.navigate(['/']); + this._userService.loginUser(this.loginUserFormGroup); + this._router.navigate(['/']); } onRedirectRegister(): void { - this.router.navigate(['/register']); + this._router.navigate(['/register']); } - get username() { + get username(): AbstractControl | null { return this.loginUserFormGroup.get('username'); } - get password() { + get password(): AbstractControl | null { return this.loginUserFormGroup.get('password'); } } diff --git a/src/DevHive.Angular/src/app/components/post/post.component.css b/src/DevHive.Angular/src/app/components/post/post.component.css index e53eb2c..4769191 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.css +++ b/src/DevHive.Angular/src/app/components/post/post.component.css @@ -1,7 +1,26 @@ .post { display: flex; - width: inherit; - margin: .5em 0; + width: 95%; + + margin: .5em auto; + box-sizing: border-box; + border: 2px solid var(--card-bg); + padding: .5em; + background-color: var(--card-bg); + border-radius: .6em; +box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; +} + + /* So the bottom shadow of the last element + * doesn't get cut off + */ +.post:nth-last-child(1) { + margin-bottom: 1.1em; +} + +hr { + border: 1px solid black; + width: 90%; } /* Author */ @@ -43,22 +62,32 @@ display: flex; flex-direction: column; align-items: center; - margin-right: -.2em; + margin-right: -.1em; +} + +.score { + flex: 1; + display: flex; + align-items: center; } + .vote { + display: flex; + align-items: center; flex: 1; - background: white; + + background: var(--card-bg); font-size: 1em; + + border: 1px solid var(--card-bg); box-sizing: border-box; - border: 2px solid white; - border-radius: .3em; -} + border-radius: .2em; -.vote:hover { - background: lightgray; -} + } -.vote:active { - border-color: black; +.vote:hover { + border: 1px solid var(--focus-color); + color: var(--focus-color); + cursor: pointer; } diff --git a/src/DevHive.Angular/src/app/components/post/post.component.html b/src/DevHive.Angular/src/app/components/post/post.component.html index b6fab55..041158f 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.html +++ b/src/DevHive.Angular/src/app/components/post/post.component.html @@ -1,4 +1,4 @@ -<div class="post rounded-border"> +<div class="post"> <div class="content"> <div class="author"> <img class="round-image" src="assets/images/feed/profile-pic.png"> diff --git a/src/DevHive.Angular/src/app/components/post/post.component.ts b/src/DevHive.Angular/src/app/components/post/post.component.ts index 72c7aec..b4bb2f0 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.ts +++ b/src/DevHive.Angular/src/app/components/post/post.component.ts @@ -3,26 +3,26 @@ import { Guid } from 'guid-typescript'; import { User } from 'src/models/identity/user'; @Component({ - selector: 'app-post', - templateUrl: './post.component.html', - styleUrls: ['./post.component.css'], + selector: 'app-post', + templateUrl: './post.component.html', + styleUrls: ['./post.component.css'], }) export class PostComponent implements OnInit { - public user: User; - public votesNumber: number; + public user: User; + public votesNumber: number; - constructor() {} + constructor() {} - ngOnInit(): void { - //Fetch data in post service - this.user = new User( - Guid.create(), - 'gosho_trapov', - 'Gosho', - 'Trapov', - 'assets/images/feed/profile-pic.png' - ); + ngOnInit(): void { + // Fetch data in post service + this.user = new User( + Guid.create(), + 'gosho_trapov', + 'Gosho', + 'Trapov', + 'assets/images/feed/profile-pic.png' + ); - this.votesNumber = 23; - } + this.votesNumber = 23; + } } diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html new file mode 100644 index 0000000..0cc443e --- /dev/null +++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html @@ -0,0 +1 @@ +<p>profile-settings works!</p> diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts new file mode 100644 index 0000000..9226aae --- /dev/null +++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-profile-settings', + templateUrl: './profile-settings.component.html', + styleUrls: ['./profile-settings.component.css'] +}) +export class ProfileSettingsComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.css b/src/DevHive.Angular/src/app/components/profile/profile.component.css new file mode 100644 index 0000000..6954b22 --- /dev/null +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.css @@ -0,0 +1,88 @@ +* { + box-sizing: border-box; +} + +#content { + max-width: 22em; + justify-content: start; +} + +hr { + width: calc(100% - 1em); + color: black; + border: 1px solid black; +} + +/* Navigation bar (for loggedin user) */ + +#navigation { + display: flex; + width: 100%; +} + +.submit-btn { + flex: 1; + margin-top: 0; + margin-left: .5em; + font-size: inherit; +} + +#navigation > .submit-btn:nth-of-type(1) { + margin-left: 0; +} + +/* Top card */ + +#main-info { + display: flex; + width: 100%; + margin-bottom: .25em +} + +#main-info > img { + width: 5em; + height: 5em; +} + +#other-main-info { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; +} + +#other-main-info > * { + font-size: 1.4em; +} + +#other-main-info *:nth-child(1) { + margin-top: auto; +} + +#other-main-info *:nth-last-child(1) { + margin-bottom: auto; +} + +/* Languages and technologies */ + +.secondary-info { + margin-top: .25em; + margin-bottom: .25em; + width: 100%; + display: flex; + align-items: center; +} + +.user-language, .user-technology { + border-radius: .4em; + background-color: lightgrey; + padding: .2em; + margin: 0 .2em; +} + +/* Posts */ + +#posts { + width: 100%; +} + diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.html b/src/DevHive.Angular/src/app/components/profile/profile.component.html new file mode 100644 index 0000000..5303db3 --- /dev/null +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html @@ -0,0 +1,45 @@ +<!-- TODO: replace with loading component --> +<div id="content" style="justify-content: center;" *ngIf="!dataArrived"> + Loading... +</div> + +<div id="content" *ngIf="dataArrived"> + <nav id="navigation"> + <button class="submit-btn" type="submit" (click)="goBack()">ᐊ Back</button> + <button class="submit-btn" type="submit" (click)="navigateToSettings()" *ngIf="loggedInUser">Settings</button> + </nav> + <hr> + <div id="main-info" class="rounded-border"> + <img class="round-image" src="assets/images/feed/profile-pic.png" alt=""/> + <div id="other-main-info"> + <div id="name"> + {{ user.firstName }} {{ user.lastName }} + </div> + <div id="username"> + @{{ user.userName }} + </div> + </div> + </div> + <div class="secondary-info rounded-border"> + Languages: + <div class="user-language"> + C# + </div> + <div class="user-language"> + TypeScript + </div> + </div> + <div class="secondary-info rounded-border"> + Technologies: + <div class="user-technology"> + .NET 5 + </div> + <div class="user-technology"> + Angular + </div> + </div> + <div id="posts"> + <hr> + Posts go here + </div> +</div> diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.ts b/src/DevHive.Angular/src/app/components/profile/profile.component.ts new file mode 100644 index 0000000..16bb053 --- /dev/null +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.ts @@ -0,0 +1,60 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { UserService } from 'src/app/services/user.service'; +import { User } from 'src/models/identity/user'; +import { AppConstants } from 'src/app/app-constants.module'; + +@Component({ + selector: 'app-profile', + templateUrl: './profile.component.html', + styleUrls: ['./profile.component.css'] +}) +export class ProfileComponent implements OnInit { + public loggedInUser = false; + public dataArrived = false; + public user: User; + + constructor(private _router: Router, private _userService: UserService) + { } + + private setDefaultUser(): void { + this.user = this._userService.getDefaultUser(); + } + + ngOnInit(): void { + const username = this._router.url.substring(9); + console.log(username); + + if (sessionStorage.getItem('UserCred')) { + // Workaround for waiting the fetch response + // TODO: properly wait for it, before loading the page contents + setTimeout(() => { + this.user = this._userService.fetchUserFromSessionStorage(); + }, AppConstants.FETCH_TIMEOUT); + + // After getting the user, check if we're on the profile page of the logged in user + setTimeout(() => { + if (this.user.userName !== username) { + this.setDefaultUser(); + } else { + this.loggedInUser = true; + } + }, AppConstants.FETCH_TIMEOUT + 50); + } + else { + this.setDefaultUser(); + } + + setTimeout(() => { + this.dataArrived = true; + }, AppConstants.FETCH_TIMEOUT + 100); + } + + goBack(): void { + this._router.navigate(['/']); + } + + navigateToSettings(): void { + this._router.navigate([this._router.url + '/settings']); + } +} diff --git a/src/DevHive.Angular/src/app/components/register/register.component.ts b/src/DevHive.Angular/src/app/components/register/register.component.ts index 7304589..3fdfbcd 100644 --- a/src/DevHive.Angular/src/app/components/register/register.component.ts +++ b/src/DevHive.Angular/src/app/components/register/register.component.ts @@ -1,7 +1,8 @@ import { Component, OnInit } from '@angular/core'; -import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; +import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { Title } from '@angular/platform-browser'; import { Router } from '@angular/router'; +import { UserService } from 'src/app/services/user.service'; @Component({ selector: 'app-register', @@ -9,16 +10,15 @@ import { Router } from '@angular/router'; styleUrls: ['./register.component.css'] }) export class RegisterComponent implements OnInit { - public registerUserFormGroup: FormGroup; - private _title = 'Register'; + public registerUserFormGroup: FormGroup; - constructor(private titleService: Title, private fb: FormBuilder, private router: Router) { - titleService.setTitle(this._title); + constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService) { + this._titleService.setTitle(this._title); } ngOnInit(): void { - this.registerUserFormGroup = this.fb.group({ + this.registerUserFormGroup = this._fb.group({ firstName: new FormControl('', [ Validators.required, Validators.minLength(3) @@ -45,50 +45,32 @@ export class RegisterComponent implements OnInit { this.registerUserFormGroup.valueChanges.subscribe(console.log); } - async onSubmit(): Promise<void> { - // TODO: add a check for form data validity - - const response = await fetch('http://localhost:5000/api/User/register', { - method: 'POST', - body: JSON.stringify({ - UserName: this.registerUserFormGroup.get('username')?.value, - Email: this.registerUserFormGroup.get('email')?.value, - FirstName: this.registerUserFormGroup.get('firstName')?.value, - LastName: this.registerUserFormGroup.get('lastName')?.value, - Password: this.registerUserFormGroup.get('password')?.value - }), - headers: { - 'Content-Type': 'application/json' - } - }); - const userCred: string = await response.json(); - - // TODO: don't redirect if there is an error response - sessionStorage.setItem('UserCred', JSON.stringify(userCred)); - this.router.navigate(['/']); + onSubmit(): void { + this._userService.registerUser(this.registerUserFormGroup); + this._router.navigate(['/']); } onRedirectRegister(): void { - this.router.navigate(['/login']); + this._router.navigate(['/login']); } - get firstName() { + get firstName(): AbstractControl | null { return this.registerUserFormGroup.get('firstName'); } - get lastName() { + get lastName(): AbstractControl | null { return this.registerUserFormGroup.get('lastName'); } - get username() { + get username(): AbstractControl | null { return this.registerUserFormGroup.get('username'); } - get email() { + get email(): AbstractControl | null { return this.registerUserFormGroup.get('email'); } - get password() { + get password(): AbstractControl | null { return this.registerUserFormGroup.get('password'); } } diff --git a/src/DevHive.Angular/src/app/services/feed.service.spec.ts b/src/DevHive.Angular/src/app/services/feed.service.spec.ts deleted file mode 100644 index 656b960..0000000 --- a/src/DevHive.Angular/src/app/services/feed.service.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { FeedService } from './feed.service'; - -describe('FeedService', () => { - let service: FeedService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(FeedService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); diff --git a/src/DevHive.Angular/src/app/services/feed.service.ts b/src/DevHive.Angular/src/app/services/feed.service.ts deleted file mode 100644 index 23284b9..0000000 --- a/src/DevHive.Angular/src/app/services/feed.service.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable({ - providedIn: 'root' -}) -export class FeedService { - - constructor() { } -} diff --git a/src/DevHive.Angular/src/app/services/login.service.spec.ts b/src/DevHive.Angular/src/app/services/login.service.spec.ts deleted file mode 100644 index 299b0d5..0000000 --- a/src/DevHive.Angular/src/app/services/login.service.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { LoginService } from './login.service'; - -describe('LoginService', () => { - let service: LoginService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(LoginService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); diff --git a/src/DevHive.Angular/src/app/services/login.service.ts b/src/DevHive.Angular/src/app/services/login.service.ts deleted file mode 100644 index 92c777e..0000000 --- a/src/DevHive.Angular/src/app/services/login.service.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable({ - providedIn: 'root' -}) -export class LoginService { - - constructor() { } -} diff --git a/src/DevHive.Angular/src/app/services/register.service.spec.ts b/src/DevHive.Angular/src/app/services/register.service.spec.ts deleted file mode 100644 index 2ba3960..0000000 --- a/src/DevHive.Angular/src/app/services/register.service.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { RegisterService } from './register.service'; - -describe('RegisterService', () => { - let service: RegisterService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(RegisterService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); diff --git a/src/DevHive.Angular/src/app/services/register.service.ts b/src/DevHive.Angular/src/app/services/register.service.ts deleted file mode 100644 index 52cb38e..0000000 --- a/src/DevHive.Angular/src/app/services/register.service.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable({ - providedIn: 'root' -}) -export class RegisterService { - - constructor() { } - - -} diff --git a/src/DevHive.Angular/src/app/services/user.service.ts b/src/DevHive.Angular/src/app/services/user.service.ts new file mode 100644 index 0000000..8c679d7 --- /dev/null +++ b/src/DevHive.Angular/src/app/services/user.service.ts @@ -0,0 +1,80 @@ +import { Injectable } from '@angular/core'; +import {Guid} from 'guid-typescript'; +import { User } from '../../models/identity/user'; +import jwt_decode from 'jwt-decode'; +import { IJWTPayload } from '../../interfaces/jwt-payload'; +import { IUserCredentials } from '../../interfaces/user-credentials'; +import { FormGroup } from '@angular/forms'; +import { AppConstants } from 'src/app/app-constants.module'; + +@Injectable({ + providedIn: 'root' +}) +export class UserService { + constructor() { } + + getDefaultUser(): User { + return new User(Guid.createEmpty(), 'gosho_trapov', 'Gosho', 'Trapov', ''); + } + + fetchUserFromSessionStorage(): User { + // Get the token and userid from session storage + const jwt: IJWTPayload = JSON.parse(sessionStorage.getItem('UserCred') ?? ''); + const userCred = jwt_decode<IUserCredentials>(jwt.token); + + return this.fetchUser(userCred.ID, jwt.token); + } + + fetchUser(userId: Guid, authToken: string): User { + const fetchedUser: User = new User(Guid.createEmpty(), '', '', '', ''); + + // Fetch the data and assign it to fetchedUser + fetch(AppConstants.API_USER_URL + '?Id=' + userId, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + Authorization: 'Bearer ' + authToken + } + }).then(response => response.json()) + .then(data => Object.assign(fetchedUser, data)); + + return fetchedUser; + } + + // TODO: make return bool when the response is an error + loginUser(loginUserFormGroup: FormGroup): void { + // Save the fetch reponse in the sessionStorage + fetch(AppConstants.API_USER_LOGIN_URL, { + method: 'POST', + body: JSON.stringify({ + UserName: loginUserFormGroup.get('username')?.value, + Password: loginUserFormGroup.get('password')?.value + }), + headers: { + 'Content-Type': 'application/json' + } + }).then(response => response.json()) + .then(data => sessionStorage.setItem('UserCred', JSON.stringify(data))); + } + + // TODO: make return bool when the response is an error + registerUser(registerUserFormGroup: FormGroup): void { + // TODO: add a check for form data validity + + // Like in login, save the fetch reponse in the sessionStorage + fetch(AppConstants.API_USER_REGISTER_URL, { + method: 'POST', + body: JSON.stringify({ + UserName: registerUserFormGroup.get('username')?.value, + Email: registerUserFormGroup.get('email')?.value, + FirstName: registerUserFormGroup.get('firstName')?.value, + LastName: registerUserFormGroup.get('lastName')?.value, + Password: registerUserFormGroup.get('password')?.value + }), + headers: { + 'Content-Type': 'application/json' + } + }).then(response => response.json()) + .then(data => sessionStorage.setItem('UserCred', JSON.stringify(data))); + } +} diff --git a/src/DevHive.Angular/src/models/identity/register-user.ts b/src/DevHive.Angular/src/models/identity/register-user.ts deleted file mode 100644 index f96b8bb..0000000 --- a/src/DevHive.Angular/src/models/identity/register-user.ts +++ /dev/null @@ -1,37 +0,0 @@ -export class RegisterUser -{ - private _userName: string; - private _password: string; - - // constructor(userName: string, password: string) - // { - // this.userName = userName; - // this.password = password; - // } - - public get userName() - { - return this._userName; - } - - public set userName(userName: string) - { - if (userName.length <= 3) - throw new Error('Username cannot be less than 3 characters long!'); - - this._userName = userName; - } - - public get password() - { - return this._password; - } - - public set password(pass: string) - { - if (pass.length <= 5) - throw Error("Password too short!"); - - this._password = pass; - } -} diff --git a/src/DevHive.Angular/src/models/identity/user.ts b/src/DevHive.Angular/src/models/identity/user.ts index e16c908..2c5c57d 100644 --- a/src/DevHive.Angular/src/models/identity/user.ts +++ b/src/DevHive.Angular/src/models/identity/user.ts @@ -1,52 +1,52 @@ -import { Guid } from "guid-typescript"; +import { Guid } from 'guid-typescript'; export class User { - private _id : Guid; - private _lastName : string; - private _firstName : string; - private _userName : string; - private _imageUrl : string; + private _id : Guid; + private _lastName : string; + private _firstName : string; + private _userName : string; + private _imageUrl : string; - constructor(id: Guid, userName: string, firstName: string, lastName: string, imageUrl: string) { - this.id = id; - this.userName = userName; - this.firstName = firstName; - this.lastName = lastName; - } + constructor(id: Guid, userName: string, firstName: string, lastName: string, imageUrl: string) { + this.id = id; + this.userName = userName; + this.firstName = firstName; + this.lastName = lastName; + this.imageUrl = imageUrl; + } - - public get id() : Guid { - return this._id; - } - public set id(v : Guid) { - this._id = v; - } - - public get userName() : string { - return this._userName; - } - public set userName(v : string) { - this._userName = v; - } - - public get firstName() : string { - return this._firstName; - } - public set firstName(v : string) { - this._firstName = v; - } - - public get lastName() : string { - return this._lastName; - } - public set lastName(v: string) { - this._lastName = v; - } - - public get imageUrl() : string { - return this._imageUrl; - } - public set imageUrl(v : string) { - this._imageUrl = v; - } + public get id(): Guid { + return this._id; + } + public set id(v: Guid) { + this._id = v; + } + + public get userName(): string { + return this._userName; + } + public set userName(v: string) { + this._userName = v; + } + + public get firstName(): string { + return this._firstName; + } + public set firstName(v: string) { + this._firstName = v; + } + + public get lastName(): string { + return this._lastName; + } + public set lastName(v: string) { + this._lastName = v; + } + + public get imageUrl(): string { + return this._imageUrl; + } + public set imageUrl(v: string) { + this._imageUrl = v; + } } diff --git a/src/DevHive.Angular/src/styles.css b/src/DevHive.Angular/src/styles.css index 3d6d2f4..95592a1 100644 --- a/src/DevHive.Angular/src/styles.css +++ b/src/DevHive.Angular/src/styles.css @@ -4,6 +4,7 @@ :root { --bg-color: white; --focus-color: forestgreen; + --card-bg: white; } html, body { @@ -12,6 +13,7 @@ html, body { } body { font: 21px sans-serif !important; + background-color: var(--bg-color); } input:focus, button:focus { @@ -68,6 +70,7 @@ input:focus, button:focus { .input-field { width: 100%; + background-color: var(--bg-color); border: 0; border-bottom: 1px solid grey; diff --git a/src/DevHive.Data/Repositories/TechnologyRepository.cs b/src/DevHive.Data/Repositories/TechnologyRepository.cs index 1631972..73827a7 100644 --- a/src/DevHive.Data/Repositories/TechnologyRepository.cs +++ b/src/DevHive.Data/Repositories/TechnologyRepository.cs @@ -27,12 +27,6 @@ namespace DevHive.Data.Repositories return await RepositoryMethods.SaveChangesAsync(this._context); } - - public async Task<Technology> GetByNameAsync(string technologyName) - { - return await this._context.Technologies - .FirstOrDefaultAsync(x => x.Name == technologyName); - } #endregion #region Read @@ -43,6 +37,11 @@ namespace DevHive.Data.Repositories .Set<Technology>() .FindAsync(id); } + public async Task<Technology> GetByNameAsync(string technologyName) + { + return await this._context.Technologies + .FirstOrDefaultAsync(x => x.Name == technologyName); + } #endregion #region Edit diff --git a/src/DevHive.Tests/DevHive.Web.Tests/TechnologyController.Tests.cs b/src/DevHive.Tests/DevHive.Web.Tests/TechnologyController.Tests.cs index 711f66f..2709c9a 100644 --- a/src/DevHive.Tests/DevHive.Web.Tests/TechnologyController.Tests.cs +++ b/src/DevHive.Tests/DevHive.Web.Tests/TechnologyController.Tests.cs @@ -6,6 +6,7 @@ using DevHive.Web.Models.Technology; using Microsoft.AspNetCore.Mvc; using Moq; using NUnit.Framework; +using System; using System.Threading.Tasks; namespace DevHive.Web.Tests @@ -13,6 +14,7 @@ namespace DevHive.Web.Tests [TestFixture] public class TechnologyControllerTests { + const string NAME = "Gosho Trapov"; private Mock<ITechnologyService> TechnologyServiceMock { get; set; } private Mock<IMapper> MapperMock { get; set; } private TechnologyController TechnologyController { get; set; } @@ -28,16 +30,14 @@ namespace DevHive.Web.Tests #region Create [Test] public void Create_ReturnsOkObjectResult_WhenTechnologyIsSuccessfullyCreated() - { - string name = "Gosho Trapov"; - + { CreateTechnologyWebModel createTechnologyWebModel = new CreateTechnologyWebModel { - Name = name + Name = NAME }; CreateTechnologyServiceModel createTechnologyServiceModel = new CreateTechnologyServiceModel { - Name = name + Name = NAME }; this.MapperMock.Setup(p => p.Map<CreateTechnologyServiceModel>(It.IsAny<CreateTechnologyWebModel>())).Returns(createTechnologyServiceModel); @@ -48,8 +48,135 @@ namespace DevHive.Web.Tests Assert.IsInstanceOf<OkResult>(result); } + [Test] + public void Create_ReturnsBadRequestObjectResult_WhenTechnologyIsNotCreatedSuccessfully() + { + CreateTechnologyWebModel createTechnologyWebModel = new CreateTechnologyWebModel + { + Name = NAME + }; + CreateTechnologyServiceModel createTechnologyServiceModel = new CreateTechnologyServiceModel + { + Name = NAME + }; + + this.MapperMock.Setup(p => p.Map<CreateTechnologyServiceModel>(It.IsAny<CreateTechnologyWebModel>())).Returns(createTechnologyServiceModel); + this.TechnologyServiceMock.Setup(p => p.Create(It.IsAny<CreateTechnologyServiceModel>())).Returns(Task.FromResult(false)); + + IActionResult result = this.TechnologyController.Create(createTechnologyWebModel).Result; + + Assert.IsInstanceOf<BadRequestObjectResult>(result); + } + #endregion + + #region Read + [Test] + public void GetById_ReturnsTheThecnology_WhenItExists() + { + Guid id = new Guid(); + + CreateTechnologyServiceModel createTechnologyServiceModel = new CreateTechnologyServiceModel + { + Name = NAME + }; + CreateTechnologyWebModel createTechnologyWebModel = new CreateTechnologyWebModel + { + Name = NAME + }; + + this.TechnologyServiceMock.Setup(p => p.GetTechnologyById(It.IsAny<Guid>())).Returns(Task.FromResult(createTechnologyServiceModel)); + this.MapperMock.Setup(p => p.Map<CreateTechnologyWebModel>(It.IsAny<CreateTechnologyServiceModel>())).Returns(createTechnologyWebModel); + + IActionResult result = this.TechnologyController.GetById(id).Result; + + Assert.IsInstanceOf<OkObjectResult>(result); + + OkObjectResult okObjectResult = result as OkObjectResult; + CreateTechnologyWebModel resultModel = okObjectResult.Value as Models.Technology.CreateTechnologyWebModel; + + Assert.AreEqual(NAME, resultModel.Name); + } + #endregion + + #region Update + [Test] + public void Update_ShouldReturnOkResult_WhenTechnologyIsUpdatedSuccessfully() + { + Guid id = new Guid(); + UpdateTechnologyWebModel updateTechnologyWebModel = new UpdateTechnologyWebModel + { + Name = NAME + }; + UpdateTechnologyServiceModel updateTechnologyServiceModel = new UpdateTechnologyServiceModel + { + Name = NAME + }; + + this.TechnologyServiceMock.Setup(p => p.UpdateTechnology(It.IsAny<Guid>(), It.IsAny<UpdateTechnologyServiceModel>())).Returns(Task.FromResult(true)); + this.MapperMock.Setup(p => p.Map<UpdateTechnologyServiceModel>(It.IsAny<UpdateTechnologyWebModel>())).Returns(updateTechnologyServiceModel); + + IActionResult result = this.TechnologyController.Update(id, updateTechnologyWebModel).Result; + + Assert.IsInstanceOf<OkResult>(result); + } + + [Test] + public void Update_ShouldReturnOkResult_WhenTechnologyIsNotUpdatedSuccessfully () + { + Guid id = new Guid(); + string message = "Could not update Technology"; + UpdateTechnologyWebModel updateTechnologyWebModel = new UpdateTechnologyWebModel + { + Name = NAME + }; + UpdateTechnologyServiceModel updateTechnologyServiceModel = new UpdateTechnologyServiceModel + { + Name = NAME + }; + + this.TechnologyServiceMock.Setup(p => p.UpdateTechnology(It.IsAny<Guid>(), It.IsAny<UpdateTechnologyServiceModel>())).Returns(Task.FromResult(false)); + this.MapperMock.Setup(p => p.Map<UpdateTechnologyServiceModel>(It.IsAny<UpdateTechnologyWebModel>())).Returns(updateTechnologyServiceModel); + + IActionResult result = this.TechnologyController.Update(id, updateTechnologyWebModel).Result; + Assert.IsInstanceOf<BadRequestObjectResult>(result); + + BadRequestObjectResult badRequestObjectResult = result as BadRequestObjectResult; + string resultModel = badRequestObjectResult.Value.ToString(); + Assert.AreEqual(message, resultModel); + } #endregion + #region Delete + [Test] + public void Delete_ReturnsOkResult_When_TechnologyIsDeletedSuccessfully() + { + Guid id = new Guid(); + + this.TechnologyServiceMock.Setup(p => p.DeleteTechnology(It.IsAny<Guid>())).Returns(Task.FromResult(true)); + + IActionResult result = this.TechnologyController.Delete(id).Result; + + Assert.IsInstanceOf<OkResult>(result); + } + + [Test] + public void Delet_ReturnsBadRequestObjectResult_WhenTechnologyIsNotDeletedSuccessfully() + { + string message = "Could not delete Technology"; + Guid id = new Guid(); + + this.TechnologyServiceMock.Setup(p => p.DeleteTechnology(It.IsAny<Guid>())).Returns(Task.FromResult(false)); + + IActionResult result = this.TechnologyController.Delete(id).Result; + + Assert.IsInstanceOf<BadRequestObjectResult>(result); + + BadRequestObjectResult badRequestObjectResult = result as BadRequestObjectResult; + string resultModel = badRequestObjectResult.Value.ToString(); + + Assert.AreEqual(message, resultModel); + } + #endregion } } |