added login form, no server side logic

Author: akbuma

src/actionTypes/index.ts

@@ -40,3 +40,6 @@ export const UPDATE_CHILDREN: string = 'UPDATE_CHILDREN';
 export const UPDATE_CHILDREN_SORT: string = 'UPDATE_CHILDREN_SORT';
 export const UPDATE_CODE: string = 'UPDATE_CODE';
 export const UPDATE_HTML_ATTR: string = 'UPDATE_HTML_ATTR';
+
+export const SET_USERNAME: string = 'SET_USERNAME';
+export const SET_PASSWORD: string = 'SET_PASSWORD';

src/actions/actionCreators.ts

@@ -38,7 +38,9 @@ import {
   TOGGLE_STATE,
   UNDO,
   UPDATE_HTML_ATTR,
-  UPDATE_CODE
+  UPDATE_CODE,
+  SET_USERNAME,
+  SET_PASSWORD
 } from '../actionTypes/index';
 import { loadState } from '../localStorage';
 import createFiles from '../utils/createFiles.util';
@@ -327,3 +329,13 @@ export const updateHtmlAttr = ({
   type: UPDATE_HTML_ATTR,
   payload: { attr, value }
 });
+
+export const setUsername = (username: string): Action => ({
+  type: SET_USERNAME,
+  payload: username
+});
+
+export const setPassword = (password: string): Action => ({
+  type: SET_PASSWORD,
+  payload: password
+})

src/components/login/SignIn.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import Button from '@material-ui/core/Button';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import TextField from '@material-ui/core/TextField';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+import Link from '@material-ui/core/Link';
+import Grid from '@material-ui/core/Grid';
+import Box from '@material-ui/core/Box';
+import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
+
+function Copyright() {
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {'Copyright © '}
+      <Link color="inherit" href="https://material-ui.com/">
+        Your Website
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}
+
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    marginTop: theme.spacing(8),
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  avatar: {
+    margin: theme.spacing(1),
+    backgroundColor: theme.palette.secondary.main,
+  },
+  form: {
+    width: '100%', // Fix IE 11 issue.
+    marginTop: theme.spacing(1),
+  },
+  submit: {
+    margin: theme.spacing(3, 0, 2),
+  },
+}));
+
+export default function SignIn() {
+  const classes = useStyles();
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <CssBaseline />
+      <div className={classes.paper}>
+        <Avatar className={classes.avatar}>
+          <LockOutlinedIcon />
+        </Avatar>
+        <Typography component="h1" variant="h5">
+          Sign in
+        </Typography>
+        <form className={classes.form} noValidate>
+          <TextField
+            variant="outlined"
+            margin="normal"
+            required
+            fullWidth
+            id="username"
+            label="Username"
+            name="username"
+            autoComplete="username"
+            autoFocus
+          />
+          <TextField
+            variant="outlined"
+            margin="normal"
+            required
+            fullWidth
+            name="password"
+            label="Password"
+            type="password"
+            id="password"
+            autoComplete="current-password"
+          />
+          <FormControlLabel
+            control={<Checkbox value="remember" color="primary" />}
+            label="Remember me"
+          />
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            className={classes.submit}
+          >
+            Sign In
+          </Button>
+          <Grid container>
+            <Grid item xs>
+              <Link href="#" variant="body2">
+                Forgot password?
+              </Link>
+            </Grid>
+            <Grid item>
+              <Link href="#" variant="body2">
+                {"Don't have an account? Sign Up"}
+              </Link>
+            </Grid>
+          </Grid>
+        </form>
+      </div>
+      <Box mt={8}>
+        <Copyright />
+      </Box>
+    </Container>
+  );
+}

src/containers/LoginContainer.tsx

@@ -0,0 +1,23 @@
+// THIS FILE NOT CURRENTLY IN USE, DELETE
+import React, { useState } from 'react';
+
+interface State {
+  username: string,
+  password: string
+};
+
+class LoginContainer extends React.Component<State> {
+
+  state: State = {
+    username: 'test',
+    password: 'pass'
+  }
+
+  render() {
+    return (
+      <p>Hello</p>
+    )
+  }
+}
+
+export default LoginContainer

src/index.js

@@ -5,9 +5,20 @@ import { Provider } from 'react-redux';
 import App from './components/App.tsx';
 import store from './store';
 
+import SignIn from './components/login/SignIn.tsx';
+
+
 ReactDOM.render(
   <Provider store={store}>
     <App />
   </Provider>,
   document.getElementById('app'),
 );
+
+
+/*
+ReactDOM.render(
+  <SignIn/>,
+  document.getElementById('app'),
+);
+*/

src/interfaces/Interfaces.ts

@@ -84,6 +84,11 @@ export interface ApplicationStateInt {
   codeReadOnly: boolean;
 }
 
+export interface LoginInt {
+  username: string;
+  password: string;
+}
+
 //Global Action interface \
 export interface Action {
   type: string;

src/localStorage.ts

@@ -1,6 +1,9 @@
 import localforage from 'localforage';
 import { ApplicationStateInt } from './interfaces/Interfaces';
 
-export const saveState = (state: ApplicationStateInt) =>
+export const saveState = (state: ApplicationStateInt) => {
   localforage.setItem('state-v1.0.1', state);
-export const loadState = () => localforage.getItem('state-v1.0.1');
+}
+export const loadState = () => localforage.getItem('state-v1.0.1').then((value) => {
+  console.log('The value stored in local storage: ', value);
+});

src/reducers/index.ts

@@ -1,9 +1,11 @@
 import { combineReducers } from 'redux';
 
 import componentReducer from './rootReducer';
+import loginReducer from './loginReducer';
 
 const reducers = combineReducers({
   workspace: componentReducer,
+  credentials: loginReducer
 });
 
 export default reducers;

src/reducers/initialState.ts

@@ -4,7 +4,8 @@ import getColor from '../helperFunctions/colors';
 import {
   ComponentInt,
   ChildInt,
-  ApplicationStateInt
+  ApplicationStateInt,
+  LoginInt
 } from '../interfaces/Interfaces';
 
 export const appComponent: ComponentInt = {
@@ -110,6 +111,11 @@ export const initialComponentState: ComponentInt = {
   changed: false
 };
 
+export const initialLoginState: LoginInt = {
+  username: '',
+  password: ''
+};
+
 export const nativeComponentTypes = [
   'RNView',
   'RNSafeAreaView',

src/reducers/loginReducer.ts

@@ -0,0 +1,50 @@
+import { initialLoginState } from './initialState';
+import { Action } from '../interfaces/Interfaces';
+import { SET_USERNAME, SET_PASSWORD } from '../actionTypes/index';
+/*
+export interface LoginInt {
+  username: string;
+  password: string;
+}
+
+export const initialLoginState: LoginInt = {
+  username: '',
+  password: ''
+};
+
+export interface Action {
+  type: string;
+  payload?: any;
+}
+
+export const setUsername = (username: string): Action => ({
+  type: SET_USERNAME,
+  payload: username
+});
+
+export const setPassword = (password: string): Action => ({
+  type: SET_PASSWORD,
+  payload: password
+})
+*/
+
+const loginReducer = (state = initialLoginState, action: Action) => {
+  switch(action.type) {
+    case SET_USERNAME:
+      return {
+        ...state,
+        username: action.payload
+      }
+
+    case SET_PASSWORD:
+      return {
+        ...state,
+        password: action.payload
+      }
+
+    default: 
+      return state;
+  }
+}
+
+export default loginReducer