login and register

.github/workflows/deploy.yaml

@@ -0,0 +1,48 @@
+name: deploy to danak
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+
+    env:
+      DANAK_SERVER: "https://captain.run.danakcorp.com"
+      APP_TOKEN: f0ced29da1a7c75252c607e6eebeb2459a70d32402d6077816688b06e5e2823b
+      CAPROVER_APP_NAME: danak-dsc
+      GITHUB_TOKEN: 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
+
+    steps:
+      - name: Check out repositorys
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: zmihamid
+          password: ${{ env.GITHUB_TOKEN }}
+
+      - name: Preset Image Name
+        run: echo "IMAGE_URL=$(echo ghcr.io/zmihamid/${{ github.event.repository.name }}:$(echo ${{ github.sha }} | cut -c1-7) | tr '[:upper:]' '[:lower:]')" >> $GITHUB_ENV
+
+      - name: Build and push Docker Image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile
+          push: true
+          tags: ${{ env.IMAGE_URL }}
+
+      - name: Install CapRover CLI
+        run: npm install -g caprover
+
+      - name: deploy to server
+        run: |
+          caprover deploy -a $CAPROVER_APP_NAME -u $DANAK_SERVER --appToken $APP_TOKEN  -i "$IMAGE_URL"

src/index.css

@@ -39,7 +39,7 @@ textarea::placeholder {
   min-height: 40px;
   border-radius: 12px !important;
   border: 1px solid #d0d0d0 !important;
-  font-size: 14px !important;
+  font-size: 12px !important;
   width: 100% !important;
   margin: 0px;
   padding-right: 16px !important;

src/langs/fa.json

@@ -19,6 +19,11 @@
     "enter_password": "رمز عبور انتخابی خود را وارد کنید",
     "next": "ادامه",
     "before_registered": "آیا قبلا ثبت نام کردید؟",
-    "login": "ورود"
+    "login": "ورود",
+    "enter_info_login": "لطفا اطلاعات خود را وارد کنید.",
+    "mobile_or_email": " شماره موبایل یا ایمیل",
+    "enter_mobile_or_email": " شماره موبایل یا ایمیل خود را وارد کنید",
+    "have_account": "آیا حساب کاربری ندارید؟",
+    "register": "ثبت نام"
   }
 }

src/pages/auth/Login.tsx

@@ -3,8 +3,9 @@ import LogoImage from '../../assets/images/logo.svg'
 import LogoSmallImage from '../../assets/images/logo-small.svg'
 import { useTranslation } from 'react-i18next'
 import Input from '../../components/Input'
-import DatePickerComponent from '../../components/DatePicker'
 import Button from '../../components/Button'
