Skip to content

Commit 4462f97

Browse files
kfleminkflemin
committed
more profile pages
1 parent 9b7cc0c commit 4462f97

11 files changed

+248
-97
lines changed

‎src/app/modules/profile/admin/admin.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div id="admin" class="tab-pane fade">
2-
<h3 class="text-xl font-bold mb-2">Admin</h3>
1+
<div id="admin" class="tab-pane fade" *transloco="let t">
2+
<h1 class="text-xl font-bold mb-2">Admin</h1>
33
<p>Admin content goes here.</p>
44
</div>

‎src/app/modules/profile/admin/admin.component.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import { Component } from '@angular/core'
2+
import { SharedImports } from '@seed/directives'
23

34
@Component({
45
selector: 'seed-admin',
56
templateUrl: './admin.component.html',
6-
styles: [],
7+
imports: [
8+
SharedImports,
9+
],
710
})
811
export class AdminComponent {
912

‎src/app/modules/profile/developer/developer.component.html

+32-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,33 @@
1-
<div id="developer" class="tab-pane fade">
2-
<h3 class="text-xl font-bold mb-2">Developer</h3>
3-
<p>Developer content goes here.</p>
1+
<div class="flex-auto p-6 sm:p-10" *transloco="let t">
2+
<div class="max-w-2xl">
3+
<h1 class="text-2xl flex items-center mb-6 text-center"><mat-icon class="mr-2" svgIcon="fa-solid:code"></mat-icon>Developer</h1>
4+
5+
<div class="bg-card mt-8 flex flex-col overflow-hidden rounded-2xl p-8 pb-4 shadow">
6+
<h2 class="text-xl pb-5">{{ t('Manage Your API Key') }}</h2>
7+
8+
<div class="gt-xs:flex-row flex flex-col pt-4 text-center">
9+
<div>
10+
<span class="font-bold">API Key: </span>
11+
<span class="bg-slate-200 py-3 px-5">{{ apikey }}</span>
12+
</div>
13+
<div class="pt-7">
14+
<a
15+
mat-flat-button
16+
color="primary">
17+
<span class="ml-2">{{ t('Get a New API Key') }}</span>
18+
</a>
19+
</div>
20+
</div>
21+
22+
<!-- Divider -->
23+
<div class="mt-10 mb-5 border-t"></div>
24+
<h3 class="text-l mb-5">{{ t('Example Usage') }}</h3>
25+
<pre class="border-2 p-5 bg-slate-100">
26+
curl -X GET \
27+
'URL/api/version/' \
28+
-H 'Accept: application/json' \
29+
-u USEREMAIL + ':' + APIKEY
30+
</pre>
31+
</div>
32+
</div>
433
</div>

‎src/app/modules/profile/developer/developer.component.ts

+21-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,27 @@
1-
import { Component } from '@angular/core'
2-
1+
import { Component, ViewEncapsulation } from '@angular/core'
2+
import { SharedImports } from '@seed/directives'
3+
import {
4+
FormControl,
5+
FormsModule,
6+
ReactiveFormsModule,
7+
Validators,
8+
} from '@angular/forms'
9+
import { MatButtonModule } from '@angular/material/button'
10+
import { MatFormFieldModule } from '@angular/material/form-field'
11+
import { MatIconModule } from '@angular/material/icon'
312
@Component({
413
selector: 'seed-profile-developer',
514
templateUrl: './developer.component.html',
6-
styles: [],
15+
encapsulation: ViewEncapsulation.None,
16+
imports: [
17+
FormsModule,
18+
MatButtonModule,
19+
MatFormFieldModule,
20+
MatIconModule,
21+
ReactiveFormsModule,
22+
SharedImports,
23+
],
724
})
825
export class ProfileDeveloperComponent {
9-
26+
apikey = '12345ABCDE'
1027
}

‎src/app/modules/profile/info/info.component.html

+51-44
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,63 @@
1-
<!-- src/app/profile/form/form.component.html -->
2-
<div class="flex-auto p-6 sm:p-10">
1+
<div class="flex-auto p-6 sm:p-10" *transloco="let t">
32
<div class="max-w-2xl">
43
<h2 class="text-2xl flex items-center mb-6 text-center"><mat-icon class="mr-2" svgIcon="fa-solid:circle-user"></mat-icon>Profile Information</h2>
54

65
<form class="bg-card mt-8 flex flex-col overflow-hidden rounded-2xl p-8 pb-4 shadow">
7-
<div class="gt-xs:flex-row flex flex-col">
8-
<mat-form-field
9-
class="gt-xs:pr-3 flex-auto"
10-
>
11-
<mat-label>First name</mat-label>
12-
<input matInput />
13-
<mat-icon
14-
class="icon-size-5"
15-
matSuffix
16-
[svgIcon]="'fa-solid:circle-user'"
17-
></mat-icon>
18-
</mat-form-field>
19-
<mat-form-field
20-
class="gt-xs:pl-3 flex-auto"
21-
>
22-
<mat-label>Last name</mat-label>
23-
<input matInput />
24-
<mat-icon
25-
class="icon-size-5"
26-
matSuffix
27-
[svgIcon]="'fa-solid:circle-user'"
28-
></mat-icon>
29-
</mat-form-field>
30-
</div>
31-
<div class="flex">
32-
<mat-form-field
33-
class="flex-auto"
34-
>
6+
<div class="gt-xs:flex-row flex flex-col">
7+
<mat-form-field
8+
class="gt-xs:pr-3 flex-auto"
9+
>
10+
<mat-label>{{ t('First Name') }}</mat-label>
11+
<input matInput />
12+
<mat-icon
13+
class="icon-size-5"
14+
matPrefix
15+
[svgIcon]="'fa-solid:circle-user'"
16+
></mat-icon>
17+
</mat-form-field>
18+
<mat-form-field
19+
class="gt-xs:pl-3 flex-auto"
20+
>
21+
<mat-label>{{ t('Last Name') }}</mat-label>
22+
<input matInput />
23+
<mat-icon
24+
class="icon-size-5"
25+
matPrefix
26+
[svgIcon]="'fa-solid:circle-user'"
27+
></mat-icon>
28+
</mat-form-field>
29+
</div>
30+
<div class="flex">
31+
<!-- <mat-form-field
32+
class="flex-auto"
33+
>
34+
<mat-label>{{ t('Email') }}</mat-label>
35+
<input matInput/>
36+
<mat-icon
37+
class="icon-size-5"
38+
matSuffix
39+
[svgIcon]="'fa-solid:envelope'"
40+
></mat-icon>
41+
</mat-form-field> -->
42+
43+
<mat-form-field class="w-full">
3544
<mat-label>Email</mat-label>
36-
<input matInput/>
3745
<mat-icon
3846
class="icon-size-5"
39-
matSuffix
4047
[svgIcon]="'fa-solid:envelope'"
48+
matPrefix
4149
></mat-icon>
50+
<input [formControlName]="'email'" matInput />
4251
</mat-form-field>
43-
</div>
44-
<div class="flex justify-center">
45-
<a
46-
mat-flat-button
47-
color="primary"
48-
>
49-
<span class="ml-2">Update</span>
50-
</a>
51-
</div>
52-
</form>
5352

54-
55-
</div>
53+
</div>
54+
<div class="flex justify-center">
55+
<a
56+
mat-flat-button
57+
color="primary">
58+
<span class="ml-2">{{ t('Update') }}</span>
59+
</a>
60+
</div>
61+
</form>
62+
</div>
5663
</div>

‎src/app/modules/profile/info/info.component.ts

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { TextFieldModule } from '@angular/cdk/text-field'
2-
import { NgClass } from '@angular/common'
31
import { Component, ViewEncapsulation } from '@angular/core'
42
import {
53
FormControl,
@@ -12,6 +10,7 @@ import { MatButtonModule } from '@angular/material/button'
1210
import { MatFormFieldModule } from '@angular/material/form-field'
1311
import { MatIconModule } from '@angular/material/icon'
1412
import { MatInputModule } from '@angular/material/input'
13+
import { SharedImports } from '@seed/directives'
1514

1615
@Component({
1716
selector: 'seed-profile-info',
@@ -21,15 +20,13 @@ import { MatInputModule } from '@angular/material/input'
2120
MatIconModule,
2221
FormsModule,
2322
MatFormFieldModule,
24-
NgClass,
2523
MatInputModule,
26-
TextFieldModule,
2724
ReactiveFormsModule,
2825
MatButtonModule,
26+
SharedImports,
2927
],
3028
})
3129
export class ProfileInfoComponent {
32-
3330
firstName: FormControl = new FormControl('', [
3431
Validators.required,
3532
])

‎src/app/modules/profile/profile.component.html

+4-24
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,7 @@
1-
<div class="flex flex-col">
2-
<!-- Tabs Section -->
3-
<div class="bg-card flex flex-0 flex-col border-b p-4 dark:bg-transparent sm:flex-row sm:items-center sm:justify-center sm:px-10 sm:py-5">
4-
<button
5-
*ngFor="let tab of tabs; let i = index"
6-
(click)="selectTab(i)"
7-
[class.border-b-2]="activeTab === i"
8-
[class.border-blue-500]="activeTab === i"
9-
[class.text-blue-600]="activeTab === i"
10-
[class.text-gray-600]="activeTab !== i"
11-
[class.bg-blue-100]="activeTab === i"
12-
[class.hover:bg-blue-200]="activeTab !== i"
13-
class="px-4 py-2 text-lg"
14-
>
15-
{{ tab }}
16-
</button>
17-
</div>
18-
<!--
19-
<fuse-horizontal-navigation
20-
[name]="'profile'"
21-
[navigation]="navigationData
22-
>
23-
</fuse-horizontal-navigation> -->
24-
1+
<div class="flex min-w-0 flex-col" *transloco="let t">
2+
<div class="bg-card relative flex h-16 w-full max-w-360 items-center justify-center border-b">
3+
<seed-horizontal-navigation name="profileNavigation" [navigation]="navigation"></seed-horizontal-navigation>
4+
</div>
255
</div>
266

277
<router-outlet></router-outlet>

‎src/app/modules/profile/profile.component.ts

+33-8
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,47 @@
11
import { CommonModule } from '@angular/common'
22
import { Component, ViewEncapsulation } from '@angular/core'
33
import { RouterOutlet } from '@angular/router'
4+
import type { NavigationItem } from '@seed/components'
5+
import { HorizontalNavigationComponent } from '@seed/components/navigation/horizontal/horizontal.component'
46
import { SharedImports } from '@seed/directives'
5-
import { ProfileDeveloperComponent } from './developer/developer.component'
6-
import { ProfileInfoComponent } from './info/info.component'
7-
import { ProfileSecurityComponent } from './security/security.component'
87

98
@Component({
109
selector: 'seed-profile',
1110
templateUrl: './profile.component.html',
1211
encapsulation: ViewEncapsulation.None,
13-
imports: [CommonModule, SharedImports, ProfileInfoComponent, ProfileDeveloperComponent, ProfileSecurityComponent, RouterOutlet],
12+
imports: [CommonModule, HorizontalNavigationComponent, SharedImports, RouterOutlet],
1413
})
1514
export class ProfileComponent {
1615
tabs = ['Profile Info', 'Security', 'Developer', 'Admin']
17-
activeTab = 0
1816

19-
selectTab(index: number): void {
20-
this.activeTab = index
21-
}
17+
readonly navigation: NavigationItem[] = [
18+
{
19+
id: 'profile',
20+
title: 'Profile',
21+
type: 'basic',
22+
icon: 'fa-solid:user',
23+
link: '/profile/info',
24+
},
25+
{
26+
id: 'security',
27+
title: 'Security',
28+
type: 'basic',
29+
icon: 'fa-solid:lock',
30+
link: '/profile/security',
31+
},
32+
{
33+
id: 'developer',
34+
title: 'Developer',
35+
type: 'basic',
36+
icon: 'fa-solid:code',
37+
link: '/profile/developer',
38+
},
39+
{
40+
id: 'admin',
41+
title: 'Admin',
42+
type: 'basic',
43+
icon: 'fa-solid:user-gear',
44+
link: '/profile/admin',
45+
},
46+
]
2247
}

‎src/app/modules/profile/profile.routes.ts

+6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Routes } from '@angular/router'
2+
import { AdminComponent } from 'app/modules/profile/admin/admin.component'
23
import { ProfileDeveloperComponent } from 'app/modules/profile/developer/developer.component'
34
import { ProfileInfoComponent } from 'app/modules/profile/info/info.component'
45
import { ProfileSecurityComponent } from 'app/modules/profile/security/security.component'
@@ -24,4 +25,9 @@ export default [
2425
title: 'Developer',
2526
component: ProfileDeveloperComponent,
2627
},
28+
{
29+
path: 'admin',
30+
title: 'Admin',
31+
component: AdminComponent,
32+
},
2733
] satisfies Routes

