dwayne
/
flexor-web
1
0
Fork 0
Code Releases Activity
Browse Source

WIP

master
Dwayne Harris 5 years ago
parent
8f94ee6b39
commit
0aef83cc0b
6 changed files with 53 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      src/components/controls/password-field.tsx
  2. 4
      src/components/controls/text-field.tsx
  3. 12
      src/components/notification.tsx
  4. 11
      src/components/pages/login.tsx
  5. 6
      src/components/self-info.tsx
  6. 29
      src/styles/app.css

17
src/components/controls/password-field.tsx
View File

@ -2,8 +2,7 @@ import React, { FC, ReactNode } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import zxcvbn from 'zxcvbn'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { IconDefinition } from '@fortawesome/fontawesome-common-types'
import { faKey, faExclamationTriangle, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
import { faKey } from '@fortawesome/free-solid-svg-icons'
import { useTheme } from 'src/hooks'
import { setFieldValue } from 'src/actions/forms'
import { getFieldValue, getFieldNotification } from 'src/selectors/forms'
@ -28,7 +27,6 @@ const PasswordField: FC<Props> = ({
const notification = useSelector<AppState, FormNotification | undefined>(state => getFieldNotification(state, 'password'))
const dispatch = useDispatch()
let icon: IconDefinition | undefined
let passwordMessage: ReactNode | undefined
let successState = false
let errorState = false
@ -39,7 +37,6 @@ const PasswordField: FC<Props> = ({
switch (score) {
case 0:
errorState = true
icon = faExclamationTriangle
passwordMessage = <span>Strength: <span style={{ color: theme.red }}>Unusable</span></span>
break
case 1:
@ -55,7 +52,6 @@ const PasswordField: FC<Props> = ({
break
case 4:
successState = true
icon = faCheckCircle
passwordMessage = <span>Strength: <span style={{ color: theme.green }}>LIT</span></span>
break
}
@ -72,7 +68,7 @@ const PasswordField: FC<Props> = ({
}
}
const color = successState ? theme.green : errorState ? theme.red : theme.backgroundSecondary
const color = successState ? theme.green : errorState ? theme.red : theme.primary
const helpText = () => {
if (notification) return <FormNotificationComponent notification={notification} />
@ -83,22 +79,17 @@ const PasswordField: FC<Props> = ({
<div className="field">
<FieldLabel>Password</FieldLabel>
<div className="control-container">
<div className="icon">
<div className="icon" style={{ backgroundColor: color, color: theme.primaryAlternate }}>
<FontAwesomeIcon icon={faKey} />
</div>
<div className="control">
<input
style={{ backgroundColor: theme.backgroundPrimary, borderColor: color, color: theme.text }}
style={{ backgroundColor: theme.backgroundSecondary, borderColor: color, color: theme.text }}
type="password"
placeholder={placeholder}
value={value}
onChange={e => dispatch(setFieldValue('password', e.target.value))} />
</div>
{icon &&
<div className="icon">
<FontAwesomeIcon icon={icon} />
</div>
}
</div>
{helpText()}
</div>

4
src/components/controls/text-field.tsx
View File

@ -36,7 +36,7 @@ const TextField: FC<Props> = ({
const notification = useSelector<AppState, FormNotification | undefined>(state => getFieldNotification(state, name))
const dispatch = useDispatch()
let color = theme.secondary
let color = theme.primary
if (notification) {
switch (notification.type) {
@ -54,7 +54,7 @@ const TextField: FC<Props> = ({
<FieldLabel>{label}</FieldLabel>
<div className="control-container">
{icon &&
<div className="icon" style={{ backgroundColor: theme.primary, color: theme.primaryAlternate }}>
<div className="icon" style={{ backgroundColor: color, color: theme.primaryAlternate }}>
<FontAwesomeIcon icon={icon} />
</div>
}

12
src/components/notification.tsx
View File

@ -1,4 +1,6 @@
import React, { FC, MouseEventHandler } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faWindowClose } from '@fortawesome/free-solid-svg-icons'
import { useTheme } from 'src/hooks'
import { NotificationType } from 'src/types'
@ -27,9 +29,13 @@ const Notification: FC<Props> = ({ id, type, auto, setAuto, dismiss, children })
}
return (
<div className="notification" onClick={() => setAuto(id)} style={{ backgroundColor: color(), color: theme.text }}>
{!auto && <button className="delete" onClick={handleDismiss}></button>}
{children}
<div className="notification" onClick={() => setAuto(id)} style={{ backgroundColor: color(), color: '#fff' }}>
{!auto &&
<button className="delete" onClick={handleDismiss} style={{ backgroundColor: color(), color: '#fff' }}>
<FontAwesomeIcon icon={faWindowClose} />
</button>
}
<div>{children}</div>
</div>
)
}

11
src/components/pages/login.tsx
View File

@ -12,6 +12,7 @@ import { getIsFetching } from 'src/selectors/requests'
import { initForm, initField, setFieldNotification } from 'src/actions/forms'
import Title from 'src/components/title'
import Section from 'src/components/section'
import TextField from 'src/components/controls/text-field'
import PasswordField from 'src/components/controls/password-field'
import PrimaryButton from 'src/components/controls/primary-button'
@ -64,12 +65,14 @@ const Login: FC = () => {
return (
<div>
<Title>Log In to Flexor</Title>
<Section>
<Title>Log In to Flexor</Title>
<TextField icon={faIdCard} name="name" label="Username" placeholder="Your Username/ID" />
<PasswordField placeholder="Your password" showStrength={false} />
<TextField icon={faIdCard} name="name" label="Username" placeholder="Your Username/ID" />
<PasswordField placeholder="Your password" showStrength={false} />
<PrimaryButton text="Log In" icon={faKey} onClick={() => handleAuthenticate()} loading={authenticating} />
<PrimaryButton text="Log In" onClick={() => handleAuthenticate()} loading={authenticating} />
</Section>
</div>
)
}

6
src/components/self-info.tsx
View File

@ -6,6 +6,8 @@ import { useConfig, useTheme } from 'src/hooks'
import { urlForBlob } from 'src/utils'
import { AppState, User } from 'src/types'
import HorizontalRule from 'src/components/horizontal-rule'
const SelfInfo: FC = () => {
const theme = useTheme()
const config = useConfig()
@ -13,9 +15,9 @@ const SelfInfo: FC = () => {
if (!user) {
return (
<div className="user-info unauthenticated" style={{ backgroundColor: theme.primary }}>
<div className="user-info-unauthenticated" style={{ backgroundColor: theme.primary }}>
<Link to="/login" style={{ color: theme.primaryAlternate, fontSize: '1.1rem' }}>Log In to Flexor</Link>
<p className="divider">or</p>
<HorizontalRule />
<Link to="/communities" style={{ color: theme.backgroundSecondary, fontSize: '0.9rem' }}>Create an Account</Link>
</div>
)

29
src/styles/app.css
View File

@ -159,7 +159,7 @@ div.field {
margin: 1rem 0px;
}
div.field div.label {
div.field label {
font-weight: 700;
}
@ -179,6 +179,7 @@ div.control {
p.help {
font-size: 0.8rem;
margin-top: -0.25rem;
}
div.search {
@ -193,6 +194,25 @@ div.notification-container {
width: 40%;
}
div.notification {
border-radius: 5px;
margin-bottom: 1rem;
}
div.notification > div {
padding: 1rem;
}
button.delete {
border: none;
margin: 0px;
min-width: 0px;
padding: 0px;
position: absolute;
right: 10px;
top: 3px;
}
nav.level {
display: flex;
justify-content: space-between;
@ -227,7 +247,7 @@ div.composer-container {
border-bottom: var(--default-border);
}
div.composer-empty, div.composer-empty {
div.composer-empty, div.composer-error {
font-size: 0.8rem;
text-align: center;
padding: 1.5rem;
@ -265,6 +285,11 @@ div.user-info {
padding: 1.5rem 1rem;
}
div.user-info-unauthenticated {
padding: 1.5rem 1rem;
text-align: center;
}
div.group-info {
display: flex;
}

Write Preview
Loading…
Cancel
Save