+import { Link } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
 
 const Login: FC = () => {
 
@@ -13,62 +14,30 @@ const Login: FC = () => {
     return (
         <div className='w-full h-full flex justify-center py-[75px] items-center px-10'>
             <div className='flex w-full max-h-[812px] max-w-[1200px] bg-secondary h-full rounded-3xl overflow-hidden'>
-                <div className='flex-1 min-w-[50%] overflow-y-auto  bg-white p-9'>
+                <div className='flex-1 min-w-[50%] overflow-y-auto  bg-white px-9 py-7'>
-                    <div className=''>
+                    <div className='flex-1 h-full flex flex-col'>
                         <img src={LogoSmallImage} className='w-8' />
+
+                        <div className='flex flex-1 flex-col h-full justify-center'>
                             <div className='mt-5'>
                                 <h2 className='text-2xl font-bold'>
                                     {t('auth.welcome')}
                                 </h2>
                                 <p className='text-description text-sm mt-2'>
-                                {t('auth.enter_information')}
+                                    {t('auth.enter_info_login')}
                                 </p>
                             </div>
 
-                        {/* <div className='mt-5 text-sm'>
+                            <div className='mt-16 rowTwoInput'>
-                            {t('auth.user_info')}
-                        </div> */}
-
-                        <div className='mt-5 rowTwoInput'>
                                 <Input
-                                label={t('auth.name')}
+                                    label={t('auth.mobile_or_email')}
-                                placeholder={t('auth.enter_name')}
+                                    placeholder={t('auth.enter_mobile_or_email')}
-                            />
+                                    type='tel'
-
+                                    className='text-right'
-                            <Input
-                                label={t('auth.family')}
-                                placeholder={t('auth.enter_family')}
-                            />
-
-                        </div>
-                        <div className='mt-4 min-w-full rowTwoInput'>
-                            <DatePickerComponent label={t('auth.dateofbirth')} onChange={(date: string) => console.log(date)} placeholder={t('auth.select_date')} />
-
-                            <Input
-                                label={t('auth.national_code')}
-                                placeholder={t('auth.national_code_enter')}
                                 />
 
                             </div>
 
-                        <div className='mt-4 rowTwoInput'>
-                            <Input
-                                label={t('auth.email')}
-                                placeholder={t('auth.enter_email')}
-                            />
-                            <Input
-                                label={t('auth.phonen_number')}
-                                placeholder={t('auth.enter_phone_number')}
-                            />
-                        </div>
-
-                        <div className='mt-4 rowTwoInput'>
-                            <Input
-                                label={t('auth.password')}
-                                placeholder={t('auth.enter_password')}
-                                type='password'
-                            />
-                        </div>
 
                             <Button
                                 label={t('auth.next')}
@@ -77,10 +46,14 @@ const Login: FC = () => {
 
                             <div className='mt-6 flex justify-center gap-2 items-center text-sm'>
                                 <p className='text-description'>
-                                {t('auth.before_registered')}
+                                    {t('auth.have_account')}
                                 </p>
-                            <div>{t('auth.login')}</div>
+                                <Link to={Pages.auth.register}>
+                                    <div>{t('auth.register')}</div>
+                                </Link>
                             </div>
+                        </div>
+
 
                     </div>
                 </div>

src/pages/auth/Register.tsx

@@ -1,8 +1,99 @@
 import { FC } from 'react'
+import LogoImage from '../../assets/images/logo.svg'
+import LogoSmallImage from '../../assets/images/logo-small.svg'
+import { useTranslation } from 'react-i18next'
+import Input from '../../components/Input'
+import DatePickerComponent from '../../components/DatePicker'
+import Button from '../../components/Button'
+import { Link } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
 
 const Register: FC = () => {
+
+    const { t } = useTranslation('global')
+
     return (
-        <div>Register</div>
+        <div className='w-full h-full flex justify-center py-[75px] items-center px-10'>
+            <div className='flex w-full max-h-[812px] max-w-[1200px] bg-secondary h-full rounded-3xl overflow-hidden'>
+                <div className='flex-1 min-w-[50%] overflow-y-auto  bg-white px-9 py-7'>
+                    <div className=''>
+                        <img src={LogoSmallImage} className='w-8' />
+                        <div className='mt-5'>
+                            <h2 className='text-2xl font-bold'>
+                                {t('auth.welcome')}
+                            </h2>
+                            <p className='text-description text-sm mt-2'>
+                                {t('auth.enter_information')}
+                            </p>
+                        </div>
+
+                        {/* <div className='mt-5 text-sm'>
+                            {t('auth.user_info')}
+                        </div> */}
+
+                        <div className='mt-5 rowTwoInput'>
+                            <Input
+                                label={t('auth.name')}
+                                placeholder={t('auth.enter_name')}
+                            />
+
+                            <Input
+                                label={t('auth.family')}
+                                placeholder={t('auth.enter_family')}
+                            />
+
+                        </div>
+                        <div className='mt-4 min-w-full rowTwoInput'>
+                            <DatePickerComponent label={t('auth.dateofbirth')} onChange={(date: string) => console.log(date)} placeholder={t('auth.select_date')} />
+
+                            <Input
+                                label={t('auth.national_code')}
+                                placeholder={t('auth.national_code_enter')}
+                            />
+
+                        </div>
+
+                        <div className='mt-4 rowTwoInput'>
+                            <Input
+                                label={t('auth.email')}
+                                placeholder={t('auth.enter_email')}
+                            />
+                            <Input
+                                label={t('auth.phonen_number')}
+                                placeholder={t('auth.enter_phone_number')}
+                            />
+                        </div>
+
+                        <div className='mt-4 rowTwoInput'>
+                            <Input
+                                label={t('auth.password')}
+                                placeholder={t('auth.enter_password')}
+                                type='password'
+                            />
+                        </div>
+
+                        <Button
+                            label={t('auth.next')}
+                            className='mt-8'
+                        />
+
+                        <div className='mt-6 flex justify-center gap-2 items-center text-sm'>
+                            <p className='text-description'>
+                                {t('auth.before_registered')}
+                            </p>
+                            <Link to={Pages.auth.login}>
+                                <div>{t('auth.login')}</div>
+                            </Link>
+                        </div>
+
+                    </div>
+                </div>
+
+                <div className='flex-1 min-w-[50%] flex justify-center items-center'>
+                    <img src={LogoImage} className='h-20' />
+                </div>
+            </div>
+        </div>
     )
 }