From c4f7d600163362f8ab8f465032a3b2f995f4ac4e Mon Sep 17 00:00:00 2001 From: Clement Date: Mon, 20 May 2024 17:04:03 +0200 Subject: [PATCH] make register and login to layout --- front/src/components/ui/Button.astro | 2 + front/src/components/widgets/Header.astro | 297 ++++++++++--------- front/src/layouts/PageLayout.astro | 2 +- front/src/navigation.js | 341 ++++++++++------------ front/src/pages/account/index.astro | 12 +- front/src/pages/account/login.astro | 12 +- front/src/pages/account/logout.astro | 4 +- front/src/pages/account/register.astro | 2 +- front/src/types.d.ts | 306 +++++++++---------- 9 files changed, 489 insertions(+), 489 deletions(-) diff --git a/front/src/components/ui/Button.astro b/front/src/components/ui/Button.astro index d3c2398..e72f067 100644 --- a/front/src/components/ui/Button.astro +++ b/front/src/components/ui/Button.astro @@ -6,6 +6,7 @@ import type { CallToAction as Props } from '~/types'; const { variant = 'secondary', target, + link, text = Astro.slots.render('default'), icon = '', class: className = '', @@ -31,6 +32,7 @@ const variants = { diff --git a/front/src/components/widgets/Header.astro b/front/src/components/widgets/Header.astro index 8e6cb27..bb2cff8 100644 --- a/front/src/components/widgets/Header.astro +++ b/front/src/components/widgets/Header.astro @@ -1,166 +1,173 @@ --- -import { Icon } from 'astro-icon/components'; -import Logo from '~/components/Logo.astro'; -import ToggleTheme from '~/components/common/ToggleTheme.astro'; -import ToggleMenu from '~/components/common/ToggleMenu.astro'; -import Button from '~/components/ui/Button.astro'; +import { Icon } from 'astro-icon/components' +import Logo from 'components/Logo.astro' +import ToggleTheme from 'components/common/ToggleTheme.astro' +import ToggleMenu from 'components/common/ToggleMenu.astro' +import Button from 'components/ui/Button.astro' -import { getHomePermalink } from '~/utils/permalinks'; -import { trimSlash, getAsset } from '~/utils/permalinks'; -import type { CallToAction } from '~/types'; +import { getHomePermalink } from 'utils/permalinks' +import { trimSlash, getAsset } from 'utils/permalinks' +import type { CallToAction } from 'types' +const pb = Astro.locals.pb + +const connected = pb.authStore.isValid interface Link { - text?: string; - href?: string; - ariaLabel?: string; - icon?: string; + text?: string + href?: string + ariaLabel?: string + icon?: string } interface ActionLink extends CallToAction {} interface MenuLink extends Link { - links?: Array; + links?: Array } export interface Props { - id?: string; - links?: Array; - actions?: Array; - isSticky?: boolean; - isDark?: boolean; - isFullWidth?: boolean; - showToggleTheme?: boolean; - showRssFeed?: boolean; - position?: string; + id?: string + links?: Array + actions?: Array + isSticky?: boolean + isDark?: boolean + isFullWidth?: boolean + showToggleTheme?: boolean + showRssFeed?: boolean + position?: string } const { - id = 'header', - links = [], - actions = [], - isSticky = false, - isDark = false, - isFullWidth = false, - showToggleTheme = false, - showRssFeed = false, - position = 'center', -} = Astro.props; + id = 'header', + links = [], + actions = [], + isSticky = false, + isDark = false, + isFullWidth = false, + showToggleTheme = false, + showRssFeed = false, + position = 'center', +} = Astro.props -const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`; +const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}` ---
-
-
-
- - - -
- -
-
- -
-
-
- {showToggleTheme && } - { - showRssFeed && ( - - - - ) - } -
- { - actions?.length ? ( - - {actions.map((btnProps) => ( -
-
-
+
+
+
+ + + +
+ +
+
+ +
+
+
+ {showToggleTheme && } + { + showRssFeed && ( + + + + ) + } +
+ { !connected && ( + + + + + )} + { connected && ( + + )} +
+
+
diff --git a/front/src/layouts/PageLayout.astro b/front/src/layouts/PageLayout.astro index 503dca3..b0ad85b 100644 --- a/front/src/layouts/PageLayout.astro +++ b/front/src/layouts/PageLayout.astro @@ -21,7 +21,7 @@ const { metadata } = Astro.props; --> -
+
diff --git a/front/src/navigation.js b/front/src/navigation.js index d5cd65b..8fc39ba 100644 --- a/front/src/navigation.js +++ b/front/src/navigation.js @@ -1,183 +1,166 @@ -import { getPermalink, getBlogPermalink, getAsset } from './utils/permalinks'; +import { getPermalink, getBlogPermalink } from './utils/permalinks' export const headerData = { - links: [ - { - text: 'Homes', - links: [ - { - text: 'SaaS', - href: getPermalink('/homes/saas'), - }, - { - text: 'Startup', - href: getPermalink('/homes/startup'), - }, - { - text: 'Mobile App', - href: getPermalink('/homes/mobile-app'), - }, - { - text: 'Personal', - href: getPermalink('/homes/personal'), - }, - ], - }, - { - text: 'Pages', - links: [ - { - text: 'Features (Anchor Link)', - href: getPermalink('/#features'), - }, - { - text: 'Services', - href: getPermalink('/services'), - }, - { - text: 'Pricing', - href: getPermalink('/pricing'), - }, - { - text: 'About us', - href: getPermalink('/about'), - }, - { - text: 'Contact', - href: getPermalink('/contact'), - }, - { - text: 'Terms', - href: getPermalink('/terms'), - }, - { - text: 'Privacy policy', - href: getPermalink('/privacy'), - }, - ], - }, - { - text: 'Landing', - links: [ - { - text: 'Lead Generation', - href: getPermalink('/landing/lead-generation'), - }, - { - text: 'Long-form Sales', - href: getPermalink('/landing/sales'), - }, - { - text: 'Click-Through', - href: getPermalink('/landing/click-through'), - }, - { - text: 'Product Details (or Services)', - href: getPermalink('/landing/product'), - }, - { - text: 'Coming Soon or Pre-Launch', - href: getPermalink('/landing/pre-launch'), - }, - { - text: 'Subscription', - href: getPermalink('/landing/subscription'), - }, - ], - }, - { - text: 'Blog', - links: [ - { - text: 'Blog List', - href: getBlogPermalink(), - }, - { - text: 'Article', - href: getPermalink('get-started-website-with-astro-tailwind-css', 'post'), - }, - { - text: 'Article (with MDX)', - href: getPermalink('markdown-elements-demo-post', 'post'), - }, - { - text: 'Category Page', - href: getPermalink('tutorials', 'category'), - }, - { - text: 'Tag Page', - href: getPermalink('astro', 'tag'), - }, - ], - }, - { - text: 'Widgets', - href: '#', - }, - ], - actions: [{ text: 'Download', href: 'https://github.com/onwidget/astrowind', target: '_blank' }], -}; + links: [ + { + text: 'Homes', + links: [ + { + text: 'SaaS', + href: getPermalink('/homes/saas'), + }, + { + text: 'Startup', + href: getPermalink('/homes/startup'), + }, + { + text: 'Mobile App', + href: getPermalink('/homes/mobile-app'), + }, + { + text: 'Personal', + href: getPermalink('/homes/personal'), + }, + ], + }, + { + text: 'Pages', + links: [ + { + text: 'Features (Anchor Link)', + href: getPermalink('/#features'), + }, + { + text: 'Services', + href: getPermalink('/services'), + }, + { + text: 'Pricing', + href: getPermalink('/pricing'), + }, + { + text: 'About us', + href: getPermalink('/about'), + }, + { + text: 'Contact', + href: getPermalink('/contact'), + }, + { + text: 'Terms', + href: getPermalink('/terms'), + }, + { + text: 'Privacy policy', + href: getPermalink('/privacy'), + }, + ], + }, + { + text: 'Landing', + links: [ + { + text: 'Lead Generation', + href: getPermalink('/landing/lead-generation'), + }, + { + text: 'Long-form Sales', + href: getPermalink('/landing/sales'), + }, + { + text: 'Click-Through', + href: getPermalink('/landing/click-through'), + }, + { + text: 'Product Details (or Services)', + href: getPermalink('/landing/product'), + }, + { + text: 'Coming Soon or Pre-Launch', + href: getPermalink('/landing/pre-launch'), + }, + { + text: 'Subscription', + href: getPermalink('/landing/subscription'), + }, + ], + }, + { + text: 'Blog', + links: [ + { + text: 'Blog List', + href: getBlogPermalink(), + }, + { + text: 'Article', + href: getPermalink( + 'get-started-website-with-astro-tailwind-css', + 'post' + ), + }, + { + text: 'Article (with MDX)', + href: getPermalink('markdown-elements-demo-post', 'post'), + }, + { + text: 'Category Page', + href: getPermalink('tutorials', 'category'), + }, + { + text: 'Tag Page', + href: getPermalink('astro', 'tag'), + }, + ], + }, + { + text: 'Widgets', + href: '#', + }, + ], + // actions: [ + // { + // text: 'Connexion', + // href: '', + // target: '_blank', + // }, + // ], +} export const footerData = { - links: [ - { - title: 'Product', - links: [ - { text: 'Features', href: '#' }, - { text: 'Security', href: '#' }, - { text: 'Team', href: '#' }, - { text: 'Enterprise', href: '#' }, - { text: 'Customer stories', href: '#' }, - { text: 'Pricing', href: '#' }, - { text: 'Resources', href: '#' }, - ], - }, - { - title: 'Platform', - links: [ - { text: 'Developer API', href: '#' }, - { text: 'Partners', href: '#' }, - { text: 'Atom', href: '#' }, - { text: 'Electron', href: '#' }, - { text: 'AstroWind Desktop', href: '#' }, - ], - }, - { - title: 'Support', - links: [ - { text: 'Docs', href: '#' }, - { text: 'Community Forum', href: '#' }, - { text: 'Professional Services', href: '#' }, - { text: 'Skills', href: '#' }, - { text: 'Status', href: '#' }, - ], - }, - { - title: 'Company', - links: [ - { text: 'About', href: '#' }, - { text: 'Blog', href: '#' }, - { text: 'Careers', href: '#' }, - { text: 'Press', href: '#' }, - { text: 'Inclusion', href: '#' }, - { text: 'Social Impact', href: '#' }, - { text: 'Shop', href: '#' }, - ], - }, - ], - secondaryLinks: [ - { text: 'Terms', href: getPermalink('/terms') }, - { text: 'Privacy Policy', href: getPermalink('/privacy') }, - ], - socialLinks: [ - { ariaLabel: 'X', icon: 'tabler:brand-x', href: '#' }, - { ariaLabel: 'Instagram', icon: 'tabler:brand-instagram', href: '#' }, - { ariaLabel: 'Facebook', icon: 'tabler:brand-facebook', href: '#' }, - { ariaLabel: 'RSS', icon: 'tabler:rss', href: getAsset('/rss.xml') }, - { ariaLabel: 'Github', icon: 'tabler:brand-github', href: 'https://github.com/onwidget/astrowind' }, - ], - footNote: ` - onWidget logo - Made by onWidget · All rights reserved. - `, -}; + links: [ + { + title: 'Product', + links: [ + { text: 'Features', href: '#' }, + { text: 'Security', href: '#' }, + ], + }, + { + title: 'Platform', + links: [ + { text: 'Developer API', href: '#' }, + { text: 'Partners', href: '#' }, + ], + }, + { + title: 'Support', + links: [ + { text: 'Docs', href: '#' }, + { text: 'Community Forum', href: '#' }, + ], + }, + { + title: 'Company', + links: [ + { text: 'About', href: '#' }, + { text: 'Blog', href: '#' }, + ], + }, + ], + secondaryLinks: [ + { text: 'Terms', href: getPermalink('/terms') }, + { text: 'Privacy Policy', href: getPermalink('/privacy') }, + ], + socialLinks:[] +} diff --git a/front/src/pages/account/index.astro b/front/src/pages/account/index.astro index 3a10bcc..4559b32 100644 --- a/front/src/pages/account/index.astro +++ b/front/src/pages/account/index.astro @@ -1,5 +1,6 @@ --- -import Layout from 'layouts/Layout.astro' +import Layout from 'layouts/PageLayout.astro'; +//import Layout from 'layouts/Layout.astro'; import PocketBase from 'pocketbase' @@ -11,11 +12,12 @@ if(!auth.isValid){ return Astro.redirect("/account/login"); } +const metadata = { + title: 'Account', + ignoreTitleTemplate: true, +}; --- - +

Bonjour {user!.username}

- diff --git a/front/src/pages/account/login.astro b/front/src/pages/account/login.astro index 038e0f4..da1a22a 100644 --- a/front/src/pages/account/login.astro +++ b/front/src/pages/account/login.astro @@ -1,5 +1,6 @@ --- -import Layout from "layouts/Layout.astro"; +import Layout from 'layouts/PageLayout.astro'; +//import Layout from 'layouts/Layout.astro'; import AstroUtils from "libs/AstroUtils"; import PocketBase from 'pocketbase' @@ -29,12 +30,17 @@ const res = await AstroUtils.wrap(async () => { return Astro.redirect("/account/login");// route('/account/login', {message: 'Compte invalide, valider les identifiants'})) //XXX: comprendre comment le system de route fonctionne } }) + +const metadata = { + title: 'Login', + ignoreTitleTemplate: true, +}; --- - +
- \ No newline at end of file + diff --git a/front/src/pages/account/logout.astro b/front/src/pages/account/logout.astro index 01eb3ca..57c7513 100644 --- a/front/src/pages/account/logout.astro +++ b/front/src/pages/account/logout.astro @@ -8,6 +8,6 @@ if(pb.authStore.isValid){ pb.authStore.clear() } -return Astro.redirect('/account/login') +return Astro.redirect('/') ---- \ No newline at end of file +--- diff --git a/front/src/pages/account/register.astro b/front/src/pages/account/register.astro index 8c7b616..f780d8d 100644 --- a/front/src/pages/account/register.astro +++ b/front/src/pages/account/register.astro @@ -58,7 +58,7 @@ await AstroUtils.wrap(async () => { }) const metadata = { - title: 'register', + title: 'Register', ignoreTitleTemplate: true, }; --- diff --git a/front/src/types.d.ts b/front/src/types.d.ts index 00ca163..df8ca6e 100644 --- a/front/src/types.d.ts +++ b/front/src/types.d.ts @@ -1,288 +1,288 @@ -import type { AstroComponentFactory } from 'astro/runtime/server/index.js'; -import type { HTMLAttributes, ImageMetadata } from 'astro/types'; +import type { AstroComponentFactory } from 'astro/runtime/server/index.js' +import type { HTMLAttributes, ImageMetadata } from 'astro/types' export interface Post { /** A unique ID number that identifies a post. */ - id: string; + id: string /** A post’s unique slug – part of the post’s URL based on its name, i.e. a post called “My Sample Page” has a slug “my-sample-page”. */ - slug: string; + slug: string /** */ - permalink: string; + permalink: string /** */ - publishDate: Date; + publishDate: Date /** */ - updateDate?: Date; + updateDate?: Date /** */ - title: string; + title: string /** Optional summary of post content. */ - excerpt?: string; + excerpt?: string /** */ - image?: ImageMetadata | string; + image?: ImageMetadata | string /** */ - category?: Taxonomy; + category?: Taxonomy /** */ - tags?: Taxonomy[]; + tags?: Taxonomy[] /** */ - author?: string; + author?: string /** */ - metadata?: MetaData; + metadata?: MetaData /** */ - draft?: boolean; + draft?: boolean /** */ - Content?: AstroComponentFactory; - content?: string; + Content?: AstroComponentFactory + content?: string /** */ - readingTime?: number; + readingTime?: number } export interface Taxonomy { - slug: string; - title: string; + slug: string + title: string } export interface MetaData { - title?: string; - ignoreTitleTemplate?: boolean; + title?: string + ignoreTitleTemplate?: boolean - canonical?: string; + canonical?: string - robots?: MetaDataRobots; + robots?: MetaDataRobots - description?: string; + description?: string - openGraph?: MetaDataOpenGraph; - twitter?: MetaDataTwitter; + openGraph?: MetaDataOpenGraph + twitter?: MetaDataTwitter } export interface MetaDataRobots { - index?: boolean; - follow?: boolean; + index?: boolean + follow?: boolean } export interface MetaDataImage { - url: string; - width?: number; - height?: number; + url: string + width?: number + height?: number } export interface MetaDataOpenGraph { - url?: string; - siteName?: string; - images?: Array; - locale?: string; - type?: string; + url?: string + siteName?: string + images?: Array + locale?: string + type?: string } export interface MetaDataTwitter { - handle?: string; - site?: string; - cardType?: string; + handle?: string + site?: string + cardType?: string } export interface Image { - src: string; - alt?: string; + src: string + alt?: string } export interface Video { - src: string; - type?: string; + src: string + type?: string } export interface Widget { - id?: string; - isDark?: boolean; - bg?: string; - classes?: Record>; + id?: string + isDark?: boolean + bg?: string + classes?: Record> } export interface Headline { - title?: string; - subtitle?: string; - tagline?: string; - classes?: Record; + title?: string + subtitle?: string + tagline?: string + classes?: Record } interface TeamMember { - name?: string; - job?: string; - image?: Image; - socials?: Array; - description?: string; - classes?: Record; + name?: string + job?: string + image?: Image + socials?: Array + description?: string + classes?: Record } interface Social { - icon?: string; - href?: string; + icon?: string + href?: string } export interface Stat { - amount?: number | string; - title?: string; - icon?: string; + amount?: number | string + title?: string + icon?: string } export interface Item { - title?: string; - description?: string; - icon?: string; - classes?: Record; - callToAction?: CallToAction; - image?: Image; + title?: string + description?: string + icon?: string + classes?: Record + callToAction?: CallToAction + image?: Image } export interface Price { - title?: string; - subtitle?: string; - description?: string; - price?: number | string; - period?: string; - items?: Array; - callToAction?: CallToAction; - hasRibbon?: boolean; - ribbonTitle?: string; + title?: string + subtitle?: string + description?: string + price?: number | string + period?: string + items?: Array + callToAction?: CallToAction + hasRibbon?: boolean + ribbonTitle?: string } export interface Testimonial { - title?: string; - testimonial?: string; - name?: string; - job?: string; - image?: string | unknown; + title?: string + testimonial?: string + name?: string + job?: string + image?: string | unknown } export interface Input { - type: HTMLInputTypeAttribute; - name: string; - label?: string; - autocomplete?: string; - placeholder?: string; + type: HTMLInputTypeAttribute + name: string + label?: string + autocomplete?: string + placeholder?: string } export interface Textarea { - label?: string; - name?: string; - placeholder?: string; - rows?: number; + label?: string + name?: string + placeholder?: string + rows?: number } export interface Disclaimer { - label?: string; + label?: string } // COMPONENTS export interface CallToAction extends Omit, 'slot'> { - variant?: 'primary' | 'secondary' | 'tertiary' | 'link'; - text?: string; - icon?: string; - classes?: Record; - type?: 'button' | 'submit' | 'reset'; + variant?: 'primary' | 'secondary' | 'tertiary' | 'link' + text?: string + icon?: string + classes?: Record + type?: 'button' | 'submit' | 'reset' } export interface ItemGrid { - items?: Array; - columns?: number; - defaultIcon?: string; - classes?: Record; + items?: Array + columns?: number + defaultIcon?: string + classes?: Record } export interface Collapse { - iconUp?: string; - iconDown?: string; - items?: Array; - columns?: number; - classes?: Record; + iconUp?: string + iconDown?: string + items?: Array + columns?: number + classes?: Record } export interface Form { - inputs?: Array; - textarea?: Textarea; - disclaimer?: Disclaimer; - button?: string; - description?: string; + inputs?: Array + textarea?: Textarea + disclaimer?: Disclaimer + button?: string + description?: string } // WIDGETS export interface Hero extends Omit, Widget { - content?: string; - image?: string | unknown; - callToAction1?: CallToAction; - callToAction2?: CallToAction; - isReversed?: boolean; + content?: string + image?: string | unknown + callToAction1?: CallToAction + callToAction2?: CallToAction + isReversed?: boolean } export interface Team extends Omit, Widget { - team?: Array; + team?: Array } export interface Stats extends Omit, Widget { - stats?: Array; + stats?: Array } export interface Pricing extends Omit, Widget { - prices?: Array; + prices?: Array } export interface Testimonials extends Omit, Widget { - testimonials?: Array; - callToAction?: CallToAction; + testimonials?: Array + callToAction?: CallToAction } export interface Brands extends Omit, Widget { - icons?: Array; - images?: Array; + icons?: Array + images?: Array } export interface Features extends Omit, Widget { - image?: string | unknown; - video?: Video; - items?: Array; - columns?: number; - defaultIcon?: string; - callToAction1?: CallToAction; - callToAction2?: CallToAction; - isReversed?: boolean; - isBeforeContent?: boolean; - isAfterContent?: boolean; + image?: string | unknown + video?: Video + items?: Array + columns?: number + defaultIcon?: string + callToAction1?: CallToAction + callToAction2?: CallToAction + isReversed?: boolean + isBeforeContent?: boolean + isAfterContent?: boolean } export interface Faqs extends Omit, Widget { - iconUp?: string; - iconDown?: string; - items?: Array; - columns?: number; + iconUp?: string + iconDown?: string + items?: Array + columns?: number } export interface Steps extends Omit, Widget { items: Array<{ - title: string; - description?: string; - icon?: string; - classes?: Record; - }>; - callToAction?: string | CallToAction; - image?: string | Image; - isReversed?: boolean; + title: string + description?: string + icon?: string + classes?: Record + }> + callToAction?: string | CallToAction + image?: string | Image + isReversed?: boolean } export interface Content extends Omit, Widget { - content?: string; - image?: string | unknown; - items?: Array; - columns?: number; - isReversed?: boolean; - isAfterContent?: boolean; - callToAction?: CallToAction; + content?: string + image?: string | unknown + items?: Array + columns?: number + isReversed?: boolean + isAfterContent?: boolean + callToAction?: CallToAction } export interface Contact extends Omit, Form, Widget {}