UI test for change password

Help docs

Author: jc21

backend/embed/migrations/20201013035839_initial_data.sql

@@ -87,6 +87,14 @@ INSERT INTO `certificate_authority` (
 	0,
 	5,
 	1
+), (
+	strftime('%s', 'now'),
+	strftime('%s', 'now'),
+	"SSL.com",
+	"ssl.com",
+	0,
+	10,
+	1
 ), (
 	strftime('%s', 'now'),
 	strftime('%s', 'now'),
@@ -103,14 +111,6 @@ INSERT INTO `certificate_authority` (
 	0,
 	5,
 	1
-), (
-	strftime('%s', 'now'),
-	strftime('%s', 'now'),
-	"SSL.com",
-	"ssl.com",
-	0,
-	10,
-	1
 );
 
 -- System User

frontend/src/components/Navigation/NavigationHeader.tsx

@@ -70,6 +70,7 @@ function NavigationHeader({
 						<Box pl={2}>
 							<Menu>
 								<MenuButton
+									data-testid="profile-menu"
 									as={Button}
 									rounded="full"
 									variant="link"
@@ -84,6 +85,7 @@ function NavigationHeader({
 										{intl.formatMessage({ id: "profile.title" })}
 									</MenuItem>
 									<MenuItem
+										data-testid="profile-menu-change-password"
 										icon={<Icon as={FiLock} />}
 										onClick={passwordDisclosure.onOpen}>
 										{intl.formatMessage({ id: "change-password" })}

frontend/src/index.scss

@@ -72,5 +72,6 @@ pre {
 		margin: 0;
 		font-size: var(--chakra-fontSizes-lg);
 		font-weight: var(--chakra-fontWeights-semibold);
+		color: var(--chakra-colors-teal-500)
 	}
 }

frontend/src/locale/src/HelpDoc/en/Certificates.md

@@ -2,11 +2,25 @@
 
 ## HTTP Certificate
 
-todo
+A HTTP validated certificate means that the Certificate Authority (CA) will
+attempt to reach your domains over HTTP (not HTTPS!) and if successful, the CA
+will issue your certificate.
+
+For this method, you will have to have a _Host_ created for your domains(s) that
+is accessible with HTTP. After a certificate has been given, you can modify the
+_Host_ to also use this certificate for HTTPS connections. However, the _Host_
+will still need to be configured for HTTP access in order for the certificate to
+renew.
 
 ## DNS Certificate
 
-todo
+A DNS validated certificate requires you to create a DNS Provider. This DNS
+Provider will be used to create temporary records on your ___domain and then the CA
+will query those records to be sure you're the owner and if successful, the CA
+will issue your certificate.
+
+You do not need a _Host_ to be created prior to requesting this type of
+certificate. Nor do you need to have your _Host_ configured for HTTP access.
 
 ## Custom Certificate
 
@@ -15,3 +29,7 @@ todo
 ## MKCert Certificate
 
 todo
+
+## Choosing a Certificate Authority
+
+If you're not sure, use **ZeroSSL.**

frontend/src/locale/src/HelpDoc/en/DNSProviders.md

@@ -1,3 +1,14 @@
 # DNS Providers Help
 
-todo
+A DNS Provider is a service that hosts your ___domain(s) and this will be
+specifically used when requesting new _Certificates_ via DNS Validation.
+
+It is preferred to use DNS Validation, so check if your ___domain is hosted with
+one of the supported Acme.sh providers:
+
+- [DNS Page 1](https://github.com/acmesh-official/acme.sh/wiki/dnsapi)
+- [DNS Page 2](https://github.com/acmesh-official/acme.sh/wiki/dnsapi2)
+
+Should your DNS Provider be supported by Acme.sh and not available in this
+project, please
+[open an issue on Github](https://github.com/NginxProxyManager/nginx-proxy-manager/issues/new/choose).

frontend/src/modals/ChangePasswordModal.tsx

@@ -76,7 +76,7 @@ function ChangePasswordModal({ isOpen, onClose }: ChangePasswordModalProps) {
 						return errors;
 					}}>
 					{({ isSubmitting, values }: any) => (
-						<Form>
+						<Form data-testid="change-password">
 							<ModalHeader>
 								{intl.formatMessage({ id: "change-password" })}
 							</ModalHeader>
@@ -156,10 +156,16 @@ function ChangePasswordModal({ isOpen, onClose }: ChangePasswordModalProps) {
 								</Stack>
 							</ModalBody>
 							<ModalFooter>
-								<PrettyButton mr={3} isLoading={isSubmitting}>
+								<PrettyButton
+									mr={3}
+									isLoading={isSubmitting}
+									data-testid="save">
 									{intl.formatMessage({ id: "form.save" })}
 								</PrettyButton>
-								<Button onClick={onClose} isLoading={isSubmitting}>
+								<Button
+									onClick={onClose}
+									isLoading={isSubmitting}
+									data-testid="cancel">
 									{intl.formatMessage({ id: "form.cancel" })}
 								</Button>
 							</ModalFooter>

test/cypress/integration/ui/SetupLogin.spec.js

@@ -22,14 +22,20 @@ describe('UI Setup and Login', () => {
 		cy.clearLocalStorage();
 	});
 
-	it('Should be able to login', function() {
+	it('Should be able to login and change password', function() {
 		cy.visit('/');
 		cy.get('input[name="email"]').type('[email protected]');
 		cy.get('input[name="password"]').type('changeme');
 		cy.get('form button:last').click();
 
-		// To fix after chakra change:
-		// cy.get('.navbar-nav .avatar').should('be.visible');
+		// change password
+		cy.get('button[data-testid="profile-menu"]').should('be.visible').click();
+		cy.get('button[data-testid="profile-menu-change-password"]').should('be.visible').click();
+		cy.get('input[name="current"]').type('changeme');
+		cy.get('input[name="password"]').type('ihavebeenchanged');
+		cy.get('input[name="password2"]').type('ihavebeenchanged');
+		cy.get('form button[data-testid="save"]').click();
+		cy.get('form[data-testid="change-password"]').should('not.exist');
 
 		// logout:
 		cy.clearLocalStorage();