ホーム エクスプローラ ヘルプ
サインイン
serg1557733
/
redux
Watch 1
Star 0
Fork 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

feat:add form login component

Sergey 3 年 前
親
76ac0d760b
コミット
dad0422898
5 ファイル変更、59 行追加、77 行削除
分割表示 差分情報を表示
  1. 8 34
      frontend/public/index.html
  2. 0 38
      frontend/src/App.css
  3. 5 5
      frontend/src/App.js
  4. 0 0
      frontend/src/components/chatPage/Chat.js
  5. 46 0
      frontend/src/components/loginForm/LoginForm.js

+ 8 - 34
frontend/public/index.html
ファイルの表示 

@@ -1,43 +1,17 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
-  <head>
 
+
 
+<head>
 
     <meta charset="utf-8" />
 
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <meta name="theme-color" content="#000000" />
 
-    <meta
 
-      name="description"
 
-      content="Web site created using create-react-app"
 
-    />
 
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
-    <!--
 
-      manifest.json provides metadata used when your web app is installed on a
 
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 
-    -->
 
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-    <!--
 
-      Notice the use of %PUBLIC_URL% in the tags above.
 
-      It will be replaced with the URL of the `public` folder during the build.
 
-      Only files inside the `public` folder can be referenced from the HTML.
 
+    <meta name="description" content="Web site created using create-react-app" />
 
+    <title>Chat client</title>
 
+</head>
 
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
 
-      work correctly both with client-side routing and a non-root public URL.
 
-      Learn how to configure a non-root public URL by running `npm run build`.
 
-    -->
 
-    <title>React App</title>
 
-  </head>
 
-  <body>
 
+<body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <div id="root"></div>
 
-    <!--
 
-      This HTML file is a template.
 
-      If you open it directly in the browser, you will see an empty page.
 
-
 
-      You can add webfonts, meta tags, or analytics to this file.
 
-      The build step will place the bundled scripts into the <body> tag.
 
+</body>
 
 
-      To begin the development, run `npm start` or `yarn start`.
 
-      To create a production bundle, use `npm run build` or `yarn build`.
 
-    -->
 
-  </body>
 
-</html>
 
+</html>

+ 0 - 38
frontend/src/App.css
ファイルの表示 

@@ -1,38 +0,0 @@
 
-.App {
 
-  text-align: center;
 
-}
 
-
 
-.App-logo {
 
-  height: 40vmin;
 
-  pointer-events: none;
 
-}
 
-
 
-@media (prefers-reduced-motion: no-preference) {
 
-  .App-logo {
 
-    animation: App-logo-spin infinite 20s linear;
 
-  }
 
-}
 
-
 
-.App-header {
 
-  background-color: #282c34;
 
-  min-height: 100vh;
 
-  display: flex;
 
-  flex-direction: column;
 
-  align-items: center;
 
-  justify-content: center;
 
-  font-size: calc(10px + 2vmin);
 
-  color: white;
 
-}
 
-
 
-.App-link {
 
-  color: #61dafb;
 
-}
 
-
 
-@keyframes App-logo-spin {
 
-  from {
 
-    transform: rotate(0deg);
 
-  }
 
-  to {
 
-    transform: rotate(360deg);
 
-  }
 
-}

+ 5 - 5
frontend/src/App.js
ファイルの表示 

@@ -1,5 +1,6 @@
 
 import './App.css';
 
 import {io} from 'socket.io-client';
 
+import { Login } from './components/loginForm/LoginForm';
 
 
 
 
@@ -16,7 +17,6 @@ socket.on("connect", () => {
 
 });   
 
 
-
 
 //testing send messages
 
 const sendMessage = (data) => {
 
     socket.emit("message", data);
 
@@ -26,7 +26,7 @@ const sendMessage = (data) => {
 
 
 
 sendMessage({
 
-    message: 'some message',
 
+    message: 'some 24334 message',
 
     name: 'some name'
 
 });
 
 
@@ -35,9 +35,9 @@ sendMessage({
 
 
 function App() {
 
   return (
 
-    <div className="App">
 
-       <h1>working ...</h1>
 
-    </div>
 
+    <>
 
+       <Login/>
 
+    </>
 
   );
 
 }

+ 0 - 0
frontend/src/components/chatPage/Chat.js
ファイルの表示


+ 46 - 0
frontend/src/components/loginForm/LoginForm.js
ファイルの表示 

@@ -0,0 +1,46 @@
 
+import Button from '@mui/material/Button';
 
+import TextField from '@mui/material/TextField';
 
+import Container from '@mui/material/Container';
 
+import CssBaseline from '@mui/material/CssBaseline';
 
+import Box from '@mui/material/Box';
 
+
 
+
 
+export const Login = () => {
 
+    return (
 
+        <Container maxWidth="xs">
 
+            <Box
 
+            sx={{
 
+                marginTop: 40,
 
+                display: 'flex',
 
+                flexDirection: 'column',
 
+                alignItems: 'center',
 
+            }}
 
+            >
 
+                <TextField
 
+                margin="normal"
 
+                required
 
+                fullWidth
 
+                id="userName"
 
+                label="user name"
 
+                name="userName"
 
+                autoComplete="email"
 
+                autoFocus
 
+                />
 
+                <TextField
 
+                margin="normal"
 
+                required
 
+                fullWidth
 
+                name="password"
 
+                label="Password"
 
+                type="password"
 
+                id="password"
 
+                autoComplete="current-password"
 
+                />
 
+                <Button 
+                variant="contained"
 
+                fullWidth>Login
 
+                </Button>
 
+            </Box>
 
+        </Container>
 
+    )
 
+}