Initial implementation

package.json

@@ -48,6 +48,7 @@
     "cozy-scripts": "2.0.2",
     "cozy-ui": "28.3.0",
     "eslint-config-cozy-app": "1.3.3",
+    "lodash": "^4.17.15",
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-router-dom": "5.1.2"

src/components/SecurityPage.jsx

@@ -1,5 +1,44 @@
 import React from 'react'
+import { ButtonLink } from 'cozy-ui/transpiled/react/Button'
+import AppLinker, { generateWebLink } from 'cozy-ui/transpiled/react/AppLinker'
+import { translate } from 'cozy-ui/transpiled/react/I18n'
+import { withClient } from 'cozy-client'
+import flowRight from 'lodash/flowRight'
 
-const SecurityPage = () => <div>Security Page</div>
+const DumbLinkToSettings = withClient(props => {
+  // eslint-disable-next-line no-unused-vars
+  const { client, t, f, ...rest } = props
+  const cozyURL = new URL(client.getStackClient().uri)
+  const { cozySubdomainType } = client.getInstanceOptions()
+  const settingsAppSlug = 'settings'
+  const settingsAppHref = generateWebLink({
+    cozyUrl: cozyURL.origin,
+    slug: settingsAppSlug,
+    subDomainType: cozySubdomainType
+  })
+
+  return (
+    <AppLinker slug={settingsAppSlug} href={settingsAppHref}>
+      {({ onClick, href }) => (
+        <ButtonLink
+          href={href}
+          onClick={onClick}
+          label={t('SecurityPage.enhance-password')}
+          {...rest}
+        />
+      )}
+    </AppLinker>
+  )
+})
+
+const LinkToSettings = flowRight(withClient, translate())(DumbLinkToSettings)
+
+const SecurityPage = () => {
+  return (
+    <div>
+      <LinkToSettings />
+    </div>
+  )
+}
 
 export default SecurityPage

src/locales/en.json

@@ -7,5 +7,9 @@
 
   "PresentationPage": {
     "lets-go": "Let's go!"
+  },
+
+  "SecurityPage": {
+    "enhance-password": "Enhance my password"
   }
 }

src/targets/browser/index.ejs

@@ -33,6 +33,7 @@
   data-cozy-app-slug="{{.AppSlug}}"
   data-cozy-app-name-prefix="{{.AppNamePrefix}}"
   data-cozy-app-editor="{{.AppEditor}}"
+  data-cozy-subdomain-type="{{.SubDomain}}"
   data-cozy-icon-path="{{.IconPath}}"
 >
 <% _.forEach(htmlWebpackPlugin.files.js, function(file) { %>