github.com/pelicanplatform/pelican@v1.0.5/web_ui/frontend/app/(login)/initialization/password/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 [confirmPassword, _setConfirmPassword] = useState <string>("")
    34      let [loading, setLoading] = useState(false);
    35  
    36      async function submit(password: string) {
    37  
    38          setLoading(true)
    39  
    40          let response = await fetch("/api/v1.0/auth/resetLogin", {
    41              method: "POST",
    42              headers: {
    43                  "Content-Type": "application/json"
    44              },
    45              body: JSON.stringify({
    46                  "password": password
    47              })
    48          })
    49  
    50          if(response.ok){
    51              router.push("/")
    52          } else {
    53              setLoading(false)
    54          }
    55      }
    56  
    57      function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    58          e.preventDefault()
    59  
    60          if(password == confirmPassword){
    61              submit(password)
    62          }
    63      }
    64  
    65      return (
    66          <>
    67              <Box m={"auto"} mt={12}  display={"flex"} flexDirection={"column"}>
    68                  <Box>
    69                      <Typography textAlign={"center"} variant={"h3"} component={"h3"}>
    70                          Set Password
    71                      </Typography>
    72                      <Typography textAlign={"center"} variant={"h6"} component={"p"}>
    73                          Set root metrics password
    74                      </Typography>
    75                  </Box>
    76                  <Box pt={2} mx={"auto"}>
    77                      <form onSubmit={onSubmit} action="#">
    78                          <Box>
    79                              <PasswordInput TextFieldProps={{
    80                                  InputProps: {
    81                                      onChange: (e) => {
    82                                          _setPassword(e.target.value)
    83                                      }
    84                                  }
    85                              }}/>
    86                          </Box>
    87                          <Box>
    88                              <PasswordInput TextFieldProps={{
    89                                  label: "Confirm Password",
    90                                  InputProps: {
    91                                      onChange: (e) => {
    92                                          _setConfirmPassword(e.target.value)
    93                                      }
    94                                  },
    95                                  error: password != confirmPassword,
    96                                  helperText: password != confirmPassword ? "Passwords do not match" : ""
    97                              }}/>
    98                          </Box>
    99                          <Box mt={3} display={"flex"}>
   100                              <LoadingButton
   101                                  variant="outlined"
   102                                  sx={{margin: "auto"}}
   103                                  color={"primary"}
   104                                  type={"submit"}
   105                                  loading={loading}
   106                              >
   107                                  <span>Confirm</span>
   108                              </LoadingButton>
   109                          </Box>
   110                      </form>
   111  
   112                  </Box>
   113              </Box>
   114          </>
   115      )
   116  }