diff --git a/backend/core/views.py b/backend/core/views.py
index 6f26e84d7dc7911303a4e24d187fe4a2240abe26..8b3746e99ccdef3747148fa66cc980f5f1a9387c 100644
--- a/backend/core/views.py
+++ b/backend/core/views.py
@@ -21,4 +21,37 @@ class UserProfileView(APIView):
'username': user.username,
'email': user.email,
# Add other fields you wish to include
- })
\ No newline at end of file
+ })
+
+
+import requests
+from django.http import JsonResponse
+
+def haveibeenpwned_proxy(request, email):
+ # Construct the API URL
+ api_url = f'https://haveibeenpwned.com/api/v3/breachedaccount/{email}'
+
+ # Set your API key if required
+ api_key = 'your_api_key'
+ headers = {'hibp-api-key': api_key} if api_key else {}
+
+ try:
+ # Make a request to the haveibeenpwned API
+ response = requests.get(api_url, headers=headers)
+ response.raise_for_status() # Raise an exception for HTTP errors
+
+ # Return the API response as JSON
+ return JsonResponse(response.json(), safe=False)
+
+ except requests.exceptions.RequestException as e:
+ # Handle request errors (e.g., connection error, timeout, etc.)
+ return JsonResponse({'error': str(e)}, status=500)
+
+ # urls.py
+ from django.urls import path
+ from .views import haveibeenpwned_proxy
+
+ urlpatterns = [
+ # ... other patterns ...
+ path('haveibeenpwned/<str:email>/', haveibeenpwned_proxy, name='haveibeenpwned_proxy'),
+ ]
diff --git a/backend/db.sqlite3 b/backend/db.sqlite3
index fcb29ed67593f5c68e9f4836a536503b75ce34d5..c7248122cf7efd45537bcc37a93d5e35e93a0273 100644
Binary files a/backend/db.sqlite3 and b/backend/db.sqlite3 differ
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
index bf08304b0067988afce059b076de8fb0b68a936d..c4a77be3a5b3df18e8376424bed20c312f29a9c5 100644
Binary files a/frontend/public/favicon.ico and b/frontend/public/favicon.ico differ
diff --git a/frontend/src/_nav.js b/frontend/src/_nav.js
index 8f3d730dbe5d1aaf6ccecdbf8f567e94d42dd08b..35e691ea369ac42f1d822c281b9d019fa45f5632 100644
--- a/frontend/src/_nav.js
+++ b/frontend/src/_nav.js
@@ -4,7 +4,6 @@ import {
cilBell,
cilCalculator,
cilChartPie,
- cilCursor,
cilDescription,
cilDrop,
cilNotes,
@@ -12,6 +11,9 @@ import {
cilPuzzle,
cilSpeedometer,
cilStar,
+ cilWarning,
+ cilEnvelopeClosed,
+ cilLockLocked,
} from '@coreui/icons'
import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react'
@@ -42,6 +44,26 @@ const _nav = [
to: '/theme/typography',
icon: <CIcon icon={cilPencil} customClassName="nav-icon" />,
},
+ {
+ component: CNavGroup,
+ name: 'Breach Detector',
+ to: '/breach',
+ icon: <CIcon icon={cilWarning} customClassName="nav-icon" />,
+ items: [
+ {
+ component: CNavItem,
+ name: 'Email',
+ to: '/buttons/buttons',
+ icon: <CIcon icon={cilEnvelopeClosed} customClassName="nav-icon" />,
+ },
+ {
+ component: CNavItem,
+ name: 'Passwords',
+ to: '/buttons/button-groups',
+ icon: <CIcon icon={cilLockLocked} customClassName="nav-icon" />,
+ },
+ ],
+ },
{
component: CNavTitle,
name: 'Components',
@@ -124,29 +146,6 @@ const _nav = [
},
],
},
- {
- component: CNavGroup,
- name: 'Buttons',
- to: '/buttons',
- icon: <CIcon icon={cilCursor} customClassName="nav-icon" />,
- items: [
- {
- component: CNavItem,
- name: 'Buttons',
- to: '/buttons/buttons',
- },
- {
- component: CNavItem,
- name: 'Buttons groups',
- to: '/buttons/button-groups',
- },
- {
- component: CNavItem,
- name: 'Dropdowns',
- to: '/buttons/dropdowns',
- },
- ],
- },
{
component: CNavGroup,
name: 'Forms',
diff --git a/frontend/src/scss/_variables.scss b/frontend/src/scss/_variables.scss
index 373dbeec231ac793d4ab9bea0b8b87846e332b92..f60c5e6f02c1063f3c9b27f665d7e8ae661cd0c1 100644
--- a/frontend/src/scss/_variables.scss
+++ b/frontend/src/scss/_variables.scss
@@ -76,7 +76,7 @@
// fusv-disable
// $primary-dark: #1f1498 !default;
-// $primary-base: #321fdb !default;
+// $primary-base: #122C5A !default;
// $primary-50: #988fed !default;
// $primary-25: #ccc7f6 !default;
diff --git a/frontend/src/views/breach/emails/Emails.js b/frontend/src/views/breach/emails/Emails.js
new file mode 100644
index 0000000000000000000000000000000000000000..4518d5c069e0a2367ac228373f75cd4397f546d9
--- /dev/null
+++ b/frontend/src/views/breach/emails/Emails.js
@@ -0,0 +1,401 @@
+import React from 'react'
+import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { cilBell } from '@coreui/icons'
+import { DocsExample } from 'src/components'
+
+const Emails = () => {
+ return (
+ <CRow>
+ <CCol xs={12}>
+ <CCard className="mb-4">
+ <CCardHeader>
+ <strong>React Button</strong>
+ </CCardHeader>
+ <CCardBody>
+ <p className="text-medium-emphasis small">
+ CoreUI includes a bunch of predefined buttons components, each serving its own
+ semantic purpose. Buttons show what action will happen when the user clicks or touches
+ it. CoreUI buttons are used to initialize operations, both in the background or
+ foreground of an experience.
+ </p>
+ <DocsExample href="components/buttons">
+ {['normal', 'active', 'disabled'].map((state, index) => (
+ <CRow className="align-items-center mb-3" key={index}>
+ <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
+ {state.charAt(0).toUpperCase() + state.slice(1)}
+ </CCol>
+ <CCol xs>
+ {[
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ].map((color, index) => (
+ <CButton
+ color={color}
+ key={index}
+ active={state === 'active'}
+ disabled={state === 'disabled'}
+ >
+ {color.charAt(0).toUpperCase() + color.slice(1)}
+ </CButton>
+ ))}
+ <CButton color="link">Link</CButton>
+ </CCol>
+ </CRow>
+ ))}
+ </DocsExample>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs={12}>
+ <CCard className="mb-4">
+ <CCardHeader>
+ <strong>React Button</strong> <small>with icons</small>
+ </CCardHeader>
+ <CCardBody>
+ <p className="text-medium-emphasis small">
+ You can combine button with our <a href="https://icons.coreui.io/">CoreUI Icons</a>.
+ </p>
+ <DocsExample href="components/buttons">
+ {['normal', 'active', 'disabled'].map((state, index) => (
+ <CRow className="align-items-center mb-3" key={index}>
+ <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
+ {state.charAt(0).toUpperCase() + state.slice(1)}
+ </CCol>
+ <CCol xs>
+ {[
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ].map((color, index) => (
+ <CButton
+ color={color}
+ key={index}
+ active={state === 'active'}
+ disabled={state === 'disabled'}
+ >
+ <CIcon icon={cilBell} className="me-2" />
+ {color.charAt(0).toUpperCase() + color.slice(1)}
+ </CButton>
+ ))}
+ <CButton color="link">
+ <CIcon icon={cilBell} className="me-2" />
+ Link
+ </CButton>
+ </CCol>
+ </CRow>
+ ))}
+ </DocsExample>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs={12}>
+ <CCard className="mb-4">
+ <CCardHeader>
+ <strong>React Button</strong> <small>Button components</small>
+ </CCardHeader>
+ <CCardBody>
+ <p className="text-medium-emphasis small">
+ The <code><CButton></code> component are designed for{' '}
+ <code><button></code> , <code><a></code> or <code><input></code>{' '}
+ elements (though some browsers may apply a slightly different rendering).
+ </p>
+ <p className="text-medium-emphasis small">
+ If you're using <code><CButton></code> component as <code><a></code>{' '}
+ elements that are used to trigger functionality ex. collapsing content, these links
+ should be given a <code>role="button"</code> to adequately communicate their
+ meaning to assistive technologies such as screen readers.
+ </p>
+ <DocsExample href="components/buttons#button-components">
+ <CButton component="a" color="primary" href="#" role="button">
+ Link
+ </CButton>
+ <CButton type="submit" color="primary">
+ Button
+ </CButton>
+ <CButton component="input" type="button" color="primary" value="Input" />
+ <CButton component="input" type="submit" color="primary" value="Submit" />
+ <CButton component="input" type="reset" color="primary" value="Reset" />
+ </DocsExample>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs={12}>
+ <CCard className="mb-4">
+ <CCardHeader>
+ <strong>React Button</strong> <small>outline</small>
+ </CCardHeader>
+ <CCardBody>
+ <p className="text-medium-emphasis small">
+ If you need a button, but without the strong background colors. Set{' '}
+ <code>variant="outline"</code> prop to remove all background colors.
+ </p>
+ <DocsExample href="components/buttons#outline-buttons">
+ {['normal', 'active', 'disabled'].map((state, index) => (
+ <CRow className="align-items-center mb-3" key={index}>
+ <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
+ {state.charAt(0).toUpperCase() + state.slice(1)}
+ </CCol>
+ <CCol xs>
+ {[
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ].map((color, index) => (
+ <CButton
+ color={color}
+ variant="outline"
+ key={index}
+ active={state === 'active'}
+ disabled={state === 'disabled'}
+ >
+ {color.charAt(0).toUpperCase() + color.slice(1)}
+ </CButton>
+ ))}
+ </CCol>
+ </CRow>
+ ))}
+ </DocsExample>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs={12}>
+ <CCard className="mb-4">
+ <CCardHeader>
+ <strong>React Button</strong> <small>ghost</small>
+ </CCardHeader>
+ <CCardBody>
+ <p className="text-medium-emphasis small">
+ If you need a ghost variant of button, set <code>variant="ghost"</code> prop
+ to remove all background colors.
+ </p>
+ <DocsExample href="components/buttons#ghost-buttons">
+ {['normal', 'active', 'disabled'].map((state, index) => (
+ <CRow className="align-items-center mb-3" key={index}>
+ <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
+ {state.charAt(0).toUpperCase() + state.slice(1)}
+ </CCol>
+ <CCol xs>
+ {[
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ].map((color, index) => (
+ <CButton
+ color={color}
+ variant="ghost"
+ key={index}
+ active={state === 'active'}
+ disabled={state === 'disabled'}
+ >
+ {color.charAt(0).toUpperCase() + color.slice(1)}
+ </CButton>
+ ))}
+ </CCol>
+ </CRow>
+ ))}
+ </DocsExample>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs={12}>
+ <CCard className="mb-4">
+ <CCardHeader>
+ <strong>React Button</strong> <small>Sizes</small>
+ </CCardHeader>
+ <CCardBody>
+ <p className="text-medium-emphasis small">
+ Larger or smaller buttons? Add <code>size="lg"</code> or{' '}
+ <code>size="sm"</code> for additional sizes.
+ </p>
+ <DocsExample href="components/buttons#sizes">
+ <CButton color="primary" size="lg">
+ Large button
+ </CButton>
+ <CButton color="secondary" size="lg">
+ Large button
+ </CButton>
+ </DocsExample>
+ <DocsExample href="components/buttons#sizes">
+ <CButton color="primary" size="sm">
+ Small button
+ </CButton>
+ <CButton color="secondary" size="sm">
+ Small button
+ </CButton>
+ </DocsExample>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs={12}>
+ <CCard className="mb-4">
+ <CCardHeader>
+ <strong>React Button</strong> <small>Pill</small>
+ </CCardHeader>
+ <CCardBody>
+ <DocsExample href="components/buttons#pill-buttons">
+ {[
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ].map((color, index) => (
+ <CButton color={color} shape="rounded-pill" key={index}>
+ {color.charAt(0).toUpperCase() + color.slice(1)}
+ </CButton>
+ ))}
+ </DocsExample>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs={12}>
+ <CCard className="mb-4">
+ <CCardHeader>
+ <strong>React Button</strong> <small>Square</small>
+ </CCardHeader>
+ <CCardBody>
+ <DocsExample href="components/buttons#square">
+ {[
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ].map((color, index) => (
+ <CButton color={color} shape="rounded-0" key={index}>
+ {color.charAt(0).toUpperCase() + color.slice(1)}
+ </CButton>
+ ))}
+ </DocsExample>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs={12}>
+ <CCard className="mb-4">
+ <CCardHeader>
+ <strong>React Button</strong> <small>Disabled state</small>
+ </CCardHeader>
+ <CCardBody>
+ <p className="text-medium-emphasis small">
+ Add the <code>disabled</code> boolean prop to any <code><CButton></code>{' '}
+ component to make buttons look inactive. Disabled button has{' '}
+ <code>pointer-events: none</code> applied to, disabling hover and active states from
+ triggering.
+ </p>
+ <DocsExample href="components/buttons#disabled-state">
+ <CButton color="primary" size="lg" disabled>
+ Primary button
+ </CButton>
+ <CButton color="secondary" size="lg" disabled>
+ Button
+ </CButton>
+ </DocsExample>
+ <p className="text-medium-emphasis small">
+ Disabled buttons using the <code><a></code> component act a little different:
+ </p>
+ <p className="text-medium-emphasis small">
+ <code><a></code>s don'tsupport the <code>disabled</code> attribute, so
+ CoreUI has to add <code>.disabled</code> className to make buttons look inactive.
+ CoreUI also has to add to the disabled button component{' '}
+ <code>aria-disabled="true"</code> attribute to show the state of the component
+ to assistive technologies.
+ </p>
+ <DocsExample href="components/buttons#disabled-state">
+ <CButton component="a" href="#" color="primary" size="lg" disabled>
+ Primary link
+ </CButton>
+ <CButton component="a" href="#" color="secondary" size="lg" disabled>
+ Link
+ </CButton>
+ </DocsExample>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs={12}>
+ <CCard className="mb-4">
+ <CCardHeader>
+ <strong>React Button</strong> <small>Block buttons</small>
+ </CCardHeader>
+ <CCardBody>
+ <p className="text-medium-emphasis small">
+ Create buttons that span the full width of a parent—by using utilities.
+ </p>
+ <DocsExample href="components/buttons#block-buttons">
+ <div className="d-grid gap-2">
+ <CButton color="primary">Button</CButton>
+ <CButton color="primary">Button</CButton>
+ </div>
+ </DocsExample>
+ <p className="text-medium-emphasis small">
+ Here we create a responsive variation, starting with vertically stacked buttons until
+ the <code>md</code> breakpoint, where <code>.d-md-block</code> replaces the{' '}
+ <code>.d-grid</code> class, thus nullifying the <code>gap-2</code> utility. Resize
+ your browser to see them change.
+ </p>
+ <DocsExample href="components/buttons#block-buttons">
+ <div className="d-grid gap-2 d-md-block">
+ <CButton color="primary">Button</CButton>
+ <CButton color="primary">Button</CButton>
+ </div>
+ </DocsExample>
+ <p className="text-medium-emphasis small">
+ You can adjust the width of your block buttons with grid column width classes. For
+ example, for a half-width "block button", use <code>.col-6</code>. Center it
+ horizontally with <code>.mx-auto</code>, too.
+ </p>
+ <DocsExample href="components/buttons#block-buttons">
+ <div className="d-grid gap-2 col-6 mx-auto">
+ <CButton color="primary">Button</CButton>
+ <CButton color="primary">Button</CButton>
+ </div>
+ </DocsExample>
+ <p className="text-medium-emphasis small">
+ Additional utilities can be used to adjust the alignment of buttons when horizontal.
+ Here we've taken our previous responsive example and added some flex utilities and
+ a margin utility on the button to right align the buttons when they're no longer
+ stacked.
+ </p>
+ <DocsExample href="components/buttons#block-buttons">
+ <div className="d-grid gap-2 d-md-flex justify-content-md-end">
+ <CButton color="primary" className="me-md-2">
+ Button
+ </CButton>
+ <CButton color="primary">Button</CButton>
+ </div>
+ </DocsExample>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ </CRow>
+ )
+}
+
+export default Emails
diff --git a/frontend/src/views/breach/index.js b/frontend/src/views/breach/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..24628a774181d6eb90dcb0626c66ed154fa17bfd
--- /dev/null
+++ b/frontend/src/views/breach/index.js
@@ -0,0 +1,5 @@
+import Emails from './Emails'
+import Passwords from './Passwords'
+
+
+export {Emails, Passwords}
diff --git a/frontend/src/views/buttons/buttons/Buttons.js b/frontend/src/views/buttons/buttons/Buttons.js
index 48f6fcf75e4366eecd56b7d5593611156834b222..c6df718f082e3f5a19be3558637a3471f6636442 100644
--- a/frontend/src/views/buttons/buttons/Buttons.js
+++ b/frontend/src/views/buttons/buttons/Buttons.js
@@ -1,401 +1,58 @@
-import React from 'react'
-import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
-import CIcon from '@coreui/icons-react'
-import { cilBell } from '@coreui/icons'
-import { DocsExample } from 'src/components'
+import React, { useState } from 'react'
+import { CButton, CCol, CForm, CFormInput, CFormLabel, CRow } from '@coreui/react'
+
+const EmailBreachDetector = () => {
+ const [email, setEmail] = useState('')
+ const [result, setResult] = useState(null)
+
+ const fetchData = async () => {
+ try {
+ // Update the Django backend URL
+ const apiUrl = `http://http://127.0.0.1:8000//haveibeenpwned/${email}/`
+
+ const response = await fetch(apiUrl)
+ const data = await response.json()
+
+ setResult(data)
+ } catch (error) {
+ console.error('Error fetching data:', error)
+ }
+ }
+
+ const handleButtonClick = () => {
+ if (email) {
+ fetchData()
+ }
+ }
-const Buttons = () => {
return (
<CRow>
<CCol xs={12}>
- <CCard className="mb-4">
- <CCardHeader>
- <strong>React Button</strong>
- </CCardHeader>
- <CCardBody>
- <p className="text-medium-emphasis small">
- CoreUI includes a bunch of predefined buttons components, each serving its own
- semantic purpose. Buttons show what action will happen when the user clicks or touches
- it. CoreUI buttons are used to initialize operations, both in the background or
- foreground of an experience.
- </p>
- <DocsExample href="components/buttons">
- {['normal', 'active', 'disabled'].map((state, index) => (
- <CRow className="align-items-center mb-3" key={index}>
- <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
- {state.charAt(0).toUpperCase() + state.slice(1)}
- </CCol>
- <CCol xs>
- {[
- 'primary',
- 'secondary',
- 'success',
- 'danger',
- 'warning',
- 'info',
- 'light',
- 'dark',
- ].map((color, index) => (
- <CButton
- color={color}
- key={index}
- active={state === 'active'}
- disabled={state === 'disabled'}
- >
- {color.charAt(0).toUpperCase() + color.slice(1)}
- </CButton>
- ))}
- <CButton color="link">Link</CButton>
- </CCol>
- </CRow>
- ))}
- </DocsExample>
- </CCardBody>
- </CCard>
- </CCol>
- <CCol xs={12}>
- <CCard className="mb-4">
- <CCardHeader>
- <strong>React Button</strong> <small>with icons</small>
- </CCardHeader>
- <CCardBody>
- <p className="text-medium-emphasis small">
- You can combine button with our <a href="https://icons.coreui.io/">CoreUI Icons</a>.
- </p>
- <DocsExample href="components/buttons">
- {['normal', 'active', 'disabled'].map((state, index) => (
- <CRow className="align-items-center mb-3" key={index}>
- <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
- {state.charAt(0).toUpperCase() + state.slice(1)}
- </CCol>
- <CCol xs>
- {[
- 'primary',
- 'secondary',
- 'success',
- 'danger',
- 'warning',
- 'info',
- 'light',
- 'dark',
- ].map((color, index) => (
- <CButton
- color={color}
- key={index}
- active={state === 'active'}
- disabled={state === 'disabled'}
- >
- <CIcon icon={cilBell} className="me-2" />
- {color.charAt(0).toUpperCase() + color.slice(1)}
- </CButton>
- ))}
- <CButton color="link">
- <CIcon icon={cilBell} className="me-2" />
- Link
- </CButton>
- </CCol>
- </CRow>
- ))}
- </DocsExample>
- </CCardBody>
- </CCard>
- </CCol>
- <CCol xs={12}>
- <CCard className="mb-4">
- <CCardHeader>
- <strong>React Button</strong> <small>Button components</small>
- </CCardHeader>
- <CCardBody>
- <p className="text-medium-emphasis small">
- The <code><CButton></code> component are designed for{' '}
- <code><button></code> , <code><a></code> or <code><input></code>{' '}
- elements (though some browsers may apply a slightly different rendering).
- </p>
- <p className="text-medium-emphasis small">
- If you're using <code><CButton></code> component as <code><a></code>{' '}
- elements that are used to trigger functionality ex. collapsing content, these links
- should be given a <code>role="button"</code> to adequately communicate their
- meaning to assistive technologies such as screen readers.
- </p>
- <DocsExample href="components/buttons#button-components">
- <CButton component="a" color="primary" href="#" role="button">
- Link
- </CButton>
- <CButton type="submit" color="primary">
- Button
- </CButton>
- <CButton component="input" type="button" color="primary" value="Input" />
- <CButton component="input" type="submit" color="primary" value="Submit" />
- <CButton component="input" type="reset" color="primary" value="Reset" />
- </DocsExample>
- </CCardBody>
- </CCard>
- </CCol>
- <CCol xs={12}>
- <CCard className="mb-4">
- <CCardHeader>
- <strong>React Button</strong> <small>outline</small>
- </CCardHeader>
- <CCardBody>
- <p className="text-medium-emphasis small">
- If you need a button, but without the strong background colors. Set{' '}
- <code>variant="outline"</code> prop to remove all background colors.
- </p>
- <DocsExample href="components/buttons#outline-buttons">
- {['normal', 'active', 'disabled'].map((state, index) => (
- <CRow className="align-items-center mb-3" key={index}>
- <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
- {state.charAt(0).toUpperCase() + state.slice(1)}
- </CCol>
- <CCol xs>
- {[
- 'primary',
- 'secondary',
- 'success',
- 'danger',
- 'warning',
- 'info',
- 'light',
- 'dark',
- ].map((color, index) => (
- <CButton
- color={color}
- variant="outline"
- key={index}
- active={state === 'active'}
- disabled={state === 'disabled'}
- >
- {color.charAt(0).toUpperCase() + color.slice(1)}
- </CButton>
- ))}
- </CCol>
- </CRow>
- ))}
- </DocsExample>
- </CCardBody>
- </CCard>
- </CCol>
- <CCol xs={12}>
- <CCard className="mb-4">
- <CCardHeader>
- <strong>React Button</strong> <small>ghost</small>
- </CCardHeader>
- <CCardBody>
- <p className="text-medium-emphasis small">
- If you need a ghost variant of button, set <code>variant="ghost"</code> prop
- to remove all background colors.
- </p>
- <DocsExample href="components/buttons#ghost-buttons">
- {['normal', 'active', 'disabled'].map((state, index) => (
- <CRow className="align-items-center mb-3" key={index}>
- <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
- {state.charAt(0).toUpperCase() + state.slice(1)}
- </CCol>
- <CCol xs>
- {[
- 'primary',
- 'secondary',
- 'success',
- 'danger',
- 'warning',
- 'info',
- 'light',
- 'dark',
- ].map((color, index) => (
- <CButton
- color={color}
- variant="ghost"
- key={index}
- active={state === 'active'}
- disabled={state === 'disabled'}
- >
- {color.charAt(0).toUpperCase() + color.slice(1)}
- </CButton>
- ))}
- </CCol>
- </CRow>
- ))}
- </DocsExample>
- </CCardBody>
- </CCard>
- </CCol>
- <CCol xs={12}>
- <CCard className="mb-4">
- <CCardHeader>
- <strong>React Button</strong> <small>Sizes</small>
- </CCardHeader>
- <CCardBody>
- <p className="text-medium-emphasis small">
- Larger or smaller buttons? Add <code>size="lg"</code> or{' '}
- <code>size="sm"</code> for additional sizes.
- </p>
- <DocsExample href="components/buttons#sizes">
- <CButton color="primary" size="lg">
- Large button
- </CButton>
- <CButton color="secondary" size="lg">
- Large button
- </CButton>
- </DocsExample>
- <DocsExample href="components/buttons#sizes">
- <CButton color="primary" size="sm">
- Small button
- </CButton>
- <CButton color="secondary" size="sm">
- Small button
- </CButton>
- </DocsExample>
- </CCardBody>
- </CCard>
- </CCol>
- <CCol xs={12}>
- <CCard className="mb-4">
- <CCardHeader>
- <strong>React Button</strong> <small>Pill</small>
- </CCardHeader>
- <CCardBody>
- <DocsExample href="components/buttons#pill-buttons">
- {[
- 'primary',
- 'secondary',
- 'success',
- 'danger',
- 'warning',
- 'info',
- 'light',
- 'dark',
- ].map((color, index) => (
- <CButton color={color} shape="rounded-pill" key={index}>
- {color.charAt(0).toUpperCase() + color.slice(1)}
- </CButton>
- ))}
- </DocsExample>
- </CCardBody>
- </CCard>
- </CCol>
- <CCol xs={12}>
- <CCard className="mb-4">
- <CCardHeader>
- <strong>React Button</strong> <small>Square</small>
- </CCardHeader>
- <CCardBody>
- <DocsExample href="components/buttons#square">
- {[
- 'primary',
- 'secondary',
- 'success',
- 'danger',
- 'warning',
- 'info',
- 'light',
- 'dark',
- ].map((color, index) => (
- <CButton color={color} shape="rounded-0" key={index}>
- {color.charAt(0).toUpperCase() + color.slice(1)}
- </CButton>
- ))}
- </DocsExample>
- </CCardBody>
- </CCard>
- </CCol>
- <CCol xs={12}>
- <CCard className="mb-4">
- <CCardHeader>
- <strong>React Button</strong> <small>Disabled state</small>
- </CCardHeader>
- <CCardBody>
- <p className="text-medium-emphasis small">
- Add the <code>disabled</code> boolean prop to any <code><CButton></code>{' '}
- component to make buttons look inactive. Disabled button has{' '}
- <code>pointer-events: none</code> applied to, disabling hover and active states from
- triggering.
- </p>
- <DocsExample href="components/buttons#disabled-state">
- <CButton color="primary" size="lg" disabled>
- Primary button
- </CButton>
- <CButton color="secondary" size="lg" disabled>
- Button
- </CButton>
- </DocsExample>
- <p className="text-medium-emphasis small">
- Disabled buttons using the <code><a></code> component act a little different:
- </p>
- <p className="text-medium-emphasis small">
- <code><a></code>s don'tsupport the <code>disabled</code> attribute, so
- CoreUI has to add <code>.disabled</code> className to make buttons look inactive.
- CoreUI also has to add to the disabled button component{' '}
- <code>aria-disabled="true"</code> attribute to show the state of the component
- to assistive technologies.
- </p>
- <DocsExample href="components/buttons#disabled-state">
- <CButton component="a" href="#" color="primary" size="lg" disabled>
- Primary link
- </CButton>
- <CButton component="a" href="#" color="secondary" size="lg" disabled>
- Link
- </CButton>
- </DocsExample>
- </CCardBody>
- </CCard>
- </CCol>
- <CCol xs={12}>
- <CCard className="mb-4">
- <CCardHeader>
- <strong>React Button</strong> <small>Block buttons</small>
- </CCardHeader>
- <CCardBody>
- <p className="text-medium-emphasis small">
- Create buttons that span the full width of a parent—by using utilities.
- </p>
- <DocsExample href="components/buttons#block-buttons">
- <div className="d-grid gap-2">
- <CButton color="primary">Button</CButton>
- <CButton color="primary">Button</CButton>
- </div>
- </DocsExample>
- <p className="text-medium-emphasis small">
- Here we create a responsive variation, starting with vertically stacked buttons until
- the <code>md</code> breakpoint, where <code>.d-md-block</code> replaces the{' '}
- <code>.d-grid</code> class, thus nullifying the <code>gap-2</code> utility. Resize
- your browser to see them change.
- </p>
- <DocsExample href="components/buttons#block-buttons">
- <div className="d-grid gap-2 d-md-block">
- <CButton color="primary">Button</CButton>
- <CButton color="primary">Button</CButton>
- </div>
- </DocsExample>
- <p className="text-medium-emphasis small">
- You can adjust the width of your block buttons with grid column width classes. For
- example, for a half-width "block button", use <code>.col-6</code>. Center it
- horizontally with <code>.mx-auto</code>, too.
- </p>
- <DocsExample href="components/buttons#block-buttons">
- <div className="d-grid gap-2 col-6 mx-auto">
- <CButton color="primary">Button</CButton>
- <CButton color="primary">Button</CButton>
- </div>
- </DocsExample>
- <p className="text-medium-emphasis small">
- Additional utilities can be used to adjust the alignment of buttons when horizontal.
- Here we've taken our previous responsive example and added some flex utilities and
- a margin utility on the button to right align the buttons when they're no longer
- stacked.
- </p>
- <DocsExample href="components/buttons#block-buttons">
- <div className="d-grid gap-2 d-md-flex justify-content-md-end">
- <CButton color="primary" className="me-md-2">
- Button
- </CButton>
- <CButton color="primary">Button</CButton>
- </div>
- </DocsExample>
- </CCardBody>
- </CCard>
+ <CForm>
+ <div className="mb-3">
+ <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
+ <CFormInput
+ type="email"
+ id="exampleFormControlInput1"
+ placeholder="name@example.com"
+ value={email}
+ onChange={(e) => setEmail(e.target.value)}
+ />
+ </div>
+
+ <CButton onClick={handleButtonClick} color="primary">
+ Check Breach
+ </CButton>
+ </CForm>
+
+ {result && (
+ <table className="tftable" border="1">
+ {/* Render your results here using 'result' */}
+ </table>
+ )}
</CCol>
</CRow>
)
}
-export default Buttons
+export default EmailBreachDetector
diff --git a/frontend/src/views/buttons/dropdowns/Dropdowns.js b/frontend/src/views/buttons/dropdowns/Dropdowns.js
new file mode 100644
index 0000000000000000000000000000000000000000..414f651fc18e3a2a0102e364d251a529702e116e
--- /dev/null
+++ b/frontend/src/views/buttons/dropdowns/Dropdowns.js
@@ -0,0 +1,338 @@
+import React from 'react'
+import {
+ CButton,
+ CButtonGroup,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CCol,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+ CRow,
+} from '@coreui/react'
+import { DocsExample } from 'src/components'
+
+const Dropdowns = () => {
+ return (
+ <CRow>
+ <CCol xs={12}>
+ <CCard className="mb-4">
+ <CCardHeader>
+ <strong>React Dropdown</strong> <small>Single button</small>
+ </CCardHeader>
+ <CCardBody>
+ <p className="text-medium-emphasis small">
+ Here's how you can put them to work with either <code><button></code>{' '}
+ elements:
+ </p>
+ <DocsExample href="components/dropdown#single-button">
+ <CDropdown>
+ <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </DocsExample>
+ <p className="text-medium-emphasis small">
+ The best part is you can do this with any button variant, too:
+ </p>
+ <DocsExample href="components/dropdown#single-button">
+ <>
+ {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
+ (color, index) => (
+ <CDropdown variant="btn-group" key={index}>
+ <CDropdownToggle color={color}>{color}</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ ),
+ )}
+ </>
+ </DocsExample>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs={12}>
+ <CCard className="mb-4">
+ <CCardHeader>
+ <strong>React Dropdown</strong> <small>Split button</small>
+ </CCardHeader>
+ <CCardBody>
+ <p className="text-medium-emphasis small">
+ Similarly, create split button dropdowns with virtually the same markup as single
+ button dropdowns, but with the addition of boolean prop <code>split</code> for proper
+ spacing around the dropdown caret.
+ </p>
+ <p className="text-medium-emphasis small">
+ We use this extra class to reduce the horizontal <code>padding</code> on either side
+ of the caret by 25% and remove the <code>margin-left</code> that's attached for
+ normal button dropdowns. Those additional changes hold the caret centered in the split
+ button and implement a more properly sized hit area next to the main button.
+ </p>
+ <DocsExample href="components/dropdown#split-button">
+ <>
+ {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
+ (color, index) => (
+ <CDropdown variant="btn-group" key={index}>
+ <CButton color={color}>{color}</CButton>
+ <CDropdownToggle color={color} split />
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ ),
+ )}
+ </>
+ </DocsExample>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs={12}>
+ <CCard className="mb-4">
+ <CCardHeader>
+ <strong>React Dropdown</strong> <small>Sizing</small>
+ </CCardHeader>
+ <CCardBody>
+ <p className="text-medium-emphasis small">
+ Button dropdowns work with buttons of all sizes, including default and split dropdown
+ buttons.
+ </p>
+ <DocsExample href="components/dropdown#sizing">
+ <CDropdown variant="btn-group">
+ <CDropdownToggle color="secondary" size="lg">
+ Large button
+ </CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CDropdown variant="btn-group">
+ <CButton color="secondary" size="lg">
+ Large split button
+ </CButton>
+ <CDropdownToggle color="secondary" size="lg" split />
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </DocsExample>
+ <DocsExample href="components/dropdown#sizing">
+ <CDropdown variant="btn-group">
+ <CDropdownToggle color="secondary" size="sm">
+ Small button
+ </CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CDropdown variant="btn-group">
+ <CButton color="secondary" size="sm">
+ Small split button
+ </CButton>
+ <CDropdownToggle color="secondary" size="sm" split />
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </DocsExample>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs={12}>
+ <CCard className="mb-4">
+ <CCardHeader>
+ <strong>React Dropdown</strong> <small>Single button</small>
+ </CCardHeader>
+ <CCardBody>
+ <p className="text-medium-emphasis small">
+ Opt into darker dropdowns to match a dark navbar or custom style by set{' '}
+ <code>dark</code> property. No changes are required to the dropdown items.
+ </p>
+ <DocsExample href="components/dropdown#dark-dropdowns">
+ <CDropdown dark>
+ <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </DocsExample>
+ <p className="text-medium-emphasis small">And putting it to use in a navbar:</p>
+ <DocsExample href="components/dropdown#dark-dropdowns">
+ <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+ <div className="container-fluid">
+ <a className="navbar-brand" href="https://coreui.io/react/">
+ Navbar
+ </a>
+ <button
+ className="navbar-toggler"
+ type="button"
+ data-coreui-toggle="collapse"
+ data-coreui-target="#navbarNavDarkDropdown"
+ aria-controls="navbarNavDarkDropdown"
+ aria-expanded="false"
+ aria-label="Toggle navigation"
+ >
+ <span className="navbar-toggler-icon"></span>
+ </button>
+ <div className="collapse navbar-collapse" id="navbarNavDarkDropdown">
+ <ul className="navbar-nav">
+ <CDropdown dark component="li" variant="nav-item">
+ <CDropdownToggle>Dropdown</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </ul>
+ </div>
+ </div>
+ </nav>
+ </DocsExample>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs={12}>
+ <CCard className="mb-4">
+ <CCardHeader>
+ <strong>React Dropdown</strong> <small>Dropup</small>
+ </CCardHeader>
+ <CCardBody>
+ <p className="text-medium-emphasis small">
+ Trigger dropdown menus above elements by adding{' '}
+ <code>direction="dropup"</code> to the <code><CDropdown></code>{' '}
+ component.
+ </p>
+ <DocsExample href="components/dropdown#dropup">
+ <CDropdown variant="btn-group" direction="dropup">
+ <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CDropdown variant="btn-group" direction="dropup">
+ <CButton color="secondary">Small split button</CButton>
+ <CDropdownToggle color="secondary" split />
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </DocsExample>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs={12}>
+ <CCard className="mb-4">
+ <CCardHeader>
+ <strong>React Dropdown</strong> <small>Dropright</small>
+ </CCardHeader>
+ <CCardBody>
+ <p className="text-medium-emphasis small">
+ Trigger dropdown menus at the right of the elements by adding{' '}
+ <code>direction="dropend"</code> to the <code><CDropdown></code>{' '}
+ component.
+ </p>
+ <DocsExample href="components/dropdown#dropright">
+ <CDropdown variant="btn-group" direction="dropend">
+ <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CDropdown variant="btn-group" direction="dropend">
+ <CButton color="secondary">Small split button</CButton>
+ <CDropdownToggle color="secondary" split />
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </DocsExample>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs={12}>
+ <CCard className="mb-4">
+ <CCardHeader>
+ <strong>React Dropdown</strong> <small>Dropleft</small>
+ </CCardHeader>
+ <CCardBody>
+ <p className="text-medium-emphasis small">
+ Trigger dropdown menus at the left of the elements by adding{' '}
+ <code>direction="dropstart"</code> to the <code><CDropdown></code>{' '}
+ component.
+ </p>
+ <DocsExample href="components/dropdown#dropleft">
+ <CButtonGroup>
+ <CDropdown variant="btn-group" direction="dropstart">
+ <CDropdownToggle color="secondary" split />
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CButton color="secondary">Small split button</CButton>
+ </CButtonGroup>
+ </DocsExample>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ </CRow>
+ )
+}
+
+export default Dropdowns