jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui) - login, create password pages

Browse source
This commit is contained in:
Shekar Siri 2023-03-27 15:34:54 +02:00
parent 2ab2a70045
commit 21f8479880
2 changed files with 22 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
frontend/app/components/ForgotPassword/ForgotPassword.js
View file

@ -114,22 +114,18 @@ export default class ForgotPassword extends React.PureComponent {
<img src="/assets/logo.svg" width={200} /> <img src="/assets/logo.svg" width={200} />
</div> </div>
<div className="border rounded bg-white" style={{ width: '350px' }}> <div className="border rounded bg-white" style={{ width: '350px' }}>
<h2 className="text-center text-2xl font-medium mb-6 border-b p-5 w-full"> {!resetting && <h2 className="text-center text-2xl font-medium mb-6 border-b p-5 w-full">Reset Password</h2>}
{ resetting ? "Create Password" : "Reset Password" } {resetting && <h2 className="text-center text-lg font-medium mb-6 border-b p-5 w-full">
</h2> Welcome, join your organization by <br/> setting a new password
</h2>
}
<div className="px-8"> <div className="px-8">
{resetting && <div className="my-6">Provide your email address, so we can send you a link to reset your password.</div> }
<Form <Form
onSubmit={this.onSubmit} onSubmit={this.onSubmit}
style={{ minWidth: '50%' }} style={{ minWidth: '50%' }}
className="flex flex-col items-center justify-center" className="flex flex-col items-center justify-center"
> >
{/* <div className="mb-8">
<h2 className="text-center text-3xl mb-6">{`${
resetting ? 'Create' : 'Reset'
} Password`}</h2>
</div> */}
<Loader loading={loading}> <Loader loading={loading}>
<div data-hidden={updated} className="w-full"> <div data-hidden={updated} className="w-full">
{CAPTCHA_ENABLED && ( {CAPTCHA_ENABLED && (
@ -172,28 +168,31 @@ export default class ForgotPassword extends React.PureComponent {
{resetting && ( {resetting && (
<React.Fragment> <React.Fragment>
<Form.Field> <Form.Field>
<i className={stl.inputIconPassword} /> <label>{'Set a password'}</label>
{/* <i className={stl.inputIconPassword} /> */}
<Input <Input
autocomplete="new-password" autocomplete="new-password"
type="password" type="password"
placeholder="Password" placeholder="Type here..."
name="password" name="password"
onChange={this.write} onChange={this.write}
className="w-full" className="w-full"
icon="key"
/> />
</Form.Field> </Form.Field>
<div className={stl.passwordPolicy} data-hidden={!this.shouldShouwPolicy()}> <div className={stl.passwordPolicy} data-hidden={!this.shouldShouwPolicy()}>
{PASSWORD_POLICY} {PASSWORD_POLICY}
</div> </div>
<Form.Field> <Form.Field>
<i className={stl.inputIconPassword} /> <label>{'Cofirm password'}</label>
<Input <Input
autocomplete="new-password" autocomplete="new-password"
type="password" type="password"
placeholder="Confirm Password" placeholder="Re-enter your new password"
name="passwordRepeat" name="passwordRepeat"
onChange={this.write} onChange={this.write}
className="w-full" className="w-full"
icon="key"
/> />
</Form.Field> </Form.Field>
</React.Fragment> </React.Fragment>

22
frontend/app/components/Login/Login.js
View file

@ -98,7 +98,7 @@ class Login extends React.Component {
/> />
)} )}
<div style={{ width: '350px' }} className="px-8"> <div style={{ width: '350px' }} className="px-8">
<div className="mb-6"> <Form.Field>
<label>Email Address</label> <label>Email Address</label>
<Input <Input
data-test-id={"login"} data-test-id={"login"}
@ -111,8 +111,8 @@ class Login extends React.Component {
required required
icon="envelope" icon="envelope"
/> />
</div> </Form.Field>
<div className="mb-6"> <Form.Field>
<label className="mb-2">Password</label> <label className="mb-2">Password</label>
<Input <Input
data-test-id={"password"} data-test-id={"password"}
@ -122,9 +122,9 @@ class Login extends React.Component {
name="password" name="password"
onChange={this.write} onChange={this.write}
required required
icon="lock-alt" icon="key"
/> />
</div> </Form.Field>
</div> </div>
</Loader> </Loader>
{errors && errors.length ? ( {errors && errors.length ? (
@ -153,12 +153,10 @@ class Login extends React.Component {
</Form> </Form>
<div className={cn(stl.sso, 'py-2 flex flex-col items-center')}> <div className={cn(stl.sso, 'py-2 flex flex-col items-center')}>
<div className="mb-4">or</div>
{authDetails.sso ? ( {authDetails.sso ? (
<a href="/api/sso/saml2" rel="noopener noreferrer"> <a href="/api/sso/saml2" rel="noopener noreferrer">
<Button variant="outline" type="submit"> <Button variant="text-primary" type="submit">
{`Login with SSO ${ {`Login with enterprise account ${
authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : '' authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : ''
}`} }`}
</Button> </Button>
@ -170,12 +168,12 @@ class Login extends React.Component {
placement="top" placement="top"
> >
<Button <Button
variant="outline" variant="text-primary"
type="submit" type="submit"
className="pointer-events-none opacity-30" className="pointer-events-none opacity-30"
> >
{`Login with SSO ${ {`Login with enterprise account ${
authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : '' authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : '(SSO)'
}`} }`}
</Button> </Button>
</Tooltip> </Tooltip>