solid-socket/src/components/auth.tsx at master · devagrawal09/solid-socket · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import { login, logout } from "~/lib/auth";

export function Login() {
  return (
    <form
      action={login}
      method="post"
      style={{
        "text-align": "center",
        "margin-top": "100px",
        "font-size": "20px",
      }}
    >
      <input
        type="text"
        name="userId"
        style={{
          "background-color": "#f2f2f2",
          border: "1px solid grey",
          "border-radius": "5px",
          color: "black",
          padding: "15px 32px",
          "text-align": "center",
          "text-decoration": "none",
          display: "inline-block",
          "font-size": "16px",
          margin: "4px 2px",
        }}
        placeholder="Username"
      />
      <button
        type="submit"
        style={{
          "background-color": "#4CAF50",
          border: "none",
          "border-radius": "5px",
          color: "white",
          padding: "15px 32px",
          "text-align": "center",
          "text-decoration": "none",
          display: "inline-block",
          "font-size": "16px",
          margin: "4px 2px",
          cursor: "pointer",
        }}
      >
        Login
      </button>
    </form>
  );
}

export function Logout() {
  return (
    <form
      action={logout}
      method="post"
      style={{
        "text-align": "center",
        "font-size": "20px",
        float: "right",
      }}
    >
      <button
        type="submit"
        style={{
          "background-color": "#f44336",
          "border-radius": "5px",
          color: "white",
          padding: "5px 10px",
          "text-align": "center",
          "text-decoration": "none",
          display: "inline-block",
          "font-size": "16px",
          margin: "4px 2px",
          cursor: "pointer",
        }}
      >
        Logout
      </button>
    </form>
  );
}