added css changes b00tc4mp#173

staff/angelzrc/unsocial/src/components/library/Field.jsx

@@ -1,7 +1,6 @@
 import './Field.css'
 
-function Field({ children }) {
+export default ({ children }) => {
     return <div className="Field">{children}</div>
 }
 
-export default Field

staff/angelzrc/unsocial/src/components/library/Input.css

@@ -6,4 +6,13 @@
     font-family: inherit;
     border-color: var(--color);
     border-style: solid;
+}
+
+::placeholder{
+    color: black;
+    opacity: 1;
+}
+
+input:focus::-webkit-input-placeholder {
+	opacity : 0;
 }

staff/angelzrc/unsocial/src/components/library/Input.jsx

@@ -1,7 +1,7 @@
 import './Input.css'
 
-export default ({ type, id }) => {
+export default ({ type, id, placeholder }) => {
     // console.log('Input -> render')
 
-    return <input type={type} id={id} className="Input" />
+    return <input type={type} id={id} className="Input" placeholder={placeholder} />
 }

staff/angelzrc/unsocial/src/components/library/PasswordInput.css

@@ -0,0 +1,10 @@
+.showpass:hover{
+    text-decoration: underline;
+}
+.showpass{
+    font-size: 13px;
+}
+
+.Input{
+    border-right: 0px;
+}

staff/angelzrc/unsocial/src/components/library/PasswordInput.jsx

@@ -8,23 +8,24 @@ export default class extends Component {
 
         super(props) // this.props = props
 
-        this.state = { status: '😌', type: 'password' }
+        this.state = { status: 'show', type: 'password' }
     }
 
     handleToggleClick = () => this.setState({
-        status: this.state.status === '😌' ? '😳' : '😌',
+        status: this.state.status === 'show' ? 'hide' : 'show',
         type: this.state.type === 'password' ? 'text' : 'password'
     })
 
     render() {
         // console.log('PasswordInput -> render')
 
         return <div style={{ display: 'flex' }}>
-            <Input type={this.state.type} id={this.props.id} />
-            <span
-                style={{ cursor: 'pointer', position: 'absolute', right: '10px' }}
+            <Input type={this.state.type} id={this.props.id} placeholder="Password" border-right="0px solid transparent"/>
+            <span className="showpass"
+                style={{ cursor: 'pointer'/* , position: 'absolute', right: '10px' */ }}
                 onClick={this.handleToggleClick}
             >{this.state.status}</span>
+
         </div>
     }
 }

staff/angelzrc/unsocial/src/logic/logoutUser.js

@@ -1,24 +1 @@
-import { validate } from './helpers'
-
-import uuid from '../data/uuid'
-
-export default (name, email, username, password, passwordRepeat) => {
-    validate.name(name)
-    validate.email(email)
-    validate.username(username)
-    validate.password(password)
-    validate.passwordsMatch(password, passwordRepeat)
-
-    const users = JSON.parse(localStorage.users)
-
-    let user = users.find(user => user.username === username || user.email === email)
-
-    if (user !== undefined)
-        throw new Error('user already exists')
-
-    user = { id: uuid(), name: name, email: email, username: username, password: password }
-
-    users.push(user)
-
-    localStorage.users = JSON.stringify(users)
-}
+export default () => delete sessionStorage.userId

staff/angelzrc/unsocial/src/view/Login.jsx

@@ -36,12 +36,12 @@ export default props => {
 
         <Form onSubmit={handleSubmit}>
             <Field>
-                <Label htmlFor="username">Username</Label>
-                <Input type="text" id="username" />
+                {/* <Label htmlFor="username">Username</Label> */}
+                <Input type="text" id="username" placeholder="Username" />
             </Field>
 
             <Field>
-                <Label htmlFor="password">Password</Label>
+                {/* <Label htmlFor="password" placeholder="username">Password</Label> */}
                 <PasswordInput id="password" />
             </Field>