github.com/pelicanplatform/pelican@v1.0.5/web_ui/frontend/app/(login)/login/page.tsx (about)

     1  /***************************************************************
     2   *
     3   * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research
     4   *
     5   * Licensed under the Apache License, Version 2.0 (the "License"); you
     6   * may not use this file except in compliance with the License.  You may
     7   * obtain a copy of the License at
     8   *
     9   *    http://www.apache.org/licenses/LICENSE-2.0
    10   *
    11   * Unless required by applicable law or agreed to in writing, software
    12   * distributed under the License is distributed on an "AS IS" BASIS,
    13   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    14   * See the License for the specific language governing permissions and
    15   * limitations under the License.
    16   *
    17   ***************************************************************/
    18  
    19  "use client"
    20  
    21  import {Box, Typography} from "@mui/material";
    22  import { useRouter } from 'next/navigation'
    23  import { useState } from "react";
    24  
    25  import LoadingButton from "../components/LoadingButton";
    26  
    27  import PasswordInput from "../components/PasswordInput";
    28  
    29  export default function Home() {
    30  
    31      const router = useRouter()
    32      let [password, setPassword] = useState <string>("")
    33      let [loading, setLoading] = useState(false);
    34  
    35      async function submit(password: string) {
    36  
    37          setLoading(true)
    38  
    39          let response = await fetch("/api/v1.0/auth/login", {
    40              method: "POST",
    41              headers: {
    42                  "Content-Type": "application/json"
    43              },
    44              body: JSON.stringify({
    45                  "user": "admin",
    46                  "password": password
    47              })
    48          })
    49  
    50          if(response.ok){
    51              const url = new URL(window.location.href)
    52              const returnURL = url.searchParams.get("returnURL")
    53  
    54              router.push(returnURL ? returnURL : "../")
    55          } else {
    56              setLoading(false)
    57          }
    58      }
    59  
    60      function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    61          e.preventDefault()
    62  
    63          submit(password)
    64      }
    65  
    66      return (
    67          <>
    68              <Box m={"auto"} mt={12}  display={"flex"} flexDirection={"column"}>
    69                  <Box>
    70                      <Typography textAlign={"center"} variant={"h3"} component={"h3"}>
    71                          Login
    72                      </Typography>
    73                  </Box>
    74                  <Box pt={2} mx={"auto"}>
    75                      <form onSubmit={onSubmit} action="#">
    76                          <Box>
    77                              <PasswordInput TextFieldProps={{
    78                                  InputProps: {
    79                                      onChange: (e) => {
    80                                          setPassword(e.target.value)
    81                                      }
    82                                  }
    83                              }}/>
    84                          </Box>
    85                          <Box mt={3} display={"flex"}>
    86                              <LoadingButton
    87                                  variant="outlined"
    88                                  sx={{margin: "auto"}}
    89                                  color={"primary"}
    90                                  type={"submit"}
    91                                  loading={loading}
    92                              >
    93                                  <span>Confirm</span>
    94                              </LoadingButton>
    95                          </Box>
    96                      </form>
    97  
    98                  </Box>
    99              </Box>
   100          </>
   101      )
   102  }