diff --git a/kibicara-frontend/src/app/auth/login/login.component.scss b/kibicara-frontend/src/app/auth/login/login.component.scss index e45bb73..92e6e3f 100644 --- a/kibicara-frontend/src/app/auth/login/login.component.scss +++ b/kibicara-frontend/src/app/auth/login/login.component.scss @@ -37,6 +37,10 @@ margin-right: 30px; display: flex; align-items: center; + @media (max-width: 900px) { + display: grid; + gap: 10px; + } } .login-form { diff --git a/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.html b/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.html new file mode 100644 index 0000000..74fd8dd --- /dev/null +++ b/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.html @@ -0,0 +1,61 @@ + + +
+ +
+ + E-Mail + + + E-Mail is required + + + + + Password + + + Password is required + + + Password requires minimal length 8 + + + +
+
+ + +
+ Danger zone + + + + +
+
+
diff --git a/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.scss b/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.scss new file mode 100644 index 0000000..e731962 --- /dev/null +++ b/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.scss @@ -0,0 +1,27 @@ +.container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + align-items: stretch; + justify-items: stretch; + padding-left: 10%; + padding-right: 10%; + @media (max-width: 600px) { + grid-template-columns: 1fr; + } + margin: 1%; +} + +.form { + display: grid; + grid-template-columns: 1fr; + gap: 10px; +} + +.delete { + display: grid; + grid-template-columns: 1fr; + gap: 10px; + align-items: center; + justify-items: center; +} diff --git a/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.spec.ts b/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.spec.ts new file mode 100644 index 0000000..e87d935 --- /dev/null +++ b/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AccountSettingsComponent } from './account-settings.component'; + +describe('AccountSettingsComponent', () => { + let component: AccountSettingsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AccountSettingsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AccountSettingsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.ts b/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.ts new file mode 100644 index 0000000..0274aa6 --- /dev/null +++ b/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.ts @@ -0,0 +1,49 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { MatDialog } from '@angular/material/dialog'; +import { Router } from '@angular/router'; +import { AdminService } from 'src/app/core/api/api/admin.service'; +import { YesNoDialogComponent } from 'src/app/shared/yes-no-dialog/yes-no-dialog.component'; + +@Component({ + selector: 'app-account-settings', + templateUrl: './account-settings.component.html', + styleUrls: ['./account-settings.component.scss'], +}) +export class AccountSettingsComponent implements OnInit { + title = 'Account Settings'; + form: FormGroup; + + constructor( + private dialog: MatDialog, + private adminService: AdminService, + private router: Router, + private formBuilder: FormBuilder + ) {} + + ngOnInit(): void { + this.form = this.formBuilder.group({ + email: ['', Validators.required], + password: ['', [Validators.required, Validators.minLength(8)]], + }); + } + + onUpdate() {} + + onDelete() { + const dialogRef = this.dialog.open(YesNoDialogComponent, { + data: { + title: 'Warning', + content: 'This will also delete all of your hoods and bots.', + }, + }); + + dialogRef.afterClosed().subscribe((response) => { + if (response) { + this.adminService.deleteAdmin().subscribe(() => { + this.router.navigate(['/dashboard']); + }); + } + }); + } +} diff --git a/kibicara-frontend/src/app/dashboard/dashboard-routing.module.ts b/kibicara-frontend/src/app/dashboard/dashboard-routing.module.ts index f21f0ab..927e068 100644 --- a/kibicara-frontend/src/app/dashboard/dashboard-routing.module.ts +++ b/kibicara-frontend/src/app/dashboard/dashboard-routing.module.ts @@ -5,6 +5,7 @@ import { HoodsComponent } from './hoods/hoods.component'; import { AuthGuard } from '../core/auth/auth.guard'; import { BoardComponent } from './board/board.component'; import { TwitterCallbackComponent } from '../platforms/twitter/twitter-callback/twitter-callback.component'; +import { AccountSettingsComponent } from './account-settings/account-settings.component'; const routes: Routes = [ { @@ -13,6 +14,7 @@ const routes: Routes = [ children: [ { path: '', component: HoodsComponent }, { path: 'hoods/:id', component: BoardComponent }, + { path: 'settings', component: AccountSettingsComponent }, // Platform-specific Routes { path: 'twitter-callback', component: TwitterCallbackComponent }, ], diff --git a/kibicara-frontend/src/app/dashboard/dashboard.module.ts b/kibicara-frontend/src/app/dashboard/dashboard.module.ts index 940d1ad..1833022 100644 --- a/kibicara-frontend/src/app/dashboard/dashboard.module.ts +++ b/kibicara-frontend/src/app/dashboard/dashboard.module.ts @@ -15,6 +15,7 @@ import { NewHoodDialogComponent } from './hoods/new-hood-dialog/new-hood-dialog. import { PlatformsModule } from '../platforms/platforms.module'; import { SettingsComponent } from './board/settings/settings.component'; import { FaqComponent } from './hoods/faq/faq.component'; +import { AccountSettingsComponent } from './account-settings/account-settings.component'; @NgModule({ declarations: [ @@ -29,6 +30,7 @@ import { FaqComponent } from './hoods/faq/faq.component'; NewHoodDialogComponent, SettingsComponent, FaqComponent, + AccountSettingsComponent, ], imports: [ DashboardRoutingModule, diff --git a/kibicara-frontend/src/app/dashboard/hoods/hoods.component.html b/kibicara-frontend/src/app/dashboard/hoods/hoods.component.html index 078b6f0..cc3d1d9 100644 --- a/kibicara-frontend/src/app/dashboard/hoods/hoods.component.html +++ b/kibicara-frontend/src/app/dashboard/hoods/hoods.component.html @@ -58,6 +58,9 @@ > New hood + + User settings +