(feat): frontend static content update

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

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

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

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<IState>({
     username: '',
@@ -33,32 +70,32 @@ const Signin = () => {
   }
 
   return <Container className="container">
-    <h2>Sign In</h2>
+    <h2>{title}</h2>
     <Form className="form">
       <FormGroup>
-        <Label for="username">Username</Label>
+        <Label for="username">{email.title}</Label>
         <Input
           type="text"
           name="username"
           id="username"
-          placeholder="username or email..."
+          placeholder={email.placeHolder}
           value={state.username}
           onChange={onChange} />
       </FormGroup>
       <FormGroup>
-        <Label for="password">Password</Label>
+        <Label for="password">{password.title}</Label>
         <Input
           type="password"
           name="password"
           id="password"
-          placeholder="password..."
+          placeholder={password.placeHolder}
           value={state.password}
           onChange={onChange} />
       </FormGroup>
       <FormGroup>
-        Dont have an account yet? Please <Link to="/signup">Signup</Link>.
+        {dontHaveAnAccount} <Link to={signUpLink.target}>{signUpLink.anchorText}</Link>.
       </FormGroup>
-      <Button>Submit</Button>
+      <Button>{submit.title}</Button>
     </Form>
 
     

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<IState>({
     username: '',
@@ -51,67 +96,67 @@ const Signup = () => {
   }
 
   return <Container className="container">
-    <h2>Sign Up</h2>
+    <h2>{title}</h2>
     <Form className="form">
       <FormGroup>
-        <Label for="username">Username</Label>
+        <Label for="username">{username.title}</Label>
         <Input
           type="text"
           name="username"
           id="username"
-          placeholder="username..."
+          placeholder={username.placeHolder}
           value={state.username}
           onChange={onChange} />
       </FormGroup>
       <FormGroup>
-        <Label for="email">Email</Label>
+        <Label for="email">{email.title}</Label>
         <Input
           type="text"
           name="email"
           id="email"
-          placeholder="email..."
+          placeholder={email.placeHolder}
           value={state.email}
           onChange={onChange} />
       </FormGroup>
       <FormGroup>
-        <Label for="reEmail">Repeat email</Label>
+        <Label for="reEmail">{reEmail.title}</Label>
         <Input
           type="text"
           name="reEmail"
           id="reEmail"
-          placeholder="repeat email..."
+          placeholder={reEmail.placeHolder}
           value={state.reEmail}
           onChange={onChange} />
       </FormGroup>
       <FormGroup>
-        <Label for="password">Password</Label>
+        <Label for="password">{password.title}</Label>
         <Input
           type="password"
           name="password"
           id="password"
-          placeholder="password..."
+          placeholder={password.placeHolder}
           value={state.password}
           onChange={onChange} />
       </FormGroup>
       <FormGroup>
-        <Label for="rePassword">Repeat password</Label>
+        <Label for="rePassword">{rePassword.title}</Label>
         <Input
           type="password"
           name="rePassword"
           id="rePassword"
-          placeholder="repeat password..."
+          placeholder={rePassword.placeHolder}
           value={state.rePassword}
           onChange={onChange} />
       </FormGroup>
       <FormGroup check>
         <Input type="checkbox" name="tnc" id="tnc" checked={state.tnc} onChange={onTogle}/>
-        <Label check>Accept Terms And Conditions</Label>
+        <Label check>{acceptTermsAndConditions}</Label>
       </FormGroup>
-      <Button>Submit</Button>
+      <Button>{submit.title}</Button>
     </Form>
   </Container>
 }
 
 export {
   Signup
-}
+}

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
 }