‎src/app/modules/profile/security/security.component.html

+52-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,53 @@
1-
<div id="security" class="tab-pane fade">
2-
<h3 class="text-xl font-bold mb-2">Security</h3>
3-
<p>Security content goes here.</p>
1+
<div class="flex-auto p-6 sm:p-10" *transloco="let t">
2+
<div class="max-w-2xl">
3+
<h1 class="text-2xl flex items-center mb-6 text-center"><mat-icon class="mr-2" svgIcon="fa-solid:lock"></mat-icon>Security</h1>
4+
5+
<form class="bg-card mt-8 flex flex-col overflow-hidden rounded-2xl p-8 pb-4 shadow">
6+
<div class="gt-xs:flex-row flex flex-col">
7+
<mat-form-field
8+
class="gt-xs:pr-3 flex-auto"
9+
>
10+
<mat-label>{{ t('Current Password') }}
11+
</mat-label>
12+
<input matInput />
13+
<mat-icon
14+
class="icon-size-5"
15+
matPrefix
16+
[svgIcon]="'fa-solid:key'"
17+
></mat-icon>
18+
</mat-form-field>
19+
<mat-form-field
20+
class="gt-xs:pl-3 flex-auto"
21+
>
22+
<mat-label>{{ t('New Password') }}</mat-label>
23+
<input matInput />
24+
<mat-icon
25+
class="icon-size-5"
26+
matPrefix
27+
[svgIcon]="'fa-solid:key'"
28+
></mat-icon>
29+
</mat-form-field>
30+
</div>
31+
<div class="flex">
32+
<mat-form-field
33+
class="flex-auto"
34+
>
35+
<mat-label>{{ t('Confirm New Password') }}</mat-label>
36+
<input matInput/>
37+
<mat-icon
38+
class="icon-size-5"
39+
matPrefix
40+
[svgIcon]="'fa-solid:key'"
41+
></mat-icon>
42+
</mat-form-field>
43+
</div>
44+
<div class="flex justify-center">
45+
<a
46+
mat-flat-button
47+
color="primary">
48+
<span class="ml-2">{{ t('Update Password') }}</span>
49+
</a>
50+
</div>
51+
</form>
52+
</div>
453
</div>

0 commit comments

Comments
 (0)