8000 Done with signup/signIn UI and axios intercepter for API requests by makrandshinde · Pull Request #1 · credebl/studio · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Done with signup/signIn UI and axios intercepter for API requests #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 6, 2023
Merged

Done with signup/signIn UI and axios intercepter for API requests #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions .eslintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,10 @@ module.exports = {
//
'eslint-plugin-tsdoc',
'@typescript-eslint',
'react'
],

parser: '@typescript-eslint/parser',
parser: ['@typescript-eslint/parser', 'babel-eslint'],
parserOptions: {
project: ['./tsconfig.json'] /* Specify it only for TypeScript files */,
ecmaVersion: 'latest',
Expand Down Expand Up @@ -88,12 +89,13 @@ module.exports = {
'plugin:astro/recommended',
'prettier',
],
parser: 'astro-eslint-parser',
parser: ['astro-eslint-parser', 'babel-eslint'],
parserOptions: {
/* Prevents "unresolved" when using "paths" */
// project: ['./tsconfig.json'],
parser: '@typescript-eslint/parser',
extraFileExtensions: ['.astro'],
sourceType: 'module',
},
rules: {
'import/no-absolute-path': 'off',
Expand Down
122 changes: 122 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
"@types/react-dom": "^18.2.6",
"apexcharts": "^3.37.2",
"astro": "^2.6.6",
"axios": "^1.4.0",
"flowbite": "^1.6.3",
"flowbite-react": "^0.4.10",
"flowbite-typography": "^1.0.3",
Expand All @@ -59,6 +60,7 @@
"@typescript-eslint/eslint-plugin": "^5.54.1",
"@typescript-eslint/parser": "^5.54.1",
"astro-eslint-parser": "^0.11.0",
"babel-eslint": "^10.1.0",
"eslint": "^8.35.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-airbnb-typescript": "^17.0.0",
Expand Down
4 changes: 2 additions & 2 deletions src/app/NavBarStacked.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ import { asset, url } from '../lib/data.js';
</div>

<div>
<a
<!-- <a
href="/authentication/sign-in"
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Expand All @@ -73,7 +73,7 @@ import { asset, url } from '../lib/data.js';
></path>
</svg>
Login/Register
</a>
</a> -->
<button
data-collapse-toggle="mobile-menu"
type="button"
Expand Down
115 changes: 115 additions & 0 deletions src/components/Authentication/SignInUser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
import {
Field,
Form,
Formik,
FormikHelpers,
FormikProps,
FormikValues,
} from 'formik';
import { Button, Checkbox, Label, TextInput } from 'flowbite-react';
import * as yup from 'yup';

import { asset, url } from '../../lib/data.js';
import { passwordRegex } from '../../config/CommonConstant.js';
import React from 'react';
import { axoisGet } from '../../services/apiRequests.js';

interface Values {
email: string;
password:string,
}

const SignInUser = () => {

const verifyUser = async(values: Values) =>{

}

return (
<div className="min-h-screen align-middle flex pb-[12vh]">
<div className="w-full flex flex-col items-center justify-center px-6 pt-8 mx-auto pt:mt-0 dark:bg-gray-900">
<div className="w-full max-w-xl p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow dark:bg-gray-800">
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">
Sign In
</h2>

<Formik
initialValues={{
email: '',
password:'',
}}
validationSchema={yup.object().shape({
email: yup
.string()
.required('Email is required')
.email('Email is invalid')
.trim(),
password: yup
.string()
.required('Password is required')
})}
validateOnBlur
validateOnChange
enableReinitialize
Values) => verifyUser(values)}
>
{(formikHandlers): JSX.Element => (
<Form className="mt-8 space-y-6" >
<div>
<div className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
<Label htmlFor="email2" value="Email" />
<span className='text-red-500 text-xs'>*</span>
</div>
<Field
id="email"
name="email"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
type="email"
/>
{
(formikHandlers?.errors?.email && formikHandlers?.touched?.email) &&
<span className="text-red-500 text-xs">{formikHandlers?.errors?.email}</span>
}
</div>
<div>
<div className="mb-2 block">
<Label htmlFor="password" value="Password" />
<span className='text-red-500 text-xs'>*</span>
</div>

<Field
id="password"
name="password"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
type="password"
/>
{
(formikHandlers?.errors?.password && formikHandlers?.touched?.password) &&
<span className="text-red-500 text-xs">{formikHandlers?.errors?.password}</span>
}
</div>
<Button
type="submit"
className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
>
Sign In
</Button>
</Form>
)}
</Formik>
<div className="text-sm font-medium text-gray-500 dark:text-gray-400">
Not registered?
<a
href="authentication/sign-up"
className="text-primary-700 hover:underline dark:text-primary-500"
>
Create account
</a>
</div>
</div>
</div>
</div>
);
};

export default SignInUser;
Loading
0