first fixes
This commit is contained in:
Kevin
Vendored
-1
@@ -9,7 +9,6 @@ type ExtractProps<T> = Omit<
|
||||
|
||||
declare module '@adonisjs/inertia/types' {
|
||||
export interface InertiaPages {
|
||||
'account/signup': ExtractProps<(typeof import('../../inertia/pages/account/signup.vue'))['default']>
|
||||
'auth/login': ExtractProps<(typeof import('../../inertia/pages/auth/login.vue'))['default']>
|
||||
'auth/signup': ExtractProps<(typeof import('../../inertia/pages/auth/signup.vue'))['default']>
|
||||
'components/create': ExtractProps<(typeof import('../../inertia/pages/components/create.vue'))['default']>
|
||||
|
||||
@@ -4,7 +4,7 @@ const email = () => vine.string().email().maxLength(254)
|
||||
const password = () => vine.string().minLength(8).maxLength(32)
|
||||
|
||||
export const signupValidator = vine.create({
|
||||
fullName: vine.string().nullable(),
|
||||
name: vine.string().nullable(),
|
||||
email: email().unique({ table: 'users', column: 'email' }),
|
||||
password: password().confirmed({
|
||||
confirmationField: 'passwordConfirmation',
|
||||
|
||||
@@ -7,6 +7,134 @@
|
||||
import { BaseModel, column } from '@adonisjs/lucid/orm'
|
||||
import { DateTime } from 'luxon'
|
||||
|
||||
export class AccessListSchema extends BaseModel {
|
||||
static $columns = ['createdOn', 'id', 'isDeleted', 'meta', 'modifiedOn', 'name', 'ownerUserId', 'passAuth', 'satisfyAny'] as const
|
||||
$columns = AccessListSchema.$columns
|
||||
@column.dateTime()
|
||||
declare createdOn: DateTime
|
||||
@column({ isPrimary: true })
|
||||
declare id: number
|
||||
@column()
|
||||
declare isDeleted: number
|
||||
@column()
|
||||
declare meta: any
|
||||
@column.dateTime()
|
||||
declare modifiedOn: DateTime
|
||||
@column()
|
||||
declare name: string
|
||||
@column()
|
||||
declare ownerUserId: number
|
||||
@column()
|
||||
declare passAuth: number
|
||||
@column()
|
||||
declare satisfyAny: number
|
||||
}
|
||||
|
||||
export class AccessListAuthSchema extends BaseModel {
|
||||
static $columns = ['accessListId', 'createdOn', 'id', 'meta', 'modifiedOn', 'password', 'username'] as const
|
||||
$columns = AccessListAuthSchema.$columns
|
||||
@column()
|
||||
declare accessListId: number
|
||||
@column.dateTime()
|
||||
declare createdOn: DateTime
|
||||
@column({ isPrimary: true })
|
||||
declare id: number
|
||||
@column()
|
||||
declare meta: any
|
||||
@column.dateTime()
|
||||
declare modifiedOn: DateTime
|
||||
@column({ serializeAs: null })
|
||||
declare password: string
|
||||
@column()
|
||||
declare username: string
|
||||
}
|
||||
|
||||
export class AccessListClientSchema extends BaseModel {
|
||||
static $columns = ['accessListId', 'address', 'createdOn', 'directive', 'id', 'meta', 'modifiedOn'] as const
|
||||
$columns = AccessListClientSchema.$columns
|
||||
@column()
|
||||
declare accessListId: number
|
||||
@column()
|
||||
declare address: string
|
||||
@column.dateTime()
|
||||
declare createdOn: DateTime
|
||||
@column()
|
||||
declare directive: string
|
||||
@column({ isPrimary: true })
|
||||
declare id: number
|
||||
@column()
|
||||
declare meta: any
|
||||
@column.dateTime()
|
||||
declare modifiedOn: DateTime
|
||||
}
|
||||
|
||||
export class AuditLogSchema extends BaseModel {
|
||||
static $columns = ['action', 'createdOn', 'id', 'meta', 'modifiedOn', 'objectId', 'objectType', 'userId'] as const
|
||||
$columns = AuditLogSchema.$columns
|
||||
@column()
|
||||
declare action: string
|
||||
@column.dateTime()
|
||||
declare createdOn: DateTime
|
||||
@column({ isPrimary: true })
|
||||
declare id: number
|
||||
@column()
|
||||
declare meta: any
|
||||
@column.dateTime()
|
||||
declare modifiedOn: DateTime
|
||||
@column()
|
||||
declare objectId: number
|
||||
@column()
|
||||
declare objectType: string
|
||||
@column()
|
||||
declare userId: number
|
||||
}
|
||||
|
||||
export class AuthSchema extends BaseModel {
|
||||
static $columns = ['createdOn', 'id', 'isDeleted', 'meta', 'modifiedOn', 'secret', 'type', 'userId'] as const
|
||||
$columns = AuthSchema.$columns
|
||||
@column.dateTime()
|
||||
declare createdOn: DateTime
|
||||
@column({ isPrimary: true })
|
||||
declare id: number
|
||||
@column()
|
||||
declare isDeleted: number
|
||||
@column()
|
||||
declare meta: any
|
||||
@column.dateTime()
|
||||
declare modifiedOn: DateTime
|
||||
@column()
|
||||
declare secret: string
|
||||
@column()
|
||||
declare type: string
|
||||
@column()
|
||||
declare userId: number
|
||||
}
|
||||
|
||||
export class CertificateSchema extends BaseModel {
|
||||
static $columns = ['createdOn', 'domainNames', 'expiresOn', 'id', 'isDeleted', 'meta', 'modifiedOn', 'niceName', 'ownerUserId', 'provider'] as const
|
||||
$columns = CertificateSchema.$columns
|
||||
@column.dateTime()
|
||||
declare createdOn: DateTime
|
||||
@column()
|
||||
declare domainNames: any
|
||||
@column.dateTime()
|
||||
declare expiresOn: DateTime
|
||||
@column({ isPrimary: true })
|
||||
declare id: number
|
||||
@column()
|
||||
declare isDeleted: number
|
||||
@column()
|
||||
declare meta: any
|
||||
@column.dateTime()
|
||||
declare modifiedOn: DateTime
|
||||
@column()
|
||||
declare niceName: string
|
||||
@column()
|
||||
declare ownerUserId: number
|
||||
@column()
|
||||
declare provider: string
|
||||
}
|
||||
|
||||
export class ComponentTypeSchema extends BaseModel {
|
||||
static $columns = ['id', 'name', 'unique'] as const
|
||||
$columns = ComponentTypeSchema.$columns
|
||||
@@ -92,6 +220,253 @@ export class ComputerSchema extends BaseModel {
|
||||
declare userId: number | null
|
||||
}
|
||||
|
||||
export class DeadHostSchema extends BaseModel {
|
||||
static $columns = ['advancedConfig', 'certificateId', 'createdOn', 'domainNames', 'enabled', 'hstsEnabled', 'hstsSubdomains', 'http2Support', 'id', 'isDeleted', 'meta', 'modifiedOn', 'ownerUserId', 'sslForced'] as const
|
||||
$columns = DeadHostSchema.$columns
|
||||
@column()
|
||||
declare advancedConfig: string
|
||||
@column()
|
||||
declare certificateId: number
|
||||
@column.dateTime()
|
||||
declare createdOn: DateTime
|
||||
@column()
|
||||
declare domainNames: any
|
||||
@column()
|
||||
declare enabled: number
|
||||
@column()
|
||||
declare hstsEnabled: number
|
||||
@column()
|
||||
declare hstsSubdomains: number
|
||||
@column()
|
||||
declare http2Support: number
|
||||
@column({ isPrimary: true })
|
||||
declare id: number
|
||||
@column()
|
||||
declare isDeleted: number
|
||||
@column()
|
||||
declare meta: any
|
||||
@column.dateTime()
|
||||
declare modifiedOn: DateTime
|
||||
@column()
|
||||
declare ownerUserId: number
|
||||
@column()
|
||||
declare sslForced: number
|
||||
}
|
||||
|
||||
export class MigrationSchema extends BaseModel {
|
||||
static $columns = ['batch', 'id', 'migrationTime', 'name'] as const
|
||||
$columns = MigrationSchema.$columns
|
||||
@column()
|
||||
declare batch: number | null
|
||||
@column({ isPrimary: true })
|
||||
declare id: number
|
||||
@column.dateTime()
|
||||
declare migrationTime: DateTime | null
|
||||
@column()
|
||||
declare name: string | null
|
||||
}
|
||||
|
||||
export class MigrationsLockSchema extends BaseModel {
|
||||
static $columns = ['index', 'isLocked'] as const
|
||||
$columns = MigrationsLockSchema.$columns
|
||||
@column({ isPrimary: true })
|
||||
declare index: number
|
||||
@column()
|
||||
declare isLocked: number | null
|
||||
}
|
||||
|
||||
export class ProxyHostSchema extends BaseModel {
|
||||
static $columns = ['accessListId', 'advancedConfig', 'allowWebsocketUpgrade', 'blockExploits', 'cachingEnabled', 'certificateId', 'createdOn', 'domainNames', 'enabled', 'forwardHost', 'forwardPort', 'forwardScheme', 'hstsEnabled', 'hstsSubdomains', 'http2Support', 'id', 'isDeleted', 'locations', 'meta', 'modifiedOn', 'ownerUserId', 'sslForced', 'trustForwardedProto'] as const
|
||||
$columns = ProxyHostSchema.$columns
|
||||
@column()
|
||||
declare accessListId: number
|
||||
@column()
|
||||
declare advancedConfig: string
|
||||
@column()
|
||||
declare allowWebsocketUpgrade: number
|
||||
@column()
|
||||
declare blockExploits: number
|
||||
@column()
|
||||
declare cachingEnabled: number
|
||||
@column()
|
||||
declare certificateId: number
|
||||
@column.dateTime()
|
||||
declare createdOn: DateTime
|
||||
@column()
|
||||
declare domainNames: any
|
||||
@column()
|
||||
declare enabled: number
|
||||
@column()
|
||||
declare forwardHost: string
|
||||
@column()
|
||||
declare forwardPort: number
|
||||
@column()
|
||||
declare forwardScheme: string
|
||||
@column()
|
||||
declare hstsEnabled: number
|
||||
@column()
|
||||
declare hstsSubdomains: number
|
||||
@column()
|
||||
declare http2Support: number
|
||||
@column({ isPrimary: true })
|
||||
declare id: number
|
||||
@column()
|
||||
declare isDeleted: number
|
||||
@column()
|
||||
declare locations: any | null
|
||||
@column()
|
||||
declare meta: any
|
||||
@column.dateTime()
|
||||
declare modifiedOn: DateTime
|
||||
@column()
|
||||
declare ownerUserId: number
|
||||
@column()
|
||||
declare sslForced: number
|
||||
@column()
|
||||
declare trustForwardedProto: boolean
|
||||
}
|
||||
|
||||
export class RedirectionHostSchema extends BaseModel {
|
||||
static $columns = ['advancedConfig', 'blockExploits', 'certificateId', 'createdOn', 'domainNames', 'enabled', 'forwardDomainName', 'forwardHttpCode', 'forwardScheme', 'hstsEnabled', 'hstsSubdomains', 'http2Support', 'id', 'isDeleted', 'meta', 'modifiedOn', 'ownerUserId', 'preservePath', 'sslForced'] as const
|
||||
$columns = RedirectionHostSchema.$columns
|
||||
@column()
|
||||
declare advancedConfig: string
|
||||
@column()
|
||||
declare blockExploits: number
|
||||
@column()
|
||||
declare certificateId: number
|
||||
@column.dateTime()
|
||||
declare createdOn: DateTime
|
||||
@column()
|
||||
declare domainNames: any
|
||||
@column()
|
||||
declare enabled: number
|
||||
@column()
|
||||
declare forwardDomainName: string
|
||||
@column()
|
||||
declare forwardHttpCode: number
|
||||
@column()
|
||||
declare forwardScheme: string
|
||||
@column()
|
||||
declare hstsEnabled: number
|
||||
@column()
|
||||
declare hstsSubdomains: number
|
||||
@column()
|
||||
declare http2Support: number
|
||||
@column({ isPrimary: true })
|
||||
declare id: number
|
||||
@column()
|
||||
declare isDeleted: number
|
||||
@column()
|
||||
declare meta: any
|
||||
@column.dateTime()
|
||||
declare modifiedOn: DateTime
|
||||
@column()
|
||||
declare ownerUserId: number
|
||||
@column()
|
||||
declare preservePath: number
|
||||
@column()
|
||||
declare sslForced: number
|
||||
}
|
||||
|
||||
export class SettingSchema extends BaseModel {
|
||||
static $columns = ['description', 'id', 'meta', 'name', 'value'] as const
|
||||
$columns = SettingSchema.$columns
|
||||
@column()
|
||||
declare description: string
|
||||
@column({ isPrimary: true })
|
||||
declare id: string
|
||||
@column()
|
||||
declare meta: any
|
||||
@column()
|
||||
declare name: string
|
||||
@column()
|
||||
declare value: string
|
||||
}
|
||||
|
||||
export class StreamSchema extends BaseModel {
|
||||
static $columns = ['certificateId', 'createdOn', 'enabled', 'forwardingHost', 'forwardingPort', 'id', 'incomingPort', 'isDeleted', 'meta', 'modifiedOn', 'ownerUserId', 'tcpForwarding', 'udpForwarding'] as const
|
||||
$columns = StreamSchema.$columns
|
||||
@column()
|
||||
declare certificateId: number
|
||||
@column.dateTime()
|
||||
declare createdOn: DateTime
|
||||
@column()
|
||||
declare enabled: number
|
||||
@column()
|
||||
declare forwardingHost: string
|
||||
@column()
|
||||
declare forwardingPort: number
|
||||
@column({ isPrimary: true })
|
||||
declare id: number
|
||||
@column()
|
||||
declare incomingPort: number
|
||||
@column()
|
||||
declare isDeleted: number
|
||||
@column()
|
||||
declare meta: any
|
||||
@column.dateTime()
|
||||
declare modifiedOn: DateTime
|
||||
@column()
|
||||
declare ownerUserId: number
|
||||
@column()
|
||||
declare tcpForwarding: number
|
||||
@column()
|
||||
declare udpForwarding: number
|
||||
}
|
||||
|
||||
export class UserSchema extends BaseModel {
|
||||
static $columns = ['avatar', 'createdOn', 'email', 'id', 'isDeleted', 'isDisabled', 'modifiedOn', 'name', 'nickname', 'roles'] as const
|
||||
$columns = UserSchema.$columns
|
||||
@column()
|
||||
declare avatar: string
|
||||
@column.dateTime()
|
||||
declare createdOn: DateTime
|
||||
@column()
|
||||
declare email: string
|
||||
@column({ isPrimary: true })
|
||||
declare id: number
|
||||
@column()
|
||||
declare isDeleted: number
|
||||
@column()
|
||||
declare isDisabled: number
|
||||
@column.dateTime()
|
||||
declare modifiedOn: DateTime
|
||||
@column()
|
||||
declare name: string
|
||||
@column()
|
||||
declare nickname: string
|
||||
@column()
|
||||
declare roles: any
|
||||
}
|
||||
|
||||
export class UserPermissionSchema extends BaseModel {
|
||||
static $columns = ['accessLists', 'certificates', 'createdOn', 'deadHosts', 'id', 'modifiedOn', 'proxyHosts', 'redirectionHosts', 'streams', 'userId', 'visibility'] as const
|
||||
$columns = UserPermissionSchema.$columns
|
||||
@column()
|
||||
declare accessLists: string
|
||||
@column()
|
||||
declare certificates: string
|
||||
@column.dateTime()
|
||||
declare createdOn: DateTime
|
||||
@column()
|
||||
declare deadHosts: string
|
||||
@column({ isPrimary: true })
|
||||
declare id: number
|
||||
@column.dateTime()
|
||||
declare modifiedOn: DateTime
|
||||
@column()
|
||||
declare proxyHosts: string
|
||||
@column()
|
||||
declare redirectionHosts: string
|
||||
@column()
|
||||
declare streams: string
|
||||
@column()
|
||||
declare userId: number
|
||||
@column()
|
||||
declare visibility: string
|
||||
}
|
||||
|
||||
export class UserSchema extends BaseModel {
|
||||
static $columns = ['createdAt', 'email', 'id', 'name', 'password', 'updatedAt'] as const
|
||||
$columns = UserSchema.$columns
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
import { BaseSeeder } from '@adonisjs/lucid/seeders'
|
||||
import ComponentType from '#models/component_type'
|
||||
|
||||
export default class extends BaseSeeder {
|
||||
async run() {
|
||||
await ComponentType.createMany([
|
||||
{
|
||||
name: 'Processor',
|
||||
unique: true,
|
||||
},
|
||||
{
|
||||
name: 'Motherboard',
|
||||
unique: true,
|
||||
},
|
||||
{
|
||||
name: 'Graphic Card',
|
||||
unique: true,
|
||||
},
|
||||
{
|
||||
name: 'Memory',
|
||||
unique: true,
|
||||
},
|
||||
{
|
||||
name: 'SSD',
|
||||
unique: true,
|
||||
},
|
||||
{
|
||||
name: 'HDD',
|
||||
unique: true,
|
||||
},
|
||||
{
|
||||
name: 'Cooler',
|
||||
unique: true,
|
||||
},
|
||||
{
|
||||
name: 'Power Supply',
|
||||
unique: true,
|
||||
},
|
||||
{
|
||||
name: 'Case',
|
||||
unique: true,
|
||||
},
|
||||
{
|
||||
name: 'Fan',
|
||||
unique: false,
|
||||
},
|
||||
{
|
||||
name: 'WiFi-Card',
|
||||
unique: true,
|
||||
},
|
||||
{
|
||||
name: 'Other',
|
||||
unique: false,
|
||||
},
|
||||
])
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { BaseSeeder } from '@adonisjs/lucid/seeders'
|
||||
import ComputerState from '#models/computer_state'
|
||||
|
||||
export default class extends BaseSeeder {
|
||||
async run() {
|
||||
await ComputerState.createMany([
|
||||
{
|
||||
name: 'ON_GOING',
|
||||
},
|
||||
{
|
||||
name: 'FINISHED',
|
||||
},
|
||||
{
|
||||
name: 'SOLD',
|
||||
},
|
||||
])
|
||||
}
|
||||
}
|
||||
+3
-222
@@ -2,18 +2,6 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--gray-1: oklch(98.5% 0 0);
|
||||
--gray-2: oklch(97% 0 0);
|
||||
--gray-3: oklch(92.2% 0 0);
|
||||
--gray-4: oklch(87% 0 0);
|
||||
--gray-6: oklch(55.6% 0 0);
|
||||
--gray-7: oklch(43.9% 0 0);
|
||||
--gray-8: oklch(37.1% 0 0);
|
||||
--gray-10: oklch(26.9% 0 0);
|
||||
--gray-12: oklch(14.5% 0 0);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@@ -23,218 +11,11 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
font-family: system-ui, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background: var(--gray-2);
|
||||
color: var(--gray-10);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[x-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--gray-12);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
max-width: 1440px;
|
||||
margin: auto;
|
||||
padding: 0 30px;
|
||||
}
|
||||
header > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
}
|
||||
header nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 26px;
|
||||
}
|
||||
header nav a {
|
||||
font-weight: 500;
|
||||
color: var(--gray-8);
|
||||
}
|
||||
header nav a:hover,
|
||||
header nav a.current {
|
||||
color: var(--gray-12);
|
||||
}
|
||||
|
||||
/* Main */
|
||||
main {
|
||||
max-width: 1440px;
|
||||
margin: 0 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: calc(100vh - 65px);
|
||||
background: #fff;
|
||||
border: 1px solid var(--gray-3);
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 100px 50px;
|
||||
max-width: 880px;
|
||||
}
|
||||
.hero h1 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 52px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1.05;
|
||||
}
|
||||
.hero p {
|
||||
font-size: 22px;
|
||||
color: var(--gray-7);
|
||||
}
|
||||
.hero .button {
|
||||
margin-top: 30px;
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
padding: 0 50px;
|
||||
border-top: 1px solid var(--gray-3);
|
||||
}
|
||||
.cards a {
|
||||
padding: 30px 40px;
|
||||
border-right: 1px solid var(--gray-3);
|
||||
}
|
||||
.cards a:first-child {
|
||||
border-left: 1px solid var(--gray-3);
|
||||
}
|
||||
.cards a:hover {
|
||||
background: var(--gray-1);
|
||||
}
|
||||
.cards h3 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.4px;
|
||||
}
|
||||
.cards p {
|
||||
color: var(--gray-6);
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.form-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
}
|
||||
.form-container h1 {
|
||||
font-size: 32px;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.form-container p {
|
||||
font-size: 18px;
|
||||
margin-bottom: 48px;
|
||||
color: var(--gray-6);
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
label {
|
||||
margin-bottom: 4px;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
button {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
font: inherit;
|
||||
}
|
||||
input {
|
||||
height: 40px;
|
||||
border: 1px solid var(--gray-4);
|
||||
padding: 0 16px;
|
||||
}
|
||||
input[data-invalid='true'],
|
||||
textarea[data-invalid='true'] {
|
||||
border-color: #fb2c36;
|
||||
}
|
||||
input[data-invalid='true'] + div,
|
||||
textarea[data-invalid='true'] + div {
|
||||
color: #fb2c36;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--gray-12);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
button:hover {
|
||||
background: var(--gray-10);
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.alert {
|
||||
background: #fff;
|
||||
position: relative;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
min-width: 380px;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--gray-3);
|
||||
border-radius: 10px;
|
||||
animation: scale-up 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
|
||||
}
|
||||
.alert-destructive {
|
||||
color: #fb2c36;
|
||||
background: #fb2c361a;
|
||||
border-color: #fb2c36;
|
||||
}
|
||||
.alert-success {
|
||||
color: #00a63e;
|
||||
background: #00a63e1a;
|
||||
border-color: #00a63e;
|
||||
}
|
||||
.flash-container {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@keyframes scale-up {
|
||||
from {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -1,98 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { Form, Link } from '@adonisjs/inertia/vue'
|
||||
import { useForm } from '@inertiajs/vue3'
|
||||
import EmptyLayout from '~/pages/layout/emptyLayout.vue'
|
||||
|
||||
defineOptions({ layout: EmptyLayout })
|
||||
|
||||
const form = useForm({
|
||||
fullName: '',
|
||||
email: '',
|
||||
password: '',
|
||||
passwordConfirmation: '',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gradient-to-br from-gray-100 to-gray-200">
|
||||
<div class="w-full max-w-md p-6 sm:p-8 bg-white rounded-lg shadow-lg">
|
||||
<div class="flex flex-col items-center justify-center mb-8">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-gray-800">Create Account</h1>
|
||||
<p class="text-sm text-gray-600 mt-2">Join PC Creator today</p>
|
||||
</div>
|
||||
|
||||
<Form route="account.signup" #default="{ processing, errors }">
|
||||
<div class="space-y-4 sm:space-y-6">
|
||||
<div>
|
||||
<label class="block">
|
||||
<span class="text-sm font-medium text-gray-700 mb-2 block">Full Name</span>
|
||||
<input
|
||||
v-model="form.fullName"
|
||||
class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
|
||||
name="fullName"
|
||||
type="text"
|
||||
placeholder="Enter your full name"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block">
|
||||
<span class="text-sm font-medium text-gray-700 mb-2 block">Email</span>
|
||||
<input
|
||||
v-model="form.email"
|
||||
class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block">
|
||||
<span class="text-sm font-medium text-gray-700 mb-2 block">Password</span>
|
||||
<input
|
||||
v-model="form.password"
|
||||
class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
|
||||
name="password"
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block">
|
||||
<span class="text-sm font-medium text-gray-700 mb-2 block">Confirm Password</span>
|
||||
<input
|
||||
v-model="form.passwordConfirmation"
|
||||
class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
|
||||
name="passwordConfirmation"
|
||||
type="password"
|
||||
placeholder="Confirm your password"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="processing"
|
||||
class="w-full px-3 sm:px-4 py-2 sm:py-3 mt-6 sm:mt-8 text-base font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500/40 transition disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{{ processing ? 'Creating account...' : 'Sign Up' }}
|
||||
</button>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<p class="text-sm text-gray-600">
|
||||
Already have an account?
|
||||
<Link route="auth.show_login" class="text-indigo-600 hover:text-indigo-700 font-semibold">
|
||||
Login
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -5,18 +5,18 @@ import EmptyLayout from '~/pages/layout/emptyLayout.vue'
|
||||
|
||||
defineOptions({ layout: EmptyLayout })
|
||||
|
||||
const props = defineProps<{ errors?: any[] | any }>()
|
||||
const props = defineProps<{ errors?: Record<string, string> }>()
|
||||
|
||||
const vineErrors = computed(() => {
|
||||
if (Array.isArray(props.errors)) {
|
||||
return props.errors as any[]
|
||||
if (props.errors && !Array.isArray(props.errors)) {
|
||||
return props.errors
|
||||
}
|
||||
return []
|
||||
return {}
|
||||
})
|
||||
|
||||
const authError = computed(() => {
|
||||
if (!Array.isArray(props.errors) && props.errors) {
|
||||
return props.errors as any
|
||||
if (props.errors && !Array.isArray(props.errors)) {
|
||||
return props.errors
|
||||
}
|
||||
return null
|
||||
})
|
||||
@@ -27,13 +27,8 @@ const form = useForm({
|
||||
})
|
||||
|
||||
function getErrorMessage(field: string): string | null {
|
||||
const error = vineErrors.value.find((error) => error.field === field)
|
||||
return error ? error.message : null
|
||||
return vineErrors.value[field] || null
|
||||
}
|
||||
|
||||
console.log(authError)
|
||||
console.log(vineErrors)
|
||||
console.log(props)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -109,7 +104,7 @@ console.log(props)
|
||||
<Link
|
||||
as="button"
|
||||
class="w-full px-3 sm:px-4 py-2 sm:py-3 mt-3 sm:mt-4 text-base font-semibold text-indigo-600 bg-gray-100 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/40 transition"
|
||||
href="/account/signup"
|
||||
href="/auth/signup"
|
||||
type="button"
|
||||
>
|
||||
Create an account
|
||||
|
||||
@@ -6,7 +6,7 @@ import EmptyLayout from '~/pages/layout/emptyLayout.vue'
|
||||
defineOptions({ layout: EmptyLayout })
|
||||
|
||||
const form = useForm({
|
||||
fullName: '',
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
passwordConfirmation: '',
|
||||
@@ -21,15 +21,15 @@ const form = useForm({
|
||||
<p class="text-sm text-gray-600 mt-2">Join PC Creator today</p>
|
||||
</div>
|
||||
|
||||
<Form route="account.signup" #default="{ processing, errors }">
|
||||
<Form route="new_account.store" #default="{ processing, errors }">
|
||||
<div class="space-y-4 sm:space-y-6">
|
||||
<div>
|
||||
<label class="block">
|
||||
<span class="text-sm font-medium text-gray-700 mb-2 block">Full Name</span>
|
||||
<input
|
||||
v-model="form.fullName"
|
||||
v-model="form.name"
|
||||
class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
|
||||
name="fullName"
|
||||
name="name"
|
||||
type="text"
|
||||
placeholder="Enter your full name"
|
||||
/>
|
||||
@@ -86,7 +86,7 @@ const form = useForm({
|
||||
<div class="text-center mt-4">
|
||||
<p class="text-sm text-gray-600">
|
||||
Already have an account?
|
||||
<Link route="auth.show_login" class="text-indigo-600 hover:text-indigo-700 font-semibold">
|
||||
<Link route="session.create" class="text-indigo-600 hover:text-indigo-700 font-semibold">
|
||||
Login
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
@@ -2,19 +2,18 @@
|
||||
import { computed, reactive } from 'vue'
|
||||
import { Link, useForm } from '@inertiajs/vue3'
|
||||
|
||||
const props = defineProps<{ types: any[]; errors?: any[] }>()
|
||||
const errors = computed(() => props.errors || [])
|
||||
const props = defineProps<{ types: any[]; errors?: Record<string, string> }>()
|
||||
const errors = computed(() => props.errors || {})
|
||||
const form = reactive({
|
||||
name: '',
|
||||
price: 0,
|
||||
type_id: null,
|
||||
purchase_date: new Date().toISOString().split('T')[0],
|
||||
typeId: null,
|
||||
purchaseDate: new Date().toISOString().split('T')[0],
|
||||
quantity: 1,
|
||||
})
|
||||
|
||||
function getErrorMessage(field: string): string | null {
|
||||
const error = errors.value.find((error) => error.field === field)
|
||||
return error ? error.message : null
|
||||
return errors.value[field] || null
|
||||
}
|
||||
|
||||
function formatDateForMySQL(date: string) {
|
||||
@@ -60,8 +59,8 @@ function submitForm() {
|
||||
<div>
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="type">Type</label>
|
||||
<select
|
||||
name="type_id"
|
||||
v-model.number="form.type_id"
|
||||
name="typeId"
|
||||
v-model.number="form.typeId"
|
||||
id="type"
|
||||
class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring-indigo-500 px-3 py-2 focus:ring-1 border rounded text-gray-700 bg-white"
|
||||
>
|
||||
@@ -77,8 +76,8 @@ function submitForm() {
|
||||
>Purchase Date</label
|
||||
>
|
||||
<input
|
||||
name="purchase_date"
|
||||
v-model="form.purchase_date"
|
||||
name="purchaseDate"
|
||||
v-model="form.purchaseDate"
|
||||
class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 border rounded text-gray-700 px-3 py-2"
|
||||
type="date"
|
||||
/>
|
||||
|
||||
@@ -6,23 +6,22 @@ const { props } = usePage<{
|
||||
component: any
|
||||
types: any[]
|
||||
origin: string
|
||||
errors?: any[]
|
||||
errors?: Record<string, string>
|
||||
}>()
|
||||
const { component, types, origin } = props
|
||||
const errors = computed(() => props.errors || [])
|
||||
const errors = computed(() => props.errors || {})
|
||||
|
||||
const form = reactive({
|
||||
id: component.id,
|
||||
name: component.name,
|
||||
price: component.price,
|
||||
type_id: component.type.id,
|
||||
purchase_date: component.purchaseDate,
|
||||
typeId: component.type.id,
|
||||
purchaseDate: component.purchaseDate,
|
||||
origin: origin,
|
||||
})
|
||||
|
||||
function getErrorMessage(field: string): string | null {
|
||||
const error = errors.value.find((error) => error.field === field)
|
||||
return error ? error.message : null
|
||||
return errors.value[field] || null
|
||||
}
|
||||
|
||||
function formatDateForMySQL(date: string) {
|
||||
@@ -62,7 +61,7 @@ function formatDateForMySQL(date: string) {
|
||||
<div>
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="type">Type</label>
|
||||
<select
|
||||
v-model="form.type_id"
|
||||
v-model="form.typeId"
|
||||
id="type"
|
||||
class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring-indigo-500 px-3 py-2 focus:ring-1 border rounded text-gray-700 bg-white"
|
||||
>
|
||||
@@ -78,8 +77,8 @@ function formatDateForMySQL(date: string) {
|
||||
>Purchase Date</label
|
||||
>
|
||||
<input
|
||||
name="purchase_date"
|
||||
v-model="form.purchase_date"
|
||||
name="purchaseDate"
|
||||
v-model="form.purchaseDate"
|
||||
class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 border rounded text-gray-700 px-3 py-2"
|
||||
type="date"
|
||||
/>
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { Link, usePage } from '@inertiajs/vue3'
|
||||
import { Link } from '@inertiajs/vue3'
|
||||
|
||||
const { props } = usePage<{ component: any }>()
|
||||
const { component } = props
|
||||
const originHeader = { 'X-Inertia-Origin': 'components' }
|
||||
defineProps<{ component: any }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -11,29 +9,27 @@ const originHeader = { 'X-Inertia-Origin': 'components' }
|
||||
<h1 class="text-2xl font-semibold mb-8 text-gray-800">Component Details</h1>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="name">Name</label>
|
||||
<div class="px-3 py-2 border rounded text-gray-700" id="name">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">Name</label>
|
||||
<div class="px-3 py-2 border rounded text-gray-700">
|
||||
{{ component.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="price">Price</label>
|
||||
<div class="px-3 py-2 border rounded text-gray-700" id="price">${{ component.price }}</div>
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">Price</label>
|
||||
<div class="px-3 py-2 border rounded text-gray-700">${{ component.price }}</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="type">Type</label>
|
||||
<div class="px-3 py-2 border rounded text-gray-700" id="type">
|
||||
{{ component.type.name }}
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">Type</label>
|
||||
<div class="px-3 py-2 border rounded text-gray-700">
|
||||
{{ component.type?.name ?? 'N/A' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="purchaseDate"
|
||||
>Purchase Date</label
|
||||
>
|
||||
<div class="px-3 py-2 border rounded text-gray-700" id="purchaseDate">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">Purchase Date</label>
|
||||
<div class="px-3 py-2 border rounded text-gray-700">
|
||||
{{ component.purchaseDate }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,11 +39,8 @@ const originHeader = { 'X-Inertia-Origin': 'components' }
|
||||
type="button"
|
||||
as="button"
|
||||
class="w-full md:w-auto px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition text-center"
|
||||
:headers="originHeader"
|
||||
>
|
||||
Edit
|
||||
</Link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -5,10 +5,10 @@ import { Link, usePage } from '@inertiajs/vue3'
|
||||
const { props } = usePage<{
|
||||
components: any[]
|
||||
states: any[]
|
||||
errors: any[]
|
||||
errors: Record<string, string>
|
||||
}>()
|
||||
const { components, states } = props
|
||||
const errors = computed(() => props.errors || [])
|
||||
const errors = computed(() => props.errors || {})
|
||||
|
||||
const componentTypeOrder = [
|
||||
'Processor',
|
||||
@@ -49,8 +49,7 @@ const form = reactive({
|
||||
})
|
||||
|
||||
function getErrorMessage(field: string): string | null {
|
||||
const error = errors.value.find((error) => error.field === field)
|
||||
return error ? error.message : null
|
||||
return errors.value[field] || null
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -6,10 +6,10 @@ const { props } = usePage<{
|
||||
computer: any
|
||||
availableComponents: any[]
|
||||
states: any[]
|
||||
errors?: any[]
|
||||
errors?: Record<string, string>
|
||||
}>()
|
||||
const { computer, availableComponents, states } = props
|
||||
const errors = computed(() => props.errors || [])
|
||||
const errors = computed(() => props.errors || {})
|
||||
|
||||
const form = reactive({
|
||||
id: computer.id,
|
||||
@@ -31,8 +31,7 @@ function deleteComputer(id: number) {
|
||||
}
|
||||
|
||||
function getErrorMessage(field: string): string | null {
|
||||
const error = errors.value.find((error) => error.field === field)
|
||||
return error ? error.message : null
|
||||
return errors.value[field] || null
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ defineProps<{ computers: any[] }>()
|
||||
href="/computers/create"
|
||||
type="button"
|
||||
as="button"
|
||||
class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition"
|
||||
class="inline-flex shrink-0 px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition"
|
||||
>
|
||||
Add
|
||||
</Link>
|
||||
|
||||
@@ -4,14 +4,16 @@ import Header from './header.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-screen bg-gray-200 font-roboto">
|
||||
<Sidebar />
|
||||
<div class="flex h-screen bg-background font-body-md text-on-background overflow-hidden">
|
||||
<aside class="w-64 shrink-0">
|
||||
<Sidebar />
|
||||
</aside>
|
||||
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<div class="flex-1 flex flex-col min-w-0">
|
||||
<Header />
|
||||
|
||||
<main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-200">
|
||||
<div class="container mx-auto px-6 py-8">
|
||||
<main class="flex-1 pt-16 min-h-screen border-0 overflow-auto">
|
||||
<div class="p-10 max-w-[1400px] mx-auto">
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -3,15 +3,9 @@ import { computed, ref } from 'vue'
|
||||
import { useSidebar } from '~/composables/useSidebar'
|
||||
import { Link, usePage } from '@inertiajs/vue3'
|
||||
import { userProfileIcon } from '~/assets/icons'
|
||||
import { useAdminMode } from '~/composables/isAdminMode'
|
||||
|
||||
const dropdownOpen = ref(false)
|
||||
const { isOpen } = useSidebar()
|
||||
const { isAdminActive } = useAdminMode()
|
||||
|
||||
function toggleActive() {
|
||||
isAdminActive.value = !isAdminActive.value
|
||||
}
|
||||
|
||||
const page = usePage()
|
||||
|
||||
@@ -22,78 +16,73 @@ const user = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="flex items-center justify-between px-6 py-4 bg-white border-b-4 border-indigo-600">
|
||||
<div class="flex items-center">
|
||||
<button class="text-gray-500 focus:outline-none lg:hidden" @click="isOpen = true">
|
||||
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4 6H20M4 12H20M4 18H11"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<header
|
||||
class="flex justify-between items-center px-10 h-16 bg-white ml-64 w-[calc(100%-16rem)] fixed top-0 right-0 z-40 border-b border-outline-variant shadow-sm"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-4 bg-surface-container-low px-4 py-2 rounded-lg border border-outline-variant w-96 focus-within:ring-2 focus-within:ring-primary transition-all"
|
||||
>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">search</span>
|
||||
<input
|
||||
class="bg-transparent border-none focus:ring-0 focus:outline-none text-body-sm font-body-sm w-full p-0"
|
||||
placeholder="Search builds..."
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="relative">
|
||||
<button
|
||||
class="relative z-10 block w-8 h-8 overflow-hidden rounded-full shadow focus:outline-none"
|
||||
@click="dropdownOpen = !dropdownOpen"
|
||||
>
|
||||
<img class="object-cover w-full h-full" :src="userProfileIcon" alt="Your avatar" />
|
||||
</button>
|
||||
<div class="flex items-center gap-6">
|
||||
<button class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
</button>
|
||||
|
||||
<div class="h-8 w-px bg-outline-variant mx-2"></div>
|
||||
|
||||
<div class="relative flex items-center gap-3 cursor-pointer group" @click="dropdownOpen = !dropdownOpen">
|
||||
<div class="text-right hidden sm:block">
|
||||
<p class="font-label-md text-label-md text-on-surface">{{ user.name }}</p>
|
||||
</div>
|
||||
<img
|
||||
class="w-10 h-10 rounded-full border-2 border-primary-container group-hover:border-primary transition-all object-cover"
|
||||
:src="userProfileIcon"
|
||||
alt="Avatar"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<transition
|
||||
enter-active-class="transition duration-150 ease-out transform"
|
||||
enter-from-class="scale-95 opacity-0"
|
||||
enter-to-class="scale-100 opacity-100"
|
||||
leave-active-class="transition duration-150 ease-in transform"
|
||||
leave-from-class="scale-100 opacity-100"
|
||||
leave-to-class="scale-95 opacity-0"
|
||||
>
|
||||
<div
|
||||
v-show="dropdownOpen"
|
||||
class="fixed inset-0 z-10 w-full h-full"
|
||||
@click="dropdownOpen = false"
|
||||
/>
|
||||
|
||||
<transition
|
||||
enter-active-class="transition duration-150 ease-out transform"
|
||||
enter-from-class="scale-95 opacity-0"
|
||||
enter-to-class="scale-100 opacity-100"
|
||||
leave-active-class="transition duration-150 ease-in transform"
|
||||
leave-from-class="scale-100 opacity-100"
|
||||
leave-to-class="scale-95 opacity-0"
|
||||
class="absolute top-14 right-0 z-50 min-w-48 max-w-72 bg-white rounded-lg shadow-xl border border-outline-variant overflow-hidden"
|
||||
>
|
||||
<div
|
||||
v-show="dropdownOpen"
|
||||
class="absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl"
|
||||
>
|
||||
<div class="flex items-center justify-between px-4 py-2 text-sm text-indigo-600">
|
||||
<strong>{{ user.name }}</strong>
|
||||
</div>
|
||||
<hr />
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white cursor-pointer"
|
||||
@click="toggleActive"
|
||||
>
|
||||
<span>{{ isAdminActive ? 'Admin' : 'Classic' }}</span>
|
||||
<button
|
||||
:class="{ 'bg-indigo-800': isAdminActive, 'bg-gray-200': !isAdminActive }"
|
||||
class="w-10 h-5 rounded-full focus:outline-none relative"
|
||||
>
|
||||
<span
|
||||
:class="{ 'translate-x-5': isAdminActive, 'translate-x-0': !isAdminActive }"
|
||||
class="block w-4 h-4 bg-white rounded-full shadow transform transition duration-300"
|
||||
></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/auth/logout"
|
||||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white"
|
||||
>
|
||||
Logout
|
||||
</Link>
|
||||
<div class="px-4 py-3 border-b border-outline-variant">
|
||||
<p class="font-label-md text-label-md text-on-surface truncate">{{ user.name }}</p>
|
||||
<p class="font-label-sm text-label-sm text-on-surface-variant truncate">{{ user.email }}</p>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/auth/logout"
|
||||
class="flex items-center gap-3 px-4 py-2 text-body-sm font-body-sm text-on-surface hover:bg-surface-container-low transition-colors"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]">logout</span>
|
||||
Sign Out
|
||||
</Link>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div
|
||||
v-show="dropdownOpen"
|
||||
class="fixed inset-0 z-30"
|
||||
@click="dropdownOpen = false"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -14,7 +14,7 @@ console.log(route)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex">
|
||||
<div class="flex h-full">
|
||||
<!-- Backdrop -->
|
||||
<div
|
||||
:class="isOpen ? 'block' : 'hidden'"
|
||||
@@ -25,7 +25,7 @@ console.log(route)
|
||||
|
||||
<div
|
||||
:class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
|
||||
class="fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0"
|
||||
class="fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:h-full lg:translate-x-0 lg:static lg:inset-0"
|
||||
>
|
||||
<div class="flex items-center justify-center mt-8">
|
||||
<div class="flex items-center">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, defineEmits, defineProps, onMounted, ref, watch } from 'vue'
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { Component } from '~/pages/types/UITypes'
|
||||
|
||||
interface ComponentsByType {
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import { defineEmits, defineProps } from 'vue'
|
||||
|
||||
defineProps<{ show: boolean }>()
|
||||
const emit = defineEmits(['confirm', 'cancel'])
|
||||
|
||||
|
||||
Generated
+2
-2
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "pc-builderV2",
|
||||
"name": "pc-builder",
|
||||
"version": "0.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "pc-builderV2",
|
||||
"name": "pc-builder",
|
||||
"version": "0.0.0",
|
||||
"license": "UNLICENSED",
|
||||
"dependencies": {
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "pc-builderV2",
|
||||
"name": "pc-builder",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
|
||||
@@ -6,6 +6,17 @@
|
||||
<title inertia>
|
||||
AdonisJS
|
||||
</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
@vite(['inertia/app.ts'])
|
||||
@inertiaHead()
|
||||
|
||||
+60
-1
@@ -6,7 +6,66 @@ export default {
|
||||
'./inertia/**/*.vue',
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
colors: {
|
||||
'primary': '#3525cd',
|
||||
'on-primary': '#ffffff',
|
||||
'primary-container': '#4f46e5',
|
||||
'on-primary-container': '#dad7ff',
|
||||
'secondary': '#565e74',
|
||||
'on-secondary': '#ffffff',
|
||||
'secondary-container': '#dae2fd',
|
||||
'on-secondary-container': '#5c647a',
|
||||
'tertiary': '#46494b',
|
||||
'on-tertiary': '#ffffff',
|
||||
'error': '#ba1a1a',
|
||||
'on-error': '#ffffff',
|
||||
'error-container': '#ffdad6',
|
||||
'on-error-container': '#93000a',
|
||||
'background': '#f8f9ff',
|
||||
'on-background': '#0b1c30',
|
||||
'surface': '#f8f9ff',
|
||||
'on-surface': '#0b1c30',
|
||||
'surface-variant': '#d3e4fe',
|
||||
'on-surface-variant': '#464555',
|
||||
'surface-dim': '#cbdbf5',
|
||||
'surface-bright': '#f8f9ff',
|
||||
'surface-container-lowest': '#ffffff',
|
||||
'surface-container-low': '#eff4ff',
|
||||
'surface-container': '#e5eeff',
|
||||
'surface-container-high': '#dce9ff',
|
||||
'surface-container-highest': '#d3e4fe',
|
||||
'inverse-surface': '#213145',
|
||||
'inverse-on-surface': '#eaf1ff',
|
||||
'inverse-primary': '#c3c0ff',
|
||||
'outline': '#777587',
|
||||
'outline-variant': '#c7c4d8',
|
||||
'surface-tint': '#4d44e3',
|
||||
},
|
||||
fontFamily: {
|
||||
'headline-lg': ['Hanken Grotesk'],
|
||||
'headline-md': ['Hanken Grotesk'],
|
||||
'headline-xl': ['Hanken Grotesk'],
|
||||
'body-lg': ['Inter'],
|
||||
'body-md': ['Inter'],
|
||||
'body-sm': ['Inter'],
|
||||
'label-md': ['JetBrains Mono'],
|
||||
'label-sm': ['JetBrains Mono'],
|
||||
},
|
||||
fontSize: {
|
||||
'headline-lg': ['28px', { lineHeight: '36px', letterSpacing: '-0.01em', fontWeight: '600' }],
|
||||
'headline-md': ['20px', { lineHeight: '28px', fontWeight: '600' }],
|
||||
'headline-xl': ['36px', { lineHeight: '44px', letterSpacing: '-0.02em', fontWeight: '700' }],
|
||||
'body-lg': ['18px', { lineHeight: '28px', fontWeight: '400' }],
|
||||
'body-md': ['16px', { lineHeight: '24px', fontWeight: '400' }],
|
||||
'body-sm': ['14px', { lineHeight: '20px', fontWeight: '400' }],
|
||||
'label-md': ['14px', { lineHeight: '20px', letterSpacing: '0.02em', fontWeight: '500' }],
|
||||
'label-sm': ['12px', { lineHeight: '16px', letterSpacing: '0.05em', fontWeight: '500' }],
|
||||
},
|
||||
spacing: {
|
||||
'sidebar-width': '280px',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
} satisfies Config
|
||||
|
||||
Reference in New Issue
Block a user