Skip to content

Commit b205845

Browse files
Vanessa-KrisVanessa-Kris
committed
auth page done
1 parent e319f9c commit b205845

13 files changed

+153
-66
lines changed

‎public/favicon/android-chrome-192x192.png

8.67 KB
Loading

‎public/favicon/android-chrome-512x512.png

28.2 KB
Loading

‎public/favicon/apple-touch-icon.png

7.82 KB
Loading

‎public/favicon/favicon-16x16.png

642 Bytes
Loading

‎public/favicon/favicon-32x32.png

1.12 KB
Loading

‎public/favicon/favicon.ico

15 KB
Binary file not shown.

‎public/favicon/site.webmanifest

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

‎src/App.css

+9
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,12 @@
88
display: flex;
99
margin-bottom: 16px;
1010
}
11+
12+
.footer {
13+
text-decoration: none;
14+
color: rgb(159, 158, 158);
15+
}
16+
17+
.footer:hover {
18+
color: #9BBFF2;
19+
}

‎src/App.js

-1
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,6 @@ export default function App() {
215215
<Box
216216
bgcolor="background.paper"
217217
position="sticky"
218-
mponent="nav"
219218
sx={{
220219
top: 0,
221220
zIndex: 1,

‎src/Authenticate.js

+141-51
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,149 @@
1-
import { useState } from "react";
1+
import React from "react";
2+
import "./App.css";
3+
import { Box, Typography, Grid, List, ListItem, AppBar } from "@mui/material";
24
import QRCode from "react-qr-code";
5+
import { createTheme, ThemeProvider } from "@mui/material/styles";
6+
import useMediaQuery from "@mui/material/useMediaQuery";
7+
import CssBaseline from "@mui/material/CssBaseline";
8+
import icon from "./Icon.png";
9+
import Switch from "@mui/material/Switch";
10+
11+
const label = { inputProps: { "aria-label": "Switch demo" } };
312

413
function Auth() {
5-
const [value, setValue] = useState();
6-
const [back, setBack] = useState("#FFFFFF");
7-
const [fore, setFore] = useState("#000000");
8-
const [size, setSize] = useState(256);
14+
// Theme
15+
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
916

17+
const theme = React.useMemo(
18+
() =>
19+
createTheme({
20+
palette: {
21+
mode: prefersDarkMode ? "dark" : "light",
22+
},
23+
}),
24+
[prefersDarkMode]
25+
);
26+
//Theme End
1027
return (
11-
<div className="Auth">
12-
<center>
13-
<br />
14-
<br />
15-
<input
16-
type="text"
17-
onChange={(e) => setValue(e.target.value)}
18-
placeholder="Value of Qr-code"
19-
/>
20-
<br />
21-
<br />
22-
<input
23-
type="text"
24-
onChange={(e) => setBack(e.target.value)}
25-
placeholder="Background color"
26-
/>
27-
<br />
28-
<br />
29-
<input
30-
type="text"
31-
onChange={(e) => setFore(e.target.value)}
32-
placeholder="Foreground color"
33-
/>
34-
<br />
35-
<br />
36-
<input
37-
type="number"
38-
onChange={(e) =>
39-
setSize(parseInt(e.target.value === "" ? 0 : e.target.value, 10))
40-
}
41-
placeholder="Size of Qr-code"
42-
/>
43-
<br />
44-
<br />
45-
<br />
46-
{value && (
47-
<QRCode
48-
title="GeeksForGeeks"
49-
value={value}
50-
bgColor={back}
51-
fgColor={fore}
52-
size={size === "" ? 0 : size}
53-
/>
54-
)}
55-
</center>
56-
</div>
28+
<>
29+
<ThemeProvider theme={theme}>
30+
<CssBaseline />
31+
<AppBar
32+
sx={{
33+
p: 2,
34+
pb: 1,
35+
pl: 15,
36+
}}
37+
>
38+
{" "}
39+
<Box
40+
sx={{
41+
display: "flex",
42+
}}
43+
>
44+
<img
45+
src={icon}
46+
width="30px"
47+
alt="Deku Icon"
48+
style={{ marginRight: 10 }}
49+
/>
50+
<span>Deku Messaging</span>
51+
</Box>
52+
</AppBar>
53+
54+
<Grid
55+
container
56+
spacing={2}
57+
padding={15}
58+
sx={{
59+
height: "100%",
60+
display: "flex",
61+
alignItems: "center",
62+
justifyContent: "center",
63+
}}
64+
>
65+
<Grid item xs={4}>
66+
<Typography
67+
variant="h4"
68+
sx={{
69+
p: 2,
70+
}}
71+
>
72+
Deku Messaging
73+
</Typography>
74+
<List>
75+
<ListItem>1. On your phone, open Deku messaging app </ListItem>
76+
<ListItem>
77+
2. Tap Menu from your conversation list and select Device
78+
pairing
79+
</ListItem>
80+
<ListItem>
81+
3. Tap QR code scanner and scan the code on this device{" "}
82+
</ListItem>
83+
</List>
84+
<Typography
85+
variant="body2"
86+
sx={{
87+
p: 2,
88+
color: "text.secondary",
89+
}}
90+
>
91+
Don't have Messages on your phone?{" "}
92+
<a href="#" style={{ color: "#9BBFF2" }}>
93+
Install Deku
94+
</a>
95+
</Typography>
96+
</Grid>
97+
<Grid item xs={4}>
98+
<Box
99+
sx={{
100+
p: 2,
101+
backgroundColor: "white",
102+
width: "80%",
103+
borderRadius: "8%",
104+
}}
105+
>
106+
<QRCode
107+
title="DekuMessaging"
108+
value="smswithoutborders.com"
109+
size="100%"
110+
/>
111+
</Box>
112+
<Box
113+
sx={{
114+
p: 2,
115+
}}
116+
>
117+
<Typography>
118+
Remember this computer <Switch {...label} />
119+
</Typography>
120+
</Box>
121+
</Grid>
122+
</Grid>
123+
124+
<Box
125+
sx={{
126+
p: 2,
127+
flexDirection: "column",
128+
wordSpacing: 50,
129+
color: "gray",
130+
pl: 15,
131+
}}
132+
>
133+
<Typography sx={{ typography: "body2" }}>
134+
<a className="footer" href="#">
135+
Privacy
136+
</a>{" "}
137+
<a className="footer" href="#">
138+
Terms
139+
</a>{" "}
140+
<a className="footer" href="#">
141+
Feedback
142+
</a>
143+
</Typography>
144+
</Box>
145+
</ThemeProvider>
146+
</>
57147
);
58148
}
59149

‎src/Icon.png

7.83 KB
Loading

‎src/index.css

-12
Original file line numberDiff line numberDiff line change
@@ -1,13 +1 @@
1-
body {
2-
margin: 0;
3-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5-
sans-serif;
6-
-webkit-font-smoothing: antialiased;
7-
-moz-osx-font-smoothing: grayscale;
8-
}
91

10-
code {
11-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12-
monospace;
13-
}

‎src/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import ReactDOM from "react-dom/client";
33
import "./index.css";
4-
import App from "./App";
4+
// import App from "./App";
55
import reportWebVitals from "./reportWebVitals";
66
import CssBaseline from "@mui/material/CssBaseline";
77
import Auth from "./Authenticate";
@@ -10,7 +10,7 @@ const root = ReactDOM.createRoot(document.getElementById("root"));
1010
root.render(
1111
<React.StrictMode>
1212
<CssBaseline />
13-
<App />
13+
<Auth />
1414
</React.StrictMode>
1515
);
1616

0 commit comments

Comments
 (0)