diff --git a/webapi/ClientApp/src/models/index.ts b/webapi/ClientApp/src/models/index.ts index f7bb4c5..694c117 100644 --- a/webapi/ClientApp/src/models/index.ts +++ b/webapi/ClientApp/src/models/index.ts @@ -42,6 +42,12 @@ export interface MenuItemModel { target?: string childItems?: MenuItemModel [] } + +export interface LinkModel { + target: string, + anchorText: string +} + export interface ReviewerModel extends PersonModel { fullName: string, position: string diff --git a/webapi/ClientApp/src/models/pages.ts b/webapi/ClientApp/src/models/pages.ts index 337d3cc..080b294 100644 --- a/webapi/ClientApp/src/models/pages.ts +++ b/webapi/ClientApp/src/models/pages.ts @@ -1,3 +1,4 @@ +import { FormItemModel, LinkModel } from "." import { PageModel } from "./abstractions" import { BlogTitleSectionModel, CallToActionSectionModel, CommentsSectionModel, FeaturedBlogSectionModel, FeaturedBlogsSectionModel, FeaturesSectionModel, ProductSectionModel, RelatedProductsSectionModel, TestimonialsSectionModel, TitleSectionModel } from "./pageSections" @@ -23,6 +24,26 @@ export interface ShopCatalogPageModel extends PageModel { titleSection: TitleSectionModel } +export interface SignInPageModel extends PageModel { + title: string, + email: FormItemModel, + password: FormItemModel, + dontHaveAnAccount: string, + signUpLink: LinkModel, + submit: FormItemModel +} + +export interface SignUpPageModel extends PageModel { + title: string, + username: FormItemModel, + email: FormItemModel, + reEmail: FormItemModel + password: FormItemModel, + rePassword: FormItemModel, + acceptTermsAndConditions: string, + submit: FormItemModel +} + export interface ShopItemPageModel extends PageModel { productSection: ProductSectionModel relatedProductsSection: RelatedProductsSectionModel diff --git a/webapi/ClientApp/src/models/responses.ts b/webapi/ClientApp/src/models/responses.ts index fbd6f17..44095c2 100644 --- a/webapi/ClientApp/src/models/responses.ts +++ b/webapi/ClientApp/src/models/responses.ts @@ -5,7 +5,9 @@ import { BlogCatalogPageModel, BlogItemPageModel, ShopCatalogPageModel, - ShopItemPageModel + ShopItemPageModel, + SignInPageModel, + SignUpPageModel } from "./pages" // Shop response models @@ -44,7 +46,10 @@ export interface GetContentResponseModel extends ResponseModel { shopItem: ShopItemPageModel, blogCatalog: BlogCatalogPageModel, - blogItem: BlogItemPageModel + blogItem: BlogItemPageModel, + + signIn: SignInPageModel, + signUp: SignUpPageModel } // Blog response models diff --git a/webapi/ClientApp/src/pages/Signin/index.tsx b/webapi/ClientApp/src/pages/Signin/index.tsx index 774f4f5..8833c6f 100644 --- a/webapi/ClientApp/src/pages/Signin/index.tsx +++ b/webapi/ClientApp/src/pages/Signin/index.tsx @@ -1,6 +1,12 @@ -import React, { useState } from "react" +import React, { useEffect, useState } from "react" + +// Redux +import { useDispatch, useSelector } from "react-redux" +import { actionCreators as loaderActionCreators } from '../../store/reducers/Loader' + import { Link } from "react-router-dom" import { Button, Container, Form, FormGroup, Input, Label } from "reactstrap" +import { ApplicationState } from "../../store" import './scss/style.scss' @@ -14,6 +20,37 @@ interface IState extends IStateProp { } const Signin = () => { + const dispatch = useDispatch() + const { content } = useSelector((state: ApplicationState) => state) + + const { + title = "", + email = { + title: "", + placeHolder: "" + }, + password = { + title: "", + placeHolder: "" + }, + dontHaveAnAccount = "", + signUpLink = { + target: "#", + anchorText: "" + }, + submit = { + title: "" + } + } = content?.signIn ? content.signIn : {} + + + useEffect(() => { + content?.isLoading + ? dispatch(loaderActionCreators.show()) + : setTimeout(() => { + dispatch(loaderActionCreators.hide()) + }, 1000) + }, [content?.isLoading]) const [state, hookState] = useState({ username: '', @@ -33,32 +70,32 @@ const Signin = () => { } return -

Sign In

+

{title}

- + - + - Dont have an account yet? Please Signup. + {dontHaveAnAccount} {signUpLink.anchorText}. - +
diff --git a/webapi/ClientApp/src/pages/Signup/index.tsx b/webapi/ClientApp/src/pages/Signup/index.tsx index 7414c12..43d49fd 100644 --- a/webapi/ClientApp/src/pages/Signup/index.tsx +++ b/webapi/ClientApp/src/pages/Signup/index.tsx @@ -1,5 +1,11 @@ -import React, { useState } from "react" +import React, { useEffect, useState } from "react" + +// Redux +import { useDispatch, useSelector } from "react-redux" +import { actionCreators as loaderActionCreators } from '../../store/reducers/Loader' + import { Button, Container, Form, FormGroup, Input, Label } from "reactstrap" +import { ApplicationState } from "../../store" import './scss/style.scss' @@ -20,6 +26,45 @@ interface IState extends IStateProp { } const Signup = () => { + const dispatch = useDispatch() + const { content } = useSelector((state: ApplicationState) => state) + + const { + title = "", + username = { + title: "", + placeHolder: "" + }, + email = { + title: "", + placeHolder: "" + }, + reEmail = { + title: "Repeat email address", + placeHolder: "Repeat email address..." + }, + password = { + title: "", + placeHolder: "" + }, + rePassword = { + title: "Repeat password", + placeHolder: "Repeat password..." + }, + acceptTermsAndConditions = "", + submit = { + title: "" + } + } = content?.signUp ? content.signUp : {} + + useEffect(() => { + content?.isLoading + ? dispatch(loaderActionCreators.show()) + : setTimeout(() => { + dispatch(loaderActionCreators.hide()) + }, 1000) + }, [content?.isLoading]) + const [state, hookState] = useState({ username: '', @@ -51,67 +96,67 @@ const Signup = () => { } return -

Sign Up

+

{title}

- + - + - + - + - + - + - +
} export { Signup -} \ No newline at end of file +} diff --git a/webapi/ClientApp/src/store/reducers/Content.ts b/webapi/ClientApp/src/store/reducers/Content.ts index 8cacd2b..f76f6a0 100644 --- a/webapi/ClientApp/src/store/reducers/Content.ts +++ b/webapi/ClientApp/src/store/reducers/Content.ts @@ -55,12 +55,18 @@ const unloadedState: ContentState = { ]} ], adminRoutes: [], - serviceRoutes: [], + serviceRoutes: [ + { target: "/signin", component: "Signin" }, + { target: "/signup", component: "Signup" } + ], topMenu: [ { target: "/", title: "Home" }, { target: "/shop", title: "Shop" }, - { target: "/blog", title: "Blog" } + { target: "/blog", title: "Blog" }, + + { target: "/signin", title: "Sing in" }, + { target: "/signup", title: "Sign up" } ], sideMenu: [], @@ -158,6 +164,54 @@ const unloadedState: ContentState = { }, + signIn: { + title: "Sign in", + email: { + title: "Email address", + placeHolder: "Email address..." + }, + password: { + title: "Password", + placeHolder: "Password..." + }, + dontHaveAnAccount: "Don't have an account yet? Please", + signUpLink: { + target: "/signup", + anchorText: "Sign up" + }, + submit: { + title: "Sign in" + } + }, + + signUp: { + title: "Sign up", + username: { + title: "Username", + placeHolder: "Username..." + }, + email: { + title: "Email address", + placeHolder: "Email address..." + }, + reEmail: { + title: "Repeat email address", + placeHolder: "Repeat email address..." + }, + password: { + title: "Password", + placeHolder: "Password..." + }, + rePassword: { + title: "Repeat password", + placeHolder: "Repeat password..." + }, + acceptTermsAndConditions: "Accept terms and conditions", + submit: { + title: "Sing up" + } + }, + isLoading: